Tout ce que vous vouliez savoir sur l’optimisation des images pour la vitesse, la recherche, le mobile et l’expérience utilisateur

Les images sont essentielles à la narration numérique. Ils apportent l’émotion aux articles de blog, la clarté de la documentation et le pouvoir de conversion en Commerce électronique. Mais s’ils sont mal manipulés, les images peuvent saboter vos efforts – en train de réduire les pages, de confusion des moteurs de recherche, de bloquer les outils d’accessibilité et de nuire aux expériences mobiles. À une époque où Google récompense les performances et les utilisateurs abandonnent les interfaces lentes ou maladroites, l’optimisation de vos images est à la fois une nécessité technique et un avantage concurrentiel.

Voici la dernière vidéo de Google sur l’image Référencement:

Ce guide couvre tout, des techniques de performance comme le chargement paresseux et la compression à Référencement-Les pratiques focalisées comme les noms de fichiers riches en mots clés et le texte ALT descriptif. L’objectif est de s’assurer que chaque image que vous utilisez renforce votre visibilité, vos performances et votre engagement des utilisateurs.

Chargement paresseux

Le chargement paresseux décore le chargement de l’image jusqu’à ce que l’image entre dans la fenêtre. Au lieu de forcer chaque image à se charger sur le rendu de page initial, le navigateur attend que l’utilisateur défile près de lui. Page de chargement paresseux vitesse de page, utilisation des données mobiles, chargement du serveur, Core Web Vitals (CWV), en particulier la plus grande peinture contenu (LCP). Utilisez le natif Html attribut:

<img src="https://feed.martech.zone/link/8998/17021011/cute-puppy.jpg" alt="Siberian husky puppy" loading="lazy">

Pour un contrôle amélioré, en particulier sur les navigateurs plus anciens, utilisez des bibliothèques JavaScript.

Dimensions de l’image

Définissez toujours les attributs de largeur et de hauteur pour les images pour aider les navigateurs à allouer l’espace de mise en page avant le chargement de l’image. Les dimensions de l’image éliminent les déplacements de mise en page, améliorent le décalage de disposition cumulatif (CLS), et améliorer la stabilité visuelle.

Exemple:

<img src="https://feed.martech.zone/link/8998/17021011/puppy.jpg" alt="Fluffy puppy" width="600" height="400">

Images réactives avec SRCSET et tailles

Le balisage d’image réactif permet au navigateur de sélectionner l’image optimale en fonction de la taille et de la résolution de l’écran. L’attribut SRCSET définit plusieurs versions d’image; L’attribut de taille indique au navigateur combien d’espace l’image occupera. Tailles d’image réactives La vitesse de la page avantageuse, l’optimisation de la bande passante et la netteté sur les écrans de rétine. Cela garantit que les utilisateurs mobiles obtiennent des images plus petites et plus rapides, tandis que les utilisateurs sur les écrans haute densité ou importants reçoivent des actifs à haute résolution. Exemple:

<img
  src="https://feed.martech.zone/link/8998/17021011/husky-600.jpg"
  srcset="https://feed.martech.zone/husky-400.jpg 400w, https://feed.martech.zone/husky-800.jpg 800w, https://feed.martech.zone/husky-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 600px"
  alt="Siberian husky puppy">

Taille et compression du fichier

Même des images bien placées peuvent devenir des goulots d’étranglement s’ils sont trop grands. Compression Les images équilibrent la qualité visuelle et les performances. Les tailles de fichiers réduites améliorent la vitesse de l’âge, les performances mobiles, réduisent les taux de rebond et améliorent les classements de recherche. Visez à conserver des fichiers d’image sous 100Ko pour le contenu général et 300 Ko pour les images de héros.

Choisissez le type de fichier correct

La sélection du type de fichier profite à un rendu plus rapide, à des délais de chargement réduits, à des visuels de meilleure qualité et à une meilleure cohérence croisée. Chaque format sert un objectif:

• Jpg: Idéal pour les photos avec gradients et textures. Offre une compression avec perte.
• PNG: Meilleur pour les graphiques nécessitant une transparence ou des bords précis. Prend en charge la compression sans perte.
• Webp: Format moderne combinant la petite taille et la bonne qualité. Largement pris en charge.
• Avenues: Plus récent que WebP, des tailles encore plus petites et une meilleure qualité, mais un support limité.
• SVG: Format vectoriel pour les icônes, les logos et les illustrations simples. Échelles sans perte de qualité.

Noms de fichiers descriptifs

Les noms de fichiers d’image doivent décrire leur contenu à l’aide de mots clés pertinents. Évitez les noms autogenrés comme IMG_0032.jpg. Les noms de fichiers descriptifs aident l’image du référencement, une meilleure indexation par les moteurs de recherche et l’alignement contextuel avec le contenu sur page.

Il est essentiel d’utiliser tirets «-» plutôt que souligner «_» Pour séparer les mots dans les noms de fichiers. Google traite les tirets comme des séparateurs de mots, tandis que les soulignements ne sont pas interprétés comme des séparateurs. Ils traitent les soulignements comme un seul mot composé, ce qui rend plus difficile pour les moteurs de recherche d’analyser efficacement.

Correct: cute-siberian-husky-puppy.jpg
Incorrect: cute_siberian_husky_puppy.jpg

Texte alternatif (texte alt)

Les lecteurs d’écran et les moteurs de recherche utilisent du texte ALT pour décrire le contenu de l’image. Le texte ALT est essentiel pour l’accessibilité et le référencement d’image. Il profite à la conformité à l’accessibilité, à une amélioration de la visibilité de la recherche et au contenu de secours lorsque les images ne se chargent pas. Évitez la farce des mots clés (par exemple, «chiots de chiots de chiens mignons») et écrivez plutôt des phrases concises et descriptives.

<img src="https://feed.martech.zone/link/8998/17021011/husky.jpg" alt="Three Siberian husky puppies playing in the snow">

Attributs de titre

L’attribut de titre peut afficher le texte de l’info-bulle supplémentaire lorsqu’un utilisateur plane sur une image. Ce n’est pas critique pour le référencement mais peut améliorer Ux dans les cas limités. Utilisez-le avec parcimonie et jamais en remplacement du texte ALT.

Légendes et contenu environnant

Les moteurs de recherche interprètent la signification de l’image en partie par le contenu adjacent. L’inclusion de légendes, de titres ou d’éléments de figure peut renforcer le contexte de l’image. Les légendes bénéficient de la pertinence du référencement, de l’amélioration de la compréhension et de l’engagement amélioré.

Google examine également le texte, les titres de page et les titres pour mieux comprendre la pertinence d’une image. Alignez toujours votre utilisation d’image avec le contenu et l’intention de la page.

<figure>
  <img src="https://feed.martech.zone/link/8998/17021011/husky.jpg" alt="Siberian husky in snow">
  <figcaption>This young Siberian husky enjoys its first snowfall.</figcaption>
</figure>

Attribution et licence

Créditez toujours des images tierces ou sous licence en fonction de leurs conditions. De nombreux communautaires créatifs et plateformes photo nécessitent une attribution d’auteur. Attribution profite à la conformité légale, à l’édition éthique et à la confiance des utilisateurs. De plus, incluez des métadonnées de licence ou des données structurées pour aider Google à faire surface vos images avec des informations sur l’attribution et les licences appropriées, en particulier dans Google Images et Discover.

<figure>
  <img src="https://feed.martech.zone/link/8998/17021011/sunset.jpg" alt="Sunset over a mountain range">
  <figcaption>
    Photo by <a href="https://unsplash.com/@johndoe" target="_blank" rel="noopener">John Doe</a> on Unsplash
  </figcaption>
</figure>

Structure URL et Robots.txt Considérations

Google utilise des URL d’image et des structures de dossiers pour comprendre et organiser vos images. Évitez les changements fréquents et assurez-vous des chemins logiques. Les meilleures pratiques incluent:

• Utilisez des URL persistantes.
• Organisez des dossiers par sujet ou type d’image.
• Évitez de bloquer les images importantes dans robots.txt.
• Utiliser 301 redirige si les URL doivent changer.

Si vous souhaitez que vos images soient indexées et affichées dans les résultats de la recherche, assurez-vous qu’ils sont accessibles aux robots de Google. Vous pouvez exclure des images ou des répertoires dans robots.txt:

User-agent: *
Disallow: /images/private/

Données structurées et aperçus améliorés

Les données structurées aident Google à comprendre ce que vos images représentent dans le contexte de la page. Selon le type de page, appliquez un balisage de schéma pertinent tel que ImageObject, Recipe, Productou NewsArticle. Il augmente l’admissibilité à des résultats améliorés dans les affichages Google Recherche, Discover et Image Licensing.

Exemple de données structurées (Json-Ld):

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "ImageObject",
  "contentUrl": "https://example.com/images/sunset.jpg",
  "license": "https://example.com/license",
  "creditText": "Photo by John Doe on Unsplash",
  "creator": {
    "@type": "Person",
    "name": "John Doe"
  }
}
</script>

Marquage HTML pour les aperçus des médias sociaux

Définissez des images de prévisualisation à l’aide du graphique ouvert et des balises de méta de la carte Twitter pour les plateformes sociales comme Facebook et Twitter.

<!-- Facebook / Open Graph -->
<meta property="og:image" content="https://example.com/images/preview.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://example.com/images/preview.jpg">

Dimensions de la dimensionnement des images pour les aperçus:

• Facebook et graphique ouvert: 1200 × 630px (minimum 600 × 315px)
• Twitter grande carte d’image: 1200 × 628px
• Google Discover Aperçu: Cela permet aux miniatures de haute qualité d’apparaître en bonne place dans Google Search and Discover. Utilisez des images au moins 1200px de large et activez-les à l’aide de la balise Meta ci-dessous.

<meta name="robots" content="max-image-preview:large">

Convivialité et vitesse mobile

Avec plus de recherches d’images provenant des appareils mobiles, l’optimisation de l’image doit faire partie de votre stratégie mobile. Assurer la conception réactive et les temps de chargement rapides avec: