|
Ce texte est considéré comme une recommandation dans Aigles et Lys. Il décrit les exigences dont le principe est accepté par un grand nombre d'Aigles-et-Lyséens. |
|
| Vous pouvez librement modifier cette page, mais il est conseillé d'utiliser la page de discussion pour proposer une modification majeure. |
 |
En résumé : Pour rendre un article consultable facilement par le plus grand nombre, il faut utiliser les images avec l'attribut thumb sans spécifier le paramètre de taille ou utiliser la balise gallery.
|
Principe de base[]
Les lecteurs de Aigles et Lys 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.
- 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).
- 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].
- Toute taille d'image fixée en pixels contrevient aux préférences[5] des utilisateurs enregistrés.
- L'utilisation des modèles {{Images}} ou {{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[]
Le support de Aigles et Lys, à 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é. Certains ont à disposition une connexion Internet haut débit et un écran de 24 pouces de 1 920 pixels de large, d'autres partagent une connexion avec 12 autres vieux PC dans un cybercafé, ou utilisent un ordinateur portable à bas coût[1], ou encore un smartphone[6].
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 Aigles et Lys propose deux fonctionnalités pour répondre à cette problématique : thumb et gallery. 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[]
Le rédacteur d'un article dans Aigles et Lys 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 diminue 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 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 bas 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.
Aigles et Lys 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. dessous) :
Les vignettes[]
thumb 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|thumb|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 220 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 thumb[]
Les images doivent toujours être munies de légendes, à quelques rares exceptions près. L'attribut thumb ou son équivalent français vignette est utilisé pour cela.
thumb permet aussi d'obtenir une vignette de taille standard, agrandissable d'un simple clic. Par défaut, la largeur avec thumb est 220 pixels, soit un compromis entre lisibilité et taille des photos.
De façon générale, vous ne devez pas ajouter le paramètre de taille (...px). Si vous spécifiez une taille en pixels, vous contrevenez aux préférences de l'utilisateur.
Cas particuliers : thumb associé à upright[]
Dans certains cas on peut toutefois recourir au paramètre upright. 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 le thumb 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 220 × 2 = 440 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[]
Pour les images verticales (mode portrait), quand on veut adopter la taille d'imagette standard, on ajoute, en plus de thumb 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[7].
Exemple d'utilisation de upright pour une taille standard en mode portrait :
[[Fichier:StMichel7.JPG|thumb|upright|alt=Un clocher de style roman|Le clocher de l'église]]
Image d'orientation « paysage » (photo en largeur), thumb standard.
Image d'orientation « portrait » (photo en hauteur), thumb sans upright : imagette trop grande.
Image d'orientation « portrait », thumb avec upright : taille correcte.
Éviter les empilements[]
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[]
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 ».
thumb avec upright
thumb avec upright=1.5
thumb sans upright
thumb avec upright=0.5
Panoramas[]
On pourra également, par exemple pour illustrer un article consacré à un site géographique, placer un panorama qui, s'il est laissé en taille standard, n'a aucun intérêt. Utilisez alors upright=3.2. Le rendu sera une image de 704 pixels de large en standard. La plus-value la plus importante de cet usage sera pour ceux qui ont configuré une taille de vignette plutôt grosse. De même, afin de ne pas pénaliser les connexions bas débit, limitez le nombre de panoramas par article et mettez en valeur les liens vers Commons.
Panorama avec upright=3.2
Mise en avant d'une image importante dans le cadre de l'article[]
Upright peut être pratique pour mettre en avant également 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 bien évidemment, il faut limiter ce genre d'exception dans les articles. Faites également 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 sera de 440 pixels en standard, de 240 pixels au minimum et de 600 pixels au maximum, selon la configuration de l'utilisateur).
Schémas avec taille fixe[]
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.
Schéma, 280 pixels
75 pixels
Les schémas simples peuvent gagner à être réduits.
Balise gallery et modèle Images[]
Rappel : Aigles et Lys ne doit pas remplacer Commons (voir ci-dessus)
La balise gallery répond aux deux problématiques citées ci-dessus : la taille par défaut des images est de 120 pixels, le nombre de vignettes et la largeur totale s'adapte à la largeur de l'écran de l'internaute. Malheureusement, son rendu n'est pas des plus esthétiques. 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[]
- perrow
- Ce paramètre permet de réduire le nombre de vignettes sur une même ligne ; 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
thumbet a fortiori, il est plus que vivement déconseillé de les utiliser.
Modèles Images et Animation[]
L'utilisation du modèle {{Images}} (désormais obsolète) et 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 les modèles Images et Animation ne doivent se substituer à la balise gallery. Il faut également utiliser le paramètre upright, et non le paramètre largeur pour ces modèles. Par exemple, 20 images de 400 pixels vont générer 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 thumb 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é[]
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 de l'alternative textuelle de l'image (attribut HTML alt=). Cette alternative n'est pas affichée par défaut et ne sera restituée que lorsque l'image elle-même ne peut pas l'être.
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 d'alternative textuelle, c'est lui qui sera affiché en lieu et place de l'image absente.
L'alternative 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 é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 l'alternative textuelle.
La balise <gallery> permet également la saisie d'alternatives textuelles.
Exemples pratiques[]
Vitesse de connexion[]
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)[8]. 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
thumbfixés à 250 pixels et des modèles {{Images}} fixés à 300 pixels, le temps de téléchargement des images est 3 minutes 12 secondes. - En utilisant des
thumbde l'ancien standard (soit 180 pixels) et la balisegallery, le temps de téléchargement des images est 1 minute 11 secondes. - En utilisant des
thumbconfigurés au minimum (soit 120 pixels) et la balisegallery, 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 thumb. L'échelle est 1⁄2, 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[]
Rendu en utilisant les vignettes standard (thumb) + pourcentage de taille (upright)[]
Rendu en utilisant les vignettes standard (thumb)[]
Notes et références[]
- ↑ 1,0 et 1,1 Les ordinateurs portables fournis par l'association One Laptop per Child ont un écran de 693 pixels de large.
- ↑ MediaWiki crée par défaut des vignettes de 200 pixels de large.
- ↑ C'est-à-dire une vignette dont la largeur est précisée avec le wikicode :
[[Fichier:image.jpg|thumb|321px|alt=blabla|Légende]]. - ↑ 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.
- ↑ Chaque utilisateur peut régler sa taille de vignette préférée dans les préférences à l'onglet Apparence\ Fichiers.
- ↑ La tendance à la miniaturisation de la technologie ne va pas faire converger tout le monde vers le même matériel, bien au contraire.
- ↑ La signification du terme anglais
uprightest « le plus grand côté vers le haut ». L'optionuprightsans 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 220 px ce qui donne une largeur de 170 px pour une imageuprightet donc 220 px de haut pour une image portrait de ratio standard. - ↑ 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
thumbstandard de 180 pixels (valeur de l'ancien standard, actuellement il est fixé à 220 pixels). Exemple : websiteoptimization. Les propriétés d'une image (poids et autres) sont données par le navigateur.