Comment optimiser les images pour WordPress [Guide ultime]

Si vous avez un site WordPress, vous êtes conscient des difficultés de sa maintenance. Parfois, vous pouvez passer des heures sur quelque chose qui ne devrait prendre que quelques minutes à accomplir. Cela peut se produire si votre site est lent et gonflé à cause d'images trop grandes ou mal optimisées.

De plus, l'utilisation de techniques d'optimisation des moteurs de recherche aidera les visiteurs à vous trouver et à les garder sur votre site Web. L'optimisation de vos images pour le Web fait partie de ces pratiques.

Considérez chaque pixel comme une zone d'optimisation possible chaque fois que vous concevez ou modifiez une image. Il faut du temps et des efforts pour considérer les pixels comme des pièces individuelles, mais cela en vaut la peine.

Cependant, il existe plusieurs façons d'optimiser les images dans WordPress. N'oubliez pas que l'objectif est de réduire la taille du fichier sans compromettre la qualité de l'image.

Cet article vous apprendra comment optimiser vos images WordPress et libérer plus de temps pour d'autres activités.

Qu'est-ce que l'optimisation d'image ?

Il s'agit d'un processus de réduction de la taille du fichier d'une image sans affecter sa qualité et en appliquant des techniques de référencement d'image appropriées. Les images optimisées sont plus faciles à stocker sur un disque dur ou à télécharger sur Internet. De plus, il a moins de problèmes potentiels en raison des vitesses de téléchargement lentes.

La taille de vos images a un impact non négligeable sur le temps de chargement de votre site internet. Généralement, plus l'image est grande, plus le navigateur du visiteur mettra du temps à se charger. Cela peut être frustrant pour vos visiteurs et peut les amener à quitter votre site Web.

Vous devez suivre quelques conseils d'optimisation essentiels pour vous assurer que vos images sont optimisées pour les performances.

Avantages de l'optimisation d'image

Pour devenir un webmaster performant, vous devez comprendre le fonctionnement des images sur un site Web. Il se peut également que vous deviez optimiser certaines images de temps à autre.

Les avantages de l'optimisation d'image sont :

• Temps de chargement de page plus rapides : les images optimisées se chargent rapidement, ce qui se traduit par un site à chargement plus rapide. Ceci est particulièrement important pour les utilisateurs mobiles, qui sont plus susceptibles d'abandonner un site Web qui prend trop de temps à charger.
• Classements SEO améliorés : les images optimisées aident également le classement SEO de votre site. Google utilise la vitesse de chargement de votre page comme facteur de classement. L'optimisation de vos images peut donc vous aider à vous classer plus haut dans les résultats de recherche.
• Utilisation réduite de la bande passante : les images optimisées utilisent moins de bande passante, ce qui peut vous faire économiser de l'argent sur votre facture d'hébergement.
• Amélioration de l'expérience utilisateur : un site Web bien optimisé offre une meilleure expérience utilisateur, avec des chargements de page plus rapides et de meilleures performances des moteurs de recherche.
• Réduction des temps de téléchargement sur mobile : des images optimisées peuvent également contribuer à rendre votre site adapté aux mobiles, ce qui est crucial pour le classement de Google dans les recherches sur mobile.
• Satisfaction client : une meilleure expérience utilisateur augmente la satisfaction client, ce qui entraîne une augmentation des ventes et davantage de clients fidèles.

14 choses essentielles pour optimiser les images pour le Web

Il serait préférable de prendre en compte de nombreux facteurs lors de l'optimisation d'une image pour une utilisation Web. Il existe de nombreux types de fichiers différents et plusieurs façons différentes de les optimiser. Voici quelques éléments à prendre en compte lors de l'optimisation d'images pour le Web.

Qualité vs taille :

La qualité d'une image est toujours importante, mais vous devez également tenir compte de la taille du fichier lorsqu'il s'agit d'optimiser pour une utilisation Web. Il serait préférable de garder la taille de fichier de vos images aussi petite que possible sans sacrifier la qualité pour accélérer le temps de chargement sur les pages Web.

La résolution standard des images sur le web est de 72 DPI (Dots Per Inch). Par conséquent, il est recommandé d'enregistrer les images au format JPG plutôt qu'au format PNG, car ce type de fichier est plus petit.

De plus, il serait préférable d'utiliser la profondeur de couleur la plus faible possible sans compromettre la qualité de l'image. La profondeur de couleur standard est de 24 bits , qui peut être modifiée dans les propriétés du fichier.

Format de fichier image :

Pour déterminer quel format d'image choisir, il est nécessaire de comprendre les différentes images et leurs finalités. Vous devez enregistrer votre fichier au format JPG , mais lors de l'optimisation des images pour le Web, choisissez PNG-8 ou PNG-24.

Généralement, les fichiers PNG conviennent mieux aux images avec beaucoup de couleurs et d'arrière-plans transparents, tandis que les fichiers JPEG conviennent mieux aux images avec beaucoup de détails.

Par conséquent, vous devez utiliser le format PNG pour les images avec des arrière-plans transparents et JPEG pour les images avec beaucoup de détails afin d'optimiser vos fichiers image pour le Web.

Taille et dimensions du fichier :

Lors de l'optimisation d'une image pour le Web, deux facteurs principaux à prendre en compte sont la taille du fichier et ses dimensions. Il est préférable d'expérimenter avec l'un de ces facteurs avant de changer l'autre, afin que vous puissiez voir ce qui aide votre objectif d'avoir une taille de fichier plus petite ou une image plus grande.

Les fichiers image volumineux peuvent ralentir le fonctionnement d'un site Web , il est donc nécessaire de redimensionner vos images avant de les télécharger. Les dimensions recommandées pour les images d'une page Web sont de 600 à 800 pixels de large et de 500 à 600 pixels de haut.

Plus important que cela entraînera très probablement le redimensionnement de l'image par le navigateur, ce qui entraînera une perte de qualité.

Rank Math est parfait pour ajuster automatiquement la résolution de vos images. Il ajoutera les dimensions de l'image pour vous afin que vous n'ayez pas à vous soucier de ses dimensions.

Améliorer le référencement des images :

Chaque image que vous téléchargez sur votre site Web doit servir de source d'information pour les moteurs de recherche. Les fichiers image avec plus de détails sont meilleurs pour l'optimisation des moteurs de recherche.

Les pratiques de référencement d'images les plus convaincantes sont :

• Optimiser le texte du titre de l'image : lorsque vous enregistrez vos images, assurez-vous de leur donner des titres informatifs. Il apparaîtra comme une info-bulle lorsque le curseur survole l'image. De plus, il est avantageux pour les moteurs de recherche d'apprendre l'image.
• Utiliser les balises Alt : les moteurs de recherche utilisent également des balises Alt lors de l'indexation des images. Le texte de la balise alt doit être adapté à chaque image et décrire le contenu de l'image aussi précisément que possible.
• Utilisez des noms de fichiers image appropriés : si possible, les noms de vos fichiers image doivent également être descriptifs et inclure des mots-clés. Lorsque vous travaillez avec un logiciel d'édition d'images, enregistrez vos images avec un nom de fichier descriptif.

Remarque- Si vous utilisez le plugin WordPress Rank Math, vos images seront optimisées pour le référencement, et le nom du fichier d'images et la balise alt incluront automatiquement des mots-clés.

Compression appropriée :

C'est un autre facteur clé à prendre en compte lors de l'optimisation de vos images. Vous devez compresser vos images autant que possible avant de les télécharger sur le serveur.

Vous devez utiliser un outil de compression tel que Photoshop ou GIMP pour ce faire. Alternativement, vous pouvez utiliser des outils gratuits tels que TinyJPG et ImageOptim . Il est toujours recommandé d'avoir des images compressées sur votre site Web pour accélérer le temps de chargement.

Alternativement, vous pouvez utiliser un plugin tel que ShortPixel ou WP-Optimize pour compresser automatiquement vos images lors de leur téléchargement sur votre site Web. Ces plugins sont recommandés pour tous ceux qui cherchent à optimiser les images sur leur site Web.

Vous devez garder à l'esprit les faits suivants lors de la compression d'images :

• Avec perte : La compression avec perte est un type de compression qui supprime certaines données d'une image pour réduire la taille du fichier. Ce type de compression est souvent utilisé pour les images qui ne subiront aucune perte notable de qualité.
• Sans perte : Une compression sans perte est une forme de compression qui supprime certaines informations redondantes sans réduire la qualité du contenu. Ce type de compression est souvent utilisé pour les images qui doivent conserver leur qualité après compression, telles que les images JPEG sans perte.

Vous pouvez en savoir plus sur la compression sans perte d'annonces avec perte sur le blog de ShortPixel.

Diffusez des images dans des formats nouvelle génération :

Par défaut, les navigateurs essaieront de charger les images dans le même format que celui dans lequel elles ont été enregistrées. Par exemple, une image JPEG est chargée lorsque l'URL contient .jpg. Cependant, vous pouvez forcer les navigateurs à charger un format d'image différent en utilisant l'extension de fichier correcte.

Par exemple, si vous avez une image JPEG, vous pouvez changer l'extension en .png, et le navigateur chargera alors cette image.

Vous pouvez le faire en utilisant le plugin WordPress JPG vers PNG. Avec ce plugin, vous convertirez automatiquement toutes vos images JPG en fichiers PNG. Vous pouvez suivre un guide sur la façon de convertir des images PNG en JPG dans WordPress.

Vous pouvez facilement trouver des images de diffusion au format nouvelle génération à l'aide de GtMatrix ou de l'outil Google Page Speed ​​Insight.

Remarque- En général, il est sage d'enregistrer les images sous les deux types de fichiers à afficher par les navigateurs qui reconnaissent différentes extensions de fichiers. Ce faisant, si un fichier ne se charge pas, vous pouvez remplacer le JPEG cassé par un PNG sans avoir à télécharger à nouveau l'image.

Combinez des images à l'aide de sprites CSS :

La combinaison d'images était traditionnellement réalisée à l'aide d'un logiciel de retouche d'images. Cependant, on découvre maintenant que la méthode des sprites CSS pourrait également être utilisée pour combiner des images.

Le processus consiste à créer une image vide et à charger les images que vous souhaitez y combiner à différentes positions. Ensuite, en utilisant CSS, chacune de ces images individuelles peut être positionnée sur la même zone de la nouvelle image.

Par conséquent, le navigateur peut télécharger un seul fichier image plutôt que plusieurs images. Ceci est particulièrement important pour les appareils mobiles, car ils ont généralement des connexions Internet plus lentes. Vous pouvez le faire avec un générateur de sprites CSS.

Désactiver le lien direct vers les images :

Le lien direct d'une image implique que n'importe qui peut prendre vos images et les publier sur son site Web. En conséquence, vous subirez une perte de bande passante gênante car les images seront téléchargées de votre serveur vers un autre serveur. Vous pouvez empêcher cela en utilisant une protection par lien dynamique pour vos images.

Vous pouvez configurer la protection des liens d'image via votre compte cPanel. Le processus est très simple.

• Vous verrez une icône intitulée Hotlink Protection sous l'onglet Sécurité.
• Cliquez sur cette icône pour accéder à la fenêtre suivante.
• Cliquez sur le bouton Activer pour empêcher vos images d'être liées.

Remarque- Si vous êtes un utilisateur Cloudflare, vous pouvez empêcher vos images d'être liées en activant l'option " Hotlink Protection ".

Images en cache :

Pour tout site web, c'est essentiel. Vous devez mettre vos images en cache afin que les gens puissent les voir plus rapidement. Dans la plupart des cas, les visiteurs de sites Web existants l'ont mis en cache sur leur navigateur, mais s'il y a un problème avec votre hébergement, vous pouvez le configurer séparément.

Chaque fois que vous installez WordPress à l'aide d'un service d'hébergement, le fournisseur d'hébergement s'occupe de toute la mise en cache pour vous. Vous pouvez également installer un plugin de mise en cache.

WP Rocket est un plugin idéal pour la mise en cache des images car il est simple à utiliser et à installer. Il vous suffit de l'installer et de l'activer, puis vous êtes prêt à partir. Bien sûr, il existe d'autres plugins de mise en cache, mais WP Rocket est le premier choix à cet effet.

Cache Gravatars :

Un gravatar est une petite icône qui suit votre adresse e-mail sur le Web. Par exemple, lorsque vous laissez un commentaire sur un autre blog WordPress, votre Gravatar apparaîtra à côté de celui-ci.

Le service Gravatar génère Gravatar, qui les met en cache sur ses serveurs. Par conséquent, si vous commentez un grand nombre de blogs, voire quelques-uns à fort trafic, votre Gravatar sera mis en cache sur les serveurs de Gravatar.

En conséquence, votre Gravatar se chargera rapidement sur tous ces blogs. Mais, d'un autre côté, cela peut aussi être un inconvénient, car si le service Gravatar est indisponible, ou si votre Gravatar est supprimé de l'un des blogs que vous avez commentés, votre Gravatar disparaîtra de tous ces blogs.

Il est incroyablement peu attrayant de personnaliser un Gravatar avec une image complète. En effet, si votre Gravatar personnalisé n'apparaît pas sur ces blogs, le gravatar par défaut sera utilisé à la place, ce qui pourrait ne pas être approprié.

Il existe deux solutions possibles à ce problème :

• Rendez votre Gravatar aussi petit que possible. Les images plus petites se chargeront plus rapidement et consommeront moins de bande passante que les plus grandes.
• Vous devez héberger votre propre version du service Gravatar sur un domaine que vous contrôlez. Cela nécessitera un serveur Web Apache, PHP et une base de données MySQL pour stocker les Gravatars localement au lieu de les mettre en cache sur les serveurs Gravatar.

Servir des images à partir d'un CDN :

Si vos images sont diffusées par un réseau de diffusion de contenu (CDN), assurez-vous d'activer la mise en cache. Ainsi, les navigateurs et autres appareils n'auront pas à télécharger plusieurs fois la même image.

Il serait préférable de considérer comment vos images seraient affichées lors de la configuration d'un CDN. De plus, une réécriture CDN doit être activée sur vos images. Vous pouvez le faire avec le plugin Perfmatters

En utilisant ce plugin, vous pouvez facilement connecter votre site à un réseau CDN. Par conséquent, si votre site peut diffuser du contenu via un réseau de diffusion de contenu, vos images seront exécutées par les serveurs CDN.

Vous pouvez utiliser n'importe lequel des réseaux CDN suivants.

• Cloud Flare
• LapinCDN

Ce que vous ne devriez pas faire lors de l'optimisation des images pour votre site Web

Évitez les redirections d'URL d'image :

Si vous utilisez une redirection d'URL sur votre site Web, cela retarde l'apparition de l'image. De plus, l'image n'est pas mise en cache par le navigateur, ce qui peut retarder le chargement de la page.

Ainsi, lors de l'optimisation de vos images pour le Web, vous devez éviter d'utiliser une redirection d'URL.

En-tête Éviter les expirations :

Si vous utilisez un en-tête expire sur vos images, le navigateur peut ne pas les mettre en cache. Cela oblige également le navigateur à redemander l'image chaque fois qu'elle est chargée dans une page.

Vous devez éviter de définir des en-têtes expirés sur les images de votre site Web si vous souhaitez les optimiser.

Évitez d'intégrer des images :

Il est important de ne pas incorporer d'images sur la page lors de l'optimisation des images pour le Web. En effet, lorsque vous intégrez une image, le navigateur télécharge l'intégralité de l'image avant de l'afficher.

Cela peut ralentir le chargement de votre site Web et frustrer vos visiteurs. Utilisez plutôt une balise <img> ou une balise <object> pour inclure un lien vers l'image sur votre serveur. Ainsi, le navigateur ne peut télécharger que le fichier image, pas la page entière.

Meilleurs outils d'optimisation d'image :

Un contenu de haute qualité est essentiel pour développer des blogs professionnels. De plus, des images de qualité sont nécessaires pour qu'un blog paraisse attrayant. Cependant, il est difficile de trouver des outils gratuits pour optimiser les images sans perdre en résolution et des images magnifiquement conçues.

En conséquence, j'ai compilé une liste de certains des outils d'optimisation d'image les plus efficaces pour faciliter notre travail.

• TinyJPG : TinyJPG est un outil en ligne pratique pour compresser les images JPEG. Le taux de compression de cet outil est très élevé et la qualité d'image est toujours excellente.
• Toolur : Toolur est un outil en ligne utile pour optimiser les images pour le Web. Il optimise les images en réduisant la taille du fichier sans affecter la qualité de l'image.
• ImageOptim : ImageOptim est l'un des meilleurs outils d'optimisation d'image. Cet outil vous aide à améliorer la vitesse de chargement de votre site en optimisant les images sur la page Web. Il peut même optimiser les images déjà compressées.
• GIMP : GIMP est un excellent éditeur d'images qui vous permet de réduire la taille du fichier de l'image tout en préservant la qualité de l'image. C'est une alternative valable à Adobe Photoshop.

Meilleurs plugins d'optimisation d'image pour WordPress

Il existe plusieurs plugins d'optimisation d'image différents disponibles pour WordPress. Choisir celui qui convient le mieux à vos besoins peut être difficile. Voici une liste des meilleurs plugins.

• Optimiseur d'image EWWW
• Imagify par WP Rocket Team
• Optimiseur d'image ShortPixel
• WP Smush
• reSmush.it

Vous pouvez utiliser les plug- ins EWWW Image Optimizer , Imagify de WP Rocket Team et ShortPixel Image Optimizer de la liste ci-dessus.

Vous devez utiliser un plugin premium pour l'optimisation des images afin d'obtenir le résultat optimal. Si vous voulez économiser de l'argent, essayez EWWW Image Optimizer .

FAQ

Comment créer des images WebP dans WordPress ?

Lorsque vous utilisez WP Rocket pour optimiser les images de votre site, il les enregistre automatiquement en tant que WebP. En revanche, si vous souhaitez convertir une image JPG ou PNG en une image WebP, vous pouvez le faire avec un plugin.

Vous pouvez utiliser l'un des plugins suivants pour cela.

• Convertisseur WebP pour les médias
• WebP Express

Un excellent plugin que j'utilise pour WebP est Flying Images de WP Speed ​​Matters. Il fonctionne avec n'importe quel thème et gère tout. De plus, il vous permet de créer des images WebP de n'importe quelle taille et fournit un service CDN d'images gratuit, ce qui est un avantage significatif.

Comment différer les images hors écran ?

L'attribut defer peut être utilisé dans JavaScript pour charger des images hors écran, permettant au navigateur de rendre le chargement de la page initiale plus rapidement. Cela nécessite les balises de début et de fin. Par exemple:

<img src=”image-source.png” alt=”” width=”100px” height=”100px” title=”Some tooltip text” data-defer=”offscreen-image.jpg” />

Remarque- Différer n'est pris en charge qu'en HTML5, pas en XHTML.

En utilisant un plugin JavaScript tel que Perfmatters, vous pouvez différer le chargement de vos images. Par conséquent, vous pouvez remplacer la balise img par n'importe quel élément de votre choix, tel qu'un div.

<div data-defer="offscreen-image.jpg"></div>

Comment réparer les images différées hors écran ?

• Images de chargement paresseux.
• Images d'arrière-plan de chargement paresseux.

Les images au-dessus du pli doivent être exclues du chargement différé pour garantir que les utilisateurs les remarquent rapidement. Cependant, pour résoudre les images différées hors écran ou à chargement paresseux sur un site WordPress, vous pouvez utiliser le plugin Perfmatters. Le plugin vous permet d'améliorer la vitesse de chargement de votre site WordPress en différant le chargement des images hors écran.

Remarque- Vous pouvez activer le chargement différé des images à l'aide du plugin WP Rocket. Vous pouvez donc utiliser n'importe lequel d'entre eux.

En conclusion

WordPress est un puissant système de gestion de contenu qui vous permet de créer et de gérer votre propre site Web. Cependant, l'optimisation des images pour WordPress peut être difficile sans les outils appropriés.

Le problème avec l'optimisation des images pour WordPress est que tant de méthodes différentes sont disponibles. Par exemple, vous pouvez utiliser un plugin, un outil en ligne ou même votre propre logiciel.

La méthode la plus efficace pour optimiser les images pour WordPress est de combiner toutes ces techniques . De plus, vous pouvez utiliser un plugin qui identifiera les images qui doivent être redimensionnées, et vous pouvez également les redimensionner manuellement.

En plus d'optimiser la taille des images pour WordPress, vous devez également optimiser le nombre de fichiers par publication. Essayez d'utiliser des plugins premium pour optimiser la vitesse de l'image et du site Web. Vous pourrez ainsi développer un site Web convivial, rapide et efficace.