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

Mise en forme Mise en forme des images

Difficulté modérée

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

Introduction d'un paramètre de taille

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

• proportionnelle aux préférences de l'utilisateur (recommandé pour des raisons d'accessibilité) ;
• taille invariable (exceptionnel, à éviter), voir l'aide sur la mise en forme avancée des images.

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

upright seul

• 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

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
0.5
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
2

Galeries

Syntaxe usuelle

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 :

• Le titre de la galerie (optionnel)
• 
• 
  Une légende (optionnelle)
• 
• 
  Une légende (optionnelle) avec un lien
• 
• 
• 
• 

Images cliquables

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)

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 :

  

• [[Fichier:Exemple.jpg|alt=Google|link=http://www.google.fr]]

  donne :

  

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

« alt » et « link »

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

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 (aucune bulle d’aide n’apparaît au survol de l’image)
• [[Fichier:Exemple.jpg|truc bidule|16px]] donne (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

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 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, 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

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

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.