Imagerie dynamique smart-imaging
Découvrez comment l’imagerie dynamique avec Adobe Sensei AI applique automatiquement les caractéristiques de visualisation uniques de chaque utilisateur pour diffuser les images appropriées optimisées pour leur expérience, ce qui se traduit par de meilleures performances et un meilleur engagement.
À propos de l’imagerie dynamique about-smart-imaging
La technologie d’imagerie dynamique applique les fonctionnalités d’Adobe Sensei AI 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) avec une 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
L’imagerie dynamique améliore la diffusion des images en optimisant automatiquement la taille du fichier en fonction du navigateur de l’utilisateur, de l’affichage de l’appareil et des conditions 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, tels que :
- Taux de conversion plus élevés.
- Durée de consultation d’un site.
- Taux de rebond du site plus bas.
Les principaux avantages de la dernière technologie d’imagerie dynamique sont les suivants :
- Prend en charge le format AVIF de nouvelle génération.
- 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
- Rapport pixel de l’appareil
- Bande passante réseau
A propos de la conversion au format du navigateur 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 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 ratio de pixels d’appareil (RPD), également appelé ratio de pixels CSS, représente la relation entre les pixels physiques et les pixels logiques d’un appareil. Avec l’augmentation des affichages en rétine, la résolution en pixels des appareils mobiles modernes a augmenté rapidement.
L’activation de l’optimisation du rapport de pixels de l’appareil rend l’image à la résolution native de l’écran, ce qui la rend 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é. - Avec 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 bandwidth
L’activation de la bande passante du réseau ajuste automatiquement la qualité de l’image diffusée en fonction de la bande passante réelle du réseau. 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 des images individuelles 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, les images d’origine et dérivées étaient mises en cache et un processus en 2 étapes était nécessaire pour invalider le cache. Dans la dernière version de l’imagerie dynamique, seuls les dérivés sont mis en cache, ce qui permet un processus d’invalidation du cache en une seule étape.
- Les clients 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 Ajoutez une valeur d’en-tête personnalisée aux réponses d’image|Dynamic Media Classic.
Fonctionnement de l’imagerie dynamique how-smart-imaging-works
Lorsqu’un consommateur demande une image, l’imagerie dynamique analyse les caractéristiques de l’utilisateur 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 votre navigateur prend en charge le format
-
Conversion automatique sur WebP si la conversion AVIF n’a pas été bénéfique ou si le navigateur ne prend pas en charge 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.
Prise en charge du format d’image dans l’imagerie dynamique image-format-support
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 vers 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.
Prise en charge des commandes du service d’images dans l’imagerie dynamique imaging-serving-command-support
Les commandes de diffusion d’images fmt
et qlt
ne sont pas prises en charge ; toutes les autres commandes sont prises en charge.
Questions fréquentes sur l’imagerie dynamique smart-imaging-faq
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 important |
---|
IMPORTANT |
L’imagerie dynamique n’est pas disponible pour les utilisateurs Dynamic Media – Hybrid. |
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.
Oui. L’imagerie dynamique offre trois options que vous pouvez activer ou désactiver.
L’imagerie dynamique s’intègre de manière transparente à vos paramètres d’image prédéfinis existants, en respectant tous vos paramètres d’image.
Les seuls réglages concernent le format de l’image, la qualité, ou les deux. Lors de la conversion de format, l’imagerie dynamique conserve la fidélité visuelle complète en fonction des paramètres prédéfinis, mais offre une taille de fichier plus réduite. Il vous suffit de l’activer en ajoutant bfc=on
, dpr=on,dprValue
ou network=on
, ou les 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 de JPEG de 500 × 500 pixels, avec quality=85
et unsharp mask=0.1,1,5
. L’imagerie dynamique détecte si l’utilisateur se trouve dans un navigateur Chrome. Il convertit ensuite l’image en WebP avec les mêmes dimensions (500 × 500) et un masque flou correspondant aux paramètres du JPEG. Le système compare ensuite la taille des fichiers des versions WebP et JPEG et diffuse la plus petite à l’utilisateur.
L’imagerie dynamique est prête à être utilisée immédiatement pour tous les clients. Pour commencer à profiter de ses avantages, ajoutez simplement bfc=on
, dpr=on,dprValue
ou network=on
, ou les trois paramètres à vos URL ou paramètres prédéfinis existants.
Pour activer l’imagerie dynamique, le compte Dynamic Media Classic ou Dynamic Media de votre entreprise sur Experience Manager doit inclure le réseau de diffusion de contenu (CDN) intégré à l’Adobe dans votre licence.
Pour commencer à utiliser l’imagerie dynamique, ajoutez bfc=on
, dpr=on,dprValue
ou network=on
, ou les 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 réseau
note note |
---|
NOTE |
Le RPD nécessite des ajustements côté client pour déterminer le dprValue correct. Par conséquent, Adobe recommande d’activer le RPD 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 de support :
-
Détails du contact du Principal :
- Indiquez vos nom, adresse électronique et numéro de téléphone.
-
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
- RGPD : le RGPD nécessite des ajustements côté client pour déterminer le
dprValue
correct. Par conséquent, Adobe recommande d’activer le RPD 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 identifier vos domaines, ouvrez l’application de bureau Dynamic Media Classic et connectez-vous au compte de votre société.
- 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 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 Publish > Serveur d’images.
- Définissez la valeur Délai d’activation par défaut du cache client sur 24 heures ou plus.
-
Pour Dynamic Media sur Adobe Experience Manager :
- Suivez ces instructions.
- Définissez la valeur Expiration pendant 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 et utilisatrices, le cache est entièrement reconstitué au niveau du réseau CDN sous un à deux jours.
Oui. Vous pouvez effectuer les opérations suivantes :
-
Une fois votre compte configuré avec l’imagerie dynamique, chargez une URL d’image Dynamic Media Classic ou Adobe Experience Manager - Dynamic Media dans 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).
- Sur macOS, dans le volet Développeur, sous l’onglet Réseau, sélectionnez désactiver le cache.
-
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. |
Oui. 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é.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.Étant donné que le format PNG est un format sans perte, les versions antérieures de WebP et d’AVIF diffusées étaient sans perte, la taille est donc plus élevée que prévu. 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.