Image en avant Convertir en Webp

WordPress Webp : Les pages de votre site Web mettent un temps fou à se charger? 

Vos images sont trop volumineuses?

Vous souhaiteriez les réduire mais craignez de trop perdre en qualité. 

 

En ce cas le format WebP semble fait pour vous, car il allie une diminution de poids avérée et une conservation de la qualité. Alors comment convertir vos images au format WebP sans vous ruiner, et même gratuitement ? Voyons cela dans cet article.

Deux mots sur les formats d’image les plus courants, le JPEG et le PNG.

1) JPEG

Le format JPG ou JPEG est le format préféré des photographes car, bénéficiant d’une profondeur de couleur de 24 bits, il autorise un panel de 16,7 Millions de couleurs.

De quoi réaliser des dégradés de couleurs impressionnants, des mosaïques splendides. Bref on peut reproduire tous les paysages et les scènes possibles.

Et malgré cela, les graphismes en JPEG sont tout de même moins lourds que dans beaucoup d’autres formats (TIFF, BMP, PSD, etc ….).

Seuls inconvénients : le mode transparent n’existe pas, et la compression des images est uniforme. C’est-à-dire que lorsque vous compressez une image en Jpeg elle le sera uniformément.

Et ce, que ce soit sur :

  • une surface blanche unie, pour laquelle on pourrait compresser beaucoup plus sans perte de qualité,
  • ou sur des zones de dégradé et/ou riches en petits détails, pour lesquelles la compression va facilement faire perdre en qualité dans le rendu des détails et du dégradé, les rendant plus grossiers.

2) PNG

Ce format gère la transparence : on peut ainsi avoir des zones transparentes dans un graphisme.

C’est le format utilisé dans les captures d’écran, ou dans le design et les images publicitaires, friandes d’arrière-plans transparents.

Il existe en 8 bits, avec alors seulement 256 couleurs, ce qui interdit les dégradés, mais est utile dans les images reproduisant du texte comme dans les captures d’écran.

Et aussi en 24 bits avec 16,7 Millions de couleurs, comme le JPEG, mais il est plus lourd que le JPEG, c’est pourquoi les photographes lui préfèrent le JPEG.

WordPress WebP : Le couple idéal ?

WebP est un format d’image de type matriciel, créé par Google.

Que faut-il en retenir ?

  • Il combine les avantages de PNG (gestion du mode transparent) et de JPEG (dégradés, richesse en détails).
  • Il peut gérer certaines animations d’images comme le format GIF.
  • Il est spécialement adapté à l’affichage sur écran.
  • Il autorise les métadonnées EXIF.
  • Il permet de gagner, selon des études de Google, de 25 à 34 % de poids de fichier par rapport à Jpeg, et 26 % environ par rapport à PNG.
  • Mais il faut noter que ce sont des données moyennes, et, dans certains cas particuliers, il permet de gagner plus.
  • Pas de perte de qualité (ou très peu).

Lors de la compression en WebP il existe une option qui permet de garder la même qualité d’image, l’option WebP Lossless.

Note : En fait il existe bel et bien une dégradation, mais imperceptible à la vision humaine.

Dans la compression avec perte (option Lossy), WebP utilise le codage prédictif, en compressant les zones moins sensibles à la compression davantage que les autres, et en spécifiant uniquement des variations de couleurs sur plusieurs zones par rapport à une zone de référence.

Bref, sans trop entrer dans les détails techniques, une compression avec perte vous fera plus gagner sur le poids du fichier qu’une compression sans perte.

Mais la qualité d’image sera mieux préservée si l’on passe par du format WebP par rapport aux autres formats.

Par ailleurs, WebP est compatible avec tous les navigateurs pour peu qu’il ne soient pas d’une version trop ancienne. Le dernier à faire de la résistance, Safari, a fini par s’y adapter.

Les méthodes pour compresser Gratuitement vos images en WebP.

Il en existe 3 principales, chacune avec ses avantages et inconvénients.

Il en existe également une quatrième, qui elle ne sera pas entièrement gratuite mais ne vous coutera que quelques euros (moins de 5€). Elle a l’avantage d’être illimitée, de vous permettre de compresser un nombre illimité d’images avec un plugin WordPress.

1) Les services de conversion en ligne, de type Convertio.

Ce sont des services Freemium, c’est-à-dire que vous avez droit à quelques conversions par jour (dix très exactement).

Vous êtes en fait très vite limité, car en écrivant un article il arrive fréquemment de dépasser cette limite.

C’est d’ailleurs le but recherché, afin de vous faire passer en version payante ($ 9.99/mois payables mensuellement ou $ 5,99/mois facturable à l’année soit environ $ 72/an).

Pour effectuer vos conversions, rendez-vous sur convertio.co

Convertio, le service pour convertir au format Webp vos images

Puis cliquez en haut sur Convertir.

Une liste apparait, cliquez sur ‘’Convertisseur d’image’’.

Choix des fichiers à convertir

A partir de là, choisissez les fichiers à convertir avec le sélecteur de fichiers.

Sélecteur de fichiers de Convertio

Vous devrez les sélectionner et les ajouter un à un, car on ne peut pas sélectionner de dossier entier.

En version gratuite, vous ne pouvez en convertir simultanément que deux. La taille de fichier maximum de 100 Mo (ce qui laisse de la marge quant à la taille).

Choix du format de fichier de sortie, à savoir le WordPress Webp

Une fois tous vos fichiers sélectionnés, vous pouvez cliquer ‘’Convertir tous les en’’.

Toute une liste de boutons affichant des formats différents apparait. Tapez ‘’webp’’ dans le champ prévu puis cliquez sur le bouton WebP.

Le bon format étant ainsi défini, il ne vous reste plus qu’à cliquer sur ‘’Convertir’’ et à attendre quelques secondes.

Note : en utilisant la version gratuite, vous n’êtes pas prioritaire et l’opération peut durer un certain temps.

Et si vous tentez d’en convertir plus de deux à la fois, voici ce qui se passe !

Limite de conversion de fichiers sur Convertio

De plus, une fois un total de dix conversions effectuées, ce panneau apparait !

Tarifs de Convertio

Alors c’est vrai c’est gratuit, mais nous sommes assez vite limités et il faut y passer du temps, ne serait-ce que pour 10 conversions.

Ce type de service ne convient donc qu’à une utilisation sporadique et limitée.

Voyons donc une solution moins limitée et contraignante.

2) XnConvert, digne serviteur du couple WordPress WebP.

XnConvert est un logiciel Gratuit, que l’on peut télécharger librement, par exemple sur Softonic, Clubic, 01net ou Commentcamarche.

C’est un logiciel qui vous permettra, outre la conversion de fichiers images (notamment en WebP), de nombreuses opérations comme le resimensionnement, l’écriture sur image, la retouche, etc …

En tout plus de 80 opérations disponibles. 

Pour le télécharger, il vous suffira de taper XnConvert dans la barre de recherche de Google et vous aurez l’embarras du choix.

Une fois téléchargé et installé, il ne vous restera plus qu’à l’ouvrir.

Son fonctionnement est simple.

XnConvert, un bon serviteur du couple WordPress Webp

Sur le premier onglet que voici, sur lequel s’ouvre le logiciel, nous allons définir la Source, c’est-à-dire les fichiers que nous allons traiter.

Vous avez le choix d’ajouter les fichiers un à un, en cliquant en bas à gauche sur le bouton ‘’Ajouter des fichiers’’. Ou bien d’ajouter tous les fichiers image contenus dans un dossier, en cliquant sur ‘’Ajouter Dossier’’.

Comme j’ai regroupé tous mes fichiers à convertir en WebP dans un dossier, je choisis la seconde option, qui est plus rapide, et clique sur ‘’Ajouter dossier’’.

Choix des fichiers d'images

Une fois arrivé au dossier en question, il ne reste plus qu’à le sélectionner.

Les fichiers en Jpeg contenus dans le dossier vont alors s’afficher, prêts à être convertis en WebP.

Fichiers d'images à convertir en WordPress Webp

Allons maintenant dans le troisième onglet, celui intitulé ‘’Sortie’’.

Onglet Convertir de Xn Convert

Commencez par sélectionner le format de fichier de sortie en cliquant sur la liste déroulante. Ici nous choisissons donc WebP.

Puis, un peu plus haut, en haut à droite, avec le sélecteur de fichier sélectionnez le dossier de réception. C’est lui qui va recevoir les fichiers une fois ceux-ci tranformés en WordPress WebP.

Choix des fichiers d'images à convertir
Format de sortie, dossier de réception, ... tout est prêt !

Parfait !

C’est terminé, il ne nous reste plus qu’à cliquer sur ‘’Convertir’’ en bas à droite.

Conversion avec Xn Convert

Et tous les nouveaux fichiers en WebP apparaissent, en moins de temps qu’il n’en faut pour le dire. Vous pouvez les retrouver dans le dossier de réception que vous venez de sélectionner.

En bas de la liste, vous pouvez voir la perte de poids des fichiers.

Nous allons d’ailleurs voir ça en détail.

Poids des fichiers avant leur conversion en WordPress Webp

Nous voyons ici que le dossier avec les images d’origine faisait 974 Ko.

Poids des fichiers après conversion
WordPress Webp : Xn Convert, le roi de la perte de poids ?

Et là, le dossier de réception, qui ne fait plus que 340 Ko.

Conclusion : il fait à peine le tiers du dossier d’origine !

Soit bien plus que les 25 à 35% annoncés.

Mais, comme je vous l’ai dit, dans certains cas on peut gagner bien plus que 35%.

Car mes captures d’écran comportaient des surfaces unies en bonne partie, qui se prêtent particulièrement bien à la compression en WebP.

Si par contre cela avait été des photos avec des dégradés non linéaires et de nombreux détails, le gain aurait alors été moindre.

Que pouvons-nous donc conclure de cette deuxième option avec XnConvert ?

Elle a l’avantage d’être à la fois simple et rapide, pour peu que vous ayez préparé un dossier source contenant tous vos fichiers à transformer, ainsi qu’un dossier de réception destiné à les accueillir une fois transformés.

Et, ce qui ne gâche rien, elle est 100 % gratuite et illimitée, personne n’ira compter ni limiter les fichiers que vous transformez.

Le rêve ....

Toutefois ne pourrait-on pas trouver encore mieux ?

Une solution qui transformerait automatiquement les images que nous intégrons à notre médiathèque WordPress en images au format WebP ?

Et, encore mieux, que cette solution puisse aussi convertir les images déjà présentes dans la médiathèque de notre site WordPress, et toujours dans leur format d’origine, en Jpeg ou Png ?

Toujours plus : qu’elle puisse aussi convertir en WebP les images de notre thème, et les divers avatars de type Buddypress ainsi que tous les graphismes qui passent à l’as le plus souvent ?

Enfin, rêve ultime, que cette solution puisse faire automatiquement charger les images au fur à mesure que le visiteur descend dans la page. Ceci afin de gagner du temps lors du chargement initial de la page ?

Ce fameux chargement initial qui, s’il est trop long nous fera pénaliser par Google, et fera que le visiteur impatienté partira.

Bref : cette solution ressemble au mouton à 5 pattes, et gratuit en plus !

Hé bien, vous l’avez deviné, elle existe ….

On la nomme EWWW Image Optimiser.

Voyons ça de plus près.

3) EWWW Image Optimizer.

Version Free ou Premium ?

 

C’est un Freemium, avec une partie gratuite et une autre payante.

Les fonctionnalités de la partie gratuite :

  • Taille des images illimitée (bien qu’en fait il y ait une limite mais fixée à 150 Mo, cette limite stratosphérique n’en étant pas une !).
  • Nombre d’images illimité pour la conversion en WebP, pas de limite que ce soit en nombre d’images et en poids total des fichiers.
  • Formats pris en charge pour la conversion : Jpeg, PNG, GIF, SVG.
  • Fonction LazyLoad : vos images sont chargées au fur à mesure de l’avancement dans la page. Toutes ne sont pas chargées dès le début, ce qui permet au chargement initial de la page de s’effectuer plus vite.
  • La conversion se fait sur le serveur hébergeant votre site, vous n’avez pas à faire d’aller-retour entre votre site et le lieu de conversion, ce qui est un avantage. Mais ça peut aussi être un inconvénient si le serveur est sous-dimensionné ou surchargé. C’est le cas sur certains hébergements partagés bas de gamme.
Et en plus :
  • Les images déjà présentes sur votre site avant l’installation d’EWWW Image Optimizer seront aussi converties en masse dès son installation. Mais si vous avez beaucoup d’images et que votre serveur est déjà limite cela peut le surcharger et ralentir à la fois votre site ainsi que tous les autres présents sur le serveur.  Ce qui peut ne pas plaire à votre hébergeur !
  • La conversion des images en WebP ne concerne pas uniquement les images de votre médiathèque, mais également celles de votre thème, ainsi que les avatars et images de Buddypress, les avatars de Wp Symposium pro, et les pièces jointes de BBPress.
  • Possibilité de programmer les conversions au moment désiré (par exemple la nuit à 3H du matin, ou aux heures de moindre activité du serveur.)
  • Possibilité d’utiliser WP-CLI afin de gagner du temps.
  • Assistance gratuite par email y compris pour la version gratuite.
Et pour ceux qui en veulent encore et toujours plus :

Jetons simplement un œil aux fonctionnalités payantes principales :

  • Compression optimisée, jusqu’à 80% de gain.
  • Conversion des fichiers PDF
  • Mise à disposition d’un CDN afin d’optimiser le temps de chargement.
  • Possibilité de faire stocker vos images originales 30 Jours gratuitement.
  • Mise à l’échelle automatique améliorée.
  • Images en filigrane possibles.
  • Optimisation des polices Google.
  • Minification et chargement différé des fichiers JavaScript et CSS (Note : si vous disposez d’un plugin de cache comme WP Rocket, celui-ci fournit également ces fonctions).
  • Assistance prioritaire.

La version Premium peut être utile notamment pour des sites comportant beaucoup d’images, et des boutiques avec beaucoup d’images de produits.

Il y a trois types de formules payantes.

Wordpress Webp : grille tarifaire de Ewww Image Optimiser.

Les prix sont mensuels, payables chaque mois.

Ce qui les différencie est essentiellement le nombre de sites pouvant bénéficier du Premium.

WordPress WebP avec EWWW Image Optimizer : Comment ça marche ?

Installation

Commençons déjà par installer le Plugin.

Installation de Ewww Image Optimizer pour passer en WordPress Webp

Pour cela vous connaissez la procédure :

  • Dans votre panneau d’administration allez dans Extensions/Ajouter
  • Dans le champ dédié tapez EWWW simplement
  • Le plugin EWWW Image Optimizer s’affiche en haut à gauche de la liste, et vous pouvez constater que la dernière mise à jour est récente. De plus il y a de nombreux utilisateurs (près d’un million) et il est compatible avec notre version de WordPress, soit la 6.1.1. Tout cela est de bon augure !
  • Cliquez sur Installer.

Et une fois installé le plugin, il ne reste plus qu’à cliquer sur Activer.

Paramétrage

Une fois installé il nous faut le paramétrer et en maitriser tous les arcanes.

Accès à la section Réglages de Ewww Image Optimizer dans WordPress

Pour cela rendons nous dans la liste des plugins installés (Extensions/Extensions installées) pour le retrouver, et cliquons sur Réglages afin de plonger dans les entrailles de la bête.

(Note : vous pouvez aussi vous rendre, dans le panneau d’administration, sur Réglages/EWWW Image Optimizer).

Nous atterrissons sur ce panneau.

Premier panneau de réglages de Ewww Image Optimizer

Ici, à priori et comme nous sommes gourmands, nous souhaiterions accélérer notre site et économiser l’espace de stockage.

Et sans compter, bien sûr, avoir des images 5 fois plus optimisées tout en restant en mode gratuit. (Le beurre, l’argent du beurre et la fermière ….).

Pour le moment restons sur les 2 premières options : nous voulons avant tout diminuer le poids de nos images en les convertissant en mode WebP. Cela pour accélérer notre site, afin que Google et les internautes soient contents.

Donc nous pouvons cocher la première option visant à accélérer le site !

Et après ?

Pour la seconde, ça se discute. Si nous activons la conversion en WordPress WebP le plugin va conserver les images originales afin de pouvoir éventuellement les envoyer à des navigateurs non compatibles avec le WebP, comme Safari avant 2020. C’est marginal mais ça existe.

Et nous ne voulons pas nous priver de cette partie du public !

Récapitulons : il y aura donc les images originales plus les nouvelles images en WebP, donc en clair l’espace de stockage va augmenter avec la conversion en WebP.

Donc si nous cochons la seconde case cela veut dire que nous ne souhaitons pas disposer de la conversion en WebP. Ce qui est ici tout de même notre but premier, rappelons-le !

Aussi nous ne cocherons pas la seconde case.

Note : Si vous la cochez malgré tout, le plugin supprimera la conversion WebP par défaut dans le prochain panneau, mais vous pourrez tout de même la forcer.

Les deux dernières options à case ronde concernent la version, gratuite ou payante.

Si vous cochez la troisième case pour compresser 5 fois plus les images, vous vous retrouverez sur l’offre payante. A priori nous ne cochons pas.

Par contre en cochant la quatrième case vous demandez à rester sur la version gratuite – donc nous cochons.

Second panneau de réglages

Résultat des courses : notre panneau devrait ressembler à ça, nous n’avons plus qu’à cliquer sur Suivant ….

Panneau de recommandation de certains réglages de Ewww Image Optimizer
Récapitulatif

… Et nous arrivons sur ce panneau.

Bien !

  • La première case ‘’Retirer les métadonnées’’ est cochée par défaut. C’est plus discret et de plus c’est ce que recommande Google, donc laissons-la cochée.
  • En ce qui concerne la seconde case, vous n’aurez peut-être pas la même chose que moi. En effet le plugin a détecté la présence sur mon site de WP Rocket, mon plugin de gestion de cache, qui possède déjà une fonction Lazyload de chargement au fur à mesure des images. Pour éviter tout conflit je désactiverai donc cette fonction chez WP Rocket et garderai celle de EWWW Image Optimizer, mon nouveau Ministre des Images WordPress Webp.
  • Pour la troisième case, Conversion Webp, nous la laisserons bien évidemment cochée. Je garde également la valeur de largeur maximale par défaut, qui est conséquente, mais je porte la hauteur maximale à 3.000 pixels, car il m’est arrivé (rarement) d’avoir des hauteurs d’images de 2500 pixels environ. Ce sera à vous de déterminer ces chiffres en fonction des tailles d’images que vous escomptez afficher sur votre site.
  • Sur l’option suivante concernant les sauvegardes, je reste sur ‘’Local’’. Les autres choix possibles sont ‘’Cloud’’ (mais vous devrez évoluer vers la version payante tôt ou tard) et ’’Désactivé’’. Mais il est toujours bon de posséder des sauvegardes, on ne sait jamais.
  • Pour l’option ‘’Aide embarquée’’ on peut cocher, c’est toujours bien d’avoir accès à de la documentation et ça ne mange pas de pain.
  • Pour l’option ‘’Rapports anonymes’’, personnellement je coche, mais si vous ne voulez pas vous compliquer la vie vous pouvez ne pas cocher, ou le faire plus tard.
On a donc ...

Notre panneau devrait donc ressembler à ça.

Réglages recommandés pour Ewww Image Optimizer

Il ne nous reste plus qu’à enregistrer, et ….

Panneau de confirmation de mise en place des nouveaux réglages

Nous arrivons sur ce panneau, qui nous rappellent que nous pouvons optimiser les images déjà présentes sur notre site grâce à l’Optimiseur en Masse.

Cliquez donc sur Terminé.

Ca y est !
Wordpress Webp : Panneau deEwww Image Optimizer qui nous incite à souscrire à l'offre payante.

Nous arrivons ici, sur l’onglet Général de l’administration du Plugin.

Le score de 50 % de notre site, qui nous saute aux yeux, nous incite à cliquer pour voir de quelle façon nous pouvons passer à 100 %, et la réponse est … en souscrivant à la partie payante !

A part ça, toutes les options choisies sur les précédents panneaux sont reprises ici.

WordPress WebP et Ewww Image Optimizer : un dernier détail.

Il nous reste une chose à faire : optimiser les images déjà sur notre site en les convertissant toutes au format WebP.

Optimisation de masse en WordPress Webp avec Ewww Image Optimizer

Pour cela allez dans Médias/Optimiseur de masse (ce nouvel onglet a été créé par le plugin).

Puis cliquez sur le bouton ‘’Analyse d’images non optimisées’’.

Le plugin va trouver un nombre astronomique d’images, bien plus que celles qui apparaissent dans votre médiathèque (en gros 4 à 5 fois plus).

Pourquoi ? parce que, quand vous téléversez une image dans votre médiathèque, WordPress en crée 3 ou 4 autres, correspondant à la même image sous différents formats, de la taille originale à la miniature, afin d’être en mesure d’envoyer une image à tous les navigateurs et tous les écrans, de celui d’un smartphone à celui d’un ordinateur avec écran 32 pouces.

Et c’est ainsi que vous êtes bien plus riche en images que vous le croyiez jusque-là !

Une fois lancée la conversion, vous arrivez ici :

Lancement de la conversion par Ewww Image Optimizer

 

La machine est lancée : elle va optimiser toutes vos images en stock, et les nouvelles que vous rajouterez au fur à mesure.

WordPress WebP : Conclusion.

Et voilà :  nous avons étudié 3 façons de convertir les graphismes destinés à WordPress.

La première méthode, avec un service en ligne comme Convertio, ne semble pas à priori à la hauteur, en plus d’être payant.

La seconde, 100 % gratuite avec Xn Convert, est intéressante, mais oblige à des aller-retours du logiciel à WordPress.

Elle permet toutefois d’autres actions en masse, comme du redimensionnement, des retouches, etc …

La troisième méthode, avec EWWW Image Optimizer, semble supérieure aux autres.

En plus d’être gratuite, elle permet non seulement de traiter au fur à mesure toutes les images arrivantes, mais également toutes les images se trouvant déjà sur votre site, ainsi que les images ‘’cachées’’ de votre thème, ou générées par WordPress.

Elle possède aussi la fonction LazyLoad, qui permet de réduire le temps de chargement d’une page en envoyant les images au fur à mesure de l’avancée sur la page.

Les 3 meilleurs de la catégorie WordPress Webp!

Ce plugin fait partie du trio de tête des plugins de traitement d’images sur WordPress, avec

  • Smush

Ce plugin est proposé par WPMU DEV, et sa version Pro (Smush Pro) est proposée dans un pack contenant plusieurs plugins Premium). Vous ne pouvez pas vous le procurer séparément, il vous faut acquérir le lot.

  • Imagify

Il est proposé par WP Média, la société Française ayant développé WP Rocket, la référence des plugins de gestion de cache. Aussi est-il parfaitement intégré avec celui-ci, et a-t-il une interface en Français.

Avec la version gratuite vous pouvez traiter jusqu’à 20 Mo par mois, soit environ 200 images.

Au-delà il vous faudra acquérir la version payante, à $ 4.99 / mois.

Pourquoi ai-je choisi de vous décrire plutôt eWWW Image Optimizer ?

Parce que sa version gratuite est moins limitée, et, accessoirement, bénéficie de l’assistance.

Il ne me reste plus qu’à souhaiter que ce plugin vous rende service.

Et si vous souhaitez avoir des informations complémentaires, au-delà de WordPress Webp, vous pouvez consulter les articles suivants :

[elementor-template id="1339"]

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *