En lisant différents articles sur le Net qui décrivent ce nouveau format d’image, je me suis décidé à reprendre la totalité de mes articles pour convertir leurs photos, illustrations etc. du format Jpeg/PNG au format WebP… Et des articles j’en ai + de 150 !
C’est pourquoi je voulais faire un retour le plus concret possible sur cette expérience. Passons aux avantages du WebP :
- Comme pour le PNG, la transparence est gérée. Comme pour le GIF on peut créer des animations.
- Compression : En théorie les images sont 30% plus légères que le JPEG / PNG pour la même qualité, mais en pratique c’est beaucoup plus dans mon cas ! En effet j’accompagne la conversion avec un changement de résolution ainsi qu’une compression à 80% de perte sans altération visible de la qualité d’image.
- Google adore : Google et consorts tiennent compte de la rapidité accrue du chargement des pages Web, mais aussi du fait d’utiliser les derniers standards technologiques. Je serais mieux placé sur les résultats de recherche. (PS: Google Page Speed recommande d’ailleurs ce format).
Inconvénient:
Le navigateur Safari de Apple traine les pieds, c’est récemment que Apple a intégré la compatibilité (Safari 14) mais seulement sur Mac et Imac. Et bien tant pis: Le format WebP a trop d’avantages pour m’en passer ! Cela dit 95% des internautes possèdent un navigateur Web compatible Webp.
Sur PC
Sous Windows 10, je me suis rendu compte.. Que je ne pouvais pas avoir d’aperçu (miniatures) des images en WebP: Je devais les ouvrir avec une application dédiée genre Farstone viewer, Paint.net.
Mais Microsoft a mis en ligne sur le Windows store une « extension » bien nommée « Extensions d’image Webp ». Ainsi l’App Photo Microsoft pourra sans problème ouvrir ce format photo.
Rapatrier les images de mon site et les convertir
Récupérer les images sur mon PC
Mon environnement de travail: Un site sous WordPress avec le plugin Elementor Pro installé, des articles déjà en ligne dont il faut convertir les images et un PC puissant sous Windows 10. Les images n’ont rien d’artistique ; Je peux les recompresser fortement sans dénaturer leur utilité.
Pour récupérer les photos c’est simple; J’ouvre un article en mode éditions sous WordPress, je clique sur une image et re clic droit puis « Enregistrer sous ». Les images sont enregistrées dans un sous dossier sur le PC. Pourquoi ne pas tout récupérer depuis un accès FTP? Parce que lorsque j’intègre une image il m’arrive au fil de l’écriture de changer d’avis et de l’a supprimer voir l’a changer. Ainsi je suis certain de ne pas traiter des images non utilisées (ce qui contribuera à l’allègement du site lorsque toutes les images seront en WebP et que j’effacerais via FTP les autres formats).
Convertir les images en WebP
J’avais pensé au début utiliser Adobe Photoshop, mais ce serait comme utiliser une pelle de chantier pour touiller son café. Ensuite j’ai envisagé Paint.net mais il ne fait pas de traitement par lots. Enfin j’ai arrêté mon choix sur Photoscape X en version gratuite mais pourtant capable d’agir en masse sur les images.
Sous Photoscape X > Traitement par lots: Je place les images à convertir dans l’encadré prévu à cet effet (1). S’il s’agit de photos et non pas de captures d’écrans et que par conséquent leur résolution est trop importante (4000X2500) je règle l’option « Redimensionner » sur 1280px (2).
Remplacer les images sur les articles
Il est simple (mais long) des remplacer dans chaque article les images d’origine par leurs équivalents WebP! Je rentre sur chaque articles en mode édition et substitue les illustrations manuellement car je n’ai pas cherché (et pas souhaité) trouver un moyen automatique de procéder: Cela m’a donné l’occasion de reformuler quelques paragraphes, corriger quelques fautes et supprimer des morceau de code invisibles -provenant sans doute d’extensions WordPress à présent désinstallées- NB: Ces portions de code html et shortcodes sont visibles en mode texte.
Je rentre en mode texte pour éditer un paragraphe (1) et je supprime les scories de code (2)
Exemple de gain de poids en ko des images
Ci dessous la version JPG d’un dossier qui contient les illustrations d’un article
Et là les versions en WebP; Une cure d’amaigrissement qui frôle le tiers sans détérioration apparente!
Supprimer les images d'origine sur l'hébergement Web
Les images sur mon site sont peut être converties, mais il n’empêche que mon espace FTP est désormais saturé des illustrations d’origine -et la rubrique « Média » de mon espace d’administration WordPress les référencent- . Je supprime donc les Jpeg et PNG depuis le logiciel d’exploration FTP WinSCP en triant par Type; Méthode brutale mais je ne vois pas d’autres moyens.
Ci-dessous la vue en mode FTP d’un dossier qui contient un mixte de médias en JPG, PNG et WebP
Déréférencer les images supprimées de WordPress
J’ai testé quelques plugins qui analysent la base de donnée WordPress pour y détecter les images orphelines (WP-Optimize; Media cleaner, WPvivid). Mais j’ai été déçu car depuis la création de PCsoleil.fr, il en est passé des extensions, thèmes, modifs manuelles malheureuses.. qui ont peu à peu souillés la base de donnée du site: Résultat ces extensions ne trouve pas la moitié des image en errance!
Cependant, le meilleur de tous est l’extension Media cleaner de Jordy Meow mais.. en version payante; env. 30€. Car seule cette occurrence peut -en plus d’analyser la BDD- « visiter » chaque page du site façon crawler pour assurer un résultat sans faille.
…Seulement cela me gêne de dépenser 30€ pour ça. J’ai donc contourné le problème en installant une extension qui peut trier dans la rubrique Media de WordPress les images par extension (Type/Mime): Media library assistant
Dans WordPress en mode édition; Je me rends dans Média > Assistant (1) Puis le déplie « Option de l’écran pour rajouter la colonne MIME Type (2) et je classe les colonne idoine (3) . Et voilà! Reste quand même à cocher en masse les fichier JPG / PNG pour les supprimer définitivement.
PS: Les images ont bien étés supprimées manu militari auparavant, mais WordPress les référencent quand même en les affublant d’un aperçu ou miniature vide (tout blanc).
