Aide:Place des images

Une page de Wikipédia, l'encyclopédie libre.
Sauter à la navigation Sauter à la recherche
Niveau débutant
Cette page a pour but de donner au contributeur une aide au positionnement des images dans les articles de Wikipédia.

Préambule

La position des images est très importante pour avoir un article avec une présentation agréable. Les images ne doivent pas gêner la lecture du texte, ne pas créer trop de saut de ligne, être espacées et ne pas trop alourdir la présentation de la page.

Le positionnement des images dépend de leur taille, mais pas seulement. Il dépend également de la présence de modèles, comme les infobox notamment ; mais surtout du plan de l'article, étant donné qu'il est fortement recommandé de faire correspondre les images aux paragraphes s'y attachant.

N'oubliez pas que la mise en page est unique pour chaque utilisateur, et dépendante de son écran et de ses préférences : ce qui est « beau » sur votre écran peut tout à fait être très mal disposé sur l'écran de votre voisin !

Options de positionnement

Il est possible de paramétrer son image en lui donnant une option de positionnement. Cette position peut permettre de pallier les difficultés de positionnement les plus courantes (deux images à suivre, images qui ne correspondent plus au paragraphe concerné, etc.). Pour en savoir plus, voir :

Exemple d'image en largeur
Mont St Michel 1

Disposition des images

Exemple d'image en hauteur
Mont St Michel 2
Maurice Kikangala

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. Ce problème touche principalement les utilisateurs d'écrans larges. Le texte prenant moins de place, les images ne sont plus alignées avec leur paragraphe.

La meilleure solution consiste à ajouter du texte comme ci dessous, mais cela n'est pas toujours possible. Les sous-sections suivantes exposeront des solutions alternatives à ce problème.

Exemple

Exemple d'image en largeur
Mont St Michel 1
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.

Ut velit mauris, egestas sed, gravida nec, ornare ut, mi. Aenean ut orci vel massa suscipit pulvinar. Nulla sollicitudin. Fusce varius, ligula non tempus aliquam, nunc turpis ullamcorper nibh, in tempus sapien eros vitae ligula. Pellentesque rhoncus nunc et augue. Integer id felis. Curabitur aliquet pellentesque diam. Integer quis metus vitae elit lobortis egestas. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi vel erat non mauris convallis vehicula. Nulla et sapien. Integer tortor tellus, aliquam faucibus, convallis id, congue eu, quam. Mauris ullamcorper felis vitae erat. Proin feugiat, augue non elementum posuere, metus purus iaculis lectus, et tristique ligula justo vitae magna.

Aliquam convallis sollicitudin purus. Praesent aliquam, enim at fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus, felis magna fermentum augue, et ultricies lacus lorem varius purus. Curabitur eu amet.
Exemple d'image en hauteur
Mont St Michel 2
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.

Ut velit mauris, egestas sed, gravida nec, ornare ut, mi. Aenean ut orci vel massa suscipit pulvinar. Nulla sollicitudin. Fusce varius, ligula non tempus aliquam, nunc turpis ullamcorper nibh, in tempus sapien eros vitae ligula. Pellentesque rhoncus nunc et augue. Integer id felis. Curabitur aliquet pellentesque diam. Integer quis metus vitae elit lobortis egestas. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi vel erat non mauris convallis vehicula. Nulla et sapien. Integer tortor tellus, aliquam faucibus, convallis id, congue eu, quam. Mauris ullamcorper felis vitae erat. Proin feugiat, augue non elementum posuere, metus purus iaculis lectus, et tristique ligula justo vitae magna.

Aliquam convallis sollicitudin purus. Praesent aliquam, enim at fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus, felis magna fermentum augue, et ultricies lacus lorem varius purus. Curabitur eu amet.


Alterner l'alignement à droite et l'alignement à gauche

La solution la plus facile à ce problème consiste à alterner l'alignement des images. De cette façon, elles n'entrent pas en contact et ne peuvent pas s'empiler de manière discordante. Cependant cela a un désavantage, les utilisateurs de smartphone, PDA ou netbook, dont certains ne disposent que d'écrans à faible résolution, pourraient trouver le résultat déplaisant.

Exemple

Exemple d'image en largeur
Mont St Michel 1
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.

Ut velit mauris, egestas sed, gravida nec, ornare ut, mi. Aenean ut orci vel massa suscipit pulvinar. Nulla sollicitudin. Fusce varius, ligula non tempus aliquam, nunc turpis ullamcorper nibh, in tempus sapien eros vitae ligula. Pellentesque rhoncus nunc et augue. Integer id felis. Curabitur aliquet pellentesque diam. Integer quis metus vitae elit lobortis egestas. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi vel erat non mauris convallis vehicula. Nulla et sapien. Integer tortor tellus, aliquam faucibus, convallis id, congue eu, quam. Mauris ullamcorper felis vitae erat. Proin feugiat, augue non elementum posuere, metus purus iaculis lectus, et tristique ligula justo vitae magna.

Aliquam convallis sollicitudin purus. Praesent aliquam, enim at fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus, felis magna fermentum augue, et ultricies lacus lorem varius purus. Curabitur eu amet.
Exemple d'image en hauteur
Mont St Michel 2
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.

Ut velit mauris, egestas sed, gravida nec, ornare ut, mi. Aenean ut orci vel massa suscipit pulvinar. Nulla sollicitudin. Fusce varius, ligula non tempus aliquam, nunc turpis ullamcorper nibh, in tempus sapien eros vitae ligula. Pellentesque rhoncus nunc et augue. Integer id felis. Curabitur aliquet pellentesque diam. Integer quis metus vitae elit lobortis egestas. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi vel erat non mauris convallis vehicula. Nulla et sapien. Integer tortor tellus, aliquam faucibus, convallis id, congue eu, quam. Mauris ullamcorper felis vitae erat. Proin feugiat, augue non elementum posuere, metus purus iaculis lectus, et tristique ligula justo vitae magna.

Aliquam convallis sollicitudin purus. Praesent aliquam, enim at fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu lectus. Fusce vulputate sem at sapien. Vivamus leo. Aliquam euismod libero eu enim. Nulla nec felis sed leo placerat imperdiet. Aenean suscipit nulla in justo. Suspendisse cursus rutrum augue. Nulla tincidunt tincidunt mi. Curabitur iaculis, lorem vel rhoncus faucibus, felis magna fermentum augue, et ultricies lacus lorem varius purus. Curabitur eu amet.

Co-alignement

Il peut arriver que deux images demandent à être regroupées logiquement. Les modèles {{multiple image}} et {{images}} peuvent servir à cela. Par exemple :

Carton jaune
Avertissement
Carton rouge
Expulsion
Deux cartons utilisés par les arbitres de football
 {{multiple image
 | width = 100
 | footer = Deux cartons utilisés par les arbitres de football
 | image1 = Yellow card.svg
 | alt1 = Carton jaune
 | caption1 = Avertissement
 | image2 = Red card.svg
 | alt2 = Carton rouge
 | caption2 = Expulsion
}}

Ce même modèle peut également servir à aligner des images verticalement.

Carton jaune
Avertissement
Carton rouge
Expulsion
Deux cartons utilisés par les arbitres de football
 {{multiple image
 | direction = vertical
 | width = 100
 | footer = Deux cartons utilisés par les arbitres de football
 | image1 = Yellow card.svg
 | alt1 = Carton jaune
 | caption1 = Avertissement
 | image2 = Red card.svg
 | alt2 = Carton rouge
 | caption2 = Expulsion
}}

Insérer un saut

En dernier recours vous pouvez forcer le navigateur à insérer un saut de paragraphe qui fera apparaître le texte en dessous de la première image. Cela peut causer l'apparition d'espaces vides très peu esthétiques. Ne forcez pas l'agencement des pages en fonction de votre écran et préférences.

Le modèle s'appelle clr.

Le code à insérer est :

{{clr}} ou {{-}}
[[Image:Stmichel eg1.JPG|thumb||alt=Exemple d'image en largeur |St Michel 1]]
Texte de l'article
{{clr}}
Exemple d'image en largeur
St Michel 1
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.



Exemple d'image en hauteur
St Michel 2
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.

Image dans une infobox

Exemple d'images dans un article de Wikipédia
L'image de droite est insérée au code d'une infobox, appelée « taxobox », gérée par le Projet:Biologie.

Les illustrations des articles sont souvent placées dans des fiches informatives, appelées « infobox » dans le langage wikipédien. Selon les modèles, le code Fichier: est parfois inutile, il suffit d'indiquer uniquement le nom de l'image. Par exemple Fichier:Pellicule.jpg. La taille n'est pas toujours paramétrable.

Image dans une galerie

Aide détaillée : Aide:Galerie.

Références