Documentation AEM Guide de l’utilisateur

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

Bonnes pratiques relatives à l’optimisation de la qualité des images best-practices-for-optimizing-the-quality-of-your-images

Dernière mise à jour : 29 septembre 2026

S'applique à :
Experience Manager as a Cloud Service

Créé pour :

Utilisateur/utilisatrice

TIP

Vous découvrez Dynamic Media ? Pour une vue d’ensemble rapide et de haut niveau de Dynamic Media, consultez la section Utiliser Dynamic Media.

Adobe Experience Manager fournit plus de 100 commandes de diffusion d’images Dynamic Media pour l’optimisation et le rendu des images. Cet ensemble de commandes complet permet de contrôler presque tous les aspects du traitement et de la diffusion d’une image, de la résolution à la compression, en passant par l’accentuation et le rendu des couleurs.

L’optimisation de la qualité d’image est un processus itératif qui prend parfois du temps, car plusieurs facteurs distincts contribuent à des résultats acceptables, notamment la résolution, le niveau de compression, le format de fichier, l’accentuation et la précision des couleurs. Le résultat est également en partie subjectif, car les individus perçoivent la qualité de l’image différemment et les conditions de visionnage varient d’un affichage, d’un navigateur ou d’un appareil à l’autre. En raison de cette variabilité, l’expérimentation structurée est essentielle : l’ajustement méthodique d’une variable à la fois et la comparaison du rendu de sortie sont les chemins les plus fiables vers une qualité cohérente.

Les bonnes pratiques suivantes rationalisent le processus et fournissent des résultats de haute qualité de manière efficace à l’aide d’un ensemble de commandes principales et de techniques éprouvées. Leur application va bien au-delà de l’esthétique : des images correctement optimisées réduisent la taille du fichier et le temps de chargement, ce qui améliore les performances des pages, l’expérience utilisateur et la diffusion sur l’ensemble des appareils et des conditions réseau.

Facteurs Clés Affectant La Qualité D’Image

Résolution et dimensions — Associez les dimensions en pixels livrés à la taille réelle de l’affichage pour éviter les artefacts de mise à l’échelle ou de réduction inutiles.
Compression — Équilibrez la taille du fichier par rapport à la perte de qualité visible, car la compression agressive réduit la bande passante mais peut introduire des artefacts.
Format de fichier — Sélectionnez le format le mieux adapté au contenu de l’image et à l’appareil cible pour équilibrer la qualité et l’efficacité de la diffusion.
Accentuation — Appliquez l’accentuation pour contrer l’adoucissement qui se produit lors du redimensionnement, ce qui restaure les détails perçus.
Rendu des couleurs — Conservez la précision des couleurs afin que les images apparaissent cohérentes sur différents affichages et environnements d’affichage.

Approche recommandée

Établir une ligne de base. Effectuez le rendu d’une image avec les paramètres par défaut afin de disposer d’un point de référence pour la comparaison.
Ajuster une variable à la fois. Modifiez une seule commande ou un seul paramètre, puis évaluez le résultat, car l’isolation des variables permet de déterminer clairement quel réglage a produit quel effet.
Comparez visuellement le rendu. Comme la qualité d’image est en partie subjective, examinez les résultats côte à côte sur des appareils et des affichages représentatifs.
Équilibrez qualité et performances. Vérifiez que les améliorations de qualité n’augmentent pas la taille du fichier au point que le temps de chargement de la page et la diffusion en pâtissent.
Normaliser les paramètres réussis. Une fois que vous avez identifié les combinaisons de commandes qui produisent des résultats cohérents, réutilisez-les pour rationaliser l’optimisation future.

En combinant ces commandes essentielles à une expérimentation structurée, vous obtenez une diffusion d’images performante et de haute qualité rapidement et de manière répétée sur vos ressources Dynamic Media.

Activation de l’imagerie dynamique dans Dynamic Media bp-enable-smart-imaging

Imagerie dynamique :

L’activation de l’imagerie dynamique dans Dynamic Media permet l’optimisation automatique des images format, taille et qualité en fonction des fonctionnalités du navigateur client. L’imagerie dynamique effectue cette négociation de format sur chaque requête, fournissant l’image la plus efficace prise en charge par un navigateur donné afin que les pages se chargent plus rapidement et consomment moins de bande passante.
Pour plus d’informations, consultez Imagerie dynamique.
Elle améliore les performances de diffusion des images en ajustant dynamiquement ces paramètres, car la diffusion du plus petit fichier approprié pour chaque navigateur réduit la payload transférée et améliore les temps de chargement des pages.
Les administrateurs et les développeurs peuvent évaluer l’imagerie dynamique à l’aide de l’outil d’auto-évaluation Instantané.

Formats d’image :

Évitez d’utiliser des commandes fmt=webp explicites (WebP) ou fmt=avif (AVIF) dans une URL, sauf si cela est spécifiquement requis pour un cas d’utilisation. Le codage en dur d’un format dans l’URL remplace la négociation automatique et peut empêcher l’imagerie dynamique de fournir le format optimal pour les navigateurs qui prennent en charge une alternative plus efficace.
L’imagerie dynamique sélectionne automatiquement le meilleur format pour chaque requête. Cela réduit les octets transférés et produit des gains de bande passante optimaux.

Comportement par défaut :

Lorsqu’aucune commande de format n’est spécifiée dans l’URL et que l’imagerie dynamique n’est pas activée, la diffusion d’images Dynamic Media utilise par défaut le format . Par conséquent, les formats de nouvelle génération tels que WebP et AVIF ne sont pas diffusés automatiquement tant que l’imagerie dynamique n’est pas activée.

En choisissant en connaissance de cause les formats d’image et en activant l’imagerie dynamique, vous améliorez directement les performances de diffusion et l’expérience utilisateur.

Bonnes pratiques pour sélectionner l’image source bp-select-source-image

Points essentiels à prendre en compte pour l’utilisation des images sources :

Format d’image Source :
- L’utilisation de formats sans perte PNG (Portable Network Graphics), TIFF (Tagged Image File Format) ou PSD (Photoshop Document) permet de maintenir la qualité de l’image à un niveau élevé et d’éliminer les artefacts de compression, les distorsions visibles introduites par les formats avec perte tels que JPEG.
- Ces formats conservent toutes les données de pixels d’origine. Ils sont ainsi parfaits pour la modification, la retouche et le réenregistrement répété, car aucune qualité n’est perdue chaque fois que le fichier est traité.
Taille de l’image Source :
- Commencer avec une image haute résolution apporte plus de détails et de flexibilité, car la mise à l’échelle d’une petite image ne permet pas de récupérer des détails qui n’ont jamais été capturés.
- Lorsque des images doivent être affichées dans différentes tailles (par exemple, sur plusieurs appareils ou résolutions d’écran), une image source plus grande permet une meilleure mise à l’échelle et des résultats plus nets à chaque dimension cible.
- Pour les images qui prennent en charge le zoom, telles que les photos de produit où les clients inspectent les détails fins, visez des dimensions d’environ 2 000 pixels ou plus sur le côté le plus long.
- Les logos ou bannières qui ne nécessitent pas de zoom peuvent être chargés dans la plus grande taille nécessaire à leur utilisation prévue.

Ces choix au niveau de la source déterminent directement la qualité du contenu visuel final, car chaque étape de redimensionnement, de recadrage et de compression en aval hérite des points forts ou des points faibles du fichier d’origine.

Bonnes pratiques relatives à la taille des images best-practices-for-image-size

La réduction dynamique de la taille des images est l’une des tâches les plus courantes de la diffusion d’images. Il s’agit de spécifier les dimensions cibles et, éventuellement, de sélectionner le mode de sous-échantillonnage utilisé pour réduire la taille de l’image. Le modèle d’URL recommandé est &wid=<value>&hei=<value>&resMode=sharp2 (ou &hei=<value>&resMode=sharp2 lorsque seule la hauteur est définie), ce qui offre la qualité visuelle la plus élevée pour les images redimensionnées.

Paramètres de dimensionnement

Pour le dimensionnement des images, utilisez &wid=<value> et &hei=<value> :

&wid=<value> définit la largeur de l’image.
&hei=<value> définit la hauteur de l’image.
Lorsqu’une seule dimension est spécifiée, ces paramètres calculent automatiquement l’autre dimension en fonction des proportions de l’image, tout en préservant les proportions d’origine et en empêchant la distorsion.

Mode sous-échantillonnage (resMode)

&resMode=<value> contrôle l’algorithme utilisé pour le sous-échantillonnage, processus qui consiste à réduire les dimensions en pixels d’une image. Le choix de l’algorithme affecte directement la netteté et la qualité de l’image mise à l’échelle finale.

Commencer par &resMode=sharp2. Cette valeur offre une qualité d’image optimale, car elle préserve les détails des contours et la texture fine lors de la réduction de l’échelle des images, produisant des résultats nets et sans artefact.
&resMode=bilin (bilinéaire) est plus rapide, mais parce qu’il calcule la moyenne des pixels plus simplement, il produit fréquemment des artefacts de crénelage (bords dentelés visibles, motifs moirés et perte de détails fins). Par conséquent, bilin échange la qualité d’image contre la vitesse de traitement.

Contrairement bilin, le mode sharp2 donne la priorité à la fidélité visuelle, ce qui en fait le choix privilégié pour fournir des images redimensionnées de haute qualité.

Bonnes pratiques recommandées

Il est recommandé d’utiliser &wid=<value>&hei=<value>&resMode=sharp2 ou &hei=<value>&resMode=sharp2 pour le dimensionnement des images. Cette combinaison définit les dimensions cibles, conserve les proportions correctes et applique l’algorithme de sous-échantillonnage de la plus haute qualité.

Bonnes pratiques relatives à l’accentuation des images best-practices-for-image-sharpening

L’accentuation des images est l’aspect le plus complexe du contrôle des images du site web, processus au cours duquel de nombreuses erreurs sont commises. Pour en savoir plus sur le fonctionnement de l’accentuation et du masquage flou dans Experience Manager, consultez les ressources suivantes :

L’article technique Bonnes pratiques concernant la qualité d’image et l’accentuation de la netteté avec Adobe Dynamic Media Classic s’applique également à Experience Manager.
Regarder la vidéo Utilisation de l’accentuation d’image avec Experience Manager – Dynamic Media.

Dans Experience Manager, vous pouvez accentuer les images lors de l’ingestion, de la diffusion ou des deux. Il est recommandé d’accentuer les images en utilisant une seule méthode, et non les deux. L’accentuation des images dans une diffusion via une URL offre les meilleurs résultats dans la plupart des workflows, car elle vous permet d’ajuster l’accentuation à la taille finale du rendu plutôt que de l’intégrer à la ressource ingérée.

Vous pouvez utiliser deux méthodes d’accentuation d’image :

Accentuation simple (&op_sharpen) - Comme le filtre d’accentuation Adobe Photoshop, il applique un accentuation de base après le redimensionnement dynamique. Cette méthode n’est pas configurable par l’utilisateur ou l’utilisatrice. Évitez d’utiliser &op_sharpen, sauf indication contraire.
Masquage flou (&op_USM) - Le masquage flou est un filtre d’accentuation standard qui augmente le contraste des bords pour rendre une image plus nette. La bonne pratique consiste à accentuer les images à l’aide de l’accentuation en suivant les instructions ci-dessous. L’accentuation permet de contrôler les trois paramètres suivants :
- &op_sharpen=quantité,rayon,seuil
  - quantité (0-5, intensité de l’effet.)
  - radius (0-250, largeur des « lignes d’accentuation » tracées autour de l’objet accentué, mesurée en pixels.)
  Les paramètres radius et amount ont des effets opposés : la réduction du rayon affaiblissant l’effet, vous pouvez compenser en augmentant la quantité. Le rayon permet un contrôle plus fin, car une valeur faible accentue uniquement les pixels de contour, tandis qu’une valeur élevée accentue une bande plus large de pixels, produisant un halo plus prononcé.
  - seuil (0-255, sensibilité de l’effet.)
  Ce paramètre définit l’écart recherché entre les pixels accentués et la zone environnante avant qu’ils ne soient considérés comme des pixels de contour et que le filtre les accentue. Le paramètre seuil permet d’éviter les zones à l’accentuation excessive avec des couleurs similaires, telles que les tons chair. Par exemple, une valeur seuil de 12 ignore les légères variations de luminosité de la peau pour éviter d’ajouter du « bruit », tout en ajoutant un contraste sur les bords dans les zones à fort contraste, comme l’endroit où les cils rencontrent la peau.
  
  Pour plus d’informations sur la façon de définir ces trois paramètres, y compris les bonnes pratiques à appliquer avec le filtre, reportez-vous aux ressources suivantes :
  - L’article technique Bonnes pratiques concernant la qualité d’image et l’accentuation de la netteté avec Adobe Dynamic Media Classic s’applique également à Experience Manager.
  - Regarder la vidéo Utilisation de l’accentuation d’image avec Experience Manager – Dynamic Media.
  - Experience Manager permet également de contrôler un quatrième paramètre : monochrome (0,1). Ce paramètre détermine si le masquage flou est appliqué séparément à chaque composante de couleur en utilisant la valeur 0 ou à la luminosité/l’intensité de l’image en utilisant la valeur 1.

Il est recommandé de commencer par le paramètre rayon d’accentuation. Les paramètres rayon avec lesquels vous pouvez commencer sont les suivants :

Site Web : 0,2 à 0,3 pixel
Impression photographique (250 à 300 ppp) : 0,3 à 0,5 pixel
Impression offset (266 à 300 ppp) : 0,7 à 1,0 pixel
Impression sur toile (150 ppp) : 1,5 à 2,0 pixels

Pour affiner l’accentuation, procédez comme suit :

Augmentez progressivement le montant de 1,75 à 4.
Si l’accentuation n’est toujours pas satisfaisante, augmentez le rayon d’une décimale.
Réexécutez le montant de 1,75 à 4.
Répétez l’opération autant de fois que nécessaire jusqu’à obtention d’un résultat satisfaisant.

Laissez le paramètre monochrome défini sur 0.

Recommandations relatives à la compression JPEG (`&qlt=`) best-practices-for-jpef-compression-qlt

Le paramètre de bonne pratique recommandé pour la compression JPG est &qlt=85,0. Cette valeur permet d’obtenir un équilibre entre une qualité visuelle élevée et une taille de fichier contrôlée pour la majorité des images.
Ce paramètre contrôle la qualité du codage des JPG. Une valeur plus élevée signifie une image de meilleure qualité mais une taille de fichier plus grande ; une valeur plus faible signifie une image de moindre qualité mais une taille de fichier plus petite. La plage valide est comprise entre 0 et 100.
Pour optimiser la qualité, ne définissez pas la valeur du paramètre sur 100. La différence entre un réglage de 90 ou 95 et 100 est presque imperceptible à l’œil humain. De ce fait, un paramètre de 100 gonfle inutilement la taille du fichier image sans gain visuel perceptible. Par conséquent, pour optimiser la qualité tout en évitant les fichiers surdimensionnés, définissez la qlt= value sur 90 ou 95.
Pour optimiser la taille de fichier réduite tout en maintenant la qualité d’image à un niveau acceptable, définissez la qlt= value sur 80. Les valeurs inférieures à 70-75 introduisent une dégradation significative et visible, comme le blocage des artefacts, le baguage et la perte de détails fins. Elles ne sont donc pas recommandées pour l’imagerie de production.
En règle générale, il est recommandé de définir la qlt= value sur 85, ce qui fournit un juste milieu fiable entre la qualité et la taille de fichier pour un large éventail de contenu d’image.
Utilisation de l’indicateur chroma dansqlt=
- Le paramètre qlt= comporte un deuxième paramètre qui contrôle le sous-échantillonnage de la résolution chromatique de RGB une technique de compression qui réduit la résolution des informations de couleur (chroma) tout en préservant le détail de la luminance. Activez le sous-échantillonnage activé à l’aide de la valeur ,1 ou désactivé à l’aide de la valeur ,0.
- Pour la plupart des workflows, commencez par désactiver le sous-échantillonnage de résolution chromatique désactivé (,0). Ce paramètre offre une meilleure qualité d’image car il préserve les données de couleur en pleine résolution, ce qui est particulièrement important pour les images synthétiques avec des arêtes vives, un contraste élevé et des transitions de couleur fines où les artefacts de sous-échantillonnage seraient autrement visibles.

Il est recommandé d’utiliser &qlt=85,0 pour la compression JPG.

Bonnes pratiques relatives au dimensionnement de JPEG (`&jpegSize=`) best-practices-for-jpeg-sizing-jpegsize

Le paramètre &jpegSize= garantit qu’une image diffusée ne dépasse pas une taille maximale spécifiée, ce qui la rend essentielle pour diffuser des images JPEG sur des appareils dotés d’une mémoire limitée. En appliquant une limite supérieure à la taille du fichier, cela empêche les images surdimensionnées de surcharger la mémoire disponible sur les clients limités.

Fonctionnement de `&jpegSize=`

Définissez le &jpegSize= en kilo-octets en utilisant la syntaxe jpegSize=<size_in_kilobytes>. Cette valeur définit la taille de fichier maximale autorisée pour la diffusion d’images.
&jpegSize= fonctionne en combinaison avec le paramètre de qualité (compression) JPEG &qlt=. Lorsque la réponse JPEG à la valeur de &qlt= spécifiée ne dépasse pas la limite de jpegSize, l’image est renvoyée avec &qlt= exactement comme défini, en préservant la qualité demandée.
Si l’image dépasse la limite de jpegSize à l’&qlt= spécifié, le système réduit progressivement la &qlt= jusqu’à ce que l’image corresponde à la taille maximale autorisée. Par conséquent, la qualité n’est réduite que dans la mesure nécessaire pour satisfaire la contrainte de taille, ce qui garantit la compatibilité avec l’appareil cible.
Si le système détermine que l’image ne peut pas peut pas être réduite pour s’adapter à la taille maximale autorisée, il renvoie une erreur plutôt que de diffuser une image non conforme.

Bonne pratique pour les périphériques à mémoire limitée

Il est recommandé de définir des &jpegSize= et de les associer à des&qlt= lors de la diffusion d’images JPEG sur des appareils dont la mémoire est limitée. Cette combinaison vous permet de spécifier à la fois la qualité cible et le plafond de taille fixe, de sorte que le système offre la qualité la plus élevée possible qui correspond toujours aux limites de mémoire de l’appareil.

Résumé des bonnes pratiques best-practices-summary

Pour obtenir une qualité d’image élevée avec une petite taille de fichier, commencez par la combinaison recommandée suivante de paramètres de diffusion d’images Dynamic Media :

fmt=jpg&qlt=85,0&resMode=sharp2&op_usm=1.75,0.3,2,0

Cette combinaison produit d’excellents résultats dans la plupart des cas et sert de référence fiable pour la majorité des images. La valeur op_usm s’applique à l’accentuation masque flou (USM) où les paramètres contrôlent la quantité, le rayon, le seuil et le comportement monochrome de l’effet.

Accentuation du réglage fin (accentuation)

Si une image nécessite une optimisation supplémentaire, ajustez progressivement les paramètres masque flou (USM) en procédant comme suit :

Définissez le rayon sur 0,2 ou 0,3 comme point de départ.
Augmentez le montant de 1,75 à un maximum de 4, ce qui équivaut à 400 dans Adobe Photoshop.
Vérifiez l’image rendue pour vous assurer que le résultat souhaité est atteint.
Si le résultat de l’accentuation n’est toujours pas satisfaisant, augmentez le rayon par incréments décimaux.
Pour chaque incrément décimal du rayon, redémarrez la quantité à 1,75 et augmentez-la progressivement à 4.
Répétez les étapes 4 et 5 jusqu’à ce que le résultat souhaité soit atteint.

Bien que les valeurs ci-dessus représentent une approche validée par les studios de création, vous pouvez commencer par d’autres valeurs et suivre d’autres stratégies. Que les résultats soient satisfaisants est une question subjective. C’est pourquoi une expérimentation structurée et itérative est essentielle pour obtenir le meilleur équilibre entre la netteté, la qualité et la taille du fichier pour chaque image.

Conseils d’optimisation des workflows

Au fur et à mesure que vous testez votre résultat, les suggestions générales suivantes permettent d’optimiser votre workflow :

Test des paramètres en temps réel sur une URL. Ajuster les valeurs directement dans l’URL vous permet de prévisualiser immédiatement l’effet et d’effectuer une itération rapide.
Regroupez les commandes dans un paramètre d’image prédéfini. Les commandes de traitement d’images Dynamic Media peuvent être regroupées dans un paramètre d’image prédéfini. Un paramètre d’image prédéfini est un ensemble de macros de commande d’URL auxquelles un nom de paramètre prédéfini personnalisé, tel que $thumb_low$ et &product_high$, est affecté. Le fait de référencer le nom du paramètre prédéfini personnalisé dans un chemin d’URL appelle ces paramètres prédéfinis. Cette fonctionnalité vous permet de gérer les commandes et les paramètres de qualité pour différents modèles d’utilisation des images sur votre site web, de promouvoir des paramètres cohérents par le biais de la réutilisation et de raccourcir la longueur globale des URL.
Utiliser les options de réglage avancé dans Experience Manager. Experience Manager propose également des méthodes plus élaborées permettant d’ajuster la qualité des images, par exemple en accentuant l’ingestion. Pour affiner et optimiser les résultats de rendu, les services de consulting d’ peuvent fournir des insight personnalisées et les bonnes pratiques.

recommendation-more-help

experience-manager-cloud-service-help-main-toc