Comment optimiser ses images pour le web en 3 étapes ?

Les étapes permettant de réaliser ce double travail sont assez simples :

1. Choisir le format adapté à vos besoins : JPEG pour les photos de bonne qualité, PNG pour répondre aux besoins de transparence ou GIF pour les animations.
2. Optimiser le poids de vos images : redimensionner vos fichiers, exporter avec une configuration adaptée et compresser vos fichiers en ligne.
3. Renseigner les informations textuelles : Renommer votre fichier avec un titre explicite et remplir les attributs "alt" et "title" avec des informations pertinentes.

Ces différents éléments sont interconnectés. Il est important de réfléchir à l'optimisation de vos images dans son ensemble et de mettre en place des processus et des méthodes qui harmoniseront les pratiques au sein de votre société.

Les différents formats présentent chacun des avantages et des inconvénients. Il faut savoir quel format choisir en fonction de nos besoins, de nos contraintes et du contexte.

Le format JPEG pour les photographies et images de grande qualité

Le format JPEG sera l'option la plus adaptée aux photographies et aux images composées d'une large palette de couleurs. En effet, un de ses principaux avantages est qu'il peut gérer plus de 16 millions de couleurs.

En contrepartie, ce format supporte assez mal la compression des images contenant des différences de contraste importantes entre pixels proches. Le niveau de compression devra donc s'adapter à chaque image sous peine d'avoir un rendu de mauvaise qualité, pixélisé et flou.

Ce format reste tout de même le plus répandu sur le web tant il permet d'obtenir des résultats de grande qualité en respectant un poids optimisé pour le web.

Le format PNG pour les besoins de transparence

Les fichiers PNG sont à favoriser pour apporter de la transparence aux images. Ce format est donc idéal pour tous les éléments nécessitant un jeu d'opacité ou un fond invisible comme les logos ou autres éléments de "décoration".

Il existe deux types de PNG : PNG-8 et PNG-24. Le premier se composera d'une gamme de 256 couleurs alors que le deuxième permettra d'enregistrer des fichiers de plus de 16 millions de coloris.

On s'orientera donc vers le PNG-8 pour tous les éléments peu colorés. Si vous n'avez pas besoin d'animer votre visuel, le PNG-8 est à favoriser par rapport au GIF. Il permettra d'obtenir des fichiers bien plus légers. Bien que meilleur en matière de compression et de gestion du contraste entre pixels proches, le PNG-24 se rapproche plus de la qualité d'un JPEG tout en générant des fichiers 5 à 10 fois plus lourds. Si vous n'avez pas besoin de transparence, favorisez donc l'utilisation du JPEG pour vos éléments de grande qualité.

Le format GIF pour générer des animations

Le format GIF sera à prioriser pour les éléments nécessitant une animation ne pouvant pas être gérée en CSS3. En effet, le GIF est un format pouvant contenir plusieurs images dans un même fichier. Cependant, les fichiers ne supporteront que 256 couleurs et ne sont donc pas adaptés aux grandes qualités.

Il est possible de régler de nombreux paramètres pour optimiser la qualité et le poids de vos fichiers GIF. On notera ici le tramage, le nombre d'images, la gamme de couleurs utilisée, etc.

Les GIF sont donc à utiliser pour les fichiers animés de petite taille ne proposant pas une palette de couleurs trop importante. Pour tout autre besoin, le JPEG ou le PNG répondront surement mieux à vos attentes.

Le format WebP, la future norme ?

Le format WebP a été inventé par Google dans les années 2010 afin de devenir le nouveau standard des images web. Son principal avantage est qu'il permet de garder la qualité d'une image en réduisant son poids de 30 % ou plus.

Dans un monde où les performances web et les vitesses de chargement deviennent des enjeux stratégiques de taille pour tous les sites en ligne, ce format est censé apporter une réelle évolution au web.

En plus de prendre en charge les images animées et la transparence, ce format propose deux types de conversion : la première avec perte réduira au maximum le poids des fichiers tandis que la deuxième sans perte permettra tout de même de réduire efficacement le poids de votre fichier sans en dégrader la qualité.

Avec tous ces avantages, pourquoi le WebP n'est-il pas déjà le format standard ? Pendant de longues années, les navigateurs ne supportaient pas le format WebP, ce qui le rendait inutilisable pour la plupart des internautes. Si Firefox, Edge et d'autres se sont mis au WebP il y a quelques années, le géant du numérique Apple et son navigateur Safari ne supportent toujours pas le WebP. Par volonté de bloquer la concurrence ? On vous laisse apporter vos propres conclusions. Toujours est-il que le projet ne sera pas considéré comme la nouvelle norme tant qu'il ne sera pas supporté par l'ensemble des navigateurs.

Étape 2 : optimiser le poids de vos images

Avec l'avènement de la navigation sur mobile, il est de plus en plus important d'optimiser la vitesse de chargement de votre site. On constate fréquemment que plus de la moitié du poids d'une page est liée aux images. Il est donc essentiel d'uploader des images correctement optimisées.

L'amélioration du poids d'une image se décompose en plusieurs étapes : les dimensions, l'export depuis votre logiciel de graphisme et la compression finale.

Mettre votre visuel aux bonnes dimensions

La première phase de l'optimisation du poids de votre fichier image est la vérification des dimensions et de la résolution. Lors des différents audits SEO réalisés, on constate assez souvent que certaines photos ont été uploadées en plus de 3000 px de large, avec une résolution trop importante et qu'elles dépassent le Mo. Il est évident que ce genre d'erreur entraine des chargements de pages beaucoup plus longs.

Chez idéveloppement, nous nous efforçons de redimensionner nos images en fonction du contexte dans lequel elles sont utilisées. Il est important de proposer une image permettant de profiter pleinement de la taille et de la qualité des interfaces de vos utilisateurs sans négliger son poids. Adaptez ces dimensions à votre site et pensez à toujours vérifier la qualité sur différentes tailles d'interface (du mobile à l'écran 30").

Vous pourrez toujours redimensionner votre image directement sur votre site en CSS, mais cela ne changera absolument pas son poids et la demande de ressources pour la télécharger. Pour favoriser une vitesse de chargement satisfaisante, nous recommandons vivement d'être au plus proche de la dimension souhaitée avant l'upload.

Exporter votre image pour le web

Photoshop, le logiciel de graphisme le plus utilisé au monde, propose une option très intéressante pour l'export de vos visuels : "Enregistrer pour le web

Cette option permet de choisir le format, de redimensionner si ce n'était pas déjà fait avant (encadré rouge sur l'exemple) et de choisir un niveau de compression et de qualité de vos fichiers visuels (encadré jaune). Nous vous conseillons de jouer avec le curseur "Qualité" pour obtenir le meilleur ratio qualité/poids.

Au-delà de 75 de qualité, la différence est difficilement visible à l'œil nu pour une optimisation de poids très intéressante. Réalisez vos tests et validez un processus propre à votre site.

Si vous n'avez pas Photoshop, on vous donne une astuce qui vaut de l'or. Il existe un logiciel en ligne très proche de Photoshop et proposant sensiblement les mêmes fonctionnalités : Photopea.

Compresser votre image

Vous devez maintenant avoir un fichier optimisé et respectant certaines dimensions. Une dernière étape va permettre de réduire encore le poids de votre image sans dégrader la qualité. De nombreux outils gratuits d'optimisation de poids d'image existent sur internet. Nous avons pour habitude d'utiliser les très bons TinyJpg et TinyPng. Libre à vous de trouver l'outil qui correspondra à vos habitudes de travail.

Ces outils sont très simples d'utilisation : vous uploadez un fichier et validez. L'outil compresse alors automatiquement votre fichier et vous propose un lien de téléchargement. Dans la version payante, il est aussi possible de compresser des images par lots.

À ce niveau vous devriez avoir des images entièrement optimisées pour le web. Il n'y a pas de règles générales sur le poids d'une image. Habituellement, on dit que les images ne doivent pas dépasser 100 Ko. Cependant, une image de grande taille devra autant que possible être en dessous des 500 Ko quand une image de taille moyenne pourra potentiellement dépasser légèrement les 100 Ko.