Optimiser les images de votre site WordPress avec Imagify

Améliorez les performances de votre site WordPress en optimisant vos images avec Imagify. Découvrez comment utiliser cette extension pour compresser vos images, générez une version WebP tout en maîtrisant votre budget avec cette solution premium peu onéreuse.

Pourquoi réduire le poids de vos images ?

Le poids d’une page Web se mesure en méga-octets, plus une page est lourde plus elle mettra du temps à s’afficher car il faudra faire transiter plus d’informations sur le réseau Internet. Généralement, le poids moyen constaté pour une page Web oscille entre 1 et 2 Mo – idéalement il faut viser moins de 500 Ko. La part des images dans le poids total d’une page Web varie entre 50 et 60% : une part considérable qu’il convient d’optimiser en priorité. Par chance, les marges de manoeuvres sont colossales et les actions à mette en oeuvre relativement simples.

Tenir compte de la diversité des usages

Vous devez garder à l’esprit que la consultation de vos pages Web peut s’opérer de différentes façons : depuis un terminal mobile en 3G / 4G ou 5G, un ordinateur de bureau relié à une connexion ADSL / fibre ou à l’aide d’une tablette en WIFI dont le débit est variable.

Dès lors, il est important de réduire au maximum le poids de vos pages afin d’offrir la meilleure expérience utilisateur possible. C’est également un gage d’améliorer de vos conversions : achat, remplissage de formulaire de contact, etc.

À titre d’exemple, une page Web avec un poids de 10 Mo – ce qui est colossal, représente 1% d’un forfait mobile limité à 1 Go en data. Si l’internaute mobile visite 10 pages d’un poids équivalent, alors c’est 10% de son forfait qui seront consommés en l’espace de quelques secondes. Cet exemple parlant vous donne une idée de l’importance d’un site Web performant.

Un enjeu écologique

Il existe un enjeu écologique qui est loin d’être négligeable : si nous consommons moins de bande passante, c’est moins de consommation serveur et donc de ressources énergétiques qui sont nécessaires à l’affichage des pages Web.

Inutile de trouver l’excuse habituelle qui consiste à citer les plateformes de vidéos : oui elles sont énergivores mais elles sont également optimisées à l’extrême. Votre site Web a un impact que vous le vouliez ou non, il est de votre devoir d’agir.

Comment réduire le poids des images sous WordPress ?

Tous les formats d’images peuvent faire l’objet d’une compression à l’aide d’algorithmes spécialisés : photographies (JPEG), logos ou icônes (PNG / SVG), animations (GIF). Les animations au format GIF sont à proscrire : ces fichiers sont extrêmement lourds et leur retour en force n’est pas une bonne chose – alors même qu’ils avaient connu un déclin salutaire.

Méthode manuelle : importer des images optimisées en amont

Sans doute l’approche la plus fastidieuse qui consiste à optimiser vos images une par une dans un logiciel de retouche photo comme Photoshop ou Affinity Photo. Je vous conseille d’exporter pour le Web vos JPEG avec 70-80% de compression.

Cette approche nécessite du temps et un logiciel de retouche photo de qualité. Les résultats obtenus sont variables et dépendent directement des algorithmes mis en oeuvre par les logiciels.

Méthode automatique : utiliser Imagify, une extension pour WordPress

Passons à la vitesse supérieure en automatisant le processus de compression de vos images via l’extension Imagify pour WordPress. Éditée par WP Media – également connu pour WP Rocket, Imagify est le compagnon idéal pour booster vos performances en mettant l’accent sur l’optimisation des images.

Cette extension est capable d’optimiser en masse vos images en intervenant sur l’ensemble de votre bibliothèque de médias. Ainsi, les médias déjà envoyés et ceux à venir seront systématiquement compressés par les algorithmes d’Imagify.

Comment utiliser Imagify de manière optimale ?

Je vais passer en revue les quelques réglages proposés par l’extension afin de vous donner la configuration idéale, celle qui vous donnera les meilleurs résultats.

Télécharger Imagify

Imagify se télécharge directement depuis le back-office de votre installation WordPress, dans Extensions puis Ajouter.

Là, faites une recherche puis cliquez Installer maintenant. Patientez quelques instants, le temps du téléchargement et de l’installation puis cliquez sur Activer.

Configurer Imagify

Rendez-vous tout d’abord dans Réglages puis Imagify.

La première chose à faire est de spécifier la clé API qui sera utilisée pour lancer les requêtes d’optimisation. En effet, Imagify fonctionne comme un connecteur entre votre site et les serveurs d’Imagify qui vont exécuter les scripts de compression et vous retourner l’image optimisée.

• Optimiser automatiquement les images envoyées : à moins que vous ne soyez un photographe soucieux de vérifier au préalable si une image mérite d’être optimisée, vous avez tout intérêt à cocher cette case. Imagify s’exécutera en tâche de fond après l’envoi d’une image dans votre bibliothèque de médias ;
• Conserver une copie des images d’origine : bien que cela occupe davantage d’espace disque, je vous recommande vivement de laisser cocher. C’est la règle d’or : on ne touche pas aux fichiers sources, les copies servent à cela. En agissant ainsi vous éviterez bien des tracas, notamment si la compression entraîne une perte sensible de qualité. Vous serez donc toujours en mesure de revenir en arrière au cas par cas ou en masse ;
• Compression sans perte (lossless) : depuis Imagify 2.0, il n’était plus possible de choisir le niveau de compression – cette possibilité ayant été remplacée par une approche à base d’intelligence artificielle. La version 2.1 modifie cette régression en proposant à nouveau une compression sans perte de qualité. J’avais personnellement constaté des résultats erratiques en termes de qualité selon les visuels. Faites donc des tests de qualité de votre côté pour déterminer si la compression doit être destructrice ou sans perte ;
• Créer des versions WebP de vos images : je recommande cette option du moment qu’elle résulte d’un choix de votre part, un choix qui ne doit pas être imposé par des contributions de Google au cœur de WordPress – qui ne sont guère dénuées d’intérêts par ailleurs ;
• Afficher les images au format WebP sur le site : l’extension propose 2 méthodes à savoir l’ajout de règles de réécriture dans le fichier .htaccess ou la modification des balises <picture> directement dans le code source de vos pages Web. Contrairement à ce qui est indiqué, la seconde méthode n’est pas celle à privilégier sauf si vous avez recours à un Content Delivery Network (CDN). La plus simple et la moins impactante reste la première approche car elle n’altère pas le code vos pages Web. La seconde remplace les balises <img> par des balises <picture> ce qui peut perturber le rendu d’affichage en fonction du thème utilisé ;
• Redimensionner les images trop grandes : cette option est désormais native dans WordPress. Faites le test en envoyant une image d’une largeur supérieure à 2 560 pixels. WordPress génère automatiquement une version alternative comportant le terme scaled dans le nom du fichier. Vous pouvez désactiver via un filtre cette fonctionnalité pour information ou gérer cela via Imagify en spécifiant la largeur maximale à ne pas dépasser. À titre informatif, une largeur de 2 560 pixels n’est pas choisie au hasard : elle correspond aux écrans haute résolution et couvre ainsi l’immense majorité des cas de figure ;
• Tailles à optimiser : vous pouvez toutes les cocher sauf si certaines ont été spécifiquement créés pour privilégier la qualité d’affichage. Vous pourriez éventuellement décocher des tailles très petites inférieures à 100 pixels de large ;
• Sélectionnez des dossiers pour l’optimisation : vous pouvez ordonner à Imagify d’aller scanner des dossiers en dehors de l’installation de WordPress ce qui est particulièrement intéressant sur des sites avec de multiples emplacements de médias ;
• Je veux ce menu d’accès rapide génial sur ma barre d’outils : une option peu utile à mon goût, libre à vous de l’activer ou non ;

Une fois les réglages opérés, cliquez sur Enregistrer et aller à l’optimisation en masse.

Vous êtes maintenant redirigé vers Optimisation en masse de l’onglet Médias. Dans cet écran, nous retrouvons une vue d’ensemble avec quelques métriques importantes comme le nombre d’images optimisées, le poids avant / après optimisation, le pourcentage d’économies et le pourcentage d’images optimisées.

C’est ici également vos informations de compte et le plan d’abonnement choisi apparaissent.

Le tableau principal liste les sources de médias à optimiser : par défaut votre médiathèque et d’éventuels dossiers annexes que vous auriez ajoutés précédemment. Vous avez à nouveau la possibilité de modifier le mode compression en bout de liste entre Lossless ou Smart. Comme indiqué plus haut, vous pouvez tester dans un premier temps sur Smart – recours à l’IA avec destruction, puis revenir sur Lossless dans un second temps si les résultats ne vous donne pas satisfaction. Prenez garde à tester sur un échantillon réduit de quelques images et non l’intégralité de la bibliothèque pour commencer – vous évitez d’y passer des heures et de voir votre crédit se réduire à néant.

Lorsque vous êtes prêt, cliquez sur le bouton Imagif’em all pour lancer l’optimisation de masse. Une fenêtre modale apparaît vous informant du crédit restant. Faites Démarrer l’optimisation pour exécuter le processus. Revenez d’ici quelques heures pour constater l’état d’avancement général à l’aide de la barre de progression.

Combien coûte Imagify ?

Imagify dispose d’une version de démarrage gratuite vous permettant de tester le service avec un crédit de 20 Mo / mois. Cela représente environ 200 images optimisées.

L’offre Infinite est clairement la plus avantageuse : elle vous permet de compresser un nombre illimité d’images pour seulement 9,99 $ / mois. C’est personnellement l’offre à laquelle j’ai souscrit afin d’en faire bénéficier mes clients en maintenance. Bon à savoir : en optant pour un prélèvement annuel, vous bénéficierez de 2 mois offerts. Une offre illimitée, sans prise de tête pour un gain utilisateur élevé : foncez !

Notons toutefois une offre intermédiaire dite Growth qui vous donne droit à 500 Mo de crédit mensuel soit environ 5 000 images, pour la modique somme de 4,99 € / mois. Là encore, une remise est consentie en cas de souscription annuelle.

Autre avantage non négligeable : aucune carte bleue n’est requise pour l’inscription.

Le compte utilisateur est par ailleurs fort simple : récupération de la clé API et c’est à peu près tout. Vous pouvez toutefois utiliser votre compte en ligne pour optimiser des images manuellement.

Quels sont les avantages d’Imagify ?

Imagify dispose de sérieux atouts comme :

• La facilité d’utilisation : c’est le genre d’extension que l’on installe pour être oubliée. Je l’active, quelques minutes de configuration, optimisation en masse et le problème de performances sur les images est définitivement réglé ;
• La capacité à générer des images en WebP : là encore, pas de prise de tête une fois les bons réglages en place ;
• La disponibilité d’une API : vous pouvez utiliser Imagify dans vos projets de développement même sans utiliser WordPress via le recours à l’API ;
• La prise en charge de WP CLI : il est possible de lancer l’optimisation de masse via WP CLI ce qui est très pratique pour les développeurs ;
• La compatibilité avec WP Rocket : ces deux extensions sont éditées par WP Media et sont donc pleinement compatibles pour améliorer les performances de votre site Web ;

En résumé, les utilisateurs finaux sont aussi bien servis que les développeurs.

Quels sont les inconvénients d’Imagify ?

Imagify présente quelques limites qui pourront en rebuter quelques uns :

• La vitesse d’optimisation est particulièrement lente : si votre bibliothèque est particulièrement conséquente – plusieurs milliers d’images, il vous faudra patienter plusieurs jours pour que le processus d’optimisation soit terminé. Cela sera d’autant plus long si votre socle technique dispose de nombreuses tailles d’images additionnelles. On apprécierait un temps d’optimisation plus rapide même si cela n’est à faire qu’une fois. En effet, les prochains envois seront traités à la volée en arrière-plan ce qui ne ralentit en rien votre installation WordPress ;
• La documentation pas toujours complète : une bonne refonte du site officiel avec des informations actualisées serait une bonne chose. Je pense notamment à l’absence de guide du WP CLI ;

Au final, ces quelques faiblesses n’ont rien de vraiment problématiques.

Le format WebP, la solution ultime en compression d’images ?

Le format WebP est un format d’image innovant développé par Google, qui présente de nombreux avantages par rapport aux formats traditionnels tels que JPEG et PNG. Le WebP est relativement jeune en comparaison aux formats traditionnels mais sa naissance remonte déjà à 2010.

L’un des principaux atouts de ce format réside dans sa capacité à réduire considérablement la taille des fichiers d’images tout en conservant une qualité d’image remarquable. Cela est possible grâce à l’utilisation d’algorithmes de compression plus avancés et plus performants que ceux utilisés dans les formats classiques.

En outre, le format WebP offre une qualité d’image supérieure pour des fichiers de taille similaire. Cela s’explique par la prise en charge de la compression sans perte de qualité, qui permet de conserver tous les détails de l’image d’origine, contrairement à la compression avec perte utilisée dans les formats tels que JPEG. De plus, le format WebP prend en charge les images transparentes, ce qui lui permet d’être utilisé pour créer des images avec des effets de transparence, comme les images PNG.

Néanmoins, le WebP ne présente pas que des avantages. Il n’est pas toujours supporté par l’ensemble des logiciels de retouche photo et il n’est pas pris en charge sur certains réseaux sociaux comme LinkedIn. Cela signifie que si vous utilisez une image WebP comme métadonnée sociale, elle ne s’affichera pas dans votre publication… plutôt gênant !

Notre verdict

Imagify est une excellente extension pour compresser vos images de manière totalement automatisée. Son offre gratuite conviendra à la majorité des sites personnels et les agences apprécieront l’offre illimitée pour un usage massif sans contraintes.

Au final, mission accomplie : vos images sont optimisées, elles consomment moins de bande passante et vos conversions augmentent. Un indispensable !