Wikipédia:Mise en forme des images

Cette page fait partie des recommandations de Wikipédia.
Une page de Wikipédia, l'encyclopédie libre.

Principe de base[modifier le code]

Les lecteurs de Wikipédia utilisent des écrans, des imprimantes et des connexions de définition, dimensions et débit très variés. Les images sont la clé de voûte de la problématique du rendu des pages, du coût d'impression et du temps de chargement des pages.

  1. La taille implicite des vignettes d'image (thumbnail) est fixée par le logiciel MediaWiki[1] mais certaines images perdent des détails importants lorsqu'elles sont réduites à cette taille (cartes, schémas).
  2. Une taille de vignette d'image explicitement fixée[2] qui serait d'une taille supérieure à la taille par défaut augmente notablement le temps de chargement et le risque de dégrader la mise en page[3].
  3. Toute taille d'image fixée en pixels contrevient aux préférences[4] des utilisateurs enregistrés.
  4. L'utilisation du modèle {{Animation}} réintroduit les problèmes résolus par gallery.

L'utilisation d'une taille agrandie d'image fixée en pixels doit donc répondre à un besoin supérieur aux inconvénients induits et rester exceptionnelle.

Recommandations sur la mise en forme[modifier le code]

Le support de Wikipédia, à savoir le World Wide Web, présente une grande opportunité qui est aussi un défi technique en ce qui concerne le rendu des articles : ceux-ci peuvent être consultés avec du matériel très varié allant du smartphone à l'ordinateur de bureau. De même, la connexion peut jouir d'un débit élevé permettant de télécharger un article en une fraction de seconde, ou d'un très faible débit nécessitant plusieurs minutes pour télécharger un article richement illustré.

Le problème peut se résumer à deux aspects :

  • si une image est trop large par rapport à l'écran, la mise en page sera fortement dégradée ;
  • les images prennent un volume de données beaucoup plus important que le texte (une vignette comporte autant d'octets qu'environ 1 000 mots) et ont un impact majeur sur le temps de téléchargement avec une connexion Internet à bas débit.

Les images sont la clé de voûte de ce problème et il convient de respecter quelques règles afin de rendre les articles consultables simplement par tous. Pour répondre à ce besoin, il faudra garder à l'esprit que tout le monde n'a pas le même matériel que soi.

Le logiciel MediaWiki qui fait fonctionner Wikipédia propose deux fonctionnalités pour répondre à cette problématique : vignette et gallery ; pour des raisons historiques, la syntaxe thumb est massivement présente dans les articles, elle est parfaitement identique et interchangeable avec vignette. Commons fournit les outils pour présenter de manière exhaustive les médias liés à un sujet donné. Il faudra respecter quelques règles d'utilisation de ces outils pour conserver un accès convenable à vos articles.

Commons[modifier le code]

Le rédacteur d'un article dans Wikipédia peut avoir tendance à vouloir y mettre autant d'images que possible. Cela va à l'encontre de l'esprit de synthèse propre aux articles encyclopédiques, noie le texte et peut diminuer l'importance des liens entre images et texte. De surcroît, plus la densité des images est importante, plus la maîtrise du rendu final est difficile. Ainsi, il est généralement préférable de ne mettre sur les articles que des images en relation directe avec les paragraphes auxquels elles sont ajoutées.

Si vous disposez d'un nombre supplémentaire de photographies de grande qualité, il est possible de sélectionner les plus pertinentes et de les insérer avec la balise gallery à la fin des sections correspondant à leur sujet, afin de conserver le plus de cohérence possible entre le texte et les médias. En revanche, l'ajout de nombreuses images en vrac en fin d'article ne donne pas un aspect de qualité à l'article.

C'est dans cet esprit de contextualisation des médias qu'il faudra, à quelques rares exceptions près pour les sujets particulièrement graphiques, éviter les sections La galerie, Le diaporama ou encore Dossier photographique dans les articles.

Wikipédia ne doit pas remplacer Commons. La rédaction d'un article passe également par l'organisation des pages correspondantes sur Commons, les modèles {{Autres projets}} (pour un article en entier) et {{Galerie détaillée}} (pour une section d'article) permettant d'efficacement lier ensemble ces deux projets.

Sur les autres projets Wikimedia :

{{Autres projets
| commons = Préhistoire de Malte
| commons titre = La préhistoire de Malte
}}

(cf. ci-contre à droite) :

{{Galerie détaillée|Préhistoire de Malte}}

(cf. ci-après) :

Les vignettes[modifier le code]

Des orchidées dans la nature
vignette permet d'afficher une vignette avec une légende sous l'image.

Voici la syntaxe de base pour placer une image :

[[Fichier:Nom du fichier|vignette|alt=alternative à l'image|Légende de l'image.]]

Ainsi, l'image apparaît dans un cadre sur le côté droit de l'article, avec une taille standard de 180 pixels de large. Sa légende est placée en bas du cadre, et en bas à droite une petite icône (  ) fournit un lien sur l'image en format original. L'alternative n'apparaît que si l'image n'est pas affichée, par exemple si le téléchargement est interrompu, ou lors de la lecture de la page par synthèse vocale.

Bien utiliser les légendes avec vignette[modifier le code]

Sauf dans de rares exceptions, les images doivent toujours être munies de légendes, notamment pour que les non-voyants et mal-voyants puissent se les faire décrire. L'attribut thumb ou son équivalent français vignette est utilisé pour générer le « cadre » dans lequel la légende sera visible.

Si cela semble nécessaire, cette légende peut contenir de l'hypertexte (liens bleus) et une ou plusieurs balises de références (pour sourcer des graphiques par exemple) afin d'enrichir le contenu de la légende, sans qu'elle prenne plus de place dans la page.

Le code vignette permet aussi d'obtenir une vignette de taille standard, agrandissable d'un simple clic. Par défaut, la largeur avec vignette est 180 pixels, soit un compromis entre lisibilité et taille des photos.

De façon générale, il n'y a pas lieu d'ajouter le paramètre de taille (...px) car en spécifiant une taille en pixels, vous contrevenez aux préférences de l'utilisateur.

Il ne faut pas hésiter à améliorer au passage la description de l'image dans Wikimedia Commons (et/ou à la traduire dans d'autres langues) afin d'aider d'éventuels autres ré-utilisateurs de cette image, dans Wikipédia ou ailleurs.

Cas particuliers : vignette associé à upright (ou redresse)[modifier le code]

Dans certains cas on peut toutefois recourir au paramètre upright (ou son équivalent redresse). Celui-ci répond de manière optimale à une grande partie des besoins. Il permet d'ajuster automatiquement les dimensions des images de manière harmonieuse et en fonction des écrans, tout en respectant les choix du lecteur.

Dans quelques cas particuliers (voir ci-après), on peut donner une valeur numérique à ce paramètre si on veut un affichage plus grand ou plus petit que la valeur par défaut : il multiplie alors par autant la taille éventuellement choisie par l'utilisateur dans ses préférences. Ainsi, pour upright=2.0, une image vue en configuration standard aura une taille de 180 × 2 = 360 pixels, mais pour un utilisateur ayant une largeur préférée des vignettes de 300 pixels, la même image aura une taille de 300 × 2 = 600 pixels.

Images verticales[modifier le code]

Pour les images verticales (mode portrait), quand on veut adopter la taille d'imagette standard, on ajoute, en plus de vignette le paramètre upright, sans valeur, afin que la surface de l'imagette soit équivalente à celle d'une image au format paysage, et ne soit pas trop grande[5].

Exemple d'utilisation d'upright pour une taille standard en mode portrait :

[[Fichier:StMichel7.JPG|vignette|upright|alt=Un clocher de style roman|Le clocher de l'église.]]
Exemple d'image en largeur
Image d'orientation « paysage » (photo en largeur), vignette standard.
Exemple d'image en hauteur
Image d'orientation « portrait » (photo en hauteur), vignette sans upright : imagette trop grande.
Exemple d'image en hauteur
Image d'orientation « portrait », vignette avec upright : taille correcte.

Éviter les empilements[modifier le code]

Un des problèmes les plus courants lors de l'ajout de plusieurs images est qu'elles ont tendance à s'empiler verticalement à la droite de l'écran, d'autant plus que l'écran est large : le texte prenant moins de place, les images ne sont plus disposées en regard des paragraphes auxquels elles se rapportent.

On peut y remédier partiellement avec le modèle {{clr}}.

Images dont le ratio n'est pas proche d'une photographie normale[modifier le code]

Pour les cas d'images verticales (orientation « portrait ») ou horizontales (orientation « paysage ») mais « étroites », on peut, tout en ne précisant pas de taille, adapter la taille de la vignette en ajoutant l'attribut upright=0.5 pour réduire les « portraits » et upright=1.5 pour agrandir les « images longues ».

Statuette égyptienne en hauteur
vignette avec upright.
Temple égyptien, vue panoramique
vignette avec upright=1.5.
Temple égyptien, vue panoramique
vignette sans upright.
Statuette égyptienne en hauteur
vignette avec upright=0.5.

La formule exacte pour upright, si on veut garder une surface de vignette équivalente avec celle d'une photographie normale est √(L × 0,75 ÷ h) où L est la largeur et h la hauteur de l'image en pixels.

Panoramas[modifier le code]

Le modèle:Image panoramique affiche un panorama d'une largeur en pixels à préciser, et si le panorama est plus large que l'article, alors l'affichage est automatiquement coupé aux marges et une barre de défilement est ajoutée.

{{Image panoramique|Mont Blanc Panorama beschriftet.jpg|3000|alternative=Vue sur des montagnes|Vue panoramique annotée depuis le mont Blanc.}}

Vue sur des montagnes
Vue panoramique annotée depuis le mont Blanc.
Voir le fichier

Mise en avant d'une image importante dans le cadre de l'article[modifier le code]

upright peut être pratique pour mettre en avant le sujet d'un article. Par exemple, sur l'article Tres de Mayo, on pourra mettre au début d'article une image avec upright=1.5. Mais il faut limiter ce genre d'exception dans les articles. Faites attention à la mise en page, notamment si la table des matières est importante en largeur. Une valeur de 2 pour upright est une valeur extrême qu'il faudra utiliser avec parcimonie et dans des cas très particuliers : le rendu aura 360 pixels en standard, 240 pixels au minimum et 600 pixels au maximum, selon la configuration de l'utilisateur).

Tableau de Goya représentant une exécution par les armes
Tableau avec upright=1.7.

Schémas avec taille fixe[modifier le code]

Il existe néanmoins des cas où l'utilisation d'une taille fixe peut se concevoir. C'est par exemple le cas des schémas où une bonne compréhension du texte est indispensable. Une taille trop petite peut rendre un schéma illisible. Dans ce cas, mettez simplement la taille minimum à laquelle l'illustration reste lisible. Il est également conseillé de centrer le schéma pour le mettre en valeur et éviter que le texte se retrouve en forme de « tuyau » sur les petits écrans.

Avec le code suivant :

[[Fichier:Schéma Grenade.svg|vignette|centre|280px|alt=Schéma légendé d'une grenade offensive|Schéma agrandi à {{unité|280|pixels}}.]]

Le résultat est :

Schéma légendé d'une grenade offensive
Schéma agrandi à 280 pixels.

Autre exemple :

[[Fichier:UIR.svg|vignette|gauche|75px|alt=Petit schéma d'un circuit électrique|Schéma réduit à {{unité|75|pixels}}.]]

Petit schéma d'un circuit électrique
Schéma réduit à 75 pixels.

Les schémas simples peuvent gagner à être réduits.

Balise gallery et modèle Animation[modifier le code]

Rappel : Wikipédia ne doit pas remplacer Commons (voir ci-avant)

Une galerie d'images sur Wikipédia est une succession d'images organisée horizontalement. Outre le mode standard, longtemps le seul disponible, il existe des modes d'affichage optionnels.

La balise gallery standard répond aux deux problématiques citées précédemment : la taille par défaut des images est 120 pixels, le nombre de vignettes et la largeur totale s'adaptent à la largeur de l'écran de l'internaute. Toutefois, l'esthétique de son rendu ne plaît pas à tous. Par ailleurs, l'insertion d'un grand nombre d'images augmente énormément la taille en kilooctets de la page, pénalisant les connexions bas débit.

Les paramètres[modifier le code]

perrow
Par défaut, les vignettes sont réparties en plusieurs lignes dès que leur nombre les ferait dépasser de la fenêtre en largeur : le nombre de vignettes par ligne dépend de la largeur de la fenêtre dans laquelle elles sont vues. Le paramètre « perrow=X » permet de réduire le nombre de vignettes sur une même ligne à X vignettes ; il pourra par exemple être utile de le fixer à 4 si vous avez 8 images : le rendu sera plus esthétique.
Autres paramètres
D'autres paramètres permettent par exemple de fixer la taille des images. Pour les mêmes raisons que celles évoquées pour vignette et a fortiori, il est plus que vivement déconseillé de les utiliser.

Modèle Animation[modifier le code]

L'utilisation du modèle {{Animation}} doit être réduite aux enchaînements logiques des images afin de mettre en valeur cet enchaînement. Par exemple, on peut mettre en valeur le recul du glacier de Chamonix avec une dizaine de photos prises sur une centaine d'années.

En aucun cas le modèle Animation ne doit se substituer à la balise gallery. Il faut utiliser le paramètre upright, et non le paramètre largeur, pour ces modèles. Par exemple, 20 images de 400 pixels vont occuper 1 Mo, soit 2 minutes 30 de téléchargement pour une connexion analogique pour une seule page, ce qui rend ces photos inaccessibles. En temps normal, ne spécifiez pas de taille pour ce modèle, le vignette standard sera utilisé.

Gardez à l'esprit que les images sont cliquables et que ce système est mis en place pour pallier les limitations précédemment décrites : si une image intéresse un lecteur, il pourra y accéder. Mais si vous mettez de trop grosses tailles sur vos images, vous en diminuez l'accessibilité.

Accessibilité[modifier le code]

L'emplacement du code de l'image devrait se trouver dans le même ordre par rapport au texte que dans le rendu visuel. Par exemple, si une image apparaît au quart d'une page, l'appel [[Fichier:...]] devrait apparaître au quart du wikitexte[6]. Une image peut porter une information qui n'est pas présente par ailleurs dans le contenu de la page. Pour être perceptible par les utilisateurs de lecteur d'écran, de navigateur ne restituant pas les images, etc., cette information visuelle doit également être indiquée de manière textuelle. C'est le rôle du texte alternatif de l'image (attribut HTML alt=). Ce texte alternatif n'est pas affiché par défaut et ne sera restitué que lorsque l'image elle-même ne l'est pas.

Le paramètre alt= doit donc toujours être présent dans le code des images, surtout quand le titre du fichier correspondant est incompréhensible seul (ex. : Fichier:EspBaris4500ba.JPG), car, à défaut de texte alternatif, c'est le titre du fichier qui sera affiché en lieu et place de l'image absente.

Le texte alternatif vient apporter les informations qui sont spécifiquement portées par l'image et qui sont absentes du texte. Une courte phrase suffit : il faut généralement éviter de dépasser 120 caractères. Normalement l'information est déjà détaillée dans la page ou dans la légende de l'image, elle n'a donc pas à être détaillée en double dans le texte alternatif.

La balise <gallery> permet la saisie de textes alternatifs.

Exemples pratiques[modifier le code]

Vitesse de connexion[modifier le code]

Ces temps sont évidemment fortement réduits avec un accès à internet à plus haut débit, mais il faut garder à l'esprit que Wikipédia devrait pouvoir être consultée dans des pays ou des régions où l'équipement est loin de celui dont bénéficient les habitants des grandes villes modernes.

Voici les chiffres de temps de téléchargement pour un article contenant 60 images dont 20 mises en galeries, ce qui correspond à un article de qualité plutôt riche en images. Les calculs sont basés sur une connexion avec un débit efficace de 5 ko/s, ce qui correspond à une connexion moyenne avec un modem analogique, et en prenant 16 ko comme poids de base d'une image de 250 pixels de large (moyenne calculée sur les 44 images de Scuderia Lancia)[7]. Les autres tailles d'image sont extrapolées selon le principe : multiplication de la taille par x → multiplication du poids par x2.

  • En utilisant des vignette fixés à 250 pixels, le temps de téléchargement des images est de 3 minutes 12 secondes.
  • En utilisant des vignette standard (soit 180 pixels) et la balise gallery, le temps de téléchargement des images est de 1 minute 11 secondes.
  • En utilisant des vignette configurés au minimum (soit 120 pixels) et la balise gallery, le temps de téléchargement des images est de 36 secondes.

Largeur d'affichage[modifier le code]

La largeur disponible pour afficher la page est inférieure à celle de l'écran : la fenêtre n'est pas forcément maximisée, les décors de fenêtre (bords, barre de défilement) prennent de la place, des panneaux annexes peuvent être ouverts dans le navigateur, etc. En outre, l'interface de MediaWiki occupe de la place sur le côté de chaque page.

Voici des captures d'écran permettant de voir les rendus sur des largeurs d'affichage de 800 et 1 920 pixels, selon différents paramètres de vignette. L'échelle est 12, mais vous pouvez accéder à la grandeur nature en cliquant sur les captures. Vous pouvez constater qu'en fixant la taille les petits affichages ont un rendu très peu ergonomique et que l'affichage de 1 920 pixels a des images un peu petites. En standard, l'affichage de 800 pixels a des images un peu trop grosses et l'affichage de 1 920 pixels des images trop petites, mais chacun a la possibilité de régler la taille des vignettes à sa convenance.

Rendu en imposant les tailles[modifier le code]

Affichage de 800 pixels, vignettes de 400 pixels
Affichage de 800 pixels, vignettes de 250 pixels
Affichage de 1 920 pixels, vignettes de 250 pixels

Rendu en utilisant les vignettes standard (vignette) + pourcentage de taille (upright)[modifier le code]

Rendu en utilisant les vignettes standard (vignette)[modifier le code]

Affichage de 800 pixels, vignettes standard
Affichage de 1 920 pixels, vignettes standard
Affichage de 800 pixels, vignettes standard réglées par l'utilisateur à 120 pixels
Affichage de 1 920 pixels, vignettes standard réglées par l'utilisateur à 300 pixels

Articles connexes[modifier le code]

Notes et références[modifier le code]

  1. MediaWiki crée par défaut des vignettes de 200 pixels de large.
  2. C'est-à-dire une vignette dont la largeur est précisée avec le wikicode : [[Fichier:image.jpg|thumb|321px|alt=blabla|Légende]].
  3. Plus une image est grande, plus il y a de risques qu'elle déborde de son paragraphe et repousse d'autres images, la table des matières, des tableaux, etc.
  4. Chaque utilisateur peut régler sa taille de vignette préférée dans les préférences à l'onglet Apparence / Fichiers.
  5. La signification du terme anglais upright est « le plus grand côté vers le haut ». L'option upright sans paramètre crée normalement une image faisant 75 % de la largeur par défaut. La largeur exacte est calculée en prenant la largeur par défaut des vignettes, multipliée par 0,75, et arrondie au multiple de 10 le plus proche. En général, la largeur par défaut est 180 pixels ce qui donne une largeur de 140 pixels pour une image upright et donc environ 180 pixels de haut pour une image portrait de ratio standard.
  6. voir ce commentaire d'un non voyant : « Dans les coulisses de la Wikimedia », RAW no 101, 13 septembre 2013.
  7. Des sites Web vous permettent de calculer le temps de chargement d'une page en fonction de la connexion. Les résultats indiqués sont valables pour un utilisateur anonyme, c'est-à-dire des images en vignette standard de 180 pixels. Exemple : Web Site Optimization. Les propriétés d'une image (poids et autres) sont données par le navigateur.