Savez-vous ce qui est le plus long à charger sur une page ? Les fichiers CSS ? Perdu. 

Les fichiers JavaScript ? Encore perdu. Allez, je vous file un p’tit coup de main pour trouver la réponse. Ce sont les images. 

Ces dernières représentent plus de 50% du temps de chargement d’une page. Hallucinant, non ?

Autant vous dire que vous avez plutôt intérêt à réduire leur poids, sous peine de transformer votre beau site WordPress en charrette à bœufs (personnellement, je préfère la fusée pour mon site).

Une tortue sur roues
En tortue, ça marchait aussi, remarque.

Pour leur imposer une cure minceur, sans les dénaturer esthétiquement, il existe une extension du tonnerre sur WordPress : Imagify. Simple, efficace et fonctionnelle, elle mérite vraiment le détour.

Ça tombe bien, je vous en parle dans le détail dans ce guide qui vous explique comment la configurer et l’utiliser comme un as (et bien d’autres choses).

Initialement rédigé en février 2016, cet article a été mis à jour en avril 2021.

Besoin d’un hébergeur pour votre site ?

Faites comme WPMarmite, choisissez o2switch. Non seulement les performances sont au rendez-vous mais le support est exceptionnel.

Imagify, c’est quoi ?

Page d'accueil du site Imagify

Imagify est une extension WordPress qui permet aussi bien de réduire le poids des images que vous souhaitez ajouter sur votre site, que celles déjà présentes dans votre Médiathèque. Le tout, sans perte de qualité. Grâce à cela, vous améliorez le temps de chargement de votre site et l’expérience utilisateur vécue par vos visiteurs. 

On parle là d’une extension, donc, mais pas que, pour être tout à fait précis. Imagify peut être utilisé de deux façons différentes : 

  • Directement en ligne, sur leur site internet dédié, comme une solution SaaS (Software as a Service). Dans ce cas, vous n’avez pas à installer l’outil sur votre site.
  • Depuis votre tableau de bord WordPress, après avoir activé l’extension dédiée présente sur le répertoire officiel.
    Pour info, Imagify propose une version gratuite, avec laquelle vous pouvez optimiser 20Mo d’images par mois (soit environ 200 images) sur un nombre illimité de sites. Deux Licences premium permettent d’augmenter cette jauge, pour profiter soit de 500 Mo, soit d’un usage illimité (plus d’infos dans la partie sur les tarifs).

Imagify, un outil made in France

Avec 400 000 installations actives au moment de rédiger ces lignes, Imagify est l’une des extensions les plus célèbres du répertoire officiel pour compresser des images sur WordPress. 

Parmi ses principaux concurrents, vous connaissez peut-être Smush, Optimole ou ShortPixel.

Par rapport à ces trois derniers, Imagify est une solution 100% française. Derrière elle, on retrouve l’équipe de WP Media, une startup dont l’objectif est “d’améliorer le web”, et de le rendre « plus rapide ».

On peut dire qu’elle met du cœur à l’ouvrage pour remplir sa mission, puisque c’est WP Media que l’on retrouve aussi aux manettes de la célèbre extension de cache WP Rocket (aff), qui vous aide à accélérer votre site sans le moindre effort de votre part.

WP Rocket est une extension de cache WordPress.

Vous désirez apprendre à paramétrer comme un pro le plugin de cache reconnu comme étant le plus performant par les experts WordPress ? Ruez-vous sur notre guide complet de WP Rocket !

Et pour être tout à fait complet, WP Media propose également une extension bien pratique, appelée Lazy Load, pour activer le… lazy load (chargement paresseux) sur votre site. 

Le lazy load est une technique qui permet de charger certains éléments de votre page (ex : images) uniquement lorsque le visiteur scrolle au sein du contenu.

Optimiser le poids de vos images vous semble accessoire, à ce stade ? Juste en-dessous, vous allez notamment découvrir que l’utilisation d’un outil comme Imagify est indispensable pour deux raisons majeures. 

Accélérez votre site internet avec WP Rocket

Transformez votre site en fusée grâce au plugin de cache reconnu le plus performant par les experts WordPress.

Logo WP Rocket

Pourquoi est-ce si important d’optimiser le poids de vos images ?

Un impact majeur sur la performance, l’expérience utilisateur et les conversions.

Les images sont responsables de plus de 50% du poids d’une page web, comme je vous l’ai indiqué dans l’introduction de cet article.

Vous comprenez l’importance de les bichonner, en vous assurant particulièrement qu’elles ne soient pas trop lourdes.

Sinon, le temps de chargement de vos pages risque de prendre une belle gifle dans la figure, ce qui peut faire très mal à deux niveaux.

D’abord, pour l’expérience utilisateur (UX, User Experience, en anglais). Cela désigne la qualité de l’expérience vécue par un visiteur qui navigue sur votre site web.

Autant vous dire que si votre site WordPress met des plombes à se charger, il y a de fortes chances pour que votre visiteur aille voir ailleurs (et ne revienne plus). A ce propos, jetez un oeil à ces stats sur le sujet, qui se passent de commentaires : 

Un chien est étonné

Optimiser le poids des images évitera ces désagréments, et rendra votre site plus rapide. C’est également important pour votre stratégie de référencement naturel (SEO).

La vitesse d’un site fait partie de l’un des 200 critères pris en compte par Google pour positionner une page dans les résultats de son moteur de recherche (ce n’est pas le plus important, mais il compte un peu, pour schématiser), en particulier pour les recherches effectuées sur smartphones.

Par ailleurs, un site lent rendra plus difficile le travail d’exploration de vos pages par les robots de Google, ce qui peut négativement impacter l’indexation de vos contenus

Enfin, un site qui met du temps à se charger en raison d’images trop lourdes peut aussi réduire considérablement vos conversions (une action précise que vous souhaitez que votre visiteur accomplisse, comme l’achat d’un produit). 

C’est particulièrement criant pour les boutiques en ligne. Si vous disposez d’une boutique WooCommerce, faites très attention à la taille et au poids de vos images produits ! Pour info, le taux de conversion chute en moyenne de 4,42% à chaque fois que votre temps de chargement accuse une seconde de retard.

Si les images jouent un rôle prépondérant sur la vitesse de chargement d’un site, il y a pas mal d’autres optimisations à réaliser pour transformer votre site WordPress en fusée. Découvrez lesquelles dans cet article du blog de WPMarmite.

Avant de vous parler dans les détails d’Imagify et de ses réglages, je vous propose de vous focaliser sur trois éléments très importants. 

3 bonnes habitudes à prendre avec vos images

N’envoyez pas d’images surdimensionnées

Que vous soyez ou non un adepte de la photo, les fichiers créés par un appareil numérique sont aujourd’hui très volumineux.

Ils peuvent peser de 4 à 8Mo, parfois plus ! Tout dépend de vos réglages.

Pour les imprimer ou pour les retoucher sur votre ordinateur, c’est génial.

Par contre pour les diffuser sur le web, c’est tout de suite plus embêtant.

En effet, si une page doit charger une dizaine d’images de 8Mo, vos visiteurs ont intérêt d’être raccordés à la fibre optique…

La meilleure chose à faire est de redimensionner vos images avant de les envoyer sur votre site. 2000 pixels de largeur sont plus que corrects.

N’importe quel éditeur d’image peut s’en charger mais, à la longue, j’avoue que cela peut s’avérer fastidieux.

Choisissez le bon format de fichier

Vous connaissez certainement les trois principaux formats d’images universels : le JPG (ou JPEG), le PNG et le GIF.

Savez-vous comment ils se différencient ? C’est un peu technique mais cela réside dans la façon dont ils sont encodés.

En gros, comment les images sont enregistrées dans le fichier.

Cette divergence fait que certaines seront moins lourdes en JPG qu’en PNG et vice versa.

Pour vous aider à choisir le meilleur format, retenez que :

  • JPG = Photos, images dotées de milliers de couleurs ou de nuances de gris.
  • PNG = Schémas, images simples, logos ou images dotées de transparence.
  • GIF = images animées. Elles sont souvent très lourdes. Pour réduire leur poids avant de les téléverser sur votre site WordPress, utilisez l’outil Ezgif.

Vous pourrez en savoir plus sur les formats d’images grâce à cette infographie trouvée chez Korben (en anglais).

Google propose aussi son propre format d’image, appelé WebP. Il compresse encore plus les images qu’en JPG ou PNG, sans perte de qualité. Plus d’infos à ce sujet dans la partie sur les réglages d’Imagify.

Compressez les images avant de les envoyer

Avant d’envoyer des images sur un site, je prends toujours soin de les compresser.

Par exemple, après en avoir retouché une sur Photoshop, j’utilise toujours Fichier > Enregistrer sous pour trouver le meilleur compromis entre poids et qualité :

La fonction Enregistrer Sous de Photoshop permet de réduire le poids d'une image.

Passez en mode 2 vignettes et regardez le poids final, en bas de la capture (265,5 Ko contre 1,8Mo). Vous pouvez jouer avec les formats et les réglages en haut à droite (et éventuellement la taille, juste en-dessous).

Il est évident qu’il ne faut pas trop dégrader la qualité, sinon le rendu sera horrible.

Si vous êtes sur Mac, je vous conseille l’utilitaire ImageOptim pour compresser davantage sans perdre en qualité.

Par ailleurs, si vous n’utilisez pas Photoshop, sachez qu’il existe aussi plusieurs outils en ligne gratuits pour vous aider à mettre vos images au régime minceur, à l’image de : 

Voilà pour les conseils de base. Toutefois, vous allez me dire que cela peut être assez contraignant à la longue, en particulier si vous avez beaucoup d’images à optimiser. Et vous avez raison !

Les optimiser une par une peut vite s’avérer très très chronophage. Pour aller plus vite, gagner en efficacité, et automatiser tout le process, Imagify est un allié de choix. 

En plus, il vous aidera à optimiser les fichiers déjà présents dans votre Médiathèque. Que demande le peuple ? Peut-être un résumé succinct des avantages d’Imagify, pour commencer.

Une petite fille lève le pouce.

Les petits + d’Imagify sur WordPress

Si Imagify rencontre un succès certain auprès de ses utilisateurs, c’est parce qu’il cumule plusieurs avantages très intéressants : 

  • Son interface est intuitive et facile à utiliser. En plus, elle est disponible en français. Ce qui est très rare chez la concurrence.
  • Si vous choisissez d’utiliser l’extension dédiée, plutôt que le service en ligne, vous pourrez optimiser toutes vos images depuis votre tableau de bord WordPress.
  • La réduction du poids de vos images est simple et rapide : tout se fait en quelques clics et de façon automatisée.
  • Vos images peuvent être retaillées à la volée (largeur, hauteur).
  • Les trois formats d’images universels sont pris en charge (JPG, PNG, GIF), avec en plus le format PDF. 
  • Imagify utilise ses propres serveurs pour optimiser vos photos, ce qui vous permet de consommer moins de bande passante chez votre hébergeur, tout en préservant le temps de chargement de vos pages.
  • Il est possible de restaurer les images après compression, si vous avez activé l’option de sauvegarde. 

Pour voir comment tout cela fonctionne, découvrez maintenant notre tutoriel pas à pas. 

Formez-vous à WordPress en 8 semaines

Apprenez à concevoir des sites WordPress sécurisés, rapides et conformes aux obligations légales avec la formation à distance la plus généreuse du marché (éligible aux financements)

WPChef, la formation WordPress de référence

Comment paramétrer et utiliser Imagify sur WordPress ?

Je vous le disais tout à l’heure, Imagify est un service. C’est-à-dire qu’il n’est pas uniquement disponible sous forme d’extension. N’importe qui peut donc s’en servir, qu’il utilise WordPress ou non.

Comment se servir du service en ligne ?

Pour profiter de l’outil en ligne, il suffit de se rendre sur Imagify pour commencer immédiatement. Je vous conseille toutefois de créer un compte gratuit pour bénéficier de davantage de fonctionnalités.

Le service en ligne d'Imagify compresse le poids de vos images

Une fois sur le site, il suffit de choisir un mode de compression (Normal, Agressive, Ultra), puis de glisser-déposer vos images dans la zone de droite.

Pour mon test, vous pouvez voir que le gain de compression est de :

  • 8,28% en mode normal.
  • 57,57% en mode agressif.
  • 85,65% en mode ultra.

Suite à l’optimisation, il ne reste plus qu’à les télécharger en cliquant sur le bouton « Download », situé à droite. On peut aussi toutes les récupérer dans un fichier .zip en cliquant sur « Combine all your images into one zip file ».

Notez qu’avec un compte gratuit, vos images ne seront conservées que 24 heures (contrairement à 1h sans compte).

Comment configurer l’extension Imagify sur WordPress ?

L'extension Imagify sur WordPress sur le répertoire officiel

Si vous voulez que la compression des images soit automatisée, il va falloir opter pour l’extension.

Ainsi, toutes les images envoyées sur votre site seront compressées à la volée, c’est-à-dire dès leur mise en ligne.

C’est un gain de temps non négligeable, car il n’y aura plus besoin de s’occuper de toutes les tâches rébarbatives dont nous avons parlé précédemment.

Pour ce faire, il vous suffit d’installer Imagify depuis le répertoire officiel de WordPress. Des doutes sur la marche à suivre ? Consultez cette ressource.

Avec un compte gratuit, vous aurez le droit à 20Mo de compression par mois, sur un nombre de sites illimité. Si vous bloguez de temps en temps, cela sera amplement suffisant.

Ce que j’apprécie avec cette extension, c’est que l’on est guidé pas à pas (comme sur WP Rocket) :

Etapes du paramétrage d'Imagify sur WordPress

Étape 1 : Créer un compte Imagify et entrer votre clé API

Si vous n’avez pas encore de compte, cliquez sur le bouton bleu “Inscrivez-vous, c’est gratuit”. Entrez votre adresse email pour recevoir votre clé API.

API est l’acronyme d’Application Programming Interface (interface de programmation d’application). Comme indiqué ici, « une API permet de rendre disponibles les données ou les fonctionnalités d’une application existante afin que d’autres applications les utilisent. » Disons que c’est grâce à cette clé que vous allez pouvoir utiliser Imagify sur WordPress.

A présent, direction votre boîte email. Vous y trouverez un courriel d’Imagify contenant votre clé API (chiffre 3 sur la capture ci-dessous), et vos identifiants de connexion : nom d’utilisateur et mot de passe à définir ensuite (chiffre 2).

Mail de confirmation d'inscription à Imagify WordPress

A l’intérieur de cet email, cliquez sur le lien de confirmation proposé (chiffre 1). Puis, sur votre tableau de bord WordPress, cliquez sur le bouton “J’ai récupéré ma clé API”. Renseignez la clé API présente dans l’email :

Clé API pour se connecter à Imagify sur WordPress

Tout est bon pour vous ? Alors on passe sans tarder aux réglages d’Imagify.

Étape 2 : Affiner vos réglages Imagify sur WordPress

Les réglages d’Imagify sont scindés en trois parties, que nous allons développer l’une après l’autre. 

Réglages généraux d’Imagify sur WordPress

Dans ce premier menu, vous pouvez : 

  • Choisir la puissance de la compression (Normal, Agressif ou Ultra). Plus le niveau d’optimisation sera élevé, plus la compression sera forte et la qualité de l’image un peu réduite. N’hésitez pas à tester pour voir quel niveau sera le plus approprié pour vous.
  • Activer l’optimisation automatique (laissez coché).
  • Conserver une copie des images d’origine (laissez coché également).
  • Garder les données EXIF, c’est-à-dire la date de la photo, l’appareil photo utilisé et d’autres informations (sauf cas exceptionnel, ne cochez pas cette case).
Réglages généraux d'Imagify
Optimisation

Le menu Optimisation renferme 4 réglages majeurs : 

  • Format WebP : Le WebP vous permet, je vous le rappelle, de compresser encore plus les images qu’en JPG ou PNG, sans perte de qualité. Si vous avez un forfait premium chez Imagify, vous pouvez laisser les réglages d’origine. Si vous vous servez de la version gratuite, pas besoin de créer des versions WebP de vos images, cela vous évitera de gaspiller votre “crédit” mensuel d’images à optimiser.  
  • Médiathèque : Ici, vous pouvez redimensionner automatiquement les images trop grandes (2 000 pixels seront très bien, mais vous pouvez mettre moins selon votre site).
  • Tailles à optimiser : Sélectionnez bien thumbnail, medium, medium_large et large, en plus des tailles dont vous avez besoin. Même si cela consomme du crédit de compression, WordPress pourra charger ces images sur des petits écrans.
  • Dossiers personnalisés : Vous pouvez sélectionner certains dossiers de votre site (ex : wp-content) afin d’optimiser toutes les images qui y sont présentes. Imagify permet également d’optimiser les images de votre thème, si vous le souhaitez.
Le menu Optimisation d'Imagify sur WordPress
Options d’affichage

Enfin, le menu Options d’affichage permet au choix d’afficher ou de masquer le menu de réglages d’Imagify sur la barre d’outils de votre interface d’administration WordPress.

Options d'affichage d'Imagify

Une fois que vous avez effectué des réglages aux petits oignons, pensez à enregistrer les modifications en bas de la page. Il est désormais temps d’assister au clou du spectacle : l’optimisation en masse.

Étape 3 : Optimiser vos images

L’optimisation en masse

L’optimisation en masse (Imagify’s Bulk Optimizer, en anglais) permet de traiter toutes les images présentes sur votre site. Rendez-vous dans Médias > Optimisation en masse pour afficher la page suivante :

Optimisation en masse sur Imagify

Dans le cas de WPMarmite, on peut voir que le poids des images a été divisé de près d’un quart !

Je pense que le résultat aurait pu être encore meilleur si mes fichiers n’avaient pas été préalablement optimisés avant l’envoi.

Concernant l’utilisation, encore une fois c’est assez simple. Sélectionnez un mode de compression (Normal, Agressif ou Ultra) et cliquez sur le bouton bleu « Imagif'em all » (soit Imagifiez-les toutes).

Vous pouvez voir « qu’imagifier » est même devenu un verbe !

L’optimisation au cas par cas

Si jamais vous désirez optimiser des images au cas par cas, rendez-vous dans la Médiathèque pour retrouver une colonne Imagify.

Optimisation au cas par cas des images avec Imagify sur WordPress

Grâce à elle, vous y trouverez les statistiques de compression de chaque image, vous pourrez les optimiser dans d’autres modes ou restaurer l’image d’origine (si vous avez coché l’option dans les réglages bien sûr).

Eh bien, cela en fait, des choses. Si vous désirez avoir un aperçu complémentaire des réglages d’Imagify sur votre site WordPress, la chaîne YouTube de WPMarmite vous propose cette vidéo complémentaire sur le sujet :

Combien coûte Imagify ?

Jusqu’à présent, je vous ai dit que 20Mo de compression vous étaient offerts chaque mois.

C’est très bien si vous gérez un petit blog, mais si vous avez besoin de plus de ressources, il faudra opter pour une de leurs deux licences payantes. Les voici en détail :

Les licences de prix d'Imagify

Au-delà du prix, la différence entre les Licences « Growth » (4,99$/mois) et « Infinite » (9,99$/mois) repose sur le poids total des images que vous pouvez optimiser.

Avec l’offre « Growth », vous êtes limité à 500Mo par mois (+ 5$ par Go additionnel), ce qui correspond à environ 5 000 images.

Pour profiter de l’illimité, vous devrez basculer sur l’offre « Infinite« .

Comme vous pouvez le voir, les abonnements vous sont d’abord proposés mensuellement. Cependant, il est possible de régler annuellement pour obtenir deux mois gratuits.

Enfin, si vos besoins ne correspondent pas aux offres proposées, il vous reste la possibilité de faire une demande de devis personnalisée pour obtenir Imagify sur WordPress en premium.

Le Ptit Bouillon, votre antisèche sur l’actu WordPress

Recevez gratuitement les dernières infos de l’écosystème WordPress tous les 15 jours et créez de meilleurs sites.

Alors, on donne une image à Imagify ?

Imagify est une excellente extension WordPress pour réduire efficacement le poids de vos images, sans rogner sur leur qualité. Je vous la recommande les yeux fermés, aussi bien pour son efficacité que pour sa simplicité d’usage.

Grâce à elle, vous vous assurez de ne pas plomber la vitesse de chargement de votre site, tout en soignant l’expérience utilisateur de vos visiteurs.

Télécharger le plugin Imagify:

Vous l’avez compris, Imagify s’adresse à tous les créateurs de sites WordPress. Si vous bloguez une à deux fois par semaine, l’offre gratuite vous conviendra amplement, à condition de ne pas envoyer des images de 5Mo ! 

Et pour 4,99$/mois, vous pourrez déjà optimiser des Médiathèques conséquentes (environ 5 000 images). Pour les plus voraces d’entre-vous, l’abonnement illimité vous permettra de dormir sur vos deux oreilles 😉.

Quoi qu’il en soit, rappelez-vous : ne vous affranchissez pas des bonnes pratiques en amont. Avant de télécharger vos images sur WordPress et d’utiliser Imagify, pensez d’abord à réduire leur taille et leur poids grâce aux conseils livrés tout au long de ces lignes : Imagify n’en sera que plus efficace.

Avez-vous déjà prêté attention à la compression des images sur votre site ? Si oui, que pensez-vous d’Imagify ?