[AEM_Assets]{class="badge positive" title="S’applique à AEM Assets)."}

Imagerie dynamique smart-imaging

Imagerie dynamique avec Adobe AI est une fonctionnalité d’optimisation d’image automatisée qui adapte les images diffusées aux conditions d’affichage de chaque utilisateur. Plutôt que de diffuser une seule ressource fixe à chaque visiteur, l’imagerie dynamique évalue les caractéristiques de visualisation uniques de chaque utilisateur et sélectionne automatiquement la variante d’image la mieux adaptée à l’expérience de cette personne.

L’imagerie dynamique applique les caractéristiques de visualisation uniques de chaque utilisateur pour diffuser automatiquement la bonne image. Étant donné que les conditions d’affichage varient d’un visiteur à l’autre (y compris le type d’appareil, la résolution d’écran et les conditions réseau), une image unique ne peut pas être idéale pour tout le monde. L’imagerie dynamique résout ce problème en évaluant ces caractéristiques en temps réel et en faisant correspondre chaque requête à l’image optimisée la plus appropriée. Cela permet de s’assurer que chaque utilisateur reçoit une ressource calibrée selon son contexte spécifique, sans nécessiter de configuration manuelle pour chaque scénario.

L’optimisation automatique par utilisateur fournie par l’imagerie dynamique améliore directement deux résultats :

Grâce à la correspondance de chaque image avec la visionneuse individuelle, l’imagerie dynamique améliore automatiquement les performances de diffusion et l’interaction client. Comme l’optimisation est gérée par ​​plutôt que manuellement, les équipes bénéficient d’une diffusion d’images personnalisée à grande échelle sans conserver de ressources distinctes pour chaque scénario d’affichage possible.

À propos de l’imagerie dynamique about-smart-imaging

La technologie d’imagerie dynamique applique les fonctionnalités d’Adobe AI et fonctionne avec les « paramètres d’image prédéfinis » existants. Il améliore 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.

L’imagerie dynamique améliorée prend désormais en charge les formats AVIF et WebP, ce qui améliore votre score Google Core Web Vital pour Largest Contentful Paint (LCP).

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 performances accru. Ce service trouve l’itinéraire Internet optimal entre les serveurs, les réseaux et les points de connexion. Il sélectionne une route avec la latence et le taux de perte de paquets les plus faibles au lieu d’utiliser la route par défaut sur Internet.

Les exemples de ressources d’image suivants illustrent l’optimisation supplémentaire qu’apporte l’imagerie dynamique :

Image(URL)

Miniature

Taille (JPEG)

Taille (WebP) avec l’imagerie dynamique

Taille (AVIF) avec l’imagerie dynamique

% de réduction avec WebP

% de réduction avec AVIF

Image 1

145 Ko

106 Ko

90,2 Ko

26,89 %

37,79 %

Image 2

412 Ko

346 Ko

113 Ko

16,01 %

72,57 %

Image 3

221 Ko

189 Ko

87,1 Ko

14,47 %

60,58 %

Image 4

594 Ko

545 Ko

286 Ko

8,25 %

51,85 %

Comme ci-dessus, Adobe a également exécuté un test avec un ensemble d’échantillons plus grand. AVIF offre une réduction de taille moyenne de 41 % par rapport à JPEG. Dans le test le plus important, l’AVIF a permis une réduction de taille supplémentaire de 20 % par rapport à WebP et le WebP a permis une réduction de 27 % par rapport à JPEG, le tout avec la même qualité visuelle.

Comparez les formats WebP et AVIF au PNG, et vous pouvez constater une réduction de la taille de 84 % avec le WebP et de 87 % avec l’AVIF. Comme les formats WebP et AVIF prennent en charge la transparence et plusieurs animations d’images, ils remplacent efficacement les fichiers PNG et 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 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 de visionnage dans différents environnements. Les images sont les éléments qui demandent le plus de temps lors du chargement d’une page. Aussi, une diffusion plus rapide des images améliore-t-elle directement les indicateurs clés de performances commerciales (KPI). Il en résulte des gains mesurables tels que :

Les principaux avantages de la dernière version de l’imagerie dynamique sont les suivants :

À propos de la conversion au format du navigateur bfc

Conversion au format du navigateur fournit automatiquement des formats d’image modernes avec perte à chaque navigateur afin de réduire la taille du fichier tout en préservant la qualité visuelle. Activez-la en ajoutant bfc=on à l’URL de l’image. Lorsqu’elle est activée, l’imagerie dynamique convertit les images sources ​​et PNG au format de prochaine génération avec perte optimal pris en charge par le navigateur demandeur.

Fonctionnement de la conversion au format du navigateur

Une fois la bfc=on appliquée, l’imagerie dynamique convertit les images JPEG et PNG en l’un des formats avec perte suivants, sélectionnés en fonction de ce que le navigateur prend en charge :

Comme tous les navigateurs ne prennent pas en charge ces formats plus récents, l’imagerie dynamique applique une solution de secours intégrée : lorsqu’un navigateur ne prend pas en charge les formats cibles, l’imagerie dynamique continue à diffuser le JPEG ou le PNG d’origine. Cette solution de secours garantit que l’image s’affiche correctement dans chaque navigateur, de sorte que l’activation de la fonctionnalité ne rompt jamais la compatibilité. Lors de chaque modification de format, l’imagerie dynamique recalcule également la qualité du nouveau format pour qu’il corresponde à la conversion.

Activation et désactivation de la conversion au format du navigateur

Pour désactiver la conversion au format du navigateur, ajoutez bfc=off à l’URL de l’image, et l’imagerie dynamique diffuse le JPEG ou le fichier PNG d’origine sans conversion de format.

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

Rapport pixel d’appareil (DPR), également appelé rapport pixel CSS, est le rapport entre les pixels physiques d’un appareil et ses pixels logiques (CSS). Comme cela est largement reconnu, les appareils mobiles modernes et les écrans « rétina » haute densité rassemblent beaucoup plus de pixels physiques dans la même zone physique, de sorte que la résolution en pixels des écrans contemporains a rapidement augmenté. Un DPR plus élevé signifie donc qu’un seul pixel logique est représenté par plusieurs pixels physiques, c’est pourquoi les images créées à une taille standard peuvent apparaître floues ou souples sur les écrans haute densité, sauf si elles sont rendues à la résolution réelle de l’écran.

L’activation de l’optimisation du rapport pixel d’appareil rend chaque image à la résolution native de l’écran, offrant des visuels nets et nets. Étant donné que l’image est mise à l’échelle pour correspondre à la densité réelle de pixels de l’affichage, le détail est préservé et la pixellisation est évitée sur les appareils à DPR élevé.

Actuellement, la densité en pixels de l’affichage est déterminée à partir des valeurs d’en-tête Akamai CDN. Cela signifie que la couche de diffusion lit le DPR signalé de l’appareil à partir des en-têtes de requête et diffuse une image dimensionnée de manière appropriée en fonction de cette densité, sans nécessiter de configuration manuelle pour chaque appareil.

Comme le montre le tableau, une valeur DPR de 2 double à la fois la largeur et la hauteur de l’image diffusée (de 816 x 500 à 1632 x 1000), produisant ainsi deux fois la densité linéaire en pixels afin que l’image reste nette sur les écrans haute densité.

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’optimisation de la bande passante réseau ajuste automatiquement la qualité de l’image diffusée en fonction de la bande passante réseau réelle et en temps réel. L’activation de cette fonctionnalité garantit que les images sont diffusées à un niveau de qualité approprié à chaque connexion. Lorsque la bande passante réseau est faible, l’optimisation du rapport pixel d’appareil) est automatiquement désactivée même si elle était précédemment activée, car la diffusion de ressources haute résolution sur une connexion limitée ralentirait la diffusion des pages.

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.

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 (CDN) groupé. Ces valeurs sont parfois inexactes. Par exemple, iPhone5 avec un DPR=2 et iPhone12 avec des dpr=2 de rapports dpr=3. En pratique, les valeurs détectées peuvent sous-estimer la densité réelle en pixels des nouveaux affichages à haut DPR, c’est pourquoi la valeur signalée peut être inférieure à la capacité réelle d’un appareil. Néanmoins, pour les appareils haute résolution, la diffusion d’dpr=2 offre des images nettement plus nettes que la diffusion d’dpr=1. La meilleure façon de surmonter cette inexactitude consiste toutefois à utiliser le DPR côté client, qui vous donne des valeurs parfaitement précises. Le DPR côté client fonctionne de manière fiable sur chaque appareil, qu’il s’agisse d’Apple ou de tout autre fabricant, et renvoie des valeurs précises à 100 %. Consultez la section Utilisation de l’imagerie dynamique avec Rapport pixel d’appareil côté client.

Autres principaux avantages de l’imagerie dynamique

Fonctionnement de l’imagerie dynamique how-smart-imaging-works

Lorsqu’un client demande une image, l’imagerie dynamique analyse les caractéristiques de l’utilisateur et convertit l’image au format optimal en fonction du navigateur demandeur. Ces conversions préservent la fidélité visuelle tout en réduisant la taille du fichier, assurant des temps de chargement plus rapides sans perte visible de la qualité. L’imagerie dynamique convertit automatiquement les images en différents formats en fonction des fonctionnalités du navigateur à l’aide de la cascade ci-dessous.

Cascade de conversion de format

Comportement de secours

La diffusion du fichier le plus petit étant toujours plus efficace, si la taille de l’image d’origine est inférieure à celle produite par l’imagerie dynamique, l’image d’origine est diffusée à la place. Par conséquent, l’imagerie dynamique ne fournit jamais un fichier plus volumineux que la source, ce qui garantit le transfert le plus efficace possible pour chaque requête.

Prise en charge du format d’image dans l’imagerie dynamique image-format-support

L’imagerie dynamique prend en charge ​​et PNG en tant que formats d’image source pour une diffusion optimisée.

Formats d’entrée pris en charge

Conversion du format de sortie et gestion de la qualité

L’imagerie dynamique recalcule la qualité des formats de fichiers image JPEG lors de leur conversion dans un nouveau format. Ce recalcul garantit que la sortie convertie est optimisée pour la diffusion plutôt que de simplement transférer le codage d’origine, ce qui permet d’équilibrer la fidélité visuelle avec une taille de fichier réduite.

Pour les formats de fichiers image qui prennent en charge la transparence, tels que PNG, vous pouvez configurer l’imagerie dynamique afin de diffuser des formats AVIF avec perte (format de fichier image AV1) et WebP avec perte. AVIF et WebP sont des formats modernes de nouvelle génération conçus pour obtenir des tailles de fichiers plus petites que les formats hérités tout en préservant la transparence, ce qui les rend parfaitement adaptés aux images sources transparentes.

Pour la conversion de format avec perte, l’imagerie dynamique détermine la qualité de sortie à l’aide de l’ordre de priorité suivant :

Par conséquent, le paramètre de qualité dans l’URL de l’image est toujours prioritaire, tandis que le paramètre de compte d’entreprise Dynamic Media établit la valeur par défaut appliquée chaque fois qu’une valeur de qualité au niveau de l’URL est absente.

Prise en charge des commandes du service d’images dans l’imagerie dynamique imaging-serving-command-support

L’imagerie dynamique prend en charge toutes les commandes de traitement d’images sauf deux : les commandes fmt et qlt ne sont pas prises en charge. Une commande sur deux de la Diffusion d’images fonctionne normalement dans l’imagerie dynamique.

Commandes de diffusion d’images non prises en charge

Les deux commandes de traitement d’images suivantes ne sont pas prises en charge dans l’imagerie dynamique :

Commandes de diffusion d’images prises en charge

Toutes les commandes de traitement d’images restantes sont prises en charge dans l’imagerie dynamique. Cela signifie que l’ensemble standard des opérations de transformation et de diffusion d’images, telles que le dimensionnement, le recadrage et d’autres manipulations disponibles par le biais de la diffusion d’images, continue à fonctionner comme prévu. Seules les commandes format (fmt) et qualité (qlt) sont exclues de la prise en charge.

Questions fréquentes sur l’imagerie dynamique smart-imaging-faq