Comment optimiser les images web ?

optimisation images
Partagez !

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 :

1 🖼️ Choisir le format d’image adapté,

2 📏 Opter pour la bonne taille d’image,

3 🔨 Compresser les images avant import,

4 ⚙️ 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.

Statistiques d'utilisation des formats de fichiers image pour les 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 :

  • Captures d’écran de tutoriel
  • Bannières
  • Infographies
  • Logos
  • Icônes
  • Dessins & graphiques

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, leur utilisation est optimale pour :

  • 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.

Il sera idéal pour les petites icônes, les bannières, mais aussi dans vos articles de blogs.

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

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 trouver des images SVG sur le web, mais également les intégrer via leur code dans votre site.

Pour toutes ces raisons, vous pouvez l’utiliser idéalement pour les logos, icônes et illustrations.

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. Il vous faudra donc, passer par l’extension Yoast SEO ou 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.

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 suffit plus que de les recadrer ou les mettre à l’échelle dans Paint ou un autre logiciel d’édition d’images.

Faites quand même 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, sincèrement, 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…enfin bref…

Il faut savoir 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 5Mo chacune en même temps.

TinyPng pourcentage compression

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 donc diminué.

Bon, 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-loadind du core 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’ );

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. D’autant plus qu’il est facile de trouver des CDN gratuits pour les images.

En effet, la charge sera moins lourde pour votre serveur et son temps de réponse sera amélioré.

Et… Cerise sur le gâteau, la plupart de ces CDN dédiés aux images peuvent automatiser le recadrage, le rognage et même le redimensionnement afin que ces dernières correspondent à la taille demandée.

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

Le mot de la fin

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…


Partagez !
Hello, moi, c'est Christine 👋. Je suis créatrice et optimisatrice de sites Web et rédactrice Web SEO. J’adore parcourir le web pour dénicher des astuces, fonctionnalités et outils gratuits qui facilitent la création numérique. Sur ce blog, je vous partage mes découvertes et espère qu’elles pourront vous être utiles.
0 0 votes
Évaluation de l'article
S’abonner
Notifier de
guest
0 Commentaires
Commentaires en ligne
Afficher tous les commentaires
Retour en haut
0
J'aimerai bien avoir votre avis sur cet article 😉x