Rédacteur : Eric P.
Sommaire
Compresser des images pour optimiser votre site web
Pourquoi diriez-vous compresser des images que vous allez publier en ligne est-il important ? Parce que des images trop volumineuses augmentent le temps de chargement de votre page, et c’est exactement ce qu’il faut éviter. Ainsi, est-il possible de réduire la taille des images sans en diminuer la qualité ? En effet, il suffit de publier des images de mauvaise qualité pour en réduire la taille. Et pourtant, il existe réellement plusieurs façons de réduire la taille d’une image sans que cela n’en déteigne la qualité.
Pourquoi doit-on compresser des images ?
Avec les appareils actuels et les avancées technologiques en matière de photographie, les images et les photos actuelles sont en très haute résolution. Ce qui en résulte, c’est que les fichiers sont aussi trop lourds. Et pourtant, plus ces derniers sont lourds, et plus votre page web mettra du temps à s’afficher. Rien d’étonnant, puisque le fichier doit voyager du serveur vers l’ordinateur de l’internaute.
Et pourtant, plus votre page web mettra du temps pour se charger, plus l’internaute sera irrité. Et la plupart d’entre eux abandonneront et se tourneront vers d’autres sites web. De la même manière, les moteurs de recherche vont pénaliser ces sites web trop lourds. Google a en effet retenu parmi ses critères le temps de chargement des pages web et préserve les internautes du désagrément que cela puisse causer. Ainsi, un site Web conforme aux normes SEO doit comporter des images à une taille convenable.
Choisir le bon format d’image
Il existe en effet plusieurs formats d’images. Cependant, seuls quelques-uns remplissent les conditions pour que puissent s’afficher des images de bonne qualité, avec des tailles acceptables pour les pages web.
JPG/JPEG : Le format JPG est le standard pour le web. Vous avez la possibilité d’utiliser un peu plus de 16 millions de couleurs avec ce format. Mais en plus, ce format fait partie de ceux qui peuvent être compressés sans en diminuer la qualité. Bien entendu, la qualité réelle va être entamé, mais les changements sont totalement invisibles à l’œil nu, les logiciels de compressions vont y veiller. Le format JPG/JPEG est surtout utilisé pour les photos et les images standards, ayant besoin d’autant de nuances de couleurs.
PNG : Le format PNG est aussi très fréquemment utilisé. Avec ce format, vous avez aussi la possibilité d’utiliser un peu plus de 16 millions de couleurs. Vos images et vos photos gardent cependant une qualité supérieure (par rapport à une image JPG/JPEG), même après compression. En revanche, la taille d’un fichier PNG reste toujours supérieure à un fichier JPG/JPEG, malgré l’utilisation des meilleurs outils de compression. La particularité du format PNG, c’est aussi la possibilité d’utiliser de zones de transparences à l’intérieur de l’image. C’est ainsi la solution à des types d’images spéciaux comme des logos ou des illustrations.
GIF : Les fichiers GIF ont la particularité de ne faire appel qu’à un nombre très limité de couleurs, seulement 256. Cependant, ce format permet l’affichage de petites animations grâce à une méthode très simple : la juxtaposition d’une multitude d’images. Le résultat est une image animée de taille limitée, impossible avec une animation classique. Les zones transparentes sont aussi reconnues par le format GIF.
Choisir le bon outil de compression d’image
Pour compresser vos images, vous avez le choix entre les logiciels et les outils en ligne.
Pour les logiciels, il est évident qu’il en existe des versions payantes avec plus de fonctionnalités et des versions gratuites plus minimalistes. Cependant, ne croyez pas que les versions payantes donnent un meilleur résultat par rapport à ce qu’on attend réellement. Caesium Image Compressor est par exemple un logiciel gratuit pour Windows qui donne un très bon résultat. Si vous utilisez plutôt OS, ImageOptim est la meilleure alternative. Pour le format PNG particulièrement, il est préférable d’utiliser des outils spécialisés comme PNGGauntlet. Cet outil est aussi capable de convertir des images d’autres formats vers le format PNG.
Vous pouvez aussi vous tourner vers les outils en ligne. Optimizilla.com est par exemple un outil qui donne des résultats satisfaisants. Pour les images de format PNG, vous pouvez aussi utiliser Tinypng.com.
Une autre façon de compresser une image : la Base 64
Bien que les images soient des fichiers réels, ce ne sont jamais que des données binaires. L’autre solution proposée pour réduire la taille des images, c’est d’intégrer les codes binaires dans votre page elle-même. De cette manière, votre navigateur n’enverra pas de requête supplémentaire à votre serveur, et le temps de chargement de votre page se trouvera réduit. Ainsi, au lieu de faire comme ceci :
<img src= »/dossier/image.png » alt= »description » />
Vous allez écrire :
<img src= »data:image/png;base64,deft452…[…] » alt= »description »/>
La longue séquence qui se trouve après « base64 » correspond à votre image transformée. Le site motobit.com propose un outil de conversion en ligne des images sur ce lien : https://www.motobit.com/util/base64-decoder-encoder.asp
Cependant, ce système a deux inconvénients majeurs.
D’abord, en réalité la taille du code binaire base 64 est environ 50% par rapport à la taille de l’image en question. Pourquoi l’utiliser dans ce cas ? Il ne faut pas oublier le temps de l’envoi de la requête et le temps de réponse du serveur. Il en résulte alors une règle très simple : la méthode est bénéfique si le surplus de temps de chargement du code base 64 est inférieur au temps de l’exécution des requêtes. Pour faire simple, seuls les fichiers légers doivent être convertis en code base 64. Les images plus lourdes doivent être maintenues.
D’un autre côté, cette méthode n’est pas compatible avec IE7 (et les versions antérieures). Ainsi, pour l’utiliser, quelques codes de retouches php peuvent être nécessaires. Une façon de faire est décrite sur cette page : http://dean.edwards.name/weblog/2005/06/base64-ie/
