Comment optimiser les images dans WordPress ?

Les images sont une partie importante de tout site Web. Ils peuvent être utilisés pour créer une ambiance, présenter des produits ou ajouter un intérêt visuel à une page. Mais parfois, vous n'avez peut-être pas les meilleures images pour votre site qui lui donneraient le meilleur aspect.

Heureusement, WordPress possède des fonctionnalités intégrées qui aideront à optimiser les images afin qu'elles se chargent plus rapidement et prennent moins de place sur votre site sans compromettre la qualité !

Trouver des images non optimisées dans GTmetrix + PSI

Le meilleur moyen de trouver des images à optimiser sur votre site est d'utiliser un outil en ligne gratuit, comme GTmetrix ou PSI. Ces deux outils parcourent les fichiers de votre site Web et vous fournissent un rapport facile à comprendre sur ce qui doit être optimisé pour qu'il se charge plus rapidement.

Optimiser les images à l'aide des plugins et services WordPress

Il existe également de nombreux plugins d'optimisation d'images WordPress (payants et gratuits), tels que EWWW Image Optimizer, qui fonctionnent très bien pour compresser les images afin de les charger plus rapidement sur votre site Web.

Il existe également des services qui le feront pour vous, comme TinyPNG et Kraken Image Optimizer, qui compressent les images sans en affecter la qualité.

Utiliser la bonne taille d'image

Tout comme vous devez redimensionner vos graphiques, vidéos et autres médias pour la largeur du blog dans l'éditeur WordPress avant de le télécharger, vous devez également vous assurer que les fichiers image sont également redimensionnés. Cela garantit qu'aucune de vos images ne prendra plus de place qu'elles ne le devraient !

Cacher les images

Une autre façon d'optimiser les images est de les mettre en cache. Cela garantit que votre site se chargera plus rapidement même si plusieurs personnes le visitent en même temps, car les visiteurs qui accèdent à une page contenant des images en cache n'auront pas à attendre que ces fichiers soient téléchargés avant de pouvoir voir quoi que ce soit !

Le plugin WP Smush le fait automatiquement une fois que vous l'avez installé et activé (et vous devez absolument faire ces deux choses !). Vous pouvez également utiliser des plugins, comme Autoptimize ou Wp Super Cache, qui non seulement mettent en cache mais réduisent également le code.

Utilisez LazyLoad pour différer les images hors écran

LazyLoad est une fonctionnalité plus récente et moins connue de WordPress qui vous permet de différer le chargement des images jusqu'à ce que l'utilisateur défile jusqu'à sa position sur votre site. Lorsqu'elles le font, ces images se chargent alors rapidement car elles n'étaient pas chargées lors de la première récupération de la page !

Utiliser la compression d'image

Vous pouvez utiliser deux types différents de compression d'image : LZW ou JPEG. La différence entre eux a plus à voir avec le type de fichier graphique dans lequel il va qu'autre chose, alors choisissez celui qui convient le mieux à votre situation !

Cela fonctionne en réduisant le nombre de couleurs utilisées dans une image, ce qui signifie que moins de données doivent être transférées du côté serveur vers le côté client pendant la navigation. Cela réduit l'utilisation de la bande passante ainsi que le temps de chargement.

La compression d'image est un élément impératif de tout site, et WordPress dispose d'un certain nombre de plugins de compression qui faciliteront la création de sites avec des images de haute qualité sans compromettre les performances !

Servir des images dans des formats de nouvelle génération

Il est important de réaliser qu'il existe de nombreux formats d'image différents et que tous ne fonctionneront pas bien pour votre site. Si vous cherchez à améliorer les performances de n'importe quel site Web, il est nécessaire d'utiliser des formats de nouvelle génération, tels que WebP ou JPEG XR, qui ont généralement une meilleure compression que les autres types.

Spécifier les dimensions de l'image

En spécifiant les dimensions des images, vous indiquez à WordPress l'espace à utiliser lors de leur placement sur votre site. Ceci est important car cela réduit la pression sur la bande passante, ce qui signifie un temps de chargement de page plus rapide !

Servir des images à partir d'un CDN

Un CDN est un moyen rapide et efficace de diffuser les images de votre site Web à partir de serveurs géographiquement plus proches. Cela réduit la latence, ce qui signifie des temps de chargement plus rapides pour les utilisateurs !

Combiner des images à l'aide de sprites CSS

Les sprites CSS sont un type d'image qui combine en fait toutes vos petites images en un seul gros fichier. Ceci est utile car cela réduit le nombre de demandes de fichiers, ce qui signifie un temps de chargement plus rapide, en particulier sur les appareils mobiles ! Vous pouvez utiliser un générateur de sprite CSS pour en créer un, puis l'ajouter à votre thème avec CSS.

Utiliser des images adaptatives pour mobile

Les images adaptatives sont un excellent moyen de proposer différentes tailles d'images aux utilisateurs sur différents appareils. Cela réduit l'utilisation de la bande passante et les temps de chargement ! Vous pouvez le faire avec un plugin WordPress, mais il existe également de nombreuses autres façons de le faire gratuitement par vous-même.

Désactiver le lien hypertexte des images

Lorsque vous créez un lien hypertexte vers une image, vous créez essentiellement un lien vers le fichier d'origine sur le serveur de quelqu'un d'autre. La désactivation empêche les gens de voler votre bande passante, c'est donc quelque chose que vous voudrez faire.

Vous pouvez le faire avec de nombreux plugins WordPress, comme WP Rocket. Vous pouvez généralement aussi demander à votre hôte de le faire pour vous (si vous êtes avec un bon hôte).

Supprimer les données EXIF

Les données EXIF ​​sont des informations cachées que vous ne pouvez pas voir dans votre éditeur WordPress, mais elles peuvent être vues par d'autres. Il contient des informations telles que la marque et le modèle d'un appareil photo ainsi que ses paramètres de date et d'heure. Supprimer cela réduira l'utilisation de la bande passante !

Ce processus implique l'utilisation d'un outil de nettoyage d'images tel que JPEGsnoop ou jhead, qui vous permet de supprimer toutes les données EXIF ​​des images de votre site - sans avoir à les télécharger au préalable !

Servir des images de qualité inférieure aux utilisateurs sur des connexions lentes

C'est quelque chose que vous pouvez faire avec vos images, mais tous les thèmes n'auront pas la possibilité de le masquer. Fondamentalement, ce qu'il fait, c'est servir des images de qualité inférieure aux personnes sur des connexions lentes (mobiles ou autres). Vous pouvez le faire avec le plugin Optimole.

Pourquoi est-il important d'utiliser des images optimisées ?

Les images peuvent jouer un rôle important dans les performances de votre site, il est donc important de les optimiser ! Cela garantira que les images se chargent aussi rapidement et efficacement que possible.

Plus votre site Web se charge rapidement, mieux c'est pour les utilisateurs et les moteurs de recherche ! Le temps de chargement a récemment reçu plus de poids dans les classements de Google (mais seulement légèrement), mais même si ce n'était pas vrai, vous voudriez toujours vous assurer que tout se charge le plus rapidement possible.

Les gens détestent attendre sur les sites, en particulier les utilisateurs mobiles, ce qui fait de l'optimisation des images un élément essentiel de tout site WordPress. Cela aide également au référencement car Google aime aussi les sites Web à chargement rapide (pour une bonne raison).

Conclusion

En conclusion, les images sont une partie importante de tout site Web. Ils peuvent être utilisés pour créer une ambiance, présenter des produits ou ajouter un intérêt visuel à une page.

Cependant, il arrive parfois que les images d'origine ne soient pas suffisamment optimisées et prennent plus de place que nécessaire. WordPress dispose d'un certain nombre de fonctionnalités pour optimiser ces fichiers afin qu'ils se chargent plus rapidement sans compromettre la qualité ! Le meilleur moyen est d'installer un plugin de compression d'image, comme LazyLoad ou PSI, qui compressera et redimensionnera automatiquement vos images pour vous si nécessaire. Vous pouvez également optimiser les images en spécifiant leurs dimensions, en utilisant des sprites CSS, en utilisant la mise en cache des images et