Le poids des images joue un rôle important dans le chargement d’une page web. Avec Robin Images Optimizer, découvre comment les réduire jusqu’à 70% sans perte visuelle.
Faire profiter tes visiteurs de pages qui chargent rapidement est un véritable défi, surtout si tu n’es pas trop calé technique.
Et pourtant c’est selon moi essentiel. Les utilisateurs d’internet recherchent toujours plus de contenu et ils sont de plus en plus exigeants quant à la qualité de ce qu’ils visionnent.
C’est d’autant plus vital qu’il est fort probable que la vitesse d’un site va rentrer de plus en plus en compte dans l’algorithme des différents moteurs de recherche, Google en priorité.
Réfléchir et travailler à rendre ton site web plus réactif est un projet ambitieux, mais tout à fait réalisable !
Le poids des images, une variable essentielle
Pour qu’un contenu soit attrayant, il faut dans un premier temps qu’il soit intéressant et bien écrit puis dans un second temps, qu’il soit visuel.
Ce principe très simple s’explique par le fait que les longs textes sont difficiles à lire. Si tu as la possibilité d’utiliser une infographie pour illustrer une phrase, utilise-la.
Notre cerveau apprécie le contenu visuel, d’où le succès de Instagram et Pinterest !
Mais le problème derrière ça, c’est que les images sont un média assez lourd. Plus elle est de meilleure qualité, plus elle sera longue à charger.
Heureusement pour nous, il existe globalement trois méthodes pour réduire leur impact sur le chargement d’une page :
- Les transformer en format nouvelle génération WebP ;
- Les charger en différé grâce au lazy loading ;
- Les compresser sans perte ;
Je rentrerai dans le détail des deux premières méthodes dans des articles dédiés mais sache que le plugin WebP Express génère des images WebP automatiquement et que Autoptimize intègre le lazy load.
Compresser des images : à la découverte de Robin Images Optimizer
Lorsque l’on part à la découvert de Robin Optimizer, on a le choix entre la version gratuite qui est suffisante pour la plupart des utilisations, et celle payante.
Dans la suite de l’article on va parler principalement de la version gratuite.
Les créateurs de ce projet ont intégré plusieurs fonctionnalités pour alléger le poids final d’une image à uploader. Une fois l’application installée, une nouvelle option apparaît dans les réglages WordPress.
Je fais le test ici avec la version 1.4.2. Les trois onglets sur le menu de gauche vont nous intéresser. Enfin seulement les deux premiers, car le 3ème sert à activer la license pour la version premium.
Vue d’ensemble des paramètres
On va commencer par configurer Robin Images Optimizer via les paramètres Settings.
L’extension n’est pas traduite en français mais les options restent simples à comprendre. Je vais de toute façon les expliquer une par une !
Dans la catégorie Main Settings on retrouve les options suivantes :
- Optimization server : Les serveurs utilisés pour réduire le poids des images. Le serveur n°1 est suffisant, c’est celui que j’utilise.
- Compression mode : On a le choix entre 4 modes.
- Lossely pour un gain de poids sans perte de qualité visuelle ;
Lossy pour des images plus légères, mais avec une petite perte visuelle ; - High pour des gains maximums avec une grosse perte visuelle ;
- Custom pour entrer ton propre pourcentage de perte souhaitée.
- Lossely pour un gain de poids sans perte de qualité visuelle ;
- Auto optimization on upload : Je l’active pour optimiser les images lorsqu’elles sont mises en ligne.
- Backup images : Très important de l’activer pour revenir en arrière si jamais tu n’es pas satisfait du résultat.
- Leave EXIF Data : Méthode qui permet de réduire légèrement le poids d’une image mais surtout, de supprimer des informations présentes sur chaque image. Je l’active.
Voilà pour cette première partie, on se retrouve avec les paramètres suivants :
Ça ne prend pas plus de 5 minutes à compléter !
Viennent ensuite les options de redimensionnement des images. En fonction du thème WordPress que tu utilises, il y aura plus ou moins de cases à cocher.
Mon thème actuel est Maker Pro, je me retrouve donc avec les paramètres de redimension intégrés, ce sera différent sur ton site.
Maintenant c’est très simple, je n’active pas le redimensionnement.
Pourquoi ?
Car mon thème n’en a pas vraiment l’utilité et il faut savoir que pour chaque option cochée, l’image sera dupliquée puis redimensionner. Ce qui signifie plus d’images, donc plus de poids sur ton serveur…
Etant donné que j’utilise régulièrement des images, je ne préfère pas avoir 3 ou 4 versions de différentes tailles d’une même image. En revanche, ça ne t’empêche pas d’en cocher une ou deux !
Juste en dessous on retrouve Scheduled optimization qui permet d’automatiser le processus de recherche d’images non transformées pour les optimiser. Les paramètres par défaut suffisent.
Comment se présente le tableau de bord ?
Alors voilà, une fois que les paramètres sont renseignés, tu te retrouves devant l’interface principale de RIO où tu vas pouvoir lancer ton premier RUN.
Toutes les images de ton site vont être optimisées tout en prenant compte des options sélectionnées. D’où l’importance d’activer le backup pour revenir en arrière si ça ne te plaît pas.
J’ai déjà lancé l’outil une première fois et les images qui sont mises en ligne le sont automatiquement !
91% d’images optimisées pour un gain total supérieur à 50% avec le paramètre Lossely, c’est ce que tu devrais obtenir plus ou moins.
En dessous se trouve les logs, le résumé des opérations effectuées :
Les images sont optimisées en même temps que je rédige cet article !
Ce qui est intéressant c’est de voir la taille initiale, puis la taille après opération. On voit par exemple que c’est très variable : la première image a perdu 11.05% de son poids initial alors que la troisième est à 53.07%…
Je ne sais pas à quoi c’est vraiment dû, peut-être le format de l’image puisque l’image en PNG a perdu bien plus.
En revanche ce que je sais c’est qu’en moyenne, ça fait 51% de gagné sur toutes les images du site.
La version premium
Je le disais au début de l’article, il existe une version premium pour débloquer le plein potentiel du plugin.
Parmi les nouveautés de cette version il faut noter la possibilité de convertir les images en format WebP qui est plus léger, regroupe tous les formats habituels en un seul (JPG, PNG et GIF) puisqu’il gère la transparence et les animations.
On peut noter également la présence de nouveaux serveurs, censés rendre le processus d’optimisation plus réactif.
Le dernier point appréciable de cette version ultime de Robin Optimizer est sa gestion native des plugins de galeries via NextGEN Gallery.
Vendu au prix de 39$ par an, ça fait à peine 3€ par mois. C’est très sympa de la part des développeurs WebCraftic d’avoir inclus une version gratuite aussi complète.
Mon avis sur Robin Optimizer
Bon tu t’en doutes, j’apprécie beaucoup avoir ce plugin installé sur mon site. Il est très discret puisqu’il fonctionne automatiquement. Je n’ai jamais eu de graves problèmes avec.
J’ai vu durant la rédaction de cet article que certains utilisateurs trouvent que les images perdent un peu de leur qualité.
Personnellement je ne vois aucune perte significative après le passage du plugin. À toi de te faire ton propre avis sur la question.
De toute évidence, Robin Images Optimizer est une super alternative aux sites où il faut manuellement passer chacune de ses images avant de les mettre sur le site.
Pour ce prix, la version premium est cadeau.
Si tu comptes utiliser ce plugin, n’hésite pas à me le dire en commentaire, je serai ravi d’avoir ton avis dessus. Bon blogging !
