Comment optimiser les images d’un site WordPress

Google déteste les sites web lents. Et les images sont souvent à l’origine de cette lenteur. Heureusement, il existe de bonnes pratiques à adopter pour réduire la taille des images et améliorer la performance de votre site web en réduisant le temps de chargement. Voyons donc ma todo list pour optimiser les images d’un site WordPress.

Que veut dire optimiser les images ?

Plus un image est grand en terme de taille de fichier (mesuré en octets), plus il sera lent à transférer sur Internet. L’optimisation consiste à réduire la taille d’un fichier d’image au maximum possible sans affecter visuellement sa qualité.

Les avantages de l’optimisation d’images

En effet, posons nous deux secondes. Pourquoi s’emmerder à vouloir optimiser ses images sur le web ? Car oui, optimiser les images d’un site Internet n’est pas une mince affaire. Ceci peut impliquer des ressources et des coûts, conséquent ou pas, selon la taille du site et la manière dont l’optimisation est faite.

D’après le site HTTP Archive, les images représentent en moyenne 56% de la taille totale d’une page web en 2021, en excluant les vidéos qui, évidemment, n’entre en jeu que sur des cas de pages spécifiques. C’est donc une pierre angulaire de la consommation de trafic sur Internet après les vidéos.

Vous avez définitivement du pain sur la planche si vos dépassez ces 56%. Et quand bien même vous êtes proches, grapiller quelques octets ne fera que vous mettre en position avantageuse pour le SEO.

J’ai donc énuméré pour vous quelques avantages obtenus grâce à l’optimisation d’image :

• Ceci améliore efficacement le temps de chargement de vos pages web et évitent ainsi vos visiteurs voire les bots de Google de se lacer et annuler le chargement de la page.
• Les moteurs de recherches apprécient les pages rapides et donc ceci améliore votre référencement SEO.
• La taille des images stockés sur votre serveur sont réduits et ainsi l’espace disque utilisé par votre site est plus petite, la création de backup devient plus rapide et vous risquez moins de saturer la bande passante (notamment si vous êtes sur une formule d’hébergement web mutualisé).

Les méthodes pour optimiser les images pour le web

Il n’existe pas 36 solutions : il faut savoir trouver un compromis entre une image de qualité et une taille de fichiers raisonnable. La méthode restera toujours sur la compression d’image, mais il sera nécessaire de définir le type de compression et le seuil d’efficacité.

Déjà, il y a différents formats d’images qui proposent alors des types de compressions différentes :

• Les images au format JPEG (extension de fichier .jpg ou .jpeg) : ceux-ci proposent des compressions d’images lossy, c’est-à-dire des compressions à perte.
• Les images au format PNG (extension de fichier .png) : ceux-ci proposent principalement des compressions d’images lossless, c’est-à-dire des compressions sans perte. Toutefois, les images de ce format pourraient aussi être en compression lossy. Tout dépend de la configuration du logiciel d’édition au moment de sauvegarder le fichier.
• Les images vectorielles .SVG : contrairement aux images traditionnelles fait de matrices de pixels, les images vectorielles indiquent des tracés. Ceci permet, par exemple, d’indiquer un carré de 1000 pixels x 1000 pixels sans devoir indiquer tous les pixels concernés, il suffira d’indiquer 4 points (donc 4 pixels), indiquer s’ils se relient, et indiquer le couleur de bordure et de remplissage.

Choisir la bonne taille d’image

Avant de s’attaquer aux algorithmes de compression, posez-vous déjà la question à chaque fois que vous ajoutez une image sur votre site : à quel taille, au maximum, cette image sera affichée ? Inutile d’envoyer une image de 4000 x 2000 pixels si finalement elle ne sera affichée qu’à 400 x 200 pixels.

Naturellement, il existe dans WordPress le mécanisme de miniatures qui fait que WordPress redimensionne automatiquement les images durant le téléversement (upload) en se référant aux tailles indiqués par le thème actif. Toujours est-il que certains thèmes mal développés mentionnent vouloir utiliser une image de 1000 x 500 pixels, alors qu’ils les affichent sur une zone de 500 x 250 pixels.

Si nécessaire, faites modifier votre thème par un développeur WordPress pour ajouter les tailles d’images adéquates sur le fichier functions.php et ensuite les utiliser au bon endroit.

Utiliser le bon format d’image

Une fois les images à la bonne taille, triez-les pour cibler les deux formats de compression :

• Les photos, images à forte variations de couleurs et images à forte résolution seront au format .JPEG. La perte de qualité dû à la compression est généralement très peu visible sur ces types d’images.
• Les assets, boutons, logos et autres éléments du thème devront être au format .PNG voire .SVG.

Optimiser le ratio de compression des formats

Une fois les images mis au bon format, vous pouvez utiliser des outils automatisés comme jpegoptim ou optipng pour calculer le bon ratio de compression (maximum de compression, très peu de perte de qualité voire aucun).

L’installation se fait depuis la console SSH en root sur votre serveur dédié VPS. Pour Debian/Ubuntu :

apt-get install jpegoptim optipng

Pour CentOS/AlmaLinux et autres dérivés de Red Hat :

yum install jpegoptim optipng

Une fois installé, vous pouvez lancer un optimisation massif des fichiers. En supposant que vos fichiers images se trouvent dans /home/monsite/public_html/wp-content/uploads :

find /home/monsite/public_html/wp-content/uploads -name "*.jpg" -exec jpegoptim {} \;
find /home/monsite/public_html/wp-content/uploads -name "*.jpeg" -exec jpegoptim {} \;
find /home/monsite/public_html/wp-content/uploads -name "*.png" -exec optipng {} \;

Optimiser les images avec un plugin WordPress

Si malheureusement vous n’avez pas accès SSh sur votre serveur ou si vous êtes sur une formule dépourvu de cette fonctionnalité (notamment les formules mutualisés), il vous est toutefois possible d’optimiser vos images avec un plugin WordPress.

Je vous rappelle toutefois que ce type d’opération effectue énormément de calcul et donc consomme énormément de CPU. La lecture et écriture des images pourrait aussi engendrer une forte hausse d’opérations disques. Je vous recommande par conséquent d’effectuer cela quand vous aurez le moins de visiteurs. Votre hébergeur pourrait également couper systématiquement les longues opérations et/ou les opérations lourdes en CPU trop persistante, notamment sur les formules mutualisés et peut-être aussi sur certains formules VPS. Renseignez-vous sur les Conditions Générales d’Utilisation et de Vente (CGUV) et demandez éventuellement au support leurs recommandations vis-à-vis de cela.

Mais surtout, évitez de faire des optimisations de masse avec un plugin, ou pire, effectuer des optimisations à la volée (optimisation faite uniquement quand un visiteur accède à l’image). Optez plutôt une optimisation durant le téléversement.

L’optimisation à la volée peut augmenter considérablement votre TTFB et ainsi ralentir le chargement de l’image. Oui la taille est petite, mais votre site prend plus de temps à le fournir au visiteur.

L’optimisation de masse pourrait saturer votre formule d’hébergement ou votre serveur durant l’opération et ainsi causer des problèmes de lenteurs voire d’inaccessibilité. Si elle est initié par PHP au moyen d’un plugin WordPress, le headroom en ressources augmente car PHP lui-même consomme beaucoup plus pour initier l’opération.

Vous voilà maintenant prévenu, je vous propose donc l’outil reSmush.it qui me semble fournir le meilleur compromis. Ce plugin WordPress :

• Effectue les optimisations au téléversement.
• Effectue l’optimisation des images marqués non optimisés au compte goutte (grâce aux crons jobs). Ceci vous permet d’écouler petit à petit la liste d’image à optimiser sans pour autant risquer de saturer votre serveur.
• Aucune optimisation à la volée n’est faite, l’image, une fois optimisée, est gardée en stockage, par conséquent le TTFB n’augmente pas.

Conclusion

L’optimisation d’image avec WordPress n’est pas une mince affaire. Des optimisations mal faites pourrait, au mieux ne pas améliorer votre situation, et au pire dégrader vos performances. Procédez toujours avec prudence.