Imagerie dynamique smart-imaging
L’imagerie dynamique applique les caractéristiques de visualisation uniques de chaque personne pour diffuser automatiquement des images optimisées selon leur expérience, offrant ainsi des performances accrues et un meilleur engagement.
À propos de l’imagerie dynamique what-is-smart-imaging
La technologie d’imagerie dynamique applique les fonctionnalités d’intelligence artificielle d’Adobe Sensei et fonctionne avec les « paramètres d’image prédéfinis » existants. Elle permet d’améliorer les performances de la diffusion d’images en optimisant automatiquement le format, la taille et la qualité des images en fonction des fonctionnalités du navigateur client.
De plus, obtenez désormais un meilleur score Google Core Web Vital pour LCP (Large Contentful Paint) grâce à l’amélioration de l’imagerie dynamique, qui s’accompagne désormais de la prise en charge d’AVIF et de WebP.
- Taille de fichier (avec diffusion WebP et AVIF)
- Bande passante réseau
- DPR (rapport de pixels de l’appareil)
L’imagerie dynamique tire parti de sa parfaite intégration dans le meilleur service premium CDN (réseau de diffusion de contenu) de sa catégorie proposé par Adobe afin d’offrir un gain de performance accru. Ce service trouve l’itinéraire Internet optimal entre les serveurs, les réseaux et les points de connexion. Au lieu d’utiliser l’itinéraire par défaut sur Internet, le service établit celui possédant la latence et le taux de perte de paquets les plus faibles.
Les exemples de ressources d’image suivants illustrent l’optimisation supplémentaire qu’apporte l’imagerie dynamique :
Comme ci-dessus, Adobe a également exécuté un test avec un ensemble d’échantillons plus grand. Le format AVIF a permis une réduction supplémentaire de 20 % de la taille par rapport au WebP, qui lui-même a permis une réduction de 27 % par rapport au JPEG. Tout cela avec la même qualité visuelle. Au total, l’AVIF offre une réduction de taille moyenne de 41 % par rapport au JPEG.
Comparez WebP et AVIF à PNG, vous pouvez constater une réduction de la taille de 84 % avec WebP et de 87 % avec AVIF. Et, puisque les formats WebP et AVIF prennent en charge la transparence et plusieurs animations d’images, ils remplacent efficacement les fichiers PNG et de GIF transparents.
Consultez également la section Optimisation des images avec des formats d’image de nouvelle génération (WebP et AVIF).
Avantages de l’imagerie dynamique what-are-the-key-benefits-of-smart-imaging
L’imagerie dynamique améliore la diffusion des images en optimisant automatiquement la taille du fichier en fonction du navigateur utilisé, de l’affichage de l’appareil et des conditions du réseau. Cette approche garantit des temps de chargement plus rapides et une meilleure expérience d’affichage dans différents environnements. Comme les images constituent la majeure partie du temps de chargement d’une page, toute amélioration des performances peut avoir un impact profond sur les indicateurs de performance clés de l’entreprise :
- Taux de conversion plus élevés.
- Temps passé sur le site.
- Taux de rebond inférieur pour le site.
Les principaux avantages de la dernière technologie d’imagerie dynamique sont les suivants :
- Le format AVIF de nouvelle génération est pris en charge.
- La conversion avec perte des PNG en WebP et AVIF est désormais possible. Le format PNG étant sans perte, les WebP et AVIF étaient auparavant livrés sans perte.
- Conversion au format du navigateur (
bfc
) - Rapport pixel de l’appareil (
dpr
) - Bande passante réseau (
network
)
À propos de la conversion au format du navigateur (bfc) bfc
L’activation de la conversion au format du navigateur en ajoutant bfc=on
dans l’URL de l’image convertit automatiquement les JPEG et PNG en AVIF avec perte, WebP avec perte, JPEGXR avec perte, JPEG2000 avec perte, en fonction des différents navigateurs. Pour les navigateurs qui ne prennent pas en charge ces formats, l’imagerie dynamique continue de délivrer le JPEG ou le fichier PNG. L’imagerie dynamique recalcule la qualité du nouveau format avec le changement de format.
Vous pouvez désactiver l’imagerie dynamique en ajoutant le modificateur bfc=off
à l’URL de l’image.
Consultez également la section bfc dans l’API de diffusion et de rendu d’images Dynamic Media.
À propos de l’optimisation du rapport pixel d’appareil dpr
Le rapport pixel d’appareil (DPR), également appelé rapport pixel CSS, est la relation entre les pixels physiques et les pixels logiques d’un appareil. Avec l’apparition des écrans Retina, la résolution en pixels des appareils mobiles modernes augmente rapidement.
L’activation de l’optimisation du rapport de pixels de l’appareil effectue le rendu de l’image à la résolution native de l’écran, ce qui la fait paraître nette.
Actuellement, la densité en pixels de l’affichage provient des valeurs d’en-tête du CDN Akamai.
dpr=off
dpr=on,dprValue
dprValue
est n’importe quel nombre supérieur à 0.- Vous pouvez utiliser
dpr=on,dprValue
même si le paramètre DPR au niveau de la société est désactivé. - En raison de l’optimisation du DPR, lorsque l’image créée est supérieure au paramètre MaxPix Dynamic Media, la largeur MaxPix est toujours reconnue en conservant les proportions de l’image.
Consultez également la section Lorsque vous utilisez des images et Lorsque vous utilisez le recadrage intelligent.
À propos de l’optimisation de la bande passante du réseau network
L’activation de la bande passante du réseau ajuste automatiquement la qualité de l’image diffusée en fonction de la bande passante du réseau réelle. Lorsque la bande passante réseau est insuffisante, l’optimisation du DPR est automatiquement désactivée, même si elle est déjà activée.
Votre entreprise peut désactiver l’optimisation de la bande passante du réseau pour chaque image individuellement en ajoutant network=off
à l’URL de l’image.
network=off
Les valeurs DPR et de bande passante réseau sont basées sur les valeurs côté client détectées du réseau de diffusion de contenu groupé. Ces valeurs sont parfois inexactes. Par exemple, l’iPhone5 avec un DPR=2 et l’iPhone12 avec un dpr=3
affichent tous deux un dpr=2
. Néanmoins, pour les appareils haute résolution, envoyer un dpr=2
est préférable à envoyer un dpr=1
. La meilleure façon de surmonter cette inexactitude consiste toutefois à utiliser le RPD côté client, pour obtenir des valeurs parfaitement précises. Cette méthode fonctionne pour n’importe quel appareil, qu’il s’agisse d’Apple ou de tout autre appareil existant. Consultez la section Utilisation de l’imagerie dynamique avec Rapport pixel d’appareil côté client.
Autres principaux avantages de l’imagerie dynamique
- Amélioration du classement d’optimisation du référencement Google pour les pages web qui utilisent la technologie d’imagerie dynamique la plus récente.
- Diffusion immédiate de contenus optimisés (au moment de l’exécution).
- Mise en œuvre de la technologie Adobe Sensei pour effectuer la conversion en fonction de la qualité (
qlt
) spécifiée dans la demande d’image. - Indépendance vis-à-vis du temps de vie (TTL). Auparavant, un TTL minimal de 12 heures était obligatoire pour le fonctionnement de l’imagerie dynamique.
- Auparavant également, les images d’origine et dérivées étaient mises en cache et un processus en deux étapes était nécessaire pour invalider le cache. Avec la technologie d’imagerie dynamique la plus récente, seules les images dérivées sont mises en cache, ce qui rend possible un processus d’invalidation du cache en une seule étape.
- Les clients et les clientes qui utilisent des en-têtes personnalisés dans leur jeu de règles bénéficient de la version de l’imagerie dynamique la plus récente, car ces en-têtes ne sont pas bloqués, contrairement à la version précédente. Par exemple, « Timing Allow Origin » et « X-Robot », comme suggéré dans Ajout d’une valeur d’en-tête personnalisée aux réponses d’image Dynamic Media Classic.
Questions fréquentes
Non. L’imagerie dynamique est incluse dans votre licence existante. Cette règle est vraie pour Dynamic Media Classic ou pour Experience Manager Dynamic Media (On-premise, AMS et Experience Manager as a Cloud Service).
note note |
---|
NOTE |
L’imagerie dynamique n’est pas disponible pour les utilisateurs Dynamic Media – Hybrid. |
Lorsqu’une image est demandée, l’imagerie dynamique analyse les caractéristiques d’utilisation et la convertit au format approprié en fonction du navigateur. Ces conversions de format s’effectuent de manière à garantir une représentation fidèle. L’imagerie dynamique convertit automatiquement les images dans différents formats en fonction des capacités du navigateur de la manière suivante.
-
Conversion automatique au format AVIF si le navigateur prend en charge le format
-
Conversion automatique au format WebP si la conversion AVIF n’est pas adéquate ou si le navigateur ne prend pas en charge le format AVIF
-
Conversion automatique vers le JPEG2000 si Safari ne prend pas en charge le WebP
-
Conversion automatique vers le JPEGXR pour IE 9+ ou si Edge ne prend pas en charge WebP
table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 Format d’image Navigateurs pris en charge AVIF https://caniuse.com/avif WebP https://caniuse.com/webp JPEG 2000 https://caniuse.com/jpeg2000 JPEGXR https://caniuse.com/jpegxr -
Pour les navigateurs qui ne prennent pas en charge ces formats, le format d’image demandé initialement est diffusé.
Si la taille de l’image d’origine est inférieure à celle produite par l’imagerie dynamique, l’image d’origine est diffusée.
Les formats suivants sont pris en charge dans le cadre de l’imagerie dynamique :
- JPEG
- PNG
L’imagerie dynamique recalcule la qualité des formats de fichiers image JPEG lors de la conversion en un nouveau format.
Pour les formats de fichiers image qui prennent en charge la transparence, tels que le PNG, vous pouvez configurer l’imagerie dynamique pour qu’elle diffuse des fichiers AVIF et WebP avec perte. Pour la conversion en formats avec perte, l’imagerie dynamique utilise la qualité mentionnée dans l’URL de l’image, ou la qualité configurée dans le compte d’entreprise Dynamic Media.
L’imagerie dynamique s’intègre facilement à vos paramètres d’image prédéfinis existants et conserve tous vos paramètres d’image.
Les seuls réglages concernent le format de l’image, la qualité, ou les deux. Pour la conversion de format, l’imagerie dynamique conserve une totale fidélité visuelle selon vos paramètres d’image prédéfinis, mais avec une plus petite taille de fichier. Il vous suffit de l’activer en ajoutant bfc=on
, dpr=on,dprValue
ou network=on
, ou bien ces trois paramètres à vos URL ou paramètres prédéfinis existants.
Par exemple, supposons qu’un paramètre d’image prédéfini spécifie un format JPEG de 500 × 500 pixels, avec quality=85
et unsharp mask=0.1,1,5
. L’imagerie dynamique détecte si la personne se trouve dans un navigateur Chrome. Elle convertit ensuite l’image en WebP avec les mêmes dimensions (500 × 500) et une accentuation correspondant aux paramètres du JPEG. Le système compare ensuite la taille des fichiers des versions WebP et JPEG et affiche la plus petite.
L’imagerie dynamique est disponible immédiatement pour l’ensemble de la clientèle. Pour commencer à profiter de ses avantages, ajoutez simplement bfc=on
, dpr=on,dprValue
ou network=on
, ou bien ces trois paramètres à vos URL ou paramètres prédéfinis existants.
Pour utiliser l’imagerie dynamique, le compte Dynamic Media Classic ou Dynamic Media sur Experience Manager de votre entreprise doit inclure le réseau de diffusion de contenu (CDN) d’Adobe dans votre licence.
Pour commencer à utiliser l’imagerie dynamique, ajoutez bfc=on
, dpr=on,dprValue
ou network=on
, ou bien ces trois paramètres à vos URL ou paramètres prédéfinis existants. Si vous préférez ne pas apporter ces modifications manuellement, vous pouvez activer l’imagerie dynamique par défaut en créant un cas de prise en charge.
Lors de la création du cas de prise en charge, spécifiez les fonctionnalités d’imagerie dynamique à activer sur votre compte :
- Conversion du format du navigateur (WebP ou AVIF)
- Optimisation de la bande passante du réseau
note note |
---|
NOTE |
Le DPR nécessite des ajustements côté client pour déterminer la dprValue correcte. Par conséquent, Adobe recommande d’activer le DPR par le biais des URL en ajoutant dpr=on,dprValue . |
Pour créer un dossier de support permettant d’activer l’imagerie dynamique sur votre compte :
-
Utilisez l’Admin Console pour commencer la création d’un nouveau dossier de support..
-
Indiquez les informations suivantes dans votre dossier d’assistance :
-
Détails du contact principal :
- Fournissez le nom, l’adresse électronique et le numéro de téléphone du contact principal.
-
Fonctionnalités d’imagerie dynamique à activer :
-
Liste des fonctionnalités que vous souhaitez pour votre compte :
- Conversion du format du navigateur : WebP ou AVIF
- Optimisation de la bande passante du réseau
- DPR : le DPR nécessite des ajustements côté client pour déterminer la
dprValue
correcte. Par conséquent, Adobe recommande d’activer le DPR par le biais des URL en ajoutantdpr=on,dprValue
.
-
-
Domaine pour l’imagerie dynamique :
-
Répertorier tous les domaines pertinents, tels que
company.com
oumycompany.scene7.com
-
L’imagerie dynamique prend en charge les domaines génériques et personnalisés.
-
Pour trouver vos domaines, ouvrez l’application de bureau Dynamic Media Classic, puis connectez-vous à votre compte.
- Accédez à Configuration > Configuration de l’application > Paramètres généraux.
- Recherchez le champ Nom du serveur publié pour confirmer votre domaine.
- Vérifiez que vous utilisez le réseau de diffusion de contenu d’Adobe plutôt qu’un réseau géré par un autre fournisseur.
-
-
Indique la prise en charge HTTP/2 :
- Indiquez si l’imagerie dynamique doit également fonctionner sur HTTP/2.
-
-
Le service clientèle d’Adobe active par défaut les fonctionnalités d’imagerie dynamique demandées, éliminant ainsi la nécessité d’ajouter des paramètres manuellement aux URL.
-
Adobe recommande de définir la durée de vie (TTL) sur au moins 24 heures afin d’optimiser les performances grâce à la mise en cache.
Pour ajuster la durée de vie (TTL) :-
Pour Dynamic Media Classic :
- Accédez à Configuration > Configuration de l’application > Configuration de la publication > Serveur d’images.
- Définissez la valeur Durée de vie par défaut du cache sur 24 heures ou plus.
-
Pour Dynamic Media sur Adobe Experience Manager :
- Suivez ces instructions.
- Définissez la valeur Expiration sur 24 heures ou plus.
-
Le service clientèle traite les demandes dans l’ordre dans lequel elles sont reçues, en suivant la liste d’attente.
note note |
---|
NOTE |
Le délai d’exécution peut être relativement long, car l’activation de l’imagerie dynamique implique qu’Adobe efface le cache. Seul un petit nombre de transitions peut donc être traité simultanément. |
La page web d’un client ne présente aucun risque. Cependant, la transition à l’imagerie dynamique efface votre cache CDN. Cette opération implique de passer à une nouvelle configuration de Dynamic Media Classic ou Dynamic Media sur Experience Manager.
Au cours de la transition initiale, les images non mises en cache accèdent directement aux serveurs d’origine d’Adobe jusqu’à ce que le cache soit reconstitué. C’est pour cette raison qu’Adobe prévoit de ne gérer que quelques transitions à la fois afin d’offrir des performances acceptables lors de l’extraction des demandes du site d’origine. Pour la plupart des utilisateurs, le cache est entièrement reconstitué au niveau du réseau CDN sous 1 à 2 jours.
-
Une fois que l’imagerie dynamique est activée sur votre compte, chargez une URL d’image Dynamic Media Classic ou Adobe Experience Manager sur le navigateur.
-
Ouvrez le volet de Chrome pour les développeurs en accédant à Afficher > Développeur > Outils de développement dans le navigateur. Vous pouvez également sélectionner l’outil de développement de navigateur de votre choix.
-
Assurez-vous que le cache est désactivé lorsque les outils de développement sont ouverts.
- Sous Windows®, accédez aux paramètres dans le volet de l’outil de développement, puis cochez la case Désactiver le cache (lorsque les outils de développement sont ouverts).
- Sous macOS, sélectionnez Désactiver le cache dans l’onglet Réseau du volet de développement.
-
Vérifiez que le type de contenu est converti au format approprié. L’écran ci-dessous illustre la conversion dynamique d’une image PNG au format WebP sur Chrome. Si l’AVIF est activé pour votre domaine, vous pouvez également vous attendre à voir AVIF dans le type de contenu.
-
Répétez ce test sur différents navigateurs et conditions d’utilisation.
note note |
---|
NOTE |
Toutes les images ne sont pas converties. L’imagerie dynamique détermine si la conversion peut améliorer les performances. Parfois, si aucune amélioration des performances n’est attendue, ou que le format n’est pas JPEG ou PNG, l’image n’est pas convertie. |
L’en-tête d’imagerie dynamique détermine les avantages de l’imagerie dynamique. Lorsque l’imagerie dynamique est activée, après avoir demandé une image, vous pouvez voir -X-Adobe-Smart-Imaging
sous le titre En-têtes de réponse, comme illustré dans l’exemple en surbrillance suivant :
Cet en-tête vous indique ce qui suit :
- L’imagerie dynamique fonctionne pour l’entreprise.
- Une valeur positive signifie que la conversion a réussi. Dans ce cas, une nouvelle image WebP est renvoyée.
- Une valeur négative signifie que la conversion a échoué. Dans ce cas, l’image demandée d’origine est renvoyée (en JPEG par défaut, si le format n’est pas spécifié).
- Une valeur positive indique la différence en octets entre l’image demandée et la nouvelle image. Dans l’exemple ci-dessus, les octets enregistrés sont
75048
, soit environ 75 Ko pour une image. - Une valeur négative signifie que l’image demandée est plus petite que la nouvelle image. La différence de taille négative s’affiche, mais l’image diffusée reste l’image d’origine demandée.
note note |
---|
NOTE |
X-Adobe-Smart-Imaging = -1 avec diffusion en WebP |
Si la valeur de X-Adobe-Smart-Imaging est -1 et que WebP est toujours en cours de diffusion, l’imagerie dynamique est active. Toutefois, les avantages de taille n’étaient pas calculés en raison d’un cache obsolète. Vous pouvez utiliser cache=update (une seule fois) dans l’URL de l’image pour résoudre ce problème.Exemple d’utilisation du modificateur : https://smartimaging.scene7.com/is/image/SmartImaging/sample1?cache=update Pour invalider l’intégralité du cache, vous devez créer un dossier de support. |
bfc=off
à l’URL de l’image. Cependant, vous ne pouvez pas sélectionner le format WebP ou AVIF dans le modificateur d’URL pour l’imagerie dynamique. Cette fonctionnalité est maintenue au niveau du compte de votre société.Oui. Vous pouvez désactiver l’imagerie dynamique en ajoutant l’un des modificateurs suivants :
bfc=off
pour désactiver la conversion au format du navigateur. Consultez également la section Conversion au format du navigateur.dpr=off
pour désactiver le rapport pixel de l’appareil. Consultez également la section Rapport pixel de l’appareil.network=off
pour désactiver la bande passante réseau. Consultez également la section Bande passante réseau.
L’imagerie dynamique offre trois options que vous pouvez activer ou désactiver.
Cette erreur ne se produit pas si l’imagerie dynamique n’est pas activée sur votre compte. L’imagerie dynamique fonctionne uniquement avec les formats JPEG ou PNG.
Pour éviter cette erreur, vous pouvez effectuer l’une des opérations suivantes :
- Spécifiez JPEG ou PNG.
- N’utilisez pas le modificateur
fmt
. - Utilisez un format de navigateur préféré tel que défini par l’imagerie dynamique. Par exemple, vous pouvez utiliser WebP pour le navigateur web Chrome.
fmt=tif
et bfc=off
au chemin d’URL de l’image.fmt
et qlt
. Toutes les commandes restantes sont prises en charge.Le format PNG étant un format sans perte, les fichiers WebP et AVIF diffusés antérieurement l’étaient sans perte, ce qui entraînait des fichiers d’une taille plus grande que prévue. L’imagerie dynamique prend désormais en charge la conversion avec perte. Vous pouvez utiliser le modificateur cache=update
(une seule fois) dans une demande d’image pour résoudre ce problème. Exemple d’utilisation de ce modificateur :
https://smartimaging.scene7.com/is/image/SmartImaging/sample1?cache=update
Pour invalider l’intégralité du cache, vous devez créer un dossier de support à cet effet.
qlt=100
au chemin d’accès de l’URL de l’image.