Comment optimiser les images de ton site

Vous êtes nombreuses à venir vers moi pour l’optimisation de vos sites. Optimisation de sécurité mais aussi de performance et de rapidité. Alors aujourd’hui nous allons aborder une des principales sources de lenteur d’un site WordPress, le poids des contenus qu’il contient. Notamment les images !

Et oui, souvent complètement zappé, on télécharge nos images sans réfléchir sur notre site … et puis, oupsi. Sans t’en apercevoir tu viens en quelques secondes d’allonger le temps de chargement de tes pages.

Fais-moi confiance ce n’est pas du tout dans ton intérêt. Temps de chargement trop long qui décourage ton visiteur, impact négatif sur ton référencement, grignote tout ton espace de stockage, etc. 

Et quand je pense avec quelle facilité il est possible de remédier à ce problème je me dis que c’est vraiment dommage que tu n’en profites pas… Alors avec quelques explications, outils et astuces je vais te guider pour que l’optimisation de tes images n’est plus de secret pour toi ! Que tu puisses en faire un automatisme pour gagner en temps et en efficacité.

Tu vas voir qu’il n’est pas si difficile d’optimiser tes images pour ton site web tout en gardant bien sûr l’équilibre entre la performance et la qualité 😉

Pourquoi optimiser tes images

Avant d’attaquer le vif du sujet et te montrer comment optimiser tes images je voudrais t’expliquer pourquoi c’est nécessaire et les avantages que tu pourras en retirer.

Pour te donner une idées les images représentent en moyenne 21% du poids total d’une page web. Donc autant te dire que c’est énorme !
Aussi quand il s’agit d’optimiser ton site WordPress, après le contenu vidéo, les images sont de loin les contenus les plus gourmands.

Je te conseille donc de commencer par elles quand tu souhaites optimiser la rapidité de ton site.

Le plus ironique c’est que c’est une des optimisations les plus rapide et facile à mettre en place et pourtant très souvent oubliée ou négligée.

Et voici un aperçu de quelques avantages pour t’inciter à t’y mettre 😉

◾ Améliorer la vitesse de chargement de tes pages

◾ Améliorer ton référencement (les moteurs de recherches n’aiment pas les sites lents et possibilité d’être indexé plus rapidement dans les recherches d’images)

◾ Utilise moins d’espace de stockage sur ton serveur (et si tu as une limite c’est toujours pratique de ne pas tout cramer juste en images)

◾ Création de tes sauvegardes plus rapides et fichiers de sauvegardes plus légers 

Comment optimiser tes images pour le web

L’objectif principal de l’optimisation d’images est de trouver un équilibre entre la légèreté du fichier et la qualité de l’image. Parce qu’on est bien d’accord que qu’optimiser ses images pour un site plus rapide c’est bien mais jamais au détriment de la qualité du contenu que tu proposes.

Pour effectuer cette optimisation tu as 2 solutions.
Compresser tes images avant de les télécharger sur WordPress ou utiliser un plugin.

Commençons donc par la compression du fichier.
Plusieurs logiciel existe aujourd’hui pour t’y aider et on retrouve dans les plus populaires Adobe Photoshop ou Affinity Photo.
A ce stade les deux choses principales à considérer sont le format de ton fichier et le type de compression à utiliser. En choisissant la bonne combinaison tu pourras réduire la taille de ton image jusqu’à 5 fois (et oui rien que ça !).

Les différents formats d’images

Alors pour t’aider à choisir le bon format de fichier voici un récap :

◾ PNG – Image de très bonne qualité, mais donc aussi un fichier de plus grande taille (lossless mais possibilité lossy).

◾ JPEG – Possible d’ajuster assez facilement pour trouver un équilibre entre qualité et taille du fichier (lossy ou lossless).

◾ GIF – Meilleur choix pour les images animées (Lossless).

Il en existe évidement plusieurs autres, comme JPEG XR et WebP, mais n’étant pas universellement supportés par tous les navigateurs nous n’entrerons pas dans le détail ici.

Idéalement, je te conseille d’utiliser un format JPEG (ou JPG) pour les images complexes avec beaucoup de couleurs et un format PNG pour les images plus simples.

Optimisation lossy ou lossless (avec ou sans perte)

Maintenant que tu gères la partie format de ton image passons à la compression. Il en existe aujourd’hui 2 types que tu peux utiliser : lossy et lossless.

◾ Lossy – Filtre qui élimine certaines données de ton image et donc la dégradera. Cela nous permet une réduction de l’image conséquente mais pas sans impact. Attention donc !

◾ Lossless – Filtre qui compresse les données. Pas d’impact sur la qualité mais réduction mons conséquente.

Chaque image peut être différente et tes objectifs avec celle-ci également alors n’hésite pas à tester différents formats et différentes compressions pour voir ce qui fonctionne le mieux pour toi ! 🙂

Et dans le cas d’une optimisation pour un site web comme ici, je te conseille aussi d’utiliser l’option “Enregistrer l’image pour le web” présente dans de nombreux logiciels aujourd’hui. Cette option te guidera pour une compression optimale !

Plugin d’optimisation d’images sur WP

J”espère ne pas t’avoir perdue ou effrayée avec mes précédentes explications ^^

Mais je te rassure aujourd’hui avec WordPress tu n’as plus à faire toute cette optimisation à la main ! Il existe plusieurs plugins qui peuvent optimiser automatiquement tes images au fur et à mesure que tu les télécharges sur ton site. Magique non ? 🤩
Puis évidement tu pourras aussi optimiser celles déjà présentent sur ton site avant cela.

Attention cependant, je préfère préciser qu’il n’est pas vraiment idéal de te fier uniquement au plugin. Dans le meilleur des cas commence par redimensionner rapidement ton image avec un logiciel de retouche photo plus laisse le plugin finir le travail.

Cela étant dit voici 5 plugins WordPress pour t’aider à optimiser tes images :

En ce qui me concerne coup de coeur pour Imagefy ! Que je trouve le plus efficace et avec le meilleur rapport qualité/prix. C’est donc celui avec lequel j’ai choisir de travailler pour moi et mes sites clients ! Pour la petite histoire il est développé par la même équipe que WP Rocket (leader des plugins de cache) que j’utilise et te conseille également pour poursuivre l’optimisation de ton site. Mais c’est un autre sujet à venir 😉

Une fois tes images optimisées pour ton site web tu verras rapidement une vraie différence ! Chargement des pages plus rapides, meilleur référencement et meilleure indexation.

Alors as-tu optimisé tes images ? A la main ? Avec un plugin ? Un retour d’expérience ou un plugin WP à conseiller ? Dis-nous tout en commentaires 😃

0 commentaires

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée.