Tutoriel : Configurer EWWW Image Optimizer

EWWW Image Optimizer Ban

A l’occasion de la refonte du site, je me suis penché sur les possibilités d’optimisation que je pouvais mettre en place. L’une d’entre-elles concerne le chargement des images.
En effet, c’est certainement l’une des principales sources de ralentissement d’un site et EWWW Image Optomizer va nous permettre de réduire leurs taille de manière automatique et sans perte de qualité.

Je pars du principe que vous savez installer un plugin sur votre WordPress.
Pour une installation manuelle, le lien pour télécharger EWWW Image Optimizer vous est fournir juste au-dessus de ce texte.

Étape 1

etp1_EWWW Image Optimizer (Chez-Smash15195)Première chose à faire une fois le plugin installé, cliquez sur « Expand » dans l’encadré Plugin Status. Vous pouvez voir ce que prend en charge votre serveur.

Étape 2

On oublie l’onglet « Cloud Setting » ici on utilise le plugin en local donc direction « Basic Setting« .

  • etp2_EWWW Image Optimizer (Chez-Smash15195)Debugging | [Décochée], on touche pas
  • Remove metadata | [Cochée],  sert à nettoyer les images des métadonnées
  • Lossy JPG optimization | [Décochée], compression avec perte des JPG
  • Lossy PNG optimization | [Décochée], compression avec perte des PNG
  • Bulk Delay | [0], sert a marquer une pause entre chaque fichiers

N’oubliez pas de sauvegarder avant de passer à l’onglet suivant !

 

Étape 3

On passe à l’onglet « Advanced Settings »

  • etp3_EWWW Image Optimizer (Chez-Smash15195)optipng optimization level | [Level 3], influe sur la qualité de la compression (haut level = meilleure qualité)
  • pngout optimization level | [Level 2], idem (mais ici bas level= meilleure qualité)
  • scheduled optimization | [Décochée], utile pour programmer des optimisations
  • Folder to optimize | [vide], indiquez vos dossier qui seront optimisés par la programmation
  • Skip small images | [0], pour exclure les images sous une certaine taille (en octets)
  • Skip large PNG images | [0], idem pour les grandes image en PNG (en octets)
  • Exlude full-size images… | [Décochée], pour exclure la « Taille Originale » de l’optimisation
  • Use system paths | [Décochée], utile uniquement si vous êtes sur serveur dédié
  • disable jpegtran | [Décochée], sert à désactiver jpegtran
  • disable optipng | [Décochée], sert à désactiver optipng
  • disable pngout | [Décochée], Attention ! cochée par défaut, décochez et installez-le ! (voir étape optionnelle)
  • disable gifsicle | [Décochée], sert à désactiver gifsicle

 

Étape optionnelle (fortement recommandée)

etp4_EWWW Image Optimizer (Chez-Smash15195) Par défaut, E.I.O désactive pngout. Il est conseillé de l’activer pour une meilleure efficacité du plugin.
Pour cela rien de plus simple, après avoir décoché l’option « disable pngout » et sauvegardé vos paramètres, l’encadré en haut devrait vous informer d’un problème.
Cliquez simplement sur install : automatically.

 

Étape 5

Dernière étape, établir les règles de conversion dans l’onglet « Conversion Setting ».

  • etp5_EWWW Image Optimizer (Chez-Smash15195)Hide conversion link | [Décochée], cache l’option « Optimize now! | PNG to JPG » dans « Media »
  • Delete originals | [Cochée], supprime l’image originale après la conversion
  • JPG/PNG to WebP | [Décochée], autorise la conversion (manuelle) des JPG/PNG vers WebP
  • enable JPG to PNG conversion | [Décochée], autorise la conversion (manuelle) des JPG vers PNG
  • enable PNG to JPG conversion | [Décochée], autorise la conversion (manuelle) des PNG vers JPG
  • enable GIF to PNG conversion |[Cochée], autorise la conversion (manuelle) des GIF vers PNG

 

Utilisation

Je vous propose un petit tour rapide du propriétaire en deux étapes pour savoir comment fonctionne votre nouveau plugin fraichement installé.

Tout d’abord, sachez que toutes les images nouvellement uploadés seront automatiquement converties (comprendre : compressées). Voilà pour l’étape 1 .

La seconde manière de convertir vos images et de passer par la section « Media » de votre WordPress.

etp6bis_EWWW Image Optimizer (Chez-Smash15195)Rendez-vous dans cette section et choisissez l’affichage en liste. Vous pouvez voir une option « Optimize Now ».
Mais faire les images une par une c’est franchement galère. Deux options s’offre alors à vous.

1) Cocher les images et faire « Bulk Optimize » dans « Actions Groupées ».
etp6_EWWW Image Optimizer (Chez-Smash15195)2) Vous rendre dans le sous-menu « Bulk Optimize » de votre section « Media » pour optimiser toutes vos images d’un coup (nota : c’est suicidaire si vous avez des centaines d’images)

etp6ter_EWWW Image Optimizer 2 (Chez-Smash15195)Voilà ! vous pouvez admirer dans la liste de vos médias le gain en %  obtenu par rapport à votre image originale et cela sans perte de qualité.

 

Avertissement

L’utilisation de ce plugin n’est pas anodine sur la charge qu’aura à supporter le serveur qui vous héberge.Vous pourriez recevoir un mail de votre hébergeur parce que votre site demande trop de ressource (ce serait quand même étonnant).
Qui dit conversion/compression, dit calcul coté serveur. Donc ne soyez pas étonné que l’upload de vos images prenne plus longtemps car ces dernières sont converties ‘à la volée’ par le serveur.

Share

Smash15195

Joueur et passionné de technologie. Je m'adonne à toutes sorte de choses à base de bits. Ma citation préférée : "Il ne faut pas se fier aux apparences. Beaucoup de gens n'ont pas l'air aussi bêtes qu'ils ne le sont réellement".