Comment optimiser les images web ?

De nos jours, dans la quête aux performances d’un site web, optimiser les images est une des étapes à ne surtout pas négliger.

En effet, vous avez créé votre site et rédigé des contenus au top. Puis, pour faciliter le trafic et le référencement du site et également améliorer l’expérience utilisateur, vous avez pensé à insérer des images ou photos de haute qualité en relation avec le sujet de la page ou de l’article.

Mais, zut alors, après avoir fait des tests de performances, force est de constater qu’elles nuisent beaucoup à la vitesse d’affichage des pages de votre site.

Alors, no stress, voyons ensemble quelques astuces et techniques pour les optimiser, comme :

• 🖼️ Choisir le format d’image adapté,
• 📏 Opter pour la bonne taille d’image,
• 🔨 Compresser les images avant import,
• ⚙️ Et enfin optimiser les images sur le site.

Choisir le format d’image adapté

En premier lieu, il est essentiel de savoir que les images existent sous plusieurs formats, mais que tous ne sont pas adaptés au Web.

En fait, ceux qui sont correctement affichés par tous les navigateurs sont le PNG (acronyme de Portable Network Graphics), le JPEG (acronyme de Joint Photographic Experts Group) et le GIF (acronyme de Graphics Interchange Format).

Néanmoins, selon les statistiques d’utilisation des formats de fichiers image pour les sites Web de W3Techs du mois de mai 2021, on peut remarquer que le SVG (acronyme de Scalable Vector Graphics) est tout de même employé sur 33,9 % des sites Web et le WebP par 1,5 % des sites Web.

Alors, comment choisir le format adapté ?

Le PNG

Le format PNG est assez lourd car il offre une compression sans perte. Corrélativement, les images sont de haute qualité.

La gestion de la transparence et la lisibilité des textes intégrés dans les images sont ses principaux atouts.

Par conséquent, il est à privilégier pour les :

Le JPEG ou JPG

Le JPEG est un format d’image dont la compression s’effectue avec perte. Le poids du fichier est donc relativement léger, mais la qualité de l’image est moindre que celle du PNG.

Quoi qu’il en soit, la perte de qualité n’est pas forcément détectable par un internaute basique.

Petit couac, il ne gère pas la transparence.

Au final, son utilisation est optimale pour les :

• Articles de blog
• Images d’en-tête
• Photographies

💡​ Pour rappel : Il n’y a pas de différence entre JPG et JPEG, ce sont deux acronymes et extensions de fichiers différents pour le même format.

Le GIF

Le GIF est, quant à lui, le seul format d’image qui permet l’animation. D’autre part, il n’y a aucune perte de qualité lors de sa compression et il permet la transparence.

Vous pourrez vous en servir pour attirer l’attention du visiteur et insuffler un peu de dynamisme sur votre site web.

Mais attention, prenez garde à ne pas trop en mettre, car cela peut lasser votre visiteur.

Il sera idéal pour les :

• Petites icônes
• Bannières
• Articles de blogs

Le SVG

Le fichier SVG est un format qui a le vent en poupe. Il s’agit d’une image vectorielle basée sur le langage XML, qui plus est, supporte la transparence.

Son grand atout est qu’il est automatiquement redimensionnable sans perte. Il convient donc parfaitement pour l’affichage sur les écrans très haute résolution Retina.

De plus, vous pouvez facilement trouver des images SVG sur le web et également les intégrer via leur code dans votre site.

Toutefois, attention, il existe plusieurs inconvénients pour le SVG.

Tout d’abord, Google indexe les fichiers SVG, mais pas forcément ceux que vous avez intégré via leur code.

Ensuite, nativement, Facebook et Twitter ne supportent pas le partage d’image SVG. La solution sera de passer par l’extension Yoast SEO ou une autre pour téléverser une image PNG ou JPEG en remplacement du SVG pour les Open Graph ou les balises metas.

Enfin, WordPress n’autorise pas le téléversement direct des SVG. Il vous faudra donc contourner cette interdiction.

Pour toutes ces raisons, vous pouvez l’utiliser idéalement pour les :

• Logos
• Icônes
• Illustrations

Opter pour la bonne taille d’image

La première optimisation à faire lorsque vous avez choisi vos images est de les ajuster à la bonne taille selon l’emplacement de destination sur votre site, et ce, avant de les téléverser dans vos medias.

En effet, la taille de l’image ne sera pas la même pour le hero header de la page d’accueil, une image mise en avant ou une image au sein d’un article ou d’une page.

En substance, une image trop petite sera pixellisée et floue, tandis qu’une image trop grande sera redimensionnée automatiquement par le navigateur. Mais, le problème est qu’elle sera lourde et prendra du temps à charger.

Et puis, franchement, une image pixellisée, c’est moche. Votre site n’aura donc pas un aspect qualitatif et cela fera souvent fuir la plupart des visiteurs.

Pour trouver la taille adéquate en fonction de la destination, n’hésitez pas à consulter la documentation de l’éditeur de votre thème WordPress ou même les fils de support sur WordPress.org.

L’autre truc que je fais souvent est d’aller sur la démo de mon thème et d’analyser les tailles des images téléversées, et ce, toujours en fonction du contexte.

Après, il ne vous reste plus qu’à les recadrer ou les mettre à l’échelle dans Paint, Photopea ou un autre logiciel d’édition d’images.

💡​ Attention à garder le même rapport hauteur/largeur afin d’éviter la déformation de l’image.

Compresser les images avant import

La deuxième optimisation à réaliser sur vos images avant le téléversement est la compression.

Je sais, je vais me répéter, mais, plus l’image est grande, plus elle met de temps à charger. Il vous faut donc la compresser.

On vous dira qu’il existe pas mal de plugins qui le font directement sur le site. Mais quelle est l’utilité de télécharger un gros fichier sur votre serveur alors que vous pouvez en télécharger directement un plus petit ? D’autant plus qu’il existe plein d’outils en ligne pour le faire.

Pour ma part, j’utilise TinyPNG. Il s’agit d’un service en ligne gratuit, qui, comme son nom ne l’indique pas, permet de compresser les PNG sans perte de qualité, mais aussi les JPEG.

Il vous suffit de glisser votre image et, hop, magie, en quelques secondes seulement, votre image est compressée et prête à télécharger avec l’indication du pourcentage de poids gagné.

Avec TinyPng, pas de limite journalière, la seule limitation est le maximum de téléchargement de 20 images de 5 Mo chacune en même temps.

Optimiser les images sur votre site

Une fois tout ceci fait, on passe à la dernière optimisation des images.

Oui, après avoir enfin téléversé vos images dans les médias de WordPress, vous pouvez encore réduire leur temps de chargement.

Il s’agit de l’optimisation “on site”.

Voyons comment…

En activant le lazy loading

Le lazy loading, kezako ?

Il s’agit tout simplement du chargement différé des images.

Les images ne seront donc pas chargées automatiquement à l’ouverture de la page, mais seulement lorsqu’elles apparaîtront dans le champ de vision du visiteur. Leur temps de chargement initial sera de ce fait diminué.

Il est à noter que WordPress, depuis la version 5.5, intègre nativement le lazy-loading des images, en ajoutant l’attribut HTML lazy dans les balises des images.

Mais, le gros problème est qu’il diffère toutes les images et n’exclue pas celles au-dessus du pli. 😬​

Alors, si jamais vous avez un plugin qui fait le job mieux que WordPress, pensez à désactiver le lazy-loading de WordPress.

Il suffit pour cela d’inclure ce morceau de code dans le fichier functions.php de votre thème enfant :

add_filter( 'wp_lazy_loading_enabled', '__return_false' );

⚠️​​ Depuis la version 5.9 de WordPress, il vous faudra ajouter un autre code pour désactiver le lazy loading pour les images en avant.

En les convertissant au format WebP

Le format WebP, quant à lui, est une création de Google dans le but de remplacer les différents formats d’images existants tout en les compressant.

Selon Google, les images sans perte WebP sont 26% plus petites que les images PNG et celles avec perte, 25 à 34% plus petites que les images JPEG .

Point positif, les images animées et la transparence sont prises en charge. Par contre, le gros problème est que tous les navigateurs ne lisent pas encore ce format.

Il vous faudra donc servir les images WebP aux navigateurs qui les supportent et des PNG ou JPEG aux autres. Mais, ne vous inquiétez pas, des plugins comme Optimole, dont je me sers, le font automatiquement.

En les servant via un CDN

Les images font partie du contenu statique d’un site, tout comme les fichiers CSS et Javascript.

Par conséquent, un autre moyen d’optimisation est de les mettre en cache et de les servir via un CDN (Content Delivery Network).

Souvent, on lit que les CDN ne sont destinés qu’à de gros sites. Mais, si vous avez beaucoup d’images, il peut être intéressant de vous tourner vers cette solution. Ainsi, votre serveur sera allégé et son temps de réponse amélioré.

Un autre point positif en faveur des CDN dédiés aux images est qu’ils peuvent en automatiser le recadrage, le rognage et même le redimensionnement afin qu’elles correspondent à la taille demandée.

Pour info, Optimole gère aussi cela. 😉​

Optimiser les images ce n’est pas si compliqué 😉

Voilà, je vous ai expliqué ma manière de procéder.

Maintenant, à vous de jouer afin d’avoir des images optimisées qui ralentissent le moins possible l’affichage de vos pages.

Dans de prochains articles, je ferai le tour des outils que j’utilise pour arriver à mes fins : CDN, mise en cache, éditeurs d’images,…

Utilisez-vous déjà toutes ces techniques ou les découvrez-vous ? Racontez-moi tout…