Comment optimiser vos images pour WordPress

Il existe de nombreuses raisons pour lesquelles vous devriez (et devriez) inclure des images dans votre contenu WordPress. Les images aident à garder vos lecteurs engagés. Ils sont également un moyen de décomposer de longs éléments de contenu et d'améliorer l'optimisation des moteurs de recherche (SEO). Cependant, ils peuvent également ralentir votre site Web.

Heureusement, il existe de nombreuses ressources disponibles qui peuvent vous aider à optimiser vos images. Cela signifie que vous serez plus susceptible de surmonter les vitesses de page lentes qui peuvent nuire au succès global de votre site Web.

Dans cet article, nous verrons pourquoi de grandes images peuvent entraîner votre site vers le bas. Ensuite, nous explorerons comment compresser efficacement vos fichiers multimédias, ainsi que quelques conseils fondamentaux d'optimisation d'image qui peuvent améliorer le référencement de votre site.

Pourquoi vous devriez optimiser vos images pour WordPress

Les images sont un élément précieux et important de toute stratégie de contenu. Cependant, ils peuvent également être l'une des principales causes des temps de chargement lents des pages.

Un site Web lent est un problème, car il peut éloigner les utilisateurs. En fait, les pages qui mettent cinq secondes ou plus à se charger voient en moyenne une augmentation de 90 % de la probabilité qu'un utilisateur rebondisse (quitte après avoir consulté une seule page).

Bien que plusieurs facteurs puissent ralentir votre site, les images et les fichiers multimédias occupent 63 % de la bande passante sur les sites Web modernes. Par conséquent, il est important d'optimiser les images que vous téléchargez sur votre site.

Il convient également de noter que la vitesse du site est un facteur de classement Google. Cela signifie que la vitesse ou la lenteur de chargement de votre page déterminera, dans une certaine mesure, son classement dans les résultats de recherche. De nombreux facteurs influencent votre PageRank, et les images relèvent de la catégorie « Facilité d'utilisation des pages Web ».

L'optimisation d'image consiste en réalité à améliorer deux choses :

• Le nombre d'octets utilisés pour coder chaque pixel de l'image
• Le nombre total de pixels utilisés.

En d'autres termes, l'optimisation signifie que vous obtenez la meilleure qualité possible avec le moins de pixels et d'octets. Cela réduit la taille de vos fichiers multimédias et peut avoir un impact significatif sur la vitesse globale de votre site.

Optimisez vos images avant de les télécharger sur WordPress

En fin de compte, le meilleur scénario pour votre site Web est que vous optimisiez vos images avant de les télécharger. C'est ainsi que vous ne vous retrouvez pas avec des doublons ou plusieurs versions d'une image. Cela irait à l'encontre de l'objectif d'alléger la charge de votre site Web grâce à l'optimisation de l'image.

Dans cet esprit, examinons certaines des considérations que vous devrez prendre en compte lorsque vous déciderez comment optimiser les médias de votre site.

Formats de fichiers d'images

Pour commencer, examinons les différents types de formats d'image qui existent. Comprendre comment chacun d'eux est différent et quand il est préférable de les utiliser peut vous aider à progresser vers une utilisation plus rationalisée des images.

Les deux formats d'image les plus couramment utilisés en ligne sont les JPEG et les PNG. Ces deux formats sont constitués de pixels. Les pixels s'étirent lorsque vous modifiez la taille d'une image, ce qui peut parfois la rendre floue. Cependant, ces types d'images ont des forces et des faiblesses différentes.

Quand utiliser les JPEG

Les fichiers JPEG sont un bon choix pour le contenu imprimé et Web. Ce type de fichier image utilise ce qu'on appelle un format "avec perte". Lorsqu'une image plus grande est convertie en JPEG, certaines des informations contenues dans son fichier sont perdues.

Cette information n'est pas nécessaire pour simplement afficher l'image. Cependant, cela signifie que la conversion en JPEG entraîne une taille de fichier plus petite, mais il peut y avoir un certain sacrifice dans la qualité globale de l'image. Heureusement, la réduction de la qualité n'est pas trop perceptible, en particulier pour les petites images.

Quand utiliser les PNG

Les fichiers PNG sont également utiles pour le contenu Web, tout comme les fichiers JPEG, mais d'une manière différente. Étant donné que les PNG peuvent avoir des arrière-plans transparents, par exemple, ils sont plus polyvalents et pratiques pour la conception de graphiques Web.

Les PNG utilisent un format de fichier "sans perte". Cela signifie que toutes les informations sur l'image sont conservées lorsque le fichier est compressé. Par conséquent, ils ont tendance à être de meilleure qualité, mais offrent une amélioration moindre de la taille des fichiers et de la vitesse des pages. Ils constituent une bonne option pour les graphiques et les icônes, ainsi que pour les images de très haute qualité.

Taille de l'image

Il est temps de couper le ballonnement. La livraison d'images à l'échelle est l'un des moyens les plus simples et les plus efficaces d'optimiser vos images. Pourquoi si efficace ? La mise à l'échelle de l'image garantira que vous n'expédiez pas plus de pixels que nécessaire pour afficher l'actif à sa taille prévue dans le navigateur.

De nombreux sites essaient de fournir des images volumineuses et non mises à l'échelle et s'appuient sur le navigateur pour les redimensionner, ce qui entraîne l'utilisation de ressources supplémentaires et une vitesse de site plus lente. Si la taille naturelle de l'image est de 820×820 pixels, et qu'elle est affichée par le navigateur en 400×400 pixels… c'est 32 400 pixels inutiles !

La clarté et la vitesse de chargement d'une page dépendent en grande partie de l'appareil sur lequel l'image est affichée (mobile, ordinateur, etc.). Par exemple, une image 4k peut être belle sur votre moniteur 27 pouces.

Cependant, lorsqu'un visiteur charge une page avec cette image, le navigateur affichera d'abord le fichier à sa pleine résolution, puis le redimensionnera pour l'adapter à son écran. S'ils utilisent un appareil mobile ne pouvant pas afficher plus de 400 pixels, ils manqueront probablement votre contenu.

Dans cet esprit, voici quelques bonnes pratiques lors de l'exportation de vos images :

• Conservez la taille des fichiers de votre image à moins de quelques centaines de kilo-octets en les enregistrant au format JPEG ou PNG "optimisés pour le Web".
• La norme Web pour les images est de 72 points par pouce (dpi), ce qui peut être obtenu en enregistrant les images dans le format prescrit ci-dessus.

Vous pouvez utiliser Photoshop, Lightroom ou un éditeur similaire pour réduire la taille de l'image à environ 1 500 pixels ou moins en largeur. Dans Photoshop, allez simplement dans Image > Taille de l'image pour ajuster manuellement les dimensions et la résolution de votre image. Vous pouvez également aller dans Fichier > Exporter > Enregistrer pour le Web pour optimiser vos images pour le téléchargement Web :

Si vous ne souhaitez pas afficher des photos nettes et vives sur un écran plus grand, vous pouvez réduire encore plus la taille de l'image.

Si vous travaillez avec Lightroom, accédez à Fichier > Exporter pour ajuster manuellement la taille de l'image lors de son exportation :

La taille et la résolution de l'image ne sont qu'une partie du puzzle. Lorsqu'il s'agit d'optimiser vos images, vous voudrez également comprendre la compression et l'utiliser efficacement.

Compression d'images

En un mot, la compression d'image est un moyen de minimiser la taille (en octets) d'un fichier graphique, sans dégrader la qualité de l'image à un niveau inacceptable. Comme nous en avons discuté, les images haute résolution dont la taille de fichier est inutilement importante peuvent affecter considérablement la vitesse de la page.

D'autre part, les images optimisées sont en moyenne 40 % plus légères que les images non optimisées. En règle générale, vous souhaiterez optimiser toutes les images et autres médias que vous téléchargez sur votre site Web, avant ou pendant le processus de téléchargement.

Compression avec perte ou sans perte

Comme nous l'avons mentionné précédemment, les fichiers JPEG et PNG utilisent deux types de compression d'image différents. La compression sans perte préserve toutes les données du fichier d'origine, sans sacrifier la qualité.

Avec la compression sans perte, vous divisez généralement un fichier en une forme « plus petite » pour la transmission ou le stockage. Ensuite, les informations sont regroupées à l'autre extrémité, de sorte qu'elles peuvent être réutilisées.

D'autre part, la compression avec perte supprime certaines des données contenues dans le fichier image. Cela peut entraîner une baisse de qualité plus importante, mais également une amélioration plus significative de la vitesse des pages. Vous pouvez même personnaliser la quantité de compression, afin d'atteindre un équilibre entre qualité et performances.

Plug-ins de compression d'images

Des images chargées rapidement signifient un site plus rapide et un meilleur référencement. Voici quelques plugins d'optimisation d'image pour vous aider avec la compression d'image.

Compression et optimisation d'image Smush

Le plug-in de compression d'image de Smush permet de redimensionner, d'optimiser et de compresser toutes vos images pour le Web, afin qu'elles se chargent plus rapidement qu'auparavant. Si votre site est riche en photos, ce plugin est indispensable.

Optimiseur d'image ShortPixel

Le plug-in Image Optimizer de ShortPixel compresse toutes les images et PDF passés et futurs téléchargés dans votre médiathèque. Le plugin fournit à la fois une compression avec et sans perte pour la plupart des types de fichiers. Si vous êtes photographe, vous pouvez opter pour la compression JPEG brillante, qui utilise un algorithme d'optimisation avec perte de haute qualité.

Compresser les images JPEG et PNG

Vous cherchez simplement à optimiser les JPEG et les PNG ? Ce plugin utilise les services de compression d'image TinyJPG et TinyPNG pour vous aider avec la compression d'image. En moyenne, les images JPEG sont compressées de 40 à 60 % et les images PNG de 50 à 80 %, sans perte visible de qualité.

Optimiseur d'image EWWW

EWWW Image Optimizer remplit une double fonction. Il optimise à la fois les images existantes sur votre site et prend également en charge les nouvelles que vous téléchargez. De plus, il vous offre un grand contrôle sur la façon dont (et combien) vos images sont compressées.

Optimiseur d'image Kraken.io

Enfin et surtout, Kraken.io Image Optimizer est également pratique pour optimiser les médias nouveaux et existants. Il prend en charge la compression avec perte sans perte et "intelligente", ce qui facilite l'obtention d'images de haute qualité avec des tailles de fichier inférieures.

L'image sélectionnée

L'image sélectionnée n'est pas insérée dans le corps d'un article WordPress, mais est utilisée de manière structurelle dans votre thème. Il peut apparaître sous forme de vignette à côté du titre du message, par exemple, ou dans l'en-tête lors de la visualisation d'un message particulier.

La plupart des thèmes et des widgets reposent sur des images en vedette, ce n'est donc pas quelque chose que vous voudrez ignorer. Les images présentées permettent une plus grande personnalisation ; vous aurez la possibilité d'afficher des images d'en-tête personnalisées uniques pour des publications et des pages spécifiques, ou de définir des vignettes pour des fonctionnalités spéciales de votre thème.

Une fois que vous avez décidé de la taille que vous souhaitez pour votre image en vedette, cette taille restera définie pour toutes les futures images en vedette. La taille que vous devez sélectionner dépend du thème de votre site WordPress et de la mise en page de vos publications.

Les images présentées sont généralement plus larges que hautes, allant de 500 à 900 pixels de large. Il est également préférable de choisir une image haute résolution et non pixelisée.

Conseil de pro : pour contrôler les médias qui s'affichent chaque fois qu'une publication ou une page est partagée sur Facebook ou Twitter, installez le plug-in Yoast SEO. Vous pourrez non seulement personnaliser le titre et la description, mais également télécharger les tailles d'image correctes pour chaque canal social.

Optimisez vos images après le téléchargement sur WordPress

Nous vous recommandons d'optimiser vos images avant de les télécharger. Cependant, si ce n'est pas possible, ou si vous souhaitez optimiser les images qui sont déjà sur votre site, vous pouvez toujours le faire. Il existe quelques méthodes qui peuvent vous aider à optimiser votre contenu en direct.

Images de chargement paresseux

Normalement, lorsque quelqu'un visite une page Web, tout son contenu commence à se charger. Cela signifie que, pour une page riche en contenu, cela peut prendre un certain temps pour que tout s'affiche.

Le « chargement paresseux » consiste à modifier la façon dont votre site charge le contenu. Il demande à votre site de se concentrer d'abord sur le chargement du texte, des images et d'autres éléments immédiatement visibles. Ce n'est qu'après cela qu'il commencera à charger du contenu qui n'est accessible qu'en faisant défiler la page. C'est un excellent moyen d'accélérer votre site et d'améliorer l'expérience de vos visiteurs.

Le moyen le plus simple d'ajouter du chargement paresseux à votre site consiste à utiliser un plugin tel que Lazy Load.

Il s'agit d'un outil de WP Rocket qui aide à réduire le volume de requêtes envoyées au serveur Web de votre site en une seule fois. Il remplace même les images d'espace réservé pour les vidéos YouTube, de sorte que la vidéo réelle ne se charge que si nécessaire.

Images du cache

Une autre façon d'améliorer la vitesse sur votre site est via la « mise en cache ». Cela implique d'enregistrer certaines des données de votre site dans un endroit plus facile et plus rapide d'accès pour un visiteur, souvent soit sur un serveur tiers plus proche de l'endroit où il se trouve, soit dans son navigateur.

Il existe de nombreuses façons d'effectuer la mise en cache via le codage, les plugins et d'autres outils. Chez WP Engine, nous implémentons par défaut une mise en cache robuste sur tous nos sites. Ceci est bénéfique pour réduire l'impact de tout votre contenu sur la vitesse des pages, pas seulement sur vos images.

Supprimer les données EXIF

Les données EXIF ​​​​sont stockées dans le cadre d'un fichier image et contiennent des informations sur l'endroit et la manière dont une photo a été prise. Il est automatiquement ajouté aux images par les caméras et n'est généralement pas nécessaire pour vos fichiers Web.

Par conséquent, la suppression de ces données de vos images peut accélérer vos pages, bien que l'impact ne soit probablement pas énorme. Il n'existe actuellement aucun plugin mis à jour qui puisse vous aider à le faire, malheureusement. Donc, si vous utilisez beaucoup de photographies sur votre site et que vous êtes préoccupé par les données EXIF, vous voudrez contacter un développeur pour obtenir de l'aide.

Évitez les redirections d'URL d'image

Enfin, un autre élément qui peut ralentir vos pages est lorsque vos images provoquent des redirections. Cela se produit le plus souvent lorsqu'ils se connectent ailleurs.

Pour cette raison, vous devez éviter d'intégrer des images provenant de sources externes sur votre site. Au lieu de cela, enregistrez et téléchargez chaque image ou morceau de média directement sur votre site si possible. Vous pouvez également vous assurer que vos images ne renvoient à rien, comme une page multimédia distincte.

Optimisation des images pour les moteurs de recherche

Le formatage des titres des images est une autre étape importante dans l'optimisation des images. Cela signifie que le nom du fichier image est pertinent pour son contenu. Lorsque vous faites cela, il est plus probable qu'elles apparaissent dans les résultats de recherche d'images associées via les moteurs de recherche.

Cela augmentera la visibilité et l'accessibilité de votre marque, ainsi que le trafic vers votre site en affichant les images de votre site plus fréquemment dans les recherches Google Image. L'optimisation des images prend très peu de temps et peut faire une énorme différence dans le trafic de votre site.

Voici quelques conseils supplémentaires pour aider vos images à se classer plus haut.

Texte alternatif

Le texte alternatif, également appelé « texte alternatif » ou « balise alternative », est un attribut ajouté à une image en HTML. Le texte alternatif aide les moteurs de recherche à comprendre de quoi parle votre image, en décrivant ce qu'elle comprend et quel est son objectif.

Google s'appuie sur le texte alternatif pour déterminer ce qu'est une image, car tout ce qu'il "voit" est ce qu'il y a dans la balise HTML. Lorsque vous utilisez un texte alternatif fort et descriptif pour vos images, vous avez plus de chances de voir votre site correctement répertorié dans les résultats de recherche.

Dans WordPress, vous pouvez ajouter du texte alternatif à vos images de deux manières. Tout d'abord, vous pouvez l'ajouter aux images qui ont été placées dans des messages, en cliquant sur l'image et en utilisant l'option Paramètres d'image sur le côté droit de l'écran.

Alternativement, vous pouvez également ajouter du texte alternatif à une image en visitant Média > Bibliothèque et en choisissant l'image que vous voulez. Ensuite, ajoutez simplement votre texte alternatif au champ Texte alternatif pour cette image.

Balises de titre

Les balises de titre sont similaires aux balises alt, mais elles sont destinées aux lecteurs humains, pas aux robots des moteurs de recherche. Une bonne optimisation des balises de titre peut aider les utilisateurs malvoyants à accéder à votre site Web.

Créer des plans de site d'images XML

Une autre façon de faire remarquer vos images par Google est de créer un sitemap et de le soumettre. C'est une bonne option pour les images qui ne peuvent pas être explorées par les moteurs de recherche.

On parle par exemple d'images chargées par JavaScript. Les sitemaps donnent aux moteurs de recherche plus d'informations sur les images disponibles sur votre site, afin qu'ils puissent comprendre et indexer votre contenu avec plus de précision.

Dans WordPress, les plugins suivants peuvent vous aider à créer un sitemap :

• Plans de site Google XML
• Yoast SEO
• Pack SEO tout-en-un
• Udinra Toutes les images Plan du site

Pour les sites Web autres que WordPress, il existe également des outils qui peuvent aider à créer un sitemap, notamment Screaming Frog, Dynomapper, etc. Une fois que vous avez créé un sitemap, vous devrez ensuite le soumettre via les outils de Google pour les webmasters.

Placement des images et légendes

Enfin, examinons le placement des visuels dans un article de blog ou une page Web. L'endroit où vous placez vos images dans une publication peut avoir un impact significatif sur son classement sur Google.

Par exemple, si vous placez une image plus près de vos expressions de mots clés, elle est susceptible d'être mieux classée. Notez également que l'ajout d'une légende riche en mots clés à votre image compte comme un texte de recherche et peut aider à améliorer le référencement de l'image.

Optimisez votre site WordPress avec WP Engine

L'optimisation des images couvre beaucoup de terrain lorsqu'il s'agit d'améliorer votre site Web. L'optimisation peut aider à améliorer l'expérience utilisateur et à maintenir vos temps de chargement sous la barre des cinq secondes. Chez WP Engine, nous comprenons la valeur que l'optimisation des images apporte à votre site Web. C'est pourquoi nous proposons des environnements d'hébergement WordPress gérés spécialisés. Cela signifie que vous aurez à portée de main une assistance experte ainsi que des outils et des ressources d'optimisation complets !