Mercredi 4 janvier 2006 — Dernier ajout mercredi 19 juillet 2006

Les images dans SPIP

SPIP permet non seulement de mettre en forme du texte (ou plutôt, de le mettre en « sens »), mais il permet aussi de l’agrémenter d’illustrations.

Retour Sommaire

Travail préparatoire

Retour Sommaire

Normes pour les images sur le Web

Une image destinée à l’affichage sur un site web est différente d’une image destinée à l’impression.

D’une part, son format doit être :

  • .gif si l’image comprend peu de couleurs et des détails qui ne doivent pas être dégradés (par exemple, un schéma)
  • .jpeg si l’image est une photographie
  • .png si l’image comprend beaucoup de couleurs et des détails qui ne doivent pas être dégradés

Les .bmp et autres formats de Microsoft sont à proscrire !

D’autre part, sa taille doit être adaptée au web :

  • résolution 72dpi
  • largeur « raisonnable » (généralement entre 300 et 600 pixels de large)
  • poids respectueux des internautes : il faut éviter qu’une page web « pèse » plus de 50ko, images comprises

→ Une image affichée dans un site SPIP doit être préparée avant de la placer dans le site.

Retour Sommaire

Outils de traitement d’images

Pour convertir vos images, les retailler, les redimensionner, les optimiser, vous aurez besoin d’un logiciel de retouche d’image :

  • IrfanView permet de faire l’essentiel de ce travail
  • Pour ceux qui veulent aller plus loin, The Gimp est un équivalent libre d’Adobe PhotoShop.
Retour Sommaire

Insertion d’images dans SPIP

Retour Sommaire

En passant par « AJOUTER UNE IMAGE »

Dans les exemples qui vont suivre, on va supposer que 190 est le numéro de l’image que l’on souhaite afficher dans l’article.

Palette de peinture a pour titre : « Palette de peinture » et pour descriptif : « Une image représentant une palette de peinture. ».

Retour Sommaire

Images en tant que document

Palette de peinture"
Palette de peinture
Une image représentant une palette de peinture.

<doc190|left> va permettre de placer une image avec le titre et le descriptif affichés en dessous de celle-ci. L’image sera placée sur la gauche et habillée par le texte.


Palette de peinture"
Palette de peinture
Une image représentant une palette de peinture.

<doc190|center> L’image sera centrée toute seule. Il vaut mieux placer l’image toute seule avec un saut de ligne avant et un saut de ligne après.


Palette de peinture"
Palette de peinture
Une image représentant une palette de peinture.

<doc190|right> L’image sera placée sur la droite et habillée par le texte. Attention : il faut placer l’appel de l’image avant le texte (comme si c’était le premier caractère du paragraphe) !


Il est aussi possible de placer l’image

Palette de peinture"
Palette de peinture
Une image représentant une palette de peinture.

<doc190> au milieu du texte.

Retour Sommaire

Images en tant qu’image avec bulle d’aide

Palette de peinture <img190|left> va permettre de placer une image avec le titre affiché en bulle d’aide. L’image sera placée sur la gauche et habillée par le texte.


Palette de peinture

<img190|center> L’image sera centrée toute seule. Il vaut mieux placer l’image toute seule avec un saut de ligne avant et un saut de ligne après.


Palette de peinture <img190|right> L’image sera placée sur la droite et habillée par le texte. Attention : il faut placer l’appel de l’image avant le texte (comme si c’était le premier caractère du paragraphe) !


Il est aussi possible de placer l’image Palette de peinture <img190> au milieu du texte.

Retour Sommaire

En passant par « AJOUTER UN DOCUMENT »

Remarque : si l’image n’est pas utilisé dans l’article, elle est alors disponible dans le porto folio de l’article.

Dans les exemples qui vont suivre, on va supposer que 191 est le numéro du document image que l’on souhaite afficher dans l’article.

Tux -  voir en grand cette image a pour titre : « Tux » et pour descriptif : « La mascotte de Linux (un pingouin) ».

Les vignettes sont clicables pour visualiser l’image dans sa taille originale (toute seule, sans l’habillage du site).

Retour Sommaire

Images en tant que document

Tux -  voir en grand cette image"
Tux
La mascotte de Linux (un pingouin)

<doc191|left> va permettre de placer une vignette de l’image avec le titre et le descriptif affichés en dessous de celle-ci. L’image sera placée sur la gauche et habillée par le texte.


Tux -  voir en grand cette image"
Tux
La mascotte de Linux (un pingouin)

<doc191|center> La vignette de l’image sera centrée toute seule. Il vaut mieux placer l’image toute seule avec un saut de ligne avant et un saut de ligne après.


Tux -  voir en grand cette image"
Tux
La mascotte de Linux (un pingouin)

<doc191|right> La vignette de l’image sera placée sur la droite et habillée par le texte. Attention : il faut placer l’appel de l’image avant le texte (comme si c’était le premier caractère du paragraphe) !


Il est aussi possible de placer la vignette de l’image

Tux -  voir en grand cette image"
Tux
La mascotte de Linux (un pingouin)

<doc191> au milieu du texte.

Retour Sommaire

Images en tant qu’image avec bulle d’aide

Tux -  voir en grand cette image <img191|left> va permettre de placer une vignette de l’image avec le titre affiché en bulle d’aide. L’image sera placée sur la gauche et habillée par le texte.


Tux -  voir en grand cette image

<img191|center> La vignette de l’image sera centrée toute seule. Il vaut mieux placer l’image toute seule avec un saut de ligne avant et un saut de ligne après.


Tux -  voir en grand cette image <img191|right> La vignette de l’image sera placée sur la droite et habillée par le texte. Attention : il faut placer l’appel de l’image avant le texte (comme si c’était le premier caractère du paragraphe) !


Il est aussi possible de placer la vignette de l’image Tux -  voir en grand cette image <img191> au milieu du texte.

Retour Sommaire

Images en tant que document inclus

Tux - PNG - 6.2 ko
Tux
La mascotte de Linux (un pingouin)

<emb191|left> va permettre de placer une image avec le titre et le descriptif affichés en dessous de celle-ci. L’image sera placée sur la gauche et habillée par le texte.


Tux - PNG - 6.2 ko
Tux
La mascotte de Linux (un pingouin)

<emb191|center> L’image sera centrée toute seule. Il vaut mieux placer l’image toute seule avec un saut de ligne avant et un saut de ligne après.


Tux - PNG - 6.2 ko
Tux
La mascotte de Linux (un pingouin)

<emb191|right> L’image sera placée sur la droite et habillée par le texte. Attention : il faut placer l’appel de l’image avant le texte (comme si c’était le premier caractère du paragraphe) !


Il est aussi possible de placer l’image

Tux - PNG - 6.2 ko
Tux
La mascotte de Linux (un pingouin)

<emb191> au milieu du texte.

Retour Sommaire

Vos réactions

  • deprofundis 26 août 2011 12:14

    En fait, je ne vois pas trop la différence entre l’insertion d’image, de doc, … car l’aperçu au final est le même.

    Merci

  • bibifree 2 mai 2009 21:58

    Bonjour

    Comment faire pour afficher une image externe au site ? Comme dans Dotclear par exemple ? avec juste l’adresse de l’image qui est hébergée sur un autre site m’appartenant.

    Merci pour les explications très claires.