Actualité web K-LYA

Comment optimiser une image WordPress ?

D’ici 2021, les mobiles devraient atteindre 61% du trafic internet mondial. Or beaucoup de sites n’ont pas encore optimisé toutes leurs images pour ce type de navigation. Si on n’applique pas les différentes techniques qu’ils existent, on s’expose à une vitesse de chargement de son site trop long. Ceci est très impactant pour le référencement naturel (les sites figurant sur la première page des SERPs Google ont une vitesse de chargement inférieur à 2 s) et le taux de conversion. En effet, 40% des internautes abandonnent un site web si le chargement prend plus de 3 secondes.

Il paraît donc essentiel d’optimiser son site web. D’ailleurs les contenus qui pèsent le plus sur la vitesse de chargement de son site, ce sont les médias (images, vidéos) qui représentent en moyenne 2/3 du poids total de la page. C’est pourquoi je vous propose de vous présenter les différentes solutions pour optimiser vos images WordPress.

optimiser-image-wordpress

1- Réduire la taille ses images :

Le premier élément pour optimiser ses images c’est de réduire la taille. En effet, prenons l’exemple de photos provenant de vos mobiles ou bibliothèque d’images (libres de droit), elles sont souvent très grandes comme par exemple : 3648 x5472 pixels. Ceci alourdit considérablement le poids. Il faut alors redimensionner à la bonne taille. Certains me diront quelle est la taille la plus adaptée ? Pour cela vous devez voir la place qu’elle prenne dans votre site.

Si votre site est déjà en place utiliser l’inspecteur de Google pour voir quelle largeur maximale mettre (pour un en-tête de page : 1920 x1080 pixels). Vous pouvez faire la même chose pour ceux qui font un site avec un template. Au-delà de la taille, ce qui compte c’est de choisir le bon format de votre image. Il y en a trois principalement : JPG, PNG, GIF. Voici une infographie présentant ses différents formats :

formats-images

Pour le Web, il sera préférable de privilégier le format .jpg, sauf si vous avez besoin de la transparence, auquel cas un format .png est adapté. Le format .gif est utile pour des petits éléments (favicon…) animés ou non. Il existe aussi le nouveau format WebP qui permet de réduire considérablement le poids de vos images (j’en reparlerais plus tard). Pour l’animation on a recours aussi au svg car on peut manipuler les éléments en Javascript.

Les outils pour optimiser vos images WordPress

Afin de réduire, la taille des images vous pouvez utiliser Photoshop (logiciel Adobe), Paint (solution gratuite). Ces outils vous permettent aussi de retoucher l’image pour améliorer sa qualité (filtre : luminosité/contraste, saturation…).

Vous avez aussi la possibilité de recourir à des plugins, tel qu’ Imagify (le plus populaire), WP Smush, Imsanity…Mais pour ma part je préfère redimensionner moi-même les images avant de les télécharger. Elles seront davantage compressées par ces différents plugins.

2- Réduire le poids de ses images :

Pour optimiser les images dans WordPress, il faut les compresser pour réduire leur poids. Pour cela on peut utiliser plusieurs outils en ligne :

Ou alors on peut recourir à des plugins comme Imagify.

imagify-plugin-optimisation-image-wordpress

Ce plugin très complet créer par WP Rocket (plugin d’optimisation de chargement), permet de compresser vos images et de les encoder au format WebP. Ce nouveau format créé par Google en 2010 réduit considérablement le poids de votre site. Il est presque supporté par tous les navigateurs sauf Safari qui souhaite résister à Google. Mais pas de panique ! Imagify a tout prévue il charge les formats en .jpg, .gif ou.png pour Safari /iOS Safari et iOS Chrome.

L’optimisation des images n’est qu’une partie de l’optimisation de site. En effet, il y a d’autres critères comme compresser ses fichiers CSS et Javascript. L’intérêt d’optimiser son site c’est pour l’utilisateur, le référencement et l’impact écologique. D’ailleurs chez K-LYA nous construisons des sites internet sur-mesure, ce qui nous permet d’optimiser la vitesse de chargement considérablement.

Sources (partie chiffre sur le web) : Alioze