Comment dimensionner et placer les photos dans un article associant texte et images

Commencez par le rôle de la photo

Avant de déplacer ou de redimensionner une photo, déterminez ce qu'un lecteur doit en retirer. S'agit-il d'un élément de preuve qu'il doit examiner, d'un exemple facilitant la visualisation d'un passage ou d'un simple élément décoratif ? Cette distinction est bien plus utile que de partir d'une largeur d'image prédéfinie.

Si la photo apporte des informations que le texte ne contient pas, donnez-lui suffisamment d'espace pour que le détail pertinent soit lisible. Une petite image d'un document, d'un objet ou d'un processus peut échouer dans sa mission principale si le lecteur ne parvient pas à l'examiner. Si la photo illustre simplement un point déjà expliqué dans le texte, une taille plus modeste peut suffire — ou l'image peut même ne pas être nécessaire. Il s'agit d'une règle pratique de conception déduite de la finalité de la photo, et non d'une norme de taille universelle. Les directives sur les images du GOV.UK Design System indiquent de manière similaire que les images doivent répondre à un réel besoin de l'utilisateur et servir d'aides visuelles, tandis que les informations indispensables doivent rester accessibles par écrit. Leurs recommandations sont rédigées pour les services en ligne du gouvernement ; considérez-les donc comme une référence utile plutôt que comme un ensemble de règles absolues s'appliquant à tous les types d'articles.

Une aide à la décision pratique consiste à attribuer à chaque photo l'un de ces trois rôles : examiner, illustrer ou décorer. « Examiner » exige généralement un affichage plus grand et une explication ou une légende attirant l'attention sur le détail pertinent. « Illustrer » peut souvent se contenter d'une taille modérée près du paragraphe auquel elle se rattache. « Décorer » n'a aucune fonction informative ; envisagez de supprimer l'image ou de la rendre visuellement discrète. Ces catégories constituent un outil éditorial pratique et non une terminologie imposée par les sources.

Choisissez la taille en fonction de l'importance et de l'espace disponible

Prenez la colonne de texte de l'article comme repère de départ. Une photo qui occupe toute la largeur de la colonne attire facilement l'œil et donne plus de place aux contenus détaillés ; réservez ce traitement aux images dont l'importance justifie une telle pause visuelle. Une photo plus petite, alignée sur la colonne, peut soutenir une idée voisine sans rivaliser avec le titre ou le corps du texte. Évitez de choisir une dimension uniquement parce que le fichier d'origine est volumineux : les dimensions affichées doivent convenir à la mise en page et correspondre aux informations que les lecteurs ont besoin de voir.

Voici un exemple de décision illustratif et non un modèle standardisé : supposons qu'une colonne de contenu de 700 pixels de large contienne une photo montrant un objet en deux parties dont la différence est au cœur du propos. Un affichage proche de la largeur totale de la colonne facilitera la comparaison. Si la même photo ne sert qu'à poser une ambiance générale et que le paragraphe fournit toute l'explication, un affichage plus étroit permettra de préserver la priorité donnée au texte. Ce chiffre de 700 pixels n'est qu'un exemple de largeur de colonne, pas une norme recommandée.

Lorsqu'une photo apparaît à côté d'un texte sur un écran large, considérez-les comme une paire indissociable. Accordez à l'image une largeur suffisante pour faire ressortir son sujet et au texte assez d'espace pour que la lecture reste confortable. Si l'un des deux se retrouve trop à l'étroit, empilez-les l'un au-dessus de l'autre au lieu de réduire la photo et de compresser le texte dans une bande étroite. Sur les écrans plus petits, un agencement vertical sur une seule colonne est souvent le plus clair : le texte, puis la photo associée, puis le passage suivant. Les explications du W3C sur le critère de reflow (WCAG 2.2) décrivent comment de nombreuses pages d'articles peuvent s'adapter à une seule colonne et précisent que l'objectif est d'éviter le défilement dans deux directions pour un contenu textuel ordinaire. Le document note également des exceptions pour les contenus dont la signification ou l'utilisation nécessite une mise en page bidimensionnelle. Pour la mise en page d'un article, l'essentiel est de veiller à ce que l'association image-texte ne force pas les lecteurs à faire un défilement horizontal pour suivre la lecture.

Placez chaque photo là où son lien est évident

Positionnez la photo à proximité de la phrase ou du paragraphe expliquant sa présence. Si les lecteurs doivent faire défiler plusieurs paragraphes sans rapport pour trouver l'image, son lien logique risque de ne pas être clair. De même, une grande photo insérée en plein milieu du raisonnement d'une phrase peut couper le fil de la pensée. Un emplacement judicieux se situe généralement après le premier passage présentant le sujet, ou directement avant une étape où l'image s'avère indispensable.

Utilisez une légende lorsqu'elle apporte un élément précis : identifier le sujet, pointer un détail ou expliquer l'intérêt de l'image. Ne vous servez pas de la légende pour répéter mot pour mot la phrase qui l'entoure. Si la photo nécessite un examen attentif, précisez ce qu'il faut observer dans le texte attenant ainsi que dans la légende ; les lecteurs ne devraient pas avoir à deviner le propos uniquement d'après l'emplacement.

Le lien entre une photo et son texte compte également pour la lecture non visuelle. Le tutoriel sur les images du W3C indique que les images informatives doivent comporter des équivalents textuels transmettant leurs informations essentielles, tandis que les images décoratives peuvent avoir un attribut alternatif vide afin que les technologies d'assistance puissent les ignorer. Les recommandations du W3C sur les images informatives soulignent que le texte alternatif doit exprimer le sens de l'image en contexte et pas simplement dresser une liste d'objets visibles. Pour faire un contrôle pratique, demandez-vous : si quelqu'un ne pouvait pas voir cette photo, quelle information lui manquerait-il ? Intégrez les informations essentielles dans le texte de l'article et fournissez un texte alternatif approprié pour l'image. Si l'image n'apporte rien de plus que le texte adjacent, il peut être inutile d'en répéter la description.

Préservez le cadrage utile de la photo

Le format de la photo (son format d'image, c'est-à-dire le rapport entre sa largeur et sa hauteur) influence l'espace qu'elle occupe et ce qui reste visible. Commencez par faire tenir toute la photo dans la zone choisie. Ne la recadrez que si le sujet demeure lisible et que le recadrage n'enlève pas de détails nécessaires au lecteur. Un recadrage en paysage peut convenir à une grande image de tête ; une image au format portrait fonctionnera peut-être mieux avec une largeur plus réduite au sein de la colonne. Il s'agit de choix de composition, pas de règles immuables.

Si un recadrage supprime le contexte, modifie le sens apparent ou masque un détail abordé dans l'article, optez pour un cadrage différent ou conservez les proportions d'origine. Pour les schémas, légendes ou documents, vérifiez la taille d'affichage finale : le texte incrusté dans une photo peut devenir trop petit pour être lu. Les recommandations d'images de GOV.UK déconseillent généralement d'insérer du texte dans les images, car il devient difficile à lire, à copier, à redimensionner ou à lire avec un lecteur d'écran ; lorsqu'un texte est indissociable de l'image, intégrez également son contenu textuel dans le passage écrit voisin.

Vérifiez la mise en page à la taille réellement utilisée par les lecteurs

Prévisualisez l'article sur un grand écran d'ordinateur et sur un écran mobile étroit. Vérifiez que la photo ne dépasse pas de la colonne de texte, ne masque aucun contenu et ne compresse pas le texte placé à côté. Suivez l'enchaînement de lecture du titre au paragraphe puis à la photo : lorsque la disposition s'adapte verticalement, l'image doit toujours apparaître près du passage qu'elle commente. Contrôlez également les légendes et les détails importants de l'image à la taille d'affichage réelle.

Pour les pages web, les dimensions d'affichage et le poids du fichier sont deux considérations distinctes. Un fichier source volumineux peut s'avérer nécessaire pour un grand écran, mais charger inutilement de lourdes images sur de petits écrans entraîne un gaspillage de données. Le guide de web.dev sur les images réactives explique comment les navigateurs choisissent parmi plusieurs tailles d'image selon les conditions d'affichage, et précise qu'il n'existe pas de nombre unique idéal de versions d'une image. Il s'agit d'orientations techniques pour la publication web ; cela ne dicte en rien l'emplacement de l'image dans l'article.

Une méthode décisionnelle rapide

Définissez le rôle. La photo doit-elle être examinée en détail, illustrer le texte ou simplement décorer la page ?

Trouvez son point d'ancrage. Repérez le passage qui l'introduit ou en dépend, puis placez la photo à proximité immédiate de ce passage.

Déterminez la largeur d'affichage. Donnez suffisamment de place à un élément de preuve déterminant ; laissez une photo secondaire occuper moins d'espace si les détails ne sont pas cruciaux.

Vérifiez le cadrage. Gardez le sujet principal et tout le contexte utile bien visibles.

Lisez la mise en page dans l'ordre d'affichage. Sur un écran étroit, assurez-vous que le texte et la photo apparaissent toujours dans un ordre logique et que la lecture du texte reste fluide.

Décrivez l'information. Ajoutez une légende lorsqu'elle apporte une vraie valeur, et fournissez un texte alternatif adapté au rôle de l'image.

La règle pratique est simple : laissez l'importance définir la mise en avant visuelle, le texte associé déterminer l'emplacement, et l'aperçu sur écran étroit révéler si la disposition fonctionne toujours. Si la photo est difficile à comprendre à la taille choisie, agrandissez-la, simplifiez son cadrage ou expliquez le détail pertinent dans le texte.

Continuer sur ce thème