Bonnes pratiques relatives à la sélection de l’image source
Considérations essentielles pour l’utilisation des images source :
-
Format d’image Source :
- L’utilisation de formats sans perte tels que PNG, TIFF ou PSD garantit que la qualité de l’image reste élevée sans aucun artefact de compression.
- Ces formats conservent toutes les données d’origine, ce qui les rend idéales pour la modification et le traitement ultérieur.
-
Taille de l’image Source :
- En commençant par une image haute résolution, vous bénéficiez de davantage de détails et de flexibilité.
- Lorsque les images doivent être affichées à des tailles différentes (par exemple, sur différents appareils ou à différentes résolutions d’écran), le fait d’avoir une image source plus grande permet une meilleure mise à l’échelle.
- Pour les images qui prennent en charge le zoom (comme les photos de produit), visez les 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 téléchargés à la plus grande taille nécessaire pour l’utilisation prévue.
En effectuant ces choix prudents au niveau de la source, vous pouvez contribuer de manière significative à la qualité globale de votre contenu visuel.
Bonnes pratiques relatives à la taille des images
La réduction dynamique de la taille de l’image est l’une des tâches les plus courantes. Cela implique de spécifier la taille et, éventuellement, le mode de sous-échantillonnage utilisé pour réduire l’image.
- Pour le dimensionnement des images, la meilleure méthode, mais aussi la plus simple, consiste à utiliser
&wid=<value>
et&hei=<value>,
ou simplement&hei=<value>
. Ces paramètres définissent automatiquement la largeur de l’image en respectant le format. &resMode=<value>
contrôle l’algorithme utilisé pour le sous-échantillonnage. Commencez par&resMode=sharp2
. Cette valeur fournit la meilleure qualité d’image. Bien que l’utilisation du sous-échantillonnagevalue =bilin
soit plus rapide, elle se traduit souvent par un crénelage des artefacts.
Pour le dimensionnement des images, il est recommandé d’utiliser &wid=<value>&hei=<value>&resMode=sharp2
ou &hei=<value>&resMode=sharp2
.
Bonnes pratiques relatives à l’accentuation des images
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. Prenez le temps d’en savoir plus sur le fonctionnement de l’accentuation et du masquage flou dans Experience Manager en vous référant 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.
Avec Experience Manager, vous pouvez accentuer les images lors de l’ingestion, lors de la diffusion, ou les deux. En général, cependant, il est préférable d’accentuer les images en utilisant une seule méthode ou l’autre, mais pas les deux. L’accentuation des images lors de la diffusion, sur une URL, vous donne généralement les meilleurs résultats.
Vous pouvez utiliser deux méthodes d’accentuation d’image :
-
Accentuation simple (
&op_sharpen
) : à l’instar du filtre d’accentuation utilisé dans Photoshop, l’accentuation simple applique une accentuation de base à l’affichage final de l’image à la suite d’un redimensionnement dynamique. Cependant, cette méthode ne peut pas être configurée par l’utilisateur. La bonne pratique consiste à éviter d’utiliser&op_sharpen
, sauf si nécessaire. -
Masquage flou (
&op_USM
) : le masquage flou est un filtre d’accentuation standard. 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)
- rayon (0 à 250, largeur des « lignes d’accentuation » tracées autour de l’objet accentué, mesurées en pixels.)
Gardez à l’esprit que les paramètres rayon et quantité fonctionnent l’un par rapport à l’autre. La réduction du rayon peut être compensée en augmentant la quantité. Le rayon permet un contrôle plus précis, car une valeur inférieure accentue uniquement les pixels de contour, tandis qu’une valeur supérieure accentue une bande plus large de pixels.
- 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 de seuil de 12 ignore les légères variations de la 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
Augmentez graduellement la valeur de 1,75 à 4. Si l’accentuation ne vous convient toujours pas, augmentez le rayon d’un point décimal, puis réexécutez la quantité de 1,75 à 4. Recommencez si nécessaire.
Laissez le paramètre monochrome sur 0.
Bonnes pratiques relatives à la compression JPEG (&qlt=
)
-
Ce paramètre contrôle la qualité du codage des JPG. Une valeur élevée produit une image de meilleure qualité, mais un fichier plus volumineux ; en revanche, une valeur faible signifie une image de qualité inférieure mais un fichier plus petit. La plage de ce paramètre est 0 à 100.
-
Pour optimiser la qualité, ne définissez pas la valeur du paramètre sur 100. La différence entre un paramètre de 90, 95 et 100 est presque imperceptible. Et pourtant, 100 augmente inutilement la taille du fichier image. En conséquence, pour optimiser la qualité, mais éviter que les fichiers image deviennent trop volumineux, définissez
qlt= value
sur 90 ou 95. -
Pour optimiser pour une petite taille de fichier image tout en conservant la qualité de l’image à un niveau acceptable, définissez la
qlt= value
sur 80. Les valeurs inférieures à 70-75 entraînent une dégradation significative de la qualité de l’image. -
Une bonne pratique pour rester dans la moyenne consiste à définir
qlt= value
sur 85. -
Utilisation du drapeau chromatique dans le paramètre
qlt=
- Le paramètre
qlt=
possède un deuxième paramètre qui vous permet d’activer le sous-échantillonnage chromatique RVB à l’aide de la valeur,1
ou de le désactiver à l’aide de la valeur,0
. - Pour faire simple, commencez par désactiver le sous-échantillonnage chromatique RVB (
,0
). Ce paramètre produit généralement une image de meilleure qualité, en particulier pour les images de synthèse contenant beaucoup de contours nets et un fort contraste.
- Le paramètre
La bonne pratique pour la compression JPG consiste à utiliser &qlt=85,0
.