EWWW Image Optimizer, le plugin pour alléger vos images sur WordPress

On en parle souvent sur WP Formation, le poids d’une page web est en grande partie liée aux images présentent. Et lorsque ces images ne sont pas optimisées pour alléger leur poids, alors cela peut vite virer à la catastrophe.

Une page lourde, c’est une page lente à charger et en 2022, même si les connexions sont toujours plus rapides, les utilisateurs sont toujours plus impatients. Il faut donc qu’un site web se charge vite pour ne pas perdre le lecteur avant même qu’il ait commencé à vous lire !

Il existe de nombreuses solutions dans le répertoire de plugins WordPress pour s’occuper d’optimiser vos images pour vous. On pense bien sûr à Imagify, ShortPixel etc. Aujourd’hui on vous parle du plugin EWWW Image Optimizer, l’un des poids lourds de l’optimisation qui rend vos images légères sur WordPress.

EWWW Image Optimizer (gratuit)

Le plugin EWWW Image Optimizer est une extension développée par Shane Bishop qui s’est spécialisé depuis 2012 dans le développement de solutions pour optimiser les images sur WordPress. 10 ans d’expérience donc derrière ce plugin qui s’est petit à petit fait une réputation jusqu’à devenir, avec ses plus d’un million de téléchargements, LE plugin d’optimisation d’images le plus populaire dans le répertoire des extensions WordPress.

EWWW Image Optimizer (gratuit) en résumé

• Lancé en 2012
• Plugin régulièrement mis à jour
• +1 million installations
• Note 4,5/5

Les principales fonctionnalités de EWWW Image Optimizer (gratuit)

• Redimensionner les images au téléchargement
• Optimiser en masse les images déjà existantes
• Lazy Loading
• Conversion images WebP
• Ajout des attributs de largeur/hauteur
• Mise en l’échelle automatique (srcset)
• Désactiver la création de certaines tailles d’image

Installer EWWW Image Optimizer (gratuit)

Pour installer EWWW Image Optimizer, comme pour tous les plugins recensés dans le répertoire des extensions WordPress deux options s’offrent à vous :

Depuis l’administration WordPress

• Rendez-vous dans l’onglet “Extensions”
• Cliquez sur le bouton “Ajouter”
• Tapez “EWWW” dans le répertoire des extensions
• Cliquez “Installer maintenant” sur l’extension EWWW Image Optimizer
• Activez l’extension

Une autre possibilité :

• Rendez-vous sur la page WordPress du plugin EWWW Image Optimizer
• Cliquez sur le bouton “Télécharger”
• Retournez dans l’administration WordPress
• Rendez-vous dans l’onglet “Extensions”
• Cliquez sur le bouton “Ajouter”
• Cliquez sur le bouton “Téléverser une extension”
• Uploadez le fichier ZIP EWWW Image Optimizer
• Activez l’extension

Depuis un serveur FTP

• Rendez-vous sur la page WordPress du plugin EWWW Image Optimizer
• Cliquez sur le bouton “Télécharger”
• Dézippez le fichier téléchargé
• Ouvrez votre logiciel FTP préféré (exemple : Filezilla)
• Connectez vous à votre espace FTP
• Placez le dossier EWWW Image Optimizer dans le dossier FTP /wp-content/plugins

Le plugin est prêt à l’emploi et peut être utilisé en laissant les réglages par défaut dès son installation. Cela dit il est possible de configurer les réglages généraux du plugin et nous allons voir comment s’y prendre.

Réglages en mode simple du plugin EWWW Image Optimizer (gratuit)

Il existe deux “modes” de réglages dans le plugin EWWW : le mode simple et le mode avancé. Le mode simple pourra suffire à la plupart d’entre vous. Le mode avancé propose quelques réglages supplémentaires. Voyons ensemble quels sont les réglages disponibles dans le plugin EWWW.

Pour ouvrir les réglages du plugin EWWW, direction l’onglet “Réglages > EWWW Image Optimizer”. Sur cette fenêtre on retrouve les réglages en “mode simple”.

Mode

Activer le mode simple ou avancé

Version

Activer la version payante ou rester sur le plugin gratuit

Métadonnées

Retirer les métadonnées de vos images (les EXIFS de votre appareil photo)

Redimensionner les images

Permets de définir la taille maximum de vos images au téléchargement. Ainsi si vous téléchargez des images plus grandes que ce format, elles seront réduites à la taille voulue.

Chargement différé

C’est le fameux Lazyloading des images qui permet de ne charger les images qu’au moment où elles sont affichées et donc gagner en temps de chargement de la page.

Conversion WebP

Permets d’afficher les images au format WebP, un format de nouvelle génération qui permet de réduire la taille du fichier de l’image tout en gardant une bonne qualité de rendu.

Chargement différé en détail

Lorsque vous allez cliquer sur la case “Chargement différé”, de nouveaux réglages vont apparaitre dont voici les spécificités.

Mise à l’échelle automatique

Par défaut, la mise à l’échelle automatique est activée, ce qui est recommandé de laisser tel quel. Cela permet d’ajouter les informations balises responvise (srcset) qui permettront de dire aux navigateurs à quelle taille il est préférable d’afficher l’image et donc de gagner là aussi du poids et du temps de chargement en n’affichant pas l’image à plein format lorsque ce n’est pas nécessaire.

LQIP

LQIP pour “Low Quality Image placeholders”, c’est à dire “Emplacement d’image de basse qualité”. En cochant cette option, les images seront d’abord affichées en basse résolution avant de s’afficher correctement. Là encore c’est une option qui permet de gagner un peu en temps de chargement et surtout de ne pas offrir une case blanche à la place de l’image le temps que le Lazy Loading affiche l’image.

C’est au choix, vous pouvez décider ou non d’activer cette option.

Images d’arrière-plan externe

Par défaut, le lazy loading n’est pas appliqué aux images d’arrière-plan qui sont le plus souvent des images insérées via du code CSS. Cette option permet de pointer ces images grâce à des classes CSS spécifiques, qui seront alors incluses dans le processus de chargement différé des images.

Exclusion

Comme son nom l’indique, cette option permet de renseigner des URLS ou des classes CSS afin de les exclure du Lazy Loading. Cela peut être conseillé de ne pas différer le chargement de l’image à la une de vos articles par exemple.

Conversion WebP en détail

Là aussi, vous verrez que si vous activez l’option “Conversion WebP”, de nouveaux réglages vont apparaitre.

Le plugin vous propose d’insérer des règles d’écriture qui vont permettre d’afficher les versions WebP de vos images lorsque nécessaire. Ces règles vont être ajoutées automatiquement à votre fichier htaccess.

Pour ce faire, il suffit de cliquer sur le bouton “Insérer des règles d’écriture” puis de cliquer sur le bouton “Enregistrer”. Si tout va bien l’image rouge PNG doit devenir une image verte WEBP. Cela signifie que les règles ont bien été appliquées.

Attention, pour pouvoir afficher vos images en WebP il faut bien sûr que vos images aient une version WebP. Activer cette option permettra de créer automatiquement une version WebP de vos images au téléchargement. Mais pour les images existantes, il faudra les créer à la main. Heureusement l’optimiseur en masse est là pour ça ! On verra ça plus tard.

Deux options additionnelles sont disponibles pour contourner la réécriture via Htacess.

Réécriture JS WebP

Cette option permet d’utiliser un script pour diffuser les images au format WebP.

Réécriture Picture WebP

Cette option permet d’utiliser des balises <picture> pour diffuser les images au format WebP.

Et voilà ! C’est tout ! On a fait le tour des réglages du plugin EWWW image optimizer en mode simple. Vous avez vu que c’était très facile à configurer, quelques cases à cocher et hop ! Nos images de notre site WordPress seront optimisées.

Pour aller un peu plus loin, on peut bien sûr activer le “mode avancé. Voyons quels sont les réglages supplémentaires que nous offre ce mode.

Réglages en mode avancé du plugin EWWW Image Optimizer (gratuit)

Lorsque vous cliquez que “activer le mode avancé”, une série de nouveaux onglets vont s’afficher avec de nouveaux réglages disponibles.

Général

On y retrouve les réglages du “mode simple” que l’on a vu plus haut.

Local

“Choisir” les modes de compressions d’image, sachant que la version gratuite du plugin n’en offre qu’une.

Avancé

Pour optimiser des dossiers autres que le dossier uploads et pour le niveau de qualité de la compression JPEG et WEBP.

Redimensionner

Pour choisir les tailles d’images à créer et à optimiser ou pas.

Conversion

Des options pour convertir certains formats comme les fichiers PNG et les fichiers GIF.

Onglet général

On va retrouver ici les mêmes réglages que ceux utilisés dans le “mode simple”.

Onglet Local

Sur cet onglet vous pourrez juste choisir si vous souhaitez compresser vos images ou non. En effet, si la version payant du plugin permet de choisir entre différents niveaux de compression, la version gratuite ne propose qu’un seul niveau d’optimisation. Vous avez donc le choix entre l’activer ou non.

Par défaut, les fichiers PDF et SVG ne sont pas optimisés.

Vous pouvez également choisir de stocker ou pas les fichiers originaux de vos images dans un dossier en “local”, c’est-à-dire sur votre serveur FTP.

Attention si vous ne gardez pas vos fichiers originaux, vos images seront optimisées sans possibilité de retour si jamais le rendu ne vous convient pas.

Onglet Avancé

L’onglet avancé permet de forcer l’optimisation de fichiers situés en dehors du dossier “uploads” traditionnellement utilisé par WordPress pour les médias. Vous pouvez renseigner un chemin de dossier qui sera scanné et optimisé grâce à une tâche planifiée.

Plus bas dans la page on retrouve des réglages intéressants et qui auront un vrai impact sur le chargement de vos pages : le niveau de qualité des images JPG et WEBP affiché. Par défaut WordPress compresse vos images, mais ici vous pouvez décider de donner une valeur encore inférieure à la compression WordPress pour gagner du poids dans vos images.

Onglet Redimensionner

L’onglet Redimensionner est un des plus intéressants des réglages avancés.

Vous le savez (ou pas), à chaque fois que vous téléchargez une image sur votre site, WordPress créé différentes versions de vos images à différents formats. Ici on va pouvoir choisir de désactiver la création de certaines tailles d’images qui ne sont que rarement utilisées et donc gagner de l’espace sur le disque dur de votre serveur. En cochant par exemple les cases pour désactiver la création des formats medium_large, ou 1536x1536 ou 2048x2048 vous empêcherez la création de ces fichiers.

Il est aussi possible d’empêcher l’optimisation de certains formats d’image.

Onglet Conversion

L’onglet conversion permet de convertir des fichiers JPG en PNG et inversement. Pour rappel, une image PNG n’a d’intérêt que si elle possède un arrière-plan transparent. Donc si vous vous êtes trompés et si vous avez téléchargé vos photos en PNG, vous pouvez ici cocher la case “Convertir PNG en JPG”.

Optimisation en masse

C’est l’outil utile par excellence. Parce que si vous décidez d’installer ce plugin et que vous avez déjà beaucoup d’images uplodées sur votre site, les réglages ne s’appliqueront qu’aux nouvelles images que vous téléchargerez. Il faut donc pouvoir traiter les images existantes. Et si vous en avez beaucoup, c’est galère.

Donc les développeurs d’EWWW ont imaginé de pouvoir optimiser les images en un clic et c’est très pratique.

• Rendez-vous dans l’onglet “Médias > Optimisation de masse”.
• Puis cliquez sur “Analyse d’images non optimisées”

• Le nombre d’images à optimiser s’affiche
• Cliquez sur “Optimiser les XXX images”

• Laissez le moteur d’optimisation travailler. Si vous avez beaucoup d’images, cela peut prendre plusieurs heures.

• Une fois l’optimisation de vos images terminées, vous pouvez aller vérifier dans votre bibliothèque de médias. Vous verrez qu’une nouvelle colonne “Optimiseur d’image” est apparue. On y retrouve les informations d’optimisation.
• Ici on pourra optimiser à la main une image non optimisée, réoptimiser une image ou convertir une image dans un autre format.

Option de restauration et de nettoyage

Pour terminer, il y a un onglet un peu caché qui est pourtant important à connaitre en cas de soucis avec ses images optimisées. Direction l’onglet “Outils > EWWW Image Optimizer” pour découvrir les options proposées.

Si l’onglet est vide ne vous inquiétez pas, le contenu de cet onglet n’apparait que si vous avez lancé l’optimisation de vos images.

Afficher les images optimisées

Un moteur de recherche dédié aux images optimisées. Utile si vous avez un doute sur une image et que vous cherchez à savoir si elle a bien été convertie par exemple.

Effacer l’historique d’optimisation

Attention, une fois l’historique effacé toutes les options de cet onglet vont disparaitre.

Restaurer les images

C’est une des options les plus importantes, car cela permet de restaurer vos images originales. Si vous constatez que la qualité du rendu de vos images après avoir été optimisées par le plugin n’est pas bonne, vous serez contents de pouvoir restaurer les images dans leur qualité originale !

Attention, cette option n’est disponible que si vous avez activé la sauvegarde locale dans l’onglet “Local” des réglages avancés du plugin (voir plus haut).

Supprimer les originaux

Si le rendu de vos images optimisées vous satisfait et que vous êtes sûr de n’avoir jamais besoin de revenir aux versions originales de vos images, alors vous pouvez supprimer les fichiers originaux. Cela permet de gagner de l’espace disque sur votre serveur FTP.

Retirer les originaux convertis

Si vous avez converti des images PNG en JPG par exemple, vous pouvez ici décider de supprimer les fichiers originaux PNG qui ne vous servent plus.

Supprimer les images WebP

Si vous décidez d’utiliser un autre moyen d’afficher vos images au format WebP, vous pouvez supprimer les versions WebP de vos images ici.

Nettoyer les dossiers d’optimisation

Nettoie les fichiers en double et les chemins supprimés. Attention, cela peut casser les liens vers des images qui seraient servies différemment.

Migrer les dossiers d’optimisation

Ne concerne que les habitués du plugin EWWW Image Optimizer qui n’auraient pas migré leurs tables de base de données.

Afficher les images réoptimisées

Un outil pour vérifier les éventuels conflits avec ces plugins qui forceraient la réoptimisation de vos images. La suroptimisation vient dégrader la qualité des images.

EWWW Image Optimizer Pro

La version PRO du plugin EWWW Image Optimizer offre une expérience d’optimisation supérieure basée notamment sur l’utilisation d’un serveur CDN qui va servir vos images à la bonne taille et au bon format.

Le plugin premium donne également accès à une meilleure granularité concernant la qualité de compression de vos images. Avec différents modes de compression vous pouvez décidez si vous préférez jouer la performance à fond en réduisant drastiquement le poids de vos images (et en baissant leur qualité) ou au contraire choisir la compression qui influera le moins possible sur le rendu de vos images.

Fonctionnalités

• 5 niveaux de compression
• Compression des fichiers PDF
• Mise à l’échelle automatique améliorée
• Format AVIF (plus rapide que WebP)
• Images en filigrane
• Livraison CDN
• Sauvegarde de 30 jours dans le cloud
• Mise en cache des pages
• Différer JS/CSS
• Minimifier JS/CSS
• Intégration de CriticalCSS.com
• Optimisation des polices Google
• Suppression des JS/CSS inutilisés

Addon

Le plugin offre également un accès à un outil d’optimisation de page (Cache, CSS et JS). Appelé SWIS, cet outil permet la mise en cache des pages, de différer les ressources JS/CSS et de contrôlez les scripts et les feuilles de style qui se chargent par page et éliminer les ressources inutilisées.

Tarif du plugin EWWW Image Optimizer Pro

Le plugin propose une tarification croissante en fonction des besoins des utilisateurs :

Licence Standard

• $7/mois
• 1 site
• CDN limité à Europe, USA, Singapour
• 200GB de bande passante

Licence Growth

• $15/mois
• 10 sites
• CDN global
• 400GB de bande passante

Licence Infinite

• $25/mois
• Nombre de sites illimités
• CDN global
• 800GB de bande passante

Conclusion

Le plugin EWWW Image Optimizer est un outil très pratique pour tous ceux qui souhaitent optimiser leurs images sur WordPress.

Le plugin offre trois outils intéressants pour réduire le poids des images et améliorer le temps de chargement de votre site web : le redimensionnement de vos images, la conversion de vos images au format de nouvelle génération WebP et le chargement en différé de vos images (Lazy Load).

Cet outil s’adresse à tous et en particulier à tous ceux qui ont lancé leur site sans penser une seule minute à la taille de leurs images. Réduire la taille des images, c’est réduire le poids de votre page et améliorer la vitesse de chargement de votre site. C’est donc faire plaisir à vos lecteurs !

Pour vérifier si le plugin EWWW Image Optimizer améliore les performances de votre site WordPress on vous conseille d’effectuer des tests avant/après sur des sites comme PageSpeed Insights, GTMetrix ou Web Page Test.