Optimiser les images pour le web

Sur une page ou un article, le poids total des images représente la majeure partie des données à télécharger pour vos visiteur.

Toutes ces images permettent de présenter un design très riche, mais cela peut vite devenir un lourd fardeau si vous souhaitez améliorer votre référencement, vos taux de conversions ou diminuer vos taux de rebond sur les appareils mobiles.

Mais voici quelques recommandations qui vous permettront d’améliorer les temps de chargement de vos pages.

Utiliser la bonne extension d'image

Selon le contenu de l’image, il faudra choisir le bon type de fichier. En effet il n’y a pas de format magique permettant d’optimiser toutes les images. Il faut donc le choisir avec soin.

Voici quelques astuce pour faire le bon choix de format d'image:

GIF, PNG 8

Les deux formats sont à peu près équivalents (avec un léger avantage pour le PNG 8 et servent à enregistrer des images contenant un nombre limité de couleurs. Ils fonctionnent donc très bien pour des logos, des infographies ou des illustrations sans dégradés. Attention aux dégradés avec ces formats car ils seront simplifiés.

Ils peuvent également être utilisés pour de petites icones avec transparence si ils sont sur un fond uni.

 

JPG

Le format le plus répandu, il est très efficace pour enregistrer des photos car il les compresse. Avec un logiciel comme Photoshop, vous pouvez ajuster très précisément ce niveau de compression que vous pourrez varier en fonction de l’image.

Plus l’image d’origine est de bonne qualité, plus il est possible d’augmenter la compression.

PNG 24

Le PNG 24 est un format de compression sans perte qui offre un niveau de détail optimal. Les photos à ce format sont donc plus lourdes qu’en JPG et devront donc être converties avant mise en ligne.

Mais le format a quand même un intérêt car il gère également les dégradés de transparence (256 niveaux) ce qui le rend indispensable aujourd’hui pour la manipulation d’images détourées, de logo ou d'icônes.

SVG

Un format vectoriel arrivé récemment sur le web. L’image est en fait codée en xml qui pourra être interprété par un navigateur. Il offre plusieurs avantages très intéressant comme :

• La possibilité d’être redimensionné sans perte de qualité.
• Chaque forme dans l’image est un élément xml qui peut être animé 
• La customisation avec une feuille de style css

Choisir les bonnes dimensions d'image

Il faut redimensionner votre image dans la dimension maximum à laquelle elle s’affichera. On parle de largeur maximum car les site sont aujourd’hui responsives et la largeur de tout le contenu s’adapte à l’écran, images comprises.

Inutile donc d’uploader une image de 2000 pixel de large si elle doit s'afficher dans un carré de 200 pixels.

Le contraire est vrai également car si votre image de 200 pixels de large s’affiche en bannière large, elle sera complètement pixelisée.

Aujourd’hui, la plupart des CMS permettent de redimensionner les images automatiquement en plusieurs tailles et la balise image en html permet de préciser un fichier par taille d’écran. Les 2 technologies combinées permettent donc une optimisation automatique sans utilisation de logiciel supplémentaire.

Mais attention car ce n’est pas toujours le cas et c’est la raison pour laquelle certains sites vous font charger des dizaines de mégaoctets d’images à chaque page. Cela pénalise grandement la fluidité de navigation, le référencement naturel ainsi que le temps de rebond sur mobile (des pages lourdes sur du 3G, çà passe mal).

Les écrans à haute densité

Il s’agit d’écran de téléphone (donc petits) avec des résolutions très élevés. Il y a par exemple 4 fois plus de pixels sur une écran rétina que sur un écran normal de taille équivalente.

On pourrait donc simplement utiliser des images 4 fois plus grandes pour ces écrans.

Mais sur mobile il est impensable de multiplier le poids des images par 4 car la vitesse de connexion n’est pas proportionnelle à la qualité de l’écran.

Dans ce cas précis on recommande d’utiliser effectivement une image au format jpeg 4 fois plus grande, mais avec une compression plus forte afin d’avoir un rendu correct sur tous les écran, tout en limitant le poids des images.

Charger l’image au bon moment

Une dernière astuce, qui n’est pas très difficile à implémenter, consiste à ajouter une fonction de chargement progressif (lazyload).

Cela consiste à charger dans un premier temps le texte de la page, puis de charger les images visibles dans un second temps. Le reste des images sera chargé dans un troisième temps.

Certains scripts permettent même de charger les images au fur et à mesure du scroll.

Ce qu’il faut retenir

• Les images peuvent devenir un fardeau sur une site internet si elle ne sont pas optimisées.
• Plus elles sont nombreuses dans la pages et plus elles sont un impact sur les performances. 
• Un site e-commerce qui se charge trop lentement mène à la perte de ventes potentielles

L’arrivée sur le marché d’écrans à la résolution toujours plus élevée ajoute de nouvelles contraintes pour les développeurs et les utilisateurs qui doivent trouver des astuces pour toujours concilier la qualité du rendu et le temps de chargement.

Sachez également que les images ne sont pas le seul point d’optimisation à travailler. Nous développerons le sujet dans de futurs articles.

 

Sources:

Impact de l'optimisation d'un site e-commerce sur le volume des ventes

Documentation Mozilla pour l'ajout d'images adaptatives

Alsacreation.com : Optimiser les images pour les écrans à très haute résolution

 

 

Crédit images:

https://pixabay.com/fr/users/markjhemmings9-10680176/

https://pixabay.com/fr/users/larisa-k-1107275/

https://pixabay.com/fr/users/gdj-1086657/

https://fr.wikipedia.org/wiki/Sphinx_de_Gizeh#/media/File:The_amazing_Sphinx.jpg