Utilisateur:Yodaspirine/Aides et principes/Mise en forme des images

Une page de Wikipédia, l'encyclopédie libre.
Sauter à la navigation Sauter à la recherche

Vous êtes ici : Sommaire >Mise en forme >Mise en forme des images

Difficulté modérée
Information icon.svg
Vous êtes actuellement sur une page d'aide : yodaspirine/Aides et principes. Cette page est destinée aux contributeurs débutants.
Pour accéder à l'aide avancée pour les utilisateurs expérimentés suivez ce lien : Utilisateur:Yodaspirine/Aides et principes/avancée .


Cette page d'aide présente les possibilités pour présenter les images dans les articles pour certains cas :

  • modifier la taille de l'image
  • présenter un groupe d'images (galeries)
  • mettre un lien sur l'image

Il existe des recommandations sur la mise en forme des images à lire pour vous assurer de faire un bon usage des images.


Le paramètre de taille pour les images[modifier | modifier le code]

Introduction d'un paramètre de taille[modifier | modifier le code]

Evitez de fixer une taille d'image en pixels au-delà de la taille par défaut car les images doivent pouvoir s'adapter à la taille des écrans et aux préférences de chacun.

Dans la majorité des cas, il est inutile de spécifier la taille d'une image car l'argument vignette(ou thumb) donne une taille par défaut[1] adaptée à la plupart des cas. Dans certains cas particuliers on peut toutefois souhaiter modifier la taille :

  • Syntaxe complète avec paramètre de taille :
[[Fichier:Nom de l'image|vignette|positionnement éventuel|taille|alt=alternative textuelle|légende]]

Le paramètre de « taille » peut s'écrire de deux manières :

Les utilisateurs inscrits ont possibilité de modifier la taille par défaut dans Préférences > Affichage.

Taille proportionnelle aux préférences de l'utilisateur[modifier | modifier le code]

upright seul[modifier | modifier le code]

  • Code: |upright|

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. La signification du terme anglais upright est « le plus grand côté vers le haut ». L'option upright, sans donnée chiffrée, créé 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 principe, la largeur par défaut est 220 px ce qui donne une largeur de 170 px pour une image upright (ou autre selon les préférences de l'utilisateur).

upright=n[modifier | modifier le code]

Par contre, dès qu'on donne un coefficient chiffré à upright, ce facteur multiplicatif concerne le côté horizontal, sans considération de l'orientation (paysage ou portrait) de l'image.

  • Code: |upright=...|
    qui correspond à un multiplicateur de la taille choisie par l'utilisateur dans ses préférences. Par exemple, si l'utilisateur spécifie 250 pixels dans ses préférences pour l'affichage des images, avec upright=2, l'image que verra l'utilisateur sera de 250 * 2 = 500 pixels.
  • Exemple: |upright=0.5| (mettre un point à l'anglaise et non pas une virgule !)
    code complet :



Voir ci-dessous quelques exemples de tailles afin d'avoir une idée du résultat final. Ce que vous voyez dans cette section dépendra de vos préférences d'utilisateur.

Échelle indicative de taille des images proportionnelles avec coefficient multiplicateur
Upright= Image en largeur Image en hauteur
0.2
Schéma plaques tectoniques.png
Gray252.png
0.5
Schéma plaques tectoniques.png
Gray252.png
vignette (ou thumb) par défaut (inutile d'écrire upright=1)
220px par défaut, sauf préférences
220px par défaut, sauf préférences
1.5
Schéma plaques tectoniques.png
Gray252.png
2
Schéma plaques tectoniques.png
Gray252.png


Galeries[modifier | modifier le code]

Syntaxe usuelle[modifier | modifier le code]

La syntaxe est la suivante :

<gallery caption="Le titre de la galerie (optionnel)">
Fichier:Wikipedia svg logo-fr.svg
Fichier:Wikipedia svg logo-fr.svg|Une légende (optionnelle)
Fichier:Wikipedia svg logo-fr.svg
Fichier:Wikipedia svg logo-fr.svg|Une légende (optionnelle) avec un [[Wikipedia|lien]]
Fichier:Wikipedia svg logo-fr.svg
Fichier:Wikipedia svg logo-fr.svg
Fichier:Wikipedia svg logo-fr.svg
Fichier:Wikipedia svg logo-fr.svg
</gallery>

Avec pour résultat :

Message explicatif[modifier | modifier le code]

En ajoutant sous la galerie le modèle {{message galerie}} on obtient ce message :

Cliquez sur une vignette pour l’agrandir.


Images cliquables[modifier | modifier le code]

Les images cliquables (en anglais, image maps) permettent de rendre sensible certaines zones d’une image et d’y définir des liens hypertexte. Elles sont notamment utiles en cartographie.

Faire un lien sur une image (hors des articles)[modifier | modifier le code]

Icône pour souligner l'importance du texte
Cette syntaxe est interdite dans les articles, car elle rend la page de l’image inaccessible, donc sa licence et son auteur. Elle est cependant tolérée, pour des questions d’ergonomie, sur des icônes incluses dans des modèles.

La fonctionnalité du lien sur image est maintenant disponible. Le lien est défini par le paramètre link=, et il peut s’agir d’une page du wiki ou d’un lien externe.

Exemples 
  • [[Fichier:Exemple.jpg|alt=Le Bistro|link=Wikipédia:Le Bistro]]
    donne :
    Le Bistro
  • [[Fichier:Exemple.jpg|alt=Google|link=http://www.google.fr]]
    donne :
    Google

À noter que les liens rouges ne sont pas détectés par cette syntaxe (tout comme les liens vers des redirections).

« alt » et « link »[modifier | modifier le code]

  • « alt » donne une alternative textuelle à l’image quand celle-ci n’est pas visible : [[Fichier:truc bidule.png|alt=truc bidule]] ou [[Fichier:truc bidule.png|thumb|alt=truc bidule|Légende]].
  • « link » crée en plus un lien vers un article, une page meta ou une page externe ou bien encore permet de supprimer tout lien cliquable sur l’image.

Dans les articles, on utilise principalement le paramètre « alt ». Ce paramètre doit toujours être présent, d’autant plus quand le titre du fichier image est incompréhensible. En revanche, le paramètre « link » n’est pas approprié pour les illustrations des articles et il n’y est utilisé qu’exceptionnellement, pour quelques icônes.

« alt » implicite ou explicite[modifier | modifier le code]

Si l’image est un « thumb » (vignette standard avec légende), le paramètre alt doit toujours être explicite, ce qui le différencie de la légende du thumb.

Si l’image n’est pas un thumb, la mention alt= peut être implicite : [[Fichier:truc bidule.png|truc bidule]]. Dans ce cas, le texte de l’alternative apparaît également au survol de l’image :

  • [[Fichier:Exemple.jpg|alt=truc bidule|16px]] donne truc bidule (aucune bulle d’aide n’apparaît au survol de l’image)
  • [[Fichier:Exemple.jpg|truc bidule|16px]] donne truc bidule (une bulle d’aide avec le texte de l’alternative « truc bidule » apparait au survol de l’image)

On choisira d’utiliser un paramètre alt implicite ou explicite selon le besoin de faire apparaître le texte dans la bulle d’aide au survol du lien.

« link » absent[modifier | modifier le code]

Si le paramètre link est absent (exemple : [[Fichier:truc bidule.png|truc bidule]]), l’image aura automatiquement un lien cliquable vers le fichier de cette image :
[[Fichier:Exemple.jpg|truc bidule|16px]] donne truc bidule qui est un lien automatique vers Fichier:Exemple.jpg.
Dans ce cas, il faut un alt qui permette de savoir que c’est lien vers une page d’image. Par exemple, par le biais des modèles idoines, Drapeau de la France a pour alt « Drapeau de la France » et pas « France » tout court.

Normalement, ce type d’usage n’est pas adapté aux articles, sauf pour des petites images comme les drapeaux ou les écussons, par le biais de modèles appropriés.

« link » rempli[modifier | modifier le code]

Si le paramètre link est renseigné avec le nom d’un article, d’une page meta ou d’une page externe ([[Fichier:truc bidule.png|truc bidule|link=article truc]]) c’est que l’on souhaite que l’image devienne un lien vers une page particulière :
Par exemple [[Fichier:Gnome-preferences-desktop-accessibility.svg|Atelier accessibilité|link=Wikipédia:Atelier accessibilité|16px]] donne Atelier accessibilité qui est un lien automatique vers Wikipédia:Atelier accessibilité.
Dans ce cas, il faut un alt qui permette de savoir quel est sa cible, ici « Atelier accessibilité ».

C’est plutôt un cas qu’on rencontre en dehors des articles.

« link » vide[modifier | modifier le code]

Si le paramètre link est présent mais laissé vide ([[Fichier:truc bidule.png|alt=truc bidule|link=]]) c’est que l’on veut que l’image ne soit pas un lien cliquable, ni vers le fichier de l’image, ni vers autre chose. On ne doit le faire que si c’est une image du domaine public ou une image mentionnée dans Wikipédia:Crédits graphiques :
[[Fichier:Commons-logo.svg|alt=|link=|16px]] donne qui n’est pas cliquable.
Dans ce cas, le alt sera vide ou pas selon que l’image apporte ou non une information qui n’est pas déjà dans le texte où elle se trouve.

C’est un cas fréquent dans les bandeaux mais, a priori, pas destiné aux images de contenu dans les articles.


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

  1. En 2010 cette valeur est fixée à 220px