Loading AI tools
Niveau débutant
Cette page a pour but de donner au contributeur une aide au positionnement des images dans les articles de Wikipédia.
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 !
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 :
- aide:insérer une image (wikicode, avancé) si vous utilisez le système de wikicode (liens « modifier le code »)
- aide:insérer une image (Éditeur visuel) si vous utilisez le système de l'Éditeur visuel (liens « modifier »)
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
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.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
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.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 {{Image multiple}} et {{Images}} peuvent servir à cela. Par exemple :
Avertissement
Expulsion
Deux cartons utilisés par les arbitres de football
{{Image multiple
| 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.
Avertissement
Expulsion
Deux cartons utilisés par les arbitres de football
{{Image multiple
| 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 {{-}}
[[Fichier:Stmichel eg1.JPG|thumb||alt=Exemple d'image en largeur |St Michel 1]]
Texte de l'article
{{clr}}
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.
Parfois l'image ne se place pas à l'endroit où on le désire : elle est repoussée plus bas dans la page ou bien elle chevauche un texte encadré ou un tableau. Si elle est placée à gauche dans un article, le texte qui l'entoure peut aussi devenir inesthétique, ou un titre de section se retrouver décalé à droite de l'image (exemple).
Pour empêcher ce flottement, juste après le placement de l'image, il est possible d'ajouter :
- Pour que le texte soit repoussé sous l'image, il convient de placer le modèle {{Clr|left}} en dessous du code de l'image, si l'image est alignée à gauche de la page, ou {{Clr|right}} si l'image est alignée à droite de la page.
- De manière plus générale, en plaçant {{Clr}}, tout ce qui se trouve au-dessous (texte, modèle, etc.) ne sera pas gêné par un problème de flottement.
- Pour descendre le texte d'une distance déterminée, en pixels, il faut ajouter le modèle {{saut|...px}}
- Note : ce dernier modèle est à éviter car le nombre de pixels choisi est fixe alors que le rendu final de la page varie selon la taille de l'écran.
Avant : le titre de section et le texte sont coincés entre l'image et la fiche descriptive.
Ajout de {{Clr|left}} : le titre de section et le texte se reportent sous l'image située à gauche. Mais pas sous la fiche descriptive qui est à droite.
Ajout de {{Clr}} : le titre de section et le texte se reportent plus bas que l'image de gauche et la fiche descriptive de droite.
Ajout de {{Saut|200px}} : (à éviter) le titre de section et le texte se décalent seulement plus bas de 200 pixels (exemple), sur le côté de l'image.
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.
Wikiwand in your browser!
Seamless Wikipedia browsing. On steroids.
Every time you click a link to Wikipedia, Wiktionary or Wikiquote in your browser's search results, it will show the modern Wikiwand interface.
Wikiwand extension is a five stars, simple, with minimum permission required to keep your browsing private, safe and transparent.
