Comment optimiser vos images dans WordPress ?

Temps de lecture : 5 minutes

Comment optimiser les images dans WordPress, pour réduire le poids et la vitesse de chargement ?

Dans cet article, nous vous expliquons tout ce qu’il faut savoir pour optimiser les images dans WordPress , pour réduire leur poids et leur temps de chargement.

C’est l’une des tâches les plus importantes lors de l’ optimisation de WordPress .

Pourquoi est-il nécessaire d’optimiser les images dans WordPress ?

Il existe plusieurs raisons pour lesquelles vous devez optimiser les images dans WordPress .

Votre WordPress sera plus rapide

Oui, plus les images que vous téléchargez sont légères, plus votre site Web WordPress se chargera rapidement.

Et plus votre site Web est rapide, plus il aura de visites et de conversions.

Vous économiserez des ressources sur l’hébergement

Quand je parle de ressources, je parle d’espace d’hébergement, car ils pèsent moins, ils prennent moins de place.

Mais économisez également de la bande passante, au cas où vous auriez une limite et économisez même du CPU et de la RAM, car ils nécessiteront moins de ressources pour se charger.

Comme, vous voyez, c’est tous les avantages.

Les meilleurs plugins pour optimiser les images dans WordPress

Il existe de nombreux plugins pour optimiser les images dans WordPress , mais voici les plus connus, avec un résumé de leurs avantages et inconvénients :

• Imagify : Le plugin que nous utilisons, car c’est le plus complet et le plus simple d’utilisation. Il prend en charge toutes les tâches nécessaires, même en faisant une copie de sauvegarde des images. Il a une version gratuite avec une limite d’image et la version premium, qui est celle que j’ai.
• WP Smush : L’un des plus connus et aussi très complet, mais la version gratuite est limitée en termes de compression d’image et la version payante est excessive.
• ShortPixel Image Optimizer : Un autre excellent, mais je n’aime pas ses limites.

Quel que soit votre choix, ce sera une bonne option, car ils ont des fonctions similaires.

 

Comment optimiser les images dans WordPress ?

Quelles sont les étapes pour optimiser les images dans WordPress .

Important : il est fortement recommande de faire une sauvegarde des images , car selon le plugin que vous utilisez et les tâches que vous effectuez, ces modifications seront irréversibles.

1. Choisissez le bon format d’image

Les formats d’image les plus connus sont PNG et JPEG, bien qu’il existe déjà des formats plus récents comme WebP :

• PNG : je recommande l’utilisation pour les images qui nécessitent une faible qualité ou qui utilisent des arrière-plans transparents.
• JPEG : idéal pour les photos ou images de haute qualité.
• WebP : Beaucoup plus léger, mais il n’est pas encore compatible avec tous les navigateurs, il faut donc savoir le configurer correctement.

2. Nommez efficacement les images

Nommer les images de manière efficace améliore un peu les temps de chargement en faisant « réfléchir moins » les navigateurs.

Mais surtout, cela vous évite des problèmes lorsqu’il s’agit de partager ces images ou de les analyser avec certains outils.

Idéalement, utilisez des noms d’image sans espaces, majuscules, accents ou caractères étranges.

Ensuite, vous pouvez utiliser le texte alternatif , pour mettre le nom approprié, pour améliorer le référencement.

3. Indique une taille maximale des images

Il est très important d’indiquer une taille maximale des images , afin que celles que nous téléchargeons sur le Web ne soient pas trop grandes, surtout si le Web est destiné à quelqu’un qui a peu de connaissances.

Nous recommandons à ce titre une taille d’image maximale de 1200px , bien que cela dépende évidemment de chaque site Web.

Imagify permet de réduire la taille maximale des images, mais utilise la taille maximale du thème , qui est parfois trop grande pour les images utilisées.

Dans ce cas, l’idéal est d’utiliser le plugin Imsanity , qui se chargera de reprendre toutes les images de votre site web et de les réduire à la taille que vous souhaitez.

4. Réduire le poids des images

La tâche la plus importante est de réduire le poids des images , car ce sera ce qui les accélère et je recommande de le faire avec Imagify, car il vous permet de choisir différentes qualités d’optimisation.

Une fois que vous avez mis l’API, que ce soit celle gratuite qu’elle vous donne ou si vous en avez payé une, vous allez dans Paramètres – Imagify – Niveau d’optimisation.

Au fait, activez la boîte de sauvegarde pour les images d’origine, au cas où vous auriez besoin de revenir à ce qu’elles étaient.

Une fois configuré, vous allez dans Média – Optimisation de masse et cliquez sur le bouton IMAGIF’EM ALL, afin qu’il optimise toutes les images.

Le processus se terminera lorsqu’il atteindra 100 %.

5. Téléchargez des images avec la bonne taille

Bien qu’il y ait maintenant une limite de téléchargement et que les images soient compressées, vous devez télécharger les images avec la taille appropriée .

Cela signifie que si vous allez insérer une image sur une page qui occupe un espace de 500px x 500px, téléchargez-en une de cette taille et non une qui a une taille de 1000px x 1000px.

Avec le gestionnaire de médias WordPress, vous pouvez les redimensionner , mais cela créera une URL d’image plus complexe à utiliser.

6. Spécifiez la largeur et la hauteur des images

Une erreur très courante lors de l’ajout d’images manuellement et dans certains thèmes et plugins, est qu’ils n’ajoutent pas la largeur (largeur) et la hauteur (hauteur) des images .

Ou même, ils l’ajoutent, mais au lieu d’indiquer la taille exacte, ils le mettent en auto .

Lorsqu’un navigateur charge une image, il s’attend à connaître sa taille afin de pouvoir lui allouer un espace suffisant.

Si la taille de l’image n’est pas indiquée, l’image met plus de temps à se charger, jusqu’à ce qu’elle découvre sa taille, ce qui ralentit le chargement , en plus du fait que dans PageSpeed ​​​​vous verrez l’avertissement « Éléments d’image n’ont pas de largeur et de hauteur explicites ».

C’est aussi simple que si nous avions une image de 800px x 600px, indiquant ce qui suit dans son code :

 

<img width= »800″ height= »600″ src= »example-image-url »>

7. Utilisez les vignettes autant que vous le pouvez

Les vignettes WordPress sont de petites images qui sont créées chaque fois que vous téléchargez une nouvelle image sur votre WordPress.

La bonne chose à ce sujet est que les images sont utilisées à une taille exacte et que le Web se chargera plus rapidement.

La mauvaise chose est que quelques-uns sont créés à partir de la même image, avec l’ utilisation conséquente de l’espace dans l’hébergement .

Si vous allez dans Paramètres – Média , vous verrez que vous pouvez choisir des tailles de vignettes prédéfinies.

Nous vous recommandons d’ utiliser des tailles standard pour vos articles et donc de les rendre tous identiques.

Vous configurez, téléchargez l’image et elle est prête à être insérée dans les tailles dont vous avez besoin .

8. Servir les images avec un CDN

Si votre site web charge beaucoup, l’idéal est que vous utilisiez un CDN pour les images .

Un CDN est un service qui sera chargé de diffuser les images, depuis l’emplacement le plus proche de votre public cible.

Cela accélérera leur chargement et vous fera également économiser des ressources d’hébergement.

 

9. Utilisez des images WebP

Les images WebP sont beaucoup plus légères que les autres, mais elles ne sont pas prises en charge par tous les navigateurs.

Imagify est utilisé pour créer et remplacer ces types d’images, mais je vous recommande de jeter un œil à mon guide sur les images WebP dans WordPress .

10. Optimiser les images Gravatar

En plus des images normales, il existe également des images Gravatar , qui sont téléchargées à partir d’un serveur externe.

Ces images ne peuvent pas être optimisées par les plugins d’optimisation d’image, mais il existe des moyens d’ optimiser les images Gravatar .

11. Appliquer la charge différée aux images

La dernière étape consiste à appliquer le Lazy Load ou chargement différé aux images, car les images qui ne sont pas chargées ne ralentissent pas.

 

J’espère que vous trouverez ce guide utile pour optimiser les images WordPress .

Si vous avez des questions, n’hésitez pas à utiliser les commentaires.