Compresser une image WordPress au format WebP avec EWWW

Vous venez de créer les pages de votre site. Tout est carré au pixel près. C’est le moment de voir votre réalisation en action. Vous ouvrez le navigateur. Tapez votre nom de domaine. Une page blanche s’affiche et 3 secondes passent. Puis 5, puis 10. Vous vous demandez ce qui peut bien se passer. Votre site bug ? C’est sans doute la même question que vont se poser les visiteurs. En fait, non. Votre site est simplement lent. Certainement à cause de vos images qui ralentissent le chargement de vos pages. Compresser une image WordPress au format WebP avec l’extension WordPress EWWW permet de réduire le poids de celles-ci parfois à plus de 90%. Dans cet article je vais vous indiquer un moyen de faire l’optimisation des images automatiquement dans ce nouveau format.

Que signifie compresser une image ?

Pour faire simple, une image compressée permet de réduire le poids du fichier de celle-ci en effectuant une optimisation des données qui la compose. Par exemple, en regroupant tous les pixels noirs. Ceci permet d’avoir besoin de moins d’informations nécessaires pour afficher ou stocker l’image.

Comment avoir les meilleures performances de compression d’image WordPress ?

La performance d’une compression est le résultat :

• Du choix de niveau de compression.
• De la méthode de compression ou l’encodage.
• Du format JPEG ou du format PNG de l’image.
• De la taille de l’image.
• De la complexité de l’image.
• De la qualité des images originales : une image haute résolution consomme plus de ressources.

Il y a toujours un compromis à faire entre la perte de qualité des images compressées, la taille du fichier en octets et la taille de l’image. Ça dépendra du format d’image que vous aurez choisi.

Pourquoi compresser une image WordPress?

Le poids d’une image ou d’une page correspond à l’espace de stockage nécessaire pour stocker l’information de celle-ci.

Le fait de compresser une image permet de réduire l’espace disque utilisé par l’image sur le stockage de votre hébergement.

Un deuxième avantage, c’est que vous réduisez également le poids de vos pages quand vos images sont compressées. Vous économisez de la bande passante pour le traitement d’images.

Lorsque vous allez sur un site Internet, les navigateurs web vont télécharger le contenu de la page pour l’afficher. Comme vous l’aurez compris, plus ce poids est léger, plus la vitesse de chargement de la page est rapide.

Évidemment, ce n’est pas le seul critère, mais c’est l’un des plus importants.

Sans oublier l’expérience utilisateur qui est grandement améliorée.

Comment optimiser une image ?

Il existe quelques actions simples que vous pouvez mettre en place pour préparer la compression de vos photos, de vos images ou de vos illustrations sans trop les altérer.

1 – Diminuer la taille de l’image.

Avant de compresser l’image, vous devez vous assurer d’utiliser une taille d’image qui soit adaptée à l’affichage de votre site Internet. En effet, il est inutile d’avoir une image de 2000×3000 pixels si vous affichez votre image en 200×300 pixels sur votre site. Réduire les dimensions d’une image permet de réduire également son poids. Vous pouvez le faire sur Canvas ou Crello.

Vous pouvez redimensionner les images dans la médiathèque WordPress en indiquant des dimensions ou des proportions autrement dit des formats.

Dans l’éditeur Gutenberg de WordPress vous pouvez toujours changer les tailles des images, mais ce sera uniquement pour l’affichage de vos pages web. Le format réel de l’image restera inchangé.

Personnellement, sur mon site, je construis le site normalement sans me préoccuper de la taille de l’image originale sur le web.

Une fois la page terminée, je fais un clic droit, puis inspecter pour survoler les images et connaître leurs dimensions d’affichage. Je modifie la taille ensuite dans la médiathèque directement. Si vous avez utilisé plusieurs fois la même image avec des tailles différentes pour l’afficher, utilisez la taille la plus grande pour un meilleur rendu.

Ca permet d’optimiser l’espace de stockage des médias et de ne pas retourner sur la page pour remplacer l’image.

Ca prend 2 minutes.

2 – réduire la résolution de l’image

La résolution est le nombre de points par pouce d’une image. Vous pouvez réduire cette taille en utilisant des logiciels comme Photoshop par exemple. Pour les images destinées au web, 150 points sont suffisants. Vérifiez la qualité de vos images sur un écran d’ordinateur.

Comment compresser une image WordPress ?

Nous y voilà enfin. Ce que je vous propose, c’est de télécharger une extension qui va vous permettre de compresser vos images WordPress en 2 clics. Vous pouvez l’utiliser en version gratuite pour un nombre d’images illimité (du moins je n’ai jamais été bloqué). Vous n’avez pas besoin de passer par un logiciel de compression.

Cette extension se nomme EWWW image optimizer.

Ce plugin permet de compresser vos images au format de nouvelle génération. C’est-à-dire le format WebP.

Un format beaucoup plus compact que le PNG ou le JPEG. Allons-y étape par étape. Si vous n’avez pas le courage de lire, vous pouvez suivre le tutoriel vidéo.

1 – télécharger et activer l’extension EWWW image optimizer

Dans l’administration de WordPress, cliquez sur ‘extension’, puis ‘ajouter’. Tapez ensuite ‘EWWW’ pour afficher l’extension. Cliquer sur ‘Installer maintenant’, puis ‘activer’.

2 – Réglage de l’extension pour compresser une image WordPress.

Vous pouvez maintenant régler l’extension. Pour ce faire, vous pouvez cliquer sur ‘modifier’ dans la liste des extensions en dessous du nom EWWW.

Ou cliquer sur ‘EWWW image optimizer’ dans les ‘outils’ de l’administration.

Le wizard s’affiche. Cliquez sur ‘Je sais ce que je fais, laissez-moi tranquille !’.

3 – Réglages de l’onglet « général’

Avant d’utiliser l’extension, on doit faire quelques réglages rapides.

• Chargement différé : cocher la case. Ca permet d’améliorer le temps de chargement réel et perçu en chargeant les images uniquement si elles apparaissent dans la fenêtre d’affichage. Au fur et à mesure du scroll.
• Conversion WebP : cocher la case. Ça converti les images au format de nouvelle génération pour les navigateurs pris en charge.
• Méthode de diffusion WebP : Cliquer sur ‘insérer les règles de réécriture’. Ça va créer la redirection de l’URL de l’image vers l’URL de l’image WebP dans le fichier .HTACCESS de WordPress.
• Réécriture JS WebP : cocher la case. L’extension utilise JavaScript pour la diffusion de WebP dans le CDN et le cache.
• Réécriture Picture WebP : cocher la case. C’est une méthode de réécriture sans JavaScript utilisant les balises d’images.

Cliquez sur ‘enregistrer les modifications’.

Une fois l’enregistrement terminé, cochez la ligne ‘Redimensionner les images’. Ça ajoutera automatiquement les dimensions manquantes à vos images pour la structure HTML. Cliquez à nouveau sur ‘enregistrer les modifications’.

4 – Compresser une image WordPress

Maintenant que les réglages sont terminés, on peut compresser les images automatiquement.

Dans l’administration de WordPress, sélectionnez ‘Optimisation en masse’ dans l’onglet ‘Médias’.

La page permet de faire une recherche dans vos médias afin de trouver les images à optimiser.

Pour lancer la recherche, cliquez sur ‘analyse d’images non optimisées’.

À la fin de la recherche, cliquez sur ‘optimiser les X images’. Le processus est automatique.

Vos images seront en ligne, compressées en WebP.

Le taux de compression dépend de la complexité de l’image et de sa taille.

Conclusion

J’espère que cet article vous aura inspiré pour optimiser vos images sur WordPress. C’est rapide à exécuter et ça peut faire de grosses différences pour les performances de votre site. Vous pouvez maintenant les utiliser dans votre contenu et même créer des zones cliquables pour les rendre interactive si vous le voulez avec une extension WordPress.