Comment optimiser les images pour améliorer la vitesse des pages et le référencement de votre site Web

Une erreur courante que j'ai constatée lors de l'examen de pages Web en direct et actuellement rédigées pour leur stratégie de référencement SaaS est que les images sont mal optimisées pour la santé et la vitesse du site Web en général. Nous avons tous entendu la citation "Une image vaut mille mots". Même si c'est cliché, c'est vrai et ça vaut peut-être encore plus.

Les images attirent notre attention et nous aident à comprendre ce que nous voyons. Ils construisent une histoire et ont tendance à faire une impression beaucoup plus durable qu'un simple corps de texte. Beaucoup de gens aiment obtenir des images de stock à partir de sites de photos libres de droits comme Unsplash.

Google donne la priorité aux pages rapides. En ignorant les étapes nécessaires à l'optimisation de l'image, vous vous préparez à une bataille difficile. Le nombre d'images ajoutées à une page affecte directement le temps de vitesse de chargement. Plus une page contient d'images, plus la vitesse de chargement sera lente. Dans ce guide, nous visiterons les 5 étapes que j'ai suivies lors de l'optimisation des images pour la vitesse des pages et les moteurs de recherche.

Recadrer et redimensionner votre image

Par défaut, la photo que nous avons téléchargée est très grande et de haute qualité. Décider de la taille ou de la résolution de cette image est déterminé par la plus grande taille que votre image sera visualisée. Les gens pensent qu'ils ont une image de la plus haute qualité pour impressionner leurs clients ou même eux-mêmes, mais ils ne réalisent pas cet impact très négatif. Lorsque vous décidez de la taille de l'image, pensez à la plus grande taille à laquelle l'image sera visualisée.

Vous n'avez pas besoin que les dimensions de l'image soient de 6000 x 6000 pixels si elles ne doivent être utilisées que pour une petite image de profil ou une photo de tête qui sera vue à 300 x 300 pixels. D'après mon expérience, je trouve que la plus grande image de la page sera l'image du héros en haut. Une taille sûre pour rester tout en maintenant la qualité serait d'en faire la taille haute définition standard de 1920 x 1080 pixels.

Trucs et astuces : si une image de bannière pour un blog ou une page Web semble de qualité légèrement inférieure à ce que vous souhaiteriez, envisagez d'appliquer une superposition transparente. Cela le fera apparaître comme faisant partie de la conception et rendra tout texte plus facile à lire.

Ci-dessous, j'utilise Figma pour redimensionner et recadrer mon image. Le processus est très simple car tout ce que vous avez à faire est de glisser-déposer puis de modifier l'image à votre guise. Voici deux contrôles dont vous avez besoin pour éditer correctement votre image à l'aide de Figma sous Windows.

• Maj + Glisser - Redimensionnera l'image entière vers le haut ou vers le bas tout en gardant le même rapport.
• Ctrl + Glisser - Changera uniquement la hauteur ou la longueur sans étirer l'image.

Exportation sous différents types de fichiers

Il est important de réfléchir au type de format de fichier que vous souhaitez utiliser. De nombreux formats peuvent servir à des fins différentes. Chacun vient avec son propre ensemble d'avantages et d'inconvénients en fonction de l'opinion de l'utilisateur. Voici quelques-uns des plus courants que je vois habituellement :

• PNG - Bon pour les conceptions graphiques ou les images dont vous avez besoin pour voir les petits détails Cela se fait au prix d'une taille de fichier plus grande.
• JPEG - Pour la photographie réelle de personnes et de lieux. Il peut être compressé beaucoup plus mais perdre un peu plus d'informations car vous n'avez pas besoin d'autant de détails.
• SVG - Idéal pour les icônes et les logos car ceux-ci peuvent augmenter et diminuer sans perte de qualité. Cela ne peut fonctionner que sur les fichiers image créés.
• WEBP - Une version plus récente des images qui peut remplacer PNG et JPEG. WEBP a une qualité d'image similaire aux deux tout en étant capable d'économiser 25% à 40% d'espace. Le seul inconvénient est qu'actuellement, le navigateur Safari d'Apple ne le prend pas en charge, vous aurez donc besoin de fichiers JPEG ou PNG de sauvegarde pour le chargement.
• GIF - Ce sont des clips de vidéos ou d'animations qui ont tendance à jouer en boucle. Ceux-ci sont bons pour capturer une scène ou montrer comment l'interface d'un produit peut fonctionner. Cet article donne quelques bons exemples de la façon dont ils peuvent être utilisés. Puisqu'il s'agit d'une séquence animée d'images, leur taille de fichier sera généralement plus lourde par rapport à une seule image.

J'aime utiliser JPEG chaque fois que je le peux car il nécessite le moins de données, mais ici j'utilise des PNG pour donner un peu plus de clarté sur les captures d'écran. Comme avec WEBP, il peut y avoir des formats encore plus récents, il est donc recommandé de rechercher en permanence comment Google visualise et classe chacun de ceux qui sont disponibles pour trouver la réponse la plus rapide et la meilleure pour votre page Web. Voici un lien vers un guide plus détaillé sur les types d'images les plus populaires.

Utiliser un compresseur d'image

La prochaine étape serait d'essayer d'obtenir le fichier que vous avez aussi petit que possible en compressant et en réduisant la taille du fichier. En utilisant un compresseur d'image et en traitant l'image, nous pouvons parfois obtenir une image jusqu'à 90 % plus petite en taille de fichier. Un outil vraiment utile que j'aime utiliser s'appelle Compressor. En utilisant cet outil, vous pouvez compresser jusqu'à 50 images par jour sur son plan gratuit.

Ici, je prends l'image que j'ai exportée et je la fais glisser directement dans la section de dépôt d'image. Après quelques secondes, la nouvelle image est prête à être téléchargée et environ moins d'un dixième de la taille d'origine. Vous pouvez également importer plusieurs images et les télécharger toutes en même temps, comme indiqué avec l'option en bas.

"Lazy" vs "Eager" lors du chargement de vos images

Maintenant que vous avez votre image dans le bon format et compressée à la bonne taille, vous pensez peut-être que vous êtes tous prêts à partir, mais il reste encore quelques choses à faire. Dans de nombreux modèles et sites Web, la vitesse de chargement des images est définie sur la valeur par défaut du navigateur, ce qui peut entraîner le chargement simultané de toutes vos images sur la page. La solution à cela est de charger paresseusement l'image.

Le chargement "paresseux" diffère le chargement de l'élément jusqu'à ce qu'il soit visible sur la page. Lorsque vous avez plusieurs images, cela peut améliorer les performances du site. Le contraire est le chargement "Eager" qui charge l'élément immédiatement. Cela correspond généralement au paramètre Web par défaut, car aucune préférence n'est définie sur l'image à charger en premier ou en dernier.

Voici un exemple dans l'éditeur de blog HubSpot. Après avoir navigué vers l'option avancée pour l'image insérée, nous pouvons voir que nous pouvons définir son paramètre de chargement. Sélectionnez "Lazy" et appuyez sur Appliquer. L'image apparaît désormais chaque fois que l'utilisateur se rapproche beaucoup plus de celle-ci et réduit ces précieux temps de chargement.

N'oubliez pas d'ajouter du texte alternatif

La dernière chose à visiter est d'inclure le texte Alt dans vos images. Cela n'affectera peut-être pas la vitesse de chargement de votre page, mais il est toujours important de prendre en compte et d'ajouter. Lorsque vous laissez la section vide, vous manquez de nombreuses opportunités d'augmenter votre classement SERP.

Une chose importante à noter est que le texte alternatif explique le "pourquoi" de l'image en ce qui concerne le contenu. Il est indexé par google et lu à haute voix par synthèse vocale pour les malvoyants. Si vous insérez simplement un seul mot-clé dans l'image qui n'explique pas ce qui se passe, ce n'est peut-être pas la meilleure approche.

Ici, j'ai ajouté le texte alternatif dans l'image. Je le base autour de la phrase Santé de la vitesse de la page SEO. Au lieu d'inclure uniquement le mot-clé, expliquez également comment ou quelle est l'action dans l'image. J'ai décidé d'élaborer en utilisant la phrase "Vérification de la santé de la vitesse de la page SEO à l'aide de graphiques".

C'est beaucoup plus informatif sur ce que l'image pourrait être sur l'indexation de Google et accorde une plus grande accessibilité aux malvoyants.

Passons en revue les étapes de création/optimisation des images :

1. Faites glisser l'image dans un éditeur d'image comme Figma pour recadrer et redimensionner.
2. Exportez-le sous le type d'image approprié (PNG, JPEG, SVG, WEBP, etc.)
3. Emmenez-le sur un site de compression d'images comme Compressor ou Image Resizer Online
4. Insérez l'image compressée dans votre contenu en chargement différé.
5. Ajoutez un texte alternatif décrivant les images sur votre page.
6. Vous avez maintenant l'image parfaite pour votre site !
7. Consultez Google Search Console pour vérifier vos augmentations de performances.

Suivez ces étapes et vous serez sur la bonne voie pour maintenir et optimiser vos images pour le référencement et accélérer la vitesse de votre page, créant ainsi une expérience utilisateur fantastique !