Images en ligne : Règles et exemples

Une image en ligne est une image unique placée dans le flux de lecture pour clarifier ou prouver le point immédiatement autour d’elle. Ce n’est pas une galerie, un panneau promotionnel ou un substitut au texte. Demandez-vous ce que le lecteur peut comprendre ou vérifier après l’avoir vue que les mots environnants ne fournissent pas aussi efficacement.

L’encoche profilée empêche le connecteur d’entrer dans la prise dans la mauvaise orientation.

L’élément rendu ci-dessus se place immédiatement après un paragraphe qui demande au lecteur de vérifier l’orientation du connecteur. Le recadrage rend l’encoche visible, la légende énonce sa signification, et l’instruction suivante peut continuer sans demander au lecteur de déchiffrer une scène vaste et sans rapport.

Pourquoi cet élément est important

Les lecteurs alternent entre le survol et l’inspection ciblée. Une image bien placée transforme une description abstraite en une forme reconnaissable, montre des preuves ou réduit l’effort nécessaire pour imaginer un état visuel. Son emplacement implique qu’elle explique le texte adjacent. Lorsque cette relation est faible, les lecteurs l’inspectent, n’y trouvent aucun sens supplémentaire et doivent retrouver leur place.

Le principe psychologique pertinent est le signalement. Le recadrage, la légende et le texte environnant dirigent l’attention vers le détail important. Une photographie d’une machine entière est faible lorsque la phrase concerne un taquet de verrouillage de deux centimètres. Un recadrage ciblé de ce taquet donne au lecteur une seule question visuelle à résoudre. L’image n’a pas besoin de flèches ou de texte intégré lorsque le cadrage seul peut rendre le sujet évident.

L’extractabilité machine est la capacité d’un logiciel à identifier une unité et à préserver sa relation avec le sens adjacent. Une balise <figure> sémantique contenant une <img> et un <figcaption> optionnel donne aux robots d’exploration, aux technologies d’assistance, aux outils de migration et aux systèmes de recherche d’IA une unité stable. Le texte alternatif énonce ce que l’image apporte ; les dimensions décrivent sa géométrie ; une légende expose l’interprétation ou la provenance en dehors des pixels.

Les machines ne doivent pas avoir besoin de vision par ordinateur pour récupérer une instruction, un nombre, un avertissement ou une conclusion essentiels. Si une image contient une mesure ou une étiquette décisive, répétez cette information dans le texte adjacent ou utilisez un tableau structuré. Les règles d’écriture des éléments contrôlent la syntaxe de directive partagée, les chemins sources, le mappage du corps et la préséance. Cette page a préséance pour les champs d’image en ligne, le dimensionnement, le chargement, la légende et les décisions de texte alternatif.

Quand l’utiliser

Utilisez une image en ligne lorsqu’un visuel soutient directement une idée adjacente et que l’image reste utile à la largeur de la colonne de lecture. Les tâches appropriées incluent montrer un détail physique, identifier un lieu ou un objet, présenter un simple état avant-après, fournir une preuve visuelle d’une condition testée, ou démontrer l’apparence d’un résultat qui ne nécessite pas d’annotations.

Effectuez trois tests avant de l’ajouter :

1. Test de contribution : Nommez la nouvelle information, preuve ou reconnaissance que l’image apporte.
2. Test de contexte : Identifiez le paragraphe exact que l’image soutient. Si trois sections pourraient également le revendiquer, son objectif est probablement trop large.
3. Test de suppression : Masquez l’image. Si rien de significatif n’est perdu, marquez-la comme décorative uniquement lorsque le design en a vraiment besoin ; sinon, supprimez-la.

Les cas limites provoquent la plupart des mauvais usages. Utilisez une capture d’écran annotée lorsque les lecteurs doivent localiser des commandes ou faire correspondre plusieurs zones numérotées. Utilisez un diagramme lorsque le contenu est une relation, une séquence ou un système plutôt qu’un objet visible. Utilisez une galerie lorsque plusieurs images équivalentes doivent être parcourues. Utilisez un tableau comparatif lorsque les différences dépendent de critères répétés. Utilisez un encadré image lorsqu’une image et une explication substantielle forment une unité autonome à deux colonnes.

N’insérez pas une photographie générique uniquement pour aérer le texte. Une poignée de main ne prouve pas un partenariat ; un ordinateur portable n’explique pas un logiciel ; une ampoule ne rend pas une idée plus claire. Ne publiez pas de texte sous forme d’image pour préserver la typographie. N’utilisez pas de capture d’écran pour du texte, un graphique sans valeurs lisibles, ou une image dont la licence et la provenance sont inconnues.

Où la placer

Placez l’image immédiatement après le paragraphe qui introduit ce que le lecteur doit inspecter. La raison vient en premier pour que le lecteur sache où diriger son attention. Suivez la figure d’une interprétation uniquement lorsque l’image est une preuve dont la conséquence n’est pas évidente. Dans une procédure, placez-la après l’action pertinente et avant la vérification de réussite ; ne séparez jamais une phrase de sa qualification ou une instruction de son avertissement.

Une image en ligne peut se situer sous un H2 uniquement lorsque le titre et le premier paragraphe établissent son objectif. Gardez la figure, la légende et le crédit ensemble dans les mises en page responsives et les sauts de page.

Ne la placez pas à l’intérieur d’un paragraphe, d’un élément de liste, d’une cellule de tableau, d’un encadré, d’un accordéon, d’une carte cliquable ou d’un autre élément média. Ne mettez pas deux images en ligne dos à dos : combinez les véritables équivalents en une galerie, ou ajoutez l’explication qui distingue leurs rôles. Elle ne peut pas se trouver à côté d’un tableau dense, d’une vidéo, d’un graphique ou d’un appel à l’action où les deux objets se disputent l’attention. Conservez au moins un paragraphe significatif entre les unités médias séparées, sauf si elles forment une comparaison explicitement définie.

Utilisez la largeur de contenu normale par défaut et une présentation plus étroite pour un petit objet ou un portrait. Utilisez un conteneur média large approuvé uniquement lorsque le détail ne peut pas être lu autrement ; ne créez jamais de défilement horizontal au niveau de la page.

Anatomie

1. Périmètre de la figure : Regroupe l’actif, la légende et le crédit comme une seule unité dans le flux du document.
2. Source de l’image : Résout en un actif existant approuvé, plutôt qu’un lien distant ou un espace réservé.
3. Texte alternatif : Remplace la fonction contextuelle de l’image pour les lecteurs qui ne peuvent pas la percevoir ; il est vide uniquement pour la décoration.
4. Dimensions intrinsèques : Réservent le bon rapport d’aspect avant l’arrivée du fichier et empêchent les mouvements de mise en page.
5. Variantes responsives : Permettent au navigateur de choisir un fichier de taille appropriée plutôt que de télécharger la source la plus grande partout.
6. Taille rendue : Maintient le détail pertinent lisible sans débordement ni mise à l’échelle d’une source de faible qualité.
7. Légende : Ajoute une interprétation, une identification, une date, une échelle ou une provenance lorsque ces informations aident chaque lecteur.
8. Crédit : Enregistre le créateur et la source lorsque la licence ou la politique éditoriale l’exige.

Le nom du fichier image et le texte alternatif ne sont pas interchangeables. Un nom de fichier stable facilite la maintenance des actifs ; le texte alternatif contextuel explique l’objectif de l’image dans cette occurrence. La même photographie peut donc avoir un texte alternatif différent lorsqu’elle soutient des points différents, bien que réutiliser une image pour des points sans lien soit un signe d’alerte.

Exemples de conception

L’élément prend en charge trois variantes sémantiques et deux traitements de largeur. Le comportement de chargement n’est pas une variante visuelle.

Image informative, largeur de contenu

C’est le comportement par défaut. L’image apporte un détail ou une preuve reconnaissable, utilise un texte alternatif non vide et reste dans le conteneur de lecture.

Image informative, média large

Utilisez le conteneur large approuvé uniquement lorsqu’une carte, une photographie détaillée ou un résultat lisible nécessite plus d’espace horizontal. Le texte environnant reste porteur de sens, et la présentation mobile doit rester utilisable.

Image décorative

La décoration ne porte aucune information unique, utilise alt="", n’a pas de légende explicative et doit être rare dans le contenu de production long. Elle ne doit pas être la seule expression d’ambiance, de statut, d’identité ou de résultat.

Image détaillée avec expansion optionnelle

Utilisez l’expansion uniquement lorsque le rendu en ligne normal établit le contexte mais que les détails fins nécessitent une vue plus grande. L’image elle-même reste compréhensible sans activer le lien, et le nom accessible de la commande décrit l’action.

Comportement sur écran étroit

Chaque variante se réduit dans la zone d’affichage, préserve le rapport d’aspect et garde la légende attachée. Si le texte significatif devient illisible, fournissez un recadrage mobile ou remplacez l’image par du texte structuré ; forcer le pincement pour zoomer n’est pas la solution par défaut.

Paramètres

Le contrat stocke les décisions éditoriales et de livraison. Les bordures, ombres, espacements et valeurs de points de rupture appartiennent au moteur de rendu.

La directive n’a pas de champ de titre : une image en ligne appartient à la section environnante plutôt que de créer une nouvelle section. Son premier paragraphe du corps correspond à caption ; aucun premier titre n’est accepté. Le crédit provient des métadonnées d’actif fiables lorsqu’elles sont disponibles, empêchant les auteurs de modifier silencieusement les informations de licence.

Syntaxe et exemples de code

Les trois notations suivantes mappent la même source, le même texte alternatif, les mêmes dimensions intrinsèques, la même taille, la même légende et la même intention de chargement. Les chemins d’actifs d’exemple démontrent le contrat uniquement ; la source de production doit résoudre en un fichier existant.

Directive Markdown portable

:::inline-image{src="/cdn-assets/seo-playbook/examples/keyed-connector.webp" alt="Connector close-up showing the keyed notch aligned with the matching socket ridge" width=1600 height=1000 size=content loading=lazy}
The keyed notch allows insertion in only one orientation.
:::

Le premier paragraphe est la légende. Les paragraphes supplémentaires, titres, listes, boutons et médias imbriqués sont rejetés car ils transformeraient une figure ciblée en un conteneur de contenu général.

Shortcode Hugo

{{< inline-image src="/cdn-assets/seo-playbook/examples/keyed-connector.webp" alt="Connector close-up showing the keyed notch aligned with the matching socket ridge" width="1600" height="1000" size="content" loading="lazy" >}}
The keyed notch allows insertion in only one orientation.
{{< /inline-image >}}

Les paramètres nommés sont utilisés exclusivement. Il s’agit d’une spécification d’adaptateur portable, pas d’une affirmation qu’un shortcode local est enregistré. Tant que l’adaptateur n’existe pas, utilisez l’implémentation de figure sémantique établie du système de publication ; n’ajoutez jamais d’appel de shortcode défectueux au contenu de production.

Bloc WordPress

<!-- wp:image {"id":412,"width":"auto","height":"auto","sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large">
  <img src="/cdn-assets/seo-playbook/examples/keyed-connector.webp"
       alt="Connector close-up showing the keyed notch aligned with the matching socket ridge"
       width="1600" height="1000" loading="lazy">
  <figcaption class="wp-element-caption">The keyed notch allows insertion in only one orientation.</figcaption>
</figure>
<!-- /wp:image -->

Utilisez les métadonnées de la médiathèque mais révisez le texte alternatif contextuel pour cet emplacement. Ne créez pas de lien vers la page de pièce jointe par défaut.

Exemples

Bon : une image ciblée répond à la question visuelle

Un guide d’installation dit : « Avant de mettre sous tension, alignez l’encoche profilée avec la rainure de la prise ; forcer le connecteur peut plier les broches. » Il place ensuite cette figure :

L’encoche et la rainure s’alignent avant que le taquet de verrouillage puisse s’enclencher.

Cela fonctionne parce que l’image arrive après la raison de l’inspecter, le recadrage contient les deux caractéristiques correspondantes, et la légende explique la relation plutôt que de dire « image du connecteur ». L’instruction et la conséquence restent dans le texte. Les dimensions intrinsèques empêchent les mouvements pendant le chargement, et l’image peut être chargée en différé car elle apparaît bien en dessous de la première zone d’affichage.

Mauvais : la décoration interrompt sans expliquer

Un article sur la configuration d’outils d’analyse insère une photographie générique pleine largeur d’une personne regardant des graphiques colorés entre une étape et son avertissement. Son texte alternatif dit « tableau de bord analytique optimisation SEO données de rapport », la source fait 5000 pixels de large, aucune dimension n’est déclarée, et le fichier se charge immédiatement à mi-page.

L’image est mauvaise car elle ne prouve aucun état de configuration, sépare une action risquée de son avertissement, bourre des mots-clés dans le texte alternatif, télécharge plus de pixels que la mise en page ne peut en utiliser, et peut décaler l’avertissement lorsque sa hauteur est connue. Supprimez-la. Si l’interface réelle contient une commande ambiguë, remplacez-la par une capture d’écran ciblée et actuelle et gardez l’avertissement attaché à l’action.

Balisage schema et accessibilité

Une image en ligne ne crée aucune entité schema spéciale par défaut. Une image significative peut fournir la propriété image de Article, HowTo, Product, Review ou d’une autre entité appropriée. Utilisez ImageObject uniquement avec un contentUrl stable et des métadonnées disponibles véridiques telles que la légende, les dimensions, le créateur et la licence. Ne balisez pas la décoration ou les droits non vérifiés.

Un bon texte alternatif décrit la fonction dans son contexte, pas chaque objet visible. Demandez-vous quelle phrase remplacerait l’image si elle ne se chargeait pas. « Connecteur en gros plan montrant l’encoche profilée alignée avec la rainure correspondante de la prise » est utile dans un guide d’installation. « Un objet noir et argenté sur un fond gris » est visuellement littéral mais fonctionnellement faible. Évitez « image de » et « photo de » sauf si le support lui-même importe, comme pour distinguer une photographie d’une simulation.

Chaque <img> nécessite un attribut alt. Utilisez un texte non vide pour les images informatives et alt="" pour la décoration. Omettre l’attribut n’est pas équivalent : certains lecteurs d’écran annoncent le nom du fichier. Ne mettez pas de prose, d’instructions, de citations ou de longues séries de données essentielles dans les pixels. Si le texte visible dans l’image est important, répétez-le dans le contenu environnant.

Utilisez <figure> et <figcaption> lorsqu’une légende appartient à l’image. N’ajoutez pas manuellement un rôle de figure. Une image extensible nécessite une commande visible, utilisable au clavier, avec un nom descriptif, un mouvement de focus prévisible, la prise en charge de la touche Échap lorsqu’elle ouvre une modale, et l’accès au même texte alternatif et à la même légende à la taille agrandie. N’enveloppez pas chaque image dans un lien non étiqueté vers le fichier source.

La livraison responsive fait partie du SEO des images et de l’accessibilité car elle rend le contenu disponible sans délai inutile. Utilisez srcset et sizes ou un pipeline d’images équivalent afin que la conception responsive puisse sélectionner une variante appropriée. Préservez le rapport d’aspect, définissez width et height intrinsèques, et contraignez la largeur maximale rendue à son conteneur. Ces dimensions réservent de l’espace et réduisent le Cumulative Layout Shift , le mouvement du contenu de la page pendant le chargement des ressources.

Le chargement différé reporte une ressource hors écran jusqu’à ce que le lecteur s’en approche. Utilisez loading="lazy" pour les images situées en dessous de la zone d’affichage initiale. Ne chargez pas en différé une image susceptible d’apparaître immédiatement, car le délai peut retarder l’arrivée du plus grand contenu visible. Utilisez le chargement immédiat et fetchpriority="high" uniquement lorsque les mesures et la position dans le modèle identifient l’image comme un actif probable principal au-dessus de la ligne de flottaison ; plusieurs images à haute priorité annulent le signal.

Règles d’écriture

Le texte autour d’une image en ligne effectue l’essentiel du travail d’interprétation, donc la brièveté dans l’élément ne signifie pas le flou.

• Introduisez la raison avant la figure dans un paragraphe adjacent. N’utilisez pas de langage de coordonnées tel que « ci-dessous » lorsque les mises en page responsives ou syndiquées peuvent déplacer l’actif.
• Rédigez un texte alternatif informatif pour la fonction de l’image dans ce contexte exact. Visez 40–160 caractères ; utilisez jusqu’à 250 uniquement lorsque la complexité l’exige véritablement.
• Limitez les légendes à 5–30 mots et une phrase si possible. Identifiez, interprétez, datez, mesurez ou créditez l’image ; ne vous contentez pas de répéter le texte alternatif.
• Montrez un seul sujet ou relation principal. Si le lecteur doit inspecter plus de trois zones indépendantes, utilisez une capture d’écran annotée, un diagramme, un tableau ou une galerie.
• Utilisez l’orthographe anglaise (américaine), un langage simple et la même terminologie que la section environnante. Le texte alternatif n’est pas un champ de mots-clés.
• Conservez toutes les instructions, avertissements, mesures, prix, dates et conclusions essentiels dans le texte HTML, même s’ils apparaissent également dans les pixels.
• Ne placez jamais de titres, de paragraphes multiples, de listes, de tableaux, de boutons, de formulaires, de vidéos, de sons ou d’une autre image à l’intérieur du corps de l’élément.
• N’utilisez jamais une légende vide pour créer de l’espacement, un crédit inventé, un lien distant, un actif non licencié, des données client sans autorisation, ou un chemin d’espace réservé inexistant.
• Ne jamais étirer, déformer ou agrandir une image pour remplir un emplacement de conception. Recadrez uniquement lorsque le recadrage préserve la preuve et le contexte dont parle le texte.

Types d’articles qui l’utilisent

Le tableau postTypes dans le frontmatter est la liaison canonique. Un type d’article peut restreindre l’exigence, mais il ne modifie pas le champ de l’élément ni le contrat d’accessibilité.

Liste de vérification QA

• Objectif : Le relecteur peut énoncer l’information, la preuve ou la reconnaissance unique que l’image ajoute.
• Emplacement : Le paragraphe précédent établit quoi inspecter, et aucun avertissement, qualification ou citation n’a été séparé de son énoncé.
• Élément correct : Une seule image en ligne est plus appropriée qu’une capture d’écran annotée, une galerie, un diagramme, un tableau ou un encadré image.
• Validité de l’actif : La source existe, utilise un format approuvé et un chemin relatif à la racine, et possède des droits et une provenance vérifiés.
• Confidentialité : L’image ne contient aucune donnée client non approuvée, nom, adresse e-mail, jeton, détail de navigateur ou indice de localisation.
• Recadrage et qualité : Le sujet reste lisible aux largeurs rendues et mobiles sans distorsion, espace vide évitable ou compression destructive.
• Texte alternatif : L’attribut alt est présent et soit contextuellement informatif, soit intentionnellement vide pour la décoration ; ce n’est pas un nom de fichier, un doublon de légende ou une liste de mots-clés.
• Légende : Lorsqu’elle est présente, elle ajoute une identification, une interprétation, une date, une échelle ou une provenance en 5–30 mots.
• Dimensions : La largeur et la hauteur intrinsèques correspondent au rapport source et réservent un espace de mise en page stable.
• Livraison responsive : Les tailles candidates correspondent aux largeurs d’affichage réalistes ; la source la plus grande n’est pas envoyée à chaque zone d’affichage par défaut.
• Chargement : Les images sous la ligne de flottaison sont chargées en différé ; les images initialement visibles ne le sont pas ; la priorité de récupération élevée est limitée à un candidat principal mesuré.
• Comportement mobile : L’image tient sans défilement horizontal au niveau de la page, et ses détails significatifs restent lisibles sans zoom forcé.
• Solution textuelle de repli : Les instructions, avertissements, mesures et conclusions essentiels existent dans le texte de la page plutôt que uniquement dans les pixels.
• Données structurées : Toutes les propriétés schema sont exactes, soutenues par le contenu visible et omises pour la décoration.
• Parité portable : Markdown, Hugo et WordPress préservent la même source, le même texte alternatif, les mêmes dimensions, la même légende, le même crédit et la même intention de chargement.
• Captures en attente : Aucun chemin inexistant n’est rendu ; chaque exemple demandé reste un commentaire SCREENSHOT tant que screenshotsPending = true.

FAQ

Le modèle academy affiche les cinq questions révisées stockées dans le [[faq]] du frontmatter de cette page. Elles couvrent le texte alternatif, le chargement différé, les légendes, le dimensionnement et la décision de supprimer une image qui n’apporte rien.