La compression d'images : comment ça marche ?

Les images font partie des éléments qui constituent le plus gros d'une page Web. Le format et la taille des illustrations d'un site Web ont en outre un grand impact sur les temps de chargement et, de ce fait, aussi sur le classement dans les moteurs de recherche.

Formats d’image et leur utilisation

Pour les images, il existe plusieurs formats de fichier qui conviennent pour de multiples applications. Pour l'utilisation sur le Web, on ne doit toutefois se concentrer en principe que sur trois formats : jpeg, gif et png.

• Le format image probablement le plus connu est JPG (Joint Photographic Experts Group). Il s’agit du format employé par la plupart des appareils photo numériques, sur le Web ainsi que dans l’imprimerie. Le plus gros avantage de ce format réside dans le fait qu’il peut être comprimé au maximum.
• Le PNG (Portable Network Graphic) est également idéal pour l’utilisation sur la toile. La compression fonctionne toutefois différemment par rapport au JPG, car c’est la quantité des couleurs dans l’image qui se verra réduite en premier lieu. Avec certaines photos, il peut donc arriver qu’on s’aperçoive de la compression. Par ailleurs, un avantage du PNG est de prendre en charge les transparences. Si un logo avec fond transparent doit être intégré sur un site Web par exemple, cela peut s’effectuer sous format PNG sans aucune difficulté.
• Par rapport au JPG et au PNG, le format d’image GIF a le gros avantage qu’il peut être animé. Un inconvénient, par contre, est qu’il ne peut représenter que 256 couleurs. Outre l’attention à porter au format de fichier, qui doit être évidemment être correcte, il faudrait aussi tenir compte de la taille et de la compression.

Pourquoi doit-on comprimer les images pour le Web ?

Les illustrations sont importantes pour rendre une page Web claire et attrayante pour vos utilisateurs. Mais les images incluent le danger que la taille de fichier de la page Web augmente énormément et que le temps de téléchargement se ralentisse en conséquence. Ceci a aussi des répercussions négatives sur l'expérience utilisateur. Enfin, il arrive fréquemment que les visiteurs ne sont pas assez patients pour attendre le chargement complet et quittent alors immédiatement le site.

Il y a, heureusement des méthodes simples pour comprimer les images pour le Web sans rien perdre.

Compression d’images en ligne avec Optimizilla & Co.

Si vous ne souhaitez pas installer un programme supplémentaire, on peut traiter ses images directement en ligne. Pour cela, il existe plusieurs offres sur Internet, comme p. ex. Compressjpeg ou Optimizilla. Avec le premier outil, il est possible de télécharger jusqu'à 20 JPG par glisser/déposer, lesquelles seront par la suite comprimées automatiquement. Par la suite, on peut les télécharger individuellement ou comme archive ZIP.

Optimizilla fonctionne en principe de cette manière, mais peut faire un peu plus.
L'optimiseur en ligne emploie une combinaison intelligente des meilleurs algorithmes d'optimisation et de compression pour réduire les images aussi bien JPEG que PNG à la taille minimum possible, tout en conservant le niveau de qualité nécessaire. Ainsi, les paramètres de qualité et le degré de compression peuvent être traités.



Illustration 1 : Avec Optimizilla, on peut traiter simultanément jusqu'à 20 images.

Un autre outil pratique pour comprimer les images est TinyPNG. TinyPNG emploie des techniques de compression intelligentes pour réduire la taille de vos fichiers PNG. En réduisant de manière sélective le nombre de couleurs dans l'image, moins d'octets seront requis pour sauvegarder les données.



Illustration 2 : Réduction des illustrations avec TinyPNG.

Compression d’image avec Photoshop

Le moyen probablement le plus professionnel pour traiter ou comprimer les images est Adobe Photoshop. Ce logiciel de traitement d'image offre une multitude de possibilités qui peuvent parfois vous faire perdre la vue d'ensemble. Cependant, la compression d'image pour le Web avec Photoshop est très facile. À cet effet, on ouvre l'image à traiter, on adapte au besoin la taille au menu « Image > Taille des images » et on passe ensuite à « Fichier > Sauvegarder pour le Web ». Ici, il existe une quantité de possibilités pour régler la taille, le format, la qualité et la compression de l'image.

Outre en JPEG, les images se sauvegardent aussi ici en format PNG ou GIF, selon les besoins. Le seul inconvénient en utilisant Photoshop est que le programme n'est pas vraiment ce qu’on peut qualifier de bon marché. Cela ne vaut vraiment la peine que pour les gens qui doivent fréquemment traiter des images et qui sont aussi intéressés par d'autres fonctionnalités du programme.



Illustration 3 : Modification de la taille d'image dans Photoshop.

Compression d’image avec des programmes gratuits

Pour celui qui veut comprimer rapidement et facilement des images, on peut utiliser des outils gratuits qui sont relativement simples et intuitifs. L'un d'eux est le programme gratuit IrfanView, disponible aussi bien pour Windows que pour Mac. Il permet de réduire non seulement des images individuelles, mais aussi directement plusieurs images par fonction d'empilage.

En fait, IrfanView est un programme de visualisation d'images qui lit et peut convertir tous les formats d'images courants. Outre les formats standards comme JPG, GIF, PNG ou TIF, IrfanView prend aussi en charge RAW et ICO. Ce programme promet de comprimer les images et aussi de modifier les dimensions ou l'intensité des couleurs.

Par ailleurs, les images traitées peuvent être munies directement d'un cachet pour protéger le propre droit d'auteur. De différentes possibilités sont disponibles pour comprimer les images avec IrfanView. Pour changer directement la taille en pixels ou en pourcentage, on sélectionne la boîte de dialogue « Sauvegarder », puis « Format du fichier » et « niveau de compression ». Une autre possibilité est la fameuse conversion en lots, dans laquelle plusieurs quantités d'images peuvent être traitées simultanément. De cette façon, on peut ajuster par exemple la taille de l'image, convertir les images en un autre format et adapter la compression.



Illustration 5 : Traitement d'image avec IrfanView (capture d'écran)

Autres astuces d’optimisation des images pour un meilleur temps de chargement

On ne doit en principe utiliser que des images optimisées pour l'utilisation Web. D'une manière générale : les photos et graphiques haut de gamme devraient être utilisés comme .jpeg et les graphiques inférieurs à 10 x 10 pixels comme .gif. Ici, découvrez encore trois autres astuces pour optimiser vos images pour le Web.

• Indiquez dans le code source la taille d’image correspondante : si un navigateur doit calculer lui-même les dimensions des graphiques, cela pourra exiger beaucoup de temps de chargement. La taille indiquée devrait correspondre à la taille originale de l’image stockée sur votre serveur. Vous pouvez aussi définir la taille de rendue de l’image sur CSS.

<img src=”exemple.png” width=”300” height=”200”/>

• Éliminer les balises méta et les données EXIF : si vous utilisez, par exemple, les images de votre propre appareil photo ou smartphone, ceux-ci disposent de multiples infos supplémentaires telles que le lieu de la prise de vue, l’appareil utilisé et bien d’autres données. Avec un outil comme TinyPNG, vous pouvez facilement les éliminer et économiser en espace mémoire.
• Si une page présente plusieurs images dans le contenu, leur temps de téléchargement peut en outre être réduit en utilisant un réseau de diffusion de contenu (RDC). Cela signifie que les images sont transposées vers un serveur externe et, ainsi, mises rapidement à disposition.

Conclusion

Les images non comprimées demeurent toujours une raison fréquente pour de longs temps de chargement d'un site Web. La compression correcte des images utilisées peut, en revanche, s'effectuer très facilement. Un programme comme Optimizilla suffit à celui qui n’insère que de temps en temps des images à son site.

Si l'on souhaite toutefois plus de possibilités pour régler la compression, il faudrait installer un programme qui offre plus de fonctionnalités. Dans la plupart des cas, le freeware suffit ici. Les utilisateurs professionnels, quant à eux, auront sûrement besoin d'autres fonctionnalités dans le traitement d'images et auront de ce fait recours à Photoshop. Comparez les coûts et les avantages pour vos besoins et choisissez la formule qui vous correspond le mieux !

Pour aller plus loin

Mode d’emploi pour le SEO images : comment bien utiliser les attributs ALT et title

Les recettes de Noël de Ryte : bûche d'images au glaçage ALT

Ryte FREE est votre arme secrète pour optimiser vos images et votre site Web - n'attendez plus pour essayer

Et c’est gratuit !