Nous allons vous présenter très précisemment dans cet article comment optimiser une image pour le web.
La compression d’une image est toujours un moment critique où il faut faire des choix stratégiques pour un rendu optimal. Si on laisse un algorithme le faire le plus souvent cela fonctionne, mais pas pour des images qui sortent du profil commun. (très blanc,, monochrome, dégradés très fins de gris, matière très fine etc…)
Optimiser une image par les dpi
Le paramètre dpi (300/96/72) n’intervient pas pour l’affichage sur un écran. C’est un paramètre qui intervient au moment de l’impression. Typiquement un écran affiche un pixel de l’image pour un pixel physique et varie ce paramètre en fonction du niveau de zoom que l’on applique à l’image. Il n’y a pas de correspondance avec une taille d’affichage mesurée en cm ou inch. A l’inverse à l’impression il faut indiquer à l’imprimante combien de pixel imprimer par cm ou inch carré. C’est le paramètre dpi. Faire varier ce paramètre pour de l’affichage écran ne changera rien à l’image, à paramètre égaux par ailleurs.
Optimiser une image par le poids
Par contre le paramètre fondamental sur lequel on travaille c’est le poids de l’image. Un site ne supportera pas une image trop lourde ou bien elle mettra bien trop de temps à s’afficher pour que ce soit utilisable. Faire varier les dpi n’influera pas sur le poids de l’image. Il va falloir jouer sur 2 autres paramètres : le nombre de pixels de l’image et la compression que l’on peut appliquer à l’image.
Une image HD d’un boitier classique fera autour de 6000×4000 pixels. C’est absolument démesuré pour de l’affichage écran. L’idéal est de se rapprocher au maximum de la taille qui sera utilisée réellement sur le site. Pour du plein écran on peut par exemple partir sur un format de 2250×1500 pixels. Le standard des écrans aujourd’hui est le format vidéo HD 1920×1080 pixels. En affichage plein écran les images feront 1920×1080 pixels.
On garde donc une marge raisonnable de qualité de l’ordre d’une valeur de zoom à 72 %. Jusqu’à 100% de zoom l’image garde sa qualité, au-dessus de 100% elle se dégrade et devient floue. Cette marge permettra de recadrer ou zoomer si besoin. Exemples de zoom.
La compression des images
L’autre paramètres que l’on peut faire varier est le facteur de compression. Pour le format jpeg on peut le faire varier assez finement. Le format jpeg même à qualité 100% est déjà un format compressé. Augmenter la compression jpeg (baisser le % qualité), va forcément dégrader l’image. Il y aura moins d’information dans l’image et typiquement les dégradés très doux vont voir l’apparition d’auréoles qui va correspondre à des zones de couleurs approchantes compressées sur la même valeur. De plus tous les algorithmes de compression jpeg ne sont pas équivalents. Photoshop/Lightroom est la référence. Les sites de compression en ligne font souvent un travail au marteau piqueur là où il faudrait faire de la dentelle.
La stratégie dès lors va être la suivante. Pour optimiser une image il faut 2 paramètres au mieux (un seul au pire) : La taille à laquelle sera affichée l’image et le poids maximum qu’elle ne doit pas dépasser. A partir de là on va d’abord utiliser le paramètre taille en pixel qui ne dégrade pas l’image. On va le réduire à la taille d’affichage de l’image. On peut garder une marge s’il y a besoin de faire des zooms, ou choisir la taille exacte pour optimiser au maximum. Ensuite et seulement si l’image est encore trop lourde on va baisser la qualité jpeg (donc augmenter la compression) de préférence avec un bon logiciel qui utilise un bon algorithme. Le plus dur étant de contourner tous les automatismes des sites de mise en ligne qui fonctionnent dans 80% des cas, mais pas pour les 20% qui restent.
Bonne optimisation à tous.
Et si vraiment vous n’y arrivez pas, appelez-nous ! Contact Prestige-Packshot
