Wikipédia:Mise en forme des images

Principe de base

Les lecteurs de Wikipédia utilisent des écrans[1], 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[2] 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[3] 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[4].
  3. Toute taille d'image fixée en pixels contrevient aux préférences[5] des utilisateurs enregistrés.
  4. L'utilisation du modèle 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é

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

    Vitesse de connexion

    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)[9]. 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 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 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 36 secondes.

    Largeur d'affichage

    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

    Affichage de 800 pixels, vignettes de 400 pixels
    Screenshot 800width 400px.png
    Affichage de 800 pixels, vignettes de 250 pixels
    Screenshot 800width 250px.png
    Affichage de 1 920 pixels, vignettes de 250 pixels
    Screenshot 1920width 250px.png

    Rendu en utilisant les vignettes standard (vignette) + pourcentage de taille (upright)

    Rendu en utilisant les vignettes standard (vignette)

    Affichage de 800 pixels, vignettes standard
    Screenshot 800width thumb.png
    Affichage de 1 920 pixels, vignettes standard
    Screenshot 1920width 180px.png
    Affichage de 800 pixels, vignettes standard réglées par l'utilisateur à 120 pixels
    Screenshot 800width 120thumb.png
    Affichage de 1 920 pixels, vignettes standard réglées par l'utilisateur à 300 pixels
    Screenshot 1920width 300px.png

    Articles connexes

    Notes et références

    1. a et b Les ordinateurs portables fournis par l'association One Laptop per Child ont un écran de 693 pixels de large.
    2. MediaWiki crée par défaut des vignettes de 200 pixels de large.
    3. C'est-à-dire une vignette dont la largeur est précisée avec le wikicode : [[Fichier:image.jpg|thumb|321px|alt=blabla|Légende]].
    4. 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.
    5. Chaque utilisateur peut régler sa taille de vignette préférée dans les préférences à l'onglet Apparence / Fichiers.
    6. La tendance à la miniaturisation de la technologie ne va pas faire converger tout le monde vers le même matériel, bien au contraire.
    7. 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.
    8. voir ce commentaire d'un non voyant : « Dans les coulisses de la Wikimedia », RAW no 101, 13 septembre 2013.
    9. 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.