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".

  • Y’a Bmz

    Bonjour je voudrai plus d’informations concernant le nettoyage des images et de leurs métadonnées. Ceci signifie-t-il que les textes alternatifs (qui servent au référencement sur Google Image) seront supprimés ? Merci d’avance :)

    • Smash15195

      Bonjour,

      Si vous cochez l’option, cela supprimera toutes les données qui ne concerne pas l’image du fichier. Cela inclus les commentaires, les EXIF data, les infos copyright, miniature Photoshop etc.

      • Y’a Bmz

        D’accord, donc si je comprends bien les méta ne seront pas touchées. C’est nécessaire pour mon site internet, je réalise 20% de mon audience avec le référencement de Google Images ! Merci de la réponse, je m’en vais cocher tout cela 😉

        • Smash15195

          Au contraire, toutes les métadonnées de l’image seront supprimées.

          • Bonjour,

            Merci pour ce tutoriel.

            L’option supprime les métadonnées mais pas les informations mises dans les champs Titre, Description, Texte Alternatif, voir Légende.

  • Bonjour,
    j’essaye d’installer le plugin sur un site d’une personne, mais j’ai une page blanche quand je veux faire installer pngout, si je dois l’installer manuellement, comment faire?

    Merci

    • Smash15195

      Je connais pas de manière de le faire manuellement mais vous pouvez toujours essayer de mettre les fichiers de l’archives disponible sur le lien dans votre dossier ewww (wp-content/ewww/).

      Nota: Il faut mettre les fichiers uniquement, pas le dossier.

      https://mega.nz/#!UFtXnbZI!oAqefQLhtsrRb2BZVMn83IU0_VQnPrBnuwMursIUGzQ

      • Smash15195

        Il faut cliquer sur « télécharger via le navigateur » si vous n’avez pas de compte Mega.

        • Bonjour,
          j’ai comparé les fichiers présents sur mon FTP avec celui de la personne que j’essaye d’aider, la seule différence est un seul fichier , que j’ai envoyé par FTP.
          Je n’ai pas osé décoché pour voir si cela fonctionne

  • Pingback: Meilleurs plugins WordPress : les Gratuits et Indispensables()