Wikipédia:Mise en forme des images

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.

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.

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.

{{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) :

 

Galerie : Préhistoire de Malte

 

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.

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.

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.

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.]]

 

 

 

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}}.

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 ».

 

 

 

 

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.

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 panoramique annotée depuis le mont Blanc.

 

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).

 

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 :

 

Autre exemple :

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

 

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

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.

• Un exemple de galerie
•  
  Chaque image peut être légendée.
•  
  Chaque image peut être légendée.
•  
  Chaque image peut être légendée.
•  
  Chaque image peut être légendée.

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.

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é.

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.

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 x².

• 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.

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 ¹⁄₂, 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.

 

 

 

 

Cette section est vide, insuffisamment détaillée ou incomplète. Votre aide est la bienvenue ! Comment faire ?

 

 

 

 

• Wikipédia:Conventions d'utilisation des images
• Aide:Insérer une image
• Aide:Place des images
• Aide:Taille des images
• Aide:Traitement des illustrations
• Aide:Galerie