Diffusez des images aux formats nouvelle génération

Diffusez des images aux formats nouvelle génération est ce qui est fréquemment affiché en premier dans les résultats renvoyés par l’outil gratuit de Google qu’est PageSpeed Insights. Aussi appelé PSI. Un message parfois affiché sans doute parfois un peu trop alors qu’une page web est déjà super optimisée avec des notes à 100 ou supérieures à 95. Ce qui est évidemment honorable et appréciable.

Mais alors pourquoi ce message et faut-il absolument en tenir compte ? Quels formats d’image utiliser ?

PageSpeed Insights ses notes et recommandations

Prenons les choses par le début. Quand on teste une page sur PageSpeed Insights, les résultats qu’il donne n’ont pas une valeur universelle. Ce qui ne signifie pas qu’il ne faut pas en tenir compte, l’outil est en effet puissant et assez fiable. Mais il s’agit d’un outil qui teste une page à un instant T. Il faut donc remettre les choses à leur place et ne pas ne mettre à angoisser quand un message apparaît avec la petite icône orange à gauche. Et puisqu’il faut aussi parfois relativiser, prenons les résultats pour ce qu’ils sont :

-> à savoir des recommandations et pas des injonctions 🙂 !

Le message Diffusez des images aux formats nouvelle génération

Ce message est fréquemment affiché. Même quand vous avez une page avec une seule image ou photo. Et même si cette image est très très légère (moins de 25 ko par exemple). Mais si elle est au format JPG ou PNG, vous aurez presque à chaque résultat de test sur PSI, le fameux message : « Diffusez des images aux formats nouvelle génération » :

C’est là qu’il faut bien comprendre la différence entre « optimiser » et vouloir aller trop loin en répondant absolument par une action aux messages affichés par l’outil.

Pourquoi ? La note de la page testée pour cet article et illustrer le fait que l’optimisation ne doit pas être systématique après un test sur PSI, est de 100 pour les performances. Donc oui, je peux pousser encore le bouchon et mettre du WEBP à la place du JPG pour la photo concernée. Mais puisque la page est déjà à 100 en performances, est-ce vraiment obligatoire ? J’ai pris le partie de penser que non.

La page testée pour l’exemple et sa note :

Les photos concernées par le message (la recommandation donc) de PSI font :

• 26 kb
• 12 kb
• 19 kb

L’outil me recommande de changer leur format JPG et PNG vers WEBP ou AVIF pour obtenir ces tailles :

• 10, kb
• 8,6 kb
• 8 kb

Est-ce que j’applique la recommandation pour un si petit gain ? Non. Car j’ai plusieurs images par articles et déjà aujourd’hui après 10 ans pour Yes We Blog, environ 750 articles. Donc quand j’ai des performances à 100 sur une page, je préfère m’occuper d’autres pages moins bonnes que d’optimiser à se rendre malade des pages plutôt pas trop mal notées 🙂 Ou, au pire : je me garde cette mini optimisation pour un jour où j’aurais beaucoup de temps devant moi ! 😀

La recommandation de conversion vers WebP ou Avif

Oui les deux formats WebP et Avif sont très intéressants pour les images et alléger le poids total d’une page web/d’un article. Toutefois, ce n’est pas systématique.

Des outils comme Tinify (aka TinyPNG) permettent souvent de le vérifier. Prenons l’image suivante en PNG que j’envoie sur l’outil pour la rendre plus légère et voir le résultat de l’allègement pour 3 formats :

Résultats pour la première image PNG :

• Le JPG optimisé est à 42kb. Le PNG optimisé est à 15KB. Le webp optimisé est à 21kb. Ma foi, je ne vais pas suivre la recommandation de PSI puisque c’est le PNG le plus léger 🙂
• Le webp n’est donc pas le format ultime dans tous les cas

Résultats pour la seconde image PNG envoyée en optimisation via Tiny PNG :

• Le JPG optimisé est à 33kb. Le png à 37kb. Le webp offre un gain de 78% et est à 20kb. Je prends donc cette fois le format webp.
• Cette fois, PSI aurait eu raison. Ceci dit, un delta de 17 kb reste négligeable.

On voit là qu’une recommandation n’est pas toujours à suivre à la lettre 🙂 Bien qu’elle soit envoyée par un outil de dingue comme Pagespeed Insights.

Faut-il suivre la recommandation et mettre imagify ou performance lab ?

Libre à vous d’utiliser Imagify ou performance Lab. Replaçons là encore les choses à leur place :

Imagify et Performance LAB sont deux plugins WordPress.

Imagify

Imagify est un plugin d’optimisation d’images sur WordPress. Gratuit dans une partie mais dès que vous aurez dépassé un quota d’optimisation, l’outil arrêtera de traiter vos images et photos. Auquel cas soit vous payez une des 2 offres premium (infinite ou Growth), soit vous devrez attendre le mois suivant pour que d’autres images déjà en place sur votre site soient traitées. Pour la petite histoire, Imagify appartient à la même société qui propose le plugin de cache WP Rocket (un super produit au demeurant).

Bref, la recommandation de PSI n’est pas gratuite ou très peu, vous l’aurez compris. Il faut donc avoir les moyens de s’offrir les services du plugin premium ou se dire que l’optimisation prendra du temps (donc plusieurs mois ou + ). 🙂

Performance lab

Autre plugin WordPress, gratuit cette fois, Performance Lab vous permettra d’optimiser vos images. Plus accessible bien qu’en anglais, pour ce qui est du webp, voici ce qui sera proposé sur votre installation WP si vous activez l’option de création d’une version Webp de vos images :

« Generate JPEG files in addition to WebP : Enabling JPEG in addition to WebP can improve compatibility, but will effectively double the filesystem storage use of your images. »

-> Aussi, il faut bien comprendre que le plugin va non pas changer vos images de JPG ou PNG vers WebP mais créer une seconde version de ces images vers Webp, quand c’est possible. Et que donc, cela prendra + de place sur votre hébergement web. Alors non ce n’est pas parfait si vous avez peu de place. Mais c’est gratuit et vous gardez les versions originales de vos images (non négligeable si vous désactivez et désinstallez plus tard Perforamance Lab pour un autre plugin ou rien).

Faut-il les installer ?

Si vous optimisez déjà vos images et photos avant de les téléverser sur votre site web (WordPress en l’occurrence) et que vous avez au moins 90 en résultats renvoyés par PSI pour les performances (1ère note à gauche), non, pas besoin. Si en revanche vous avez un site web qui existe depuis des années avec des notes sous 90 pour les perfs et beaucoup de messages de PSI pour les images (format, mais aussi dimensions/tailles…), oui, installez un plugin pour vous aider.

En revanche, vous n’êtes pas obligé(e)s du tout de prendre Imagify ou performance Lab. Ce sont des recommandations, pas des injonctions. Il existe de nombreux plugins d’optimisation d’images sur WordPress, dont beaucoup sont fulls gratuits (certains même open source).

Conclusion : Il faut faire des recherches et tester ce qui conviendra le plus à votre situation et la situation de votre site web.

Faut-il traiter le message de format d’image avec le message sur les dimensions ?

Idéalement oui. Si vous partez dans une optique d’optimiser des images, c’est en les optimisant pour un critère que vous traiterez potentiellement l’autre critère.

Quel critère traiter en premier entre format et taille ?

Votre image fait 5000×3000 pixels en JPG ? Alors traitez d’abord les dimensions 🙂 Inutile de mettre sur votre site une image aussi grande quand on sait que la moitié des navigations se font sur mobile avec petit écran ! Réduisez réduisez les dimensions. Cela diminuera la taille/poids.

Ensuite seulement, comparez la taille/poids de l’image par exemple avec Tinify pour voir quel format vous amène le plus de gain sans perdre en qualité (important pour le JPG).