Travail préparatoire
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.
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.
Insertion d’images dans SPIP
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.
a pour titre : « Palette de peinture » et pour descriptif : « Une image représentant une palette de peinture. ».
Images en tant que document
<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.
<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.
<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
<doc190>
au milieu du texte.
Images en tant qu’image avec bulle d’aide
<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.
<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.
<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
<img190>
au milieu du texte.
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.
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).
Images en tant que document
<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.
<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.
<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
<doc191>
au milieu du texte.
Images en tant qu’image avec bulle d’aide
<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.
<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.
<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
<img191>
au milieu du texte.
Images en tant que document inclus
<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.
<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.
<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
<emb191>
au milieu du texte.