Pourquoi les images vignette, standard et zoom ?

Le back-office de votre site vous permet, quand vous ne disposez pas d’outil de traitement d’image sur votre poste de travail, de créer plusieurs formats d’une même image : une petite (vignette), une de taille moyenne (standard) et/ou une grande (zoom).

Lors de l’enregistrement d’une image dans la médiathèque, l’écran ci-dessous s’affiche, vous proposant de créer d’autres formats de votre image.

À noter !
Il faut savoir que la possibilité de créer ces formats ne vous est proposée que si l’image de départ est enregistrée comme image "originale".

Sur cet écran, vous cochez les formats dont vous avez besoin. Inutile de tout cocher, ces formats sont optionnels. De plus, il est toujours possible de revenir plus tard sur votre image pour les créer.

Le back-office vous propose des tailles par défaut. Mais celles-ci peuvent être modifiées. En ce qui concerne l’image vignette, nous vous conseillons d’indiquer une valeur plus grande (ici 130 pixels). En effet, les 50 pixels de la valeur par défaut produisent des images un peu petites.

En cas de doute sur la taille des images, vous pouvez regarder l’aperçu, ou consulter le tutoriel que nous avons consacré à la taille des images.
Quelle taille pour vos images : c’est grand comment un pixel ?

En cochant les trois formats, nous nous retrouvons donc avec quatre versions de notre image :

• L’image originale : "Fleurs",

• L’image vignette : "VFleurs",

• L’image standard : "SFleurs",

• L’image zoom : "ZFleurs".

Utiliser les différents formats d’image dans un contenu

Dans chaque contenu, le back-office de votre site vous propose d’associer une image standard, une image vignette et/ou une image zoom. Nous retrouvons alors, les formats d’image que nous venons de créer. Mais une question se pose. À quoi correspondent les images vignette, standard et zoom dans le contenu ?

Chaque format d’image correspond en réalité à une fonction d’affichage.

• L’image vignette
  Elle est visible en page de rubrique. En d’autres termes, c’est l’image qui accompagne l’accroche et le résumé, le tout étant suivi du lien "En savoir plus".

• L’image standard
  Elle s’affiche dans la page de contenu.

• L’image zoom
  Elle sert d’agrandissement de l’image vignette et de l’image standard.

Vous avez sûrement remarqué tout en haut du présent contenu une image de fleurs. Peut-être même avez-vous cliqué dessus pour l’agrandir, comme la légende vous y invitait. Voici comment nous avons procédé.

L’image sur laquelle vous avez cliqué est l’image standard. La fenêtre qui s’ouvre contient l’image zoomée. Si ce contenu figurait dans une page de rubrique, la vignette s’afficherait et serait elle aussi cliquable.

Bon à savoir : la légende...
Ici, nous avons remplacé la légende par un texte plus explicite : "Cliquez sur l’image pour l’agrandir".

Exemple pratique

Comment et dans quel contexte utiliser l’image zoom ?
Voici, sur le site de Deuil-la-Barre, un exemple d’application. Il s’agit d’un plan de ville délimitant les zones de ramassage des ordures ménagères.

Voir cet exemple sur le site de Deuil-la-Barre

À noter

Il faut distinguer format de l’image et affichage.
En effet, les appellations "vignette", "standard" et "zoom" correspondent à deux notions : d’une part la nature de l’image (le format sous lequel elle est enregistrée dans la médiathèque : originale, vignette, etc.), d’autre part l’emplacement où l’image s’affichera (contenu, page de rubrique...).

Qu’est-ce que cela implique ?
Cela signifie que l’on peut tout à fait prendre une image de format quelconque pour l'insérer à l'emplacement souhaité (standard, vignette ou zoom). En d’autres termes, rien n’oblige à insérer dans l’emplacement de l’image standard uniquement des images standard.

Par ailleurs, comme nous l’avons vu plus haut, créer plusieurs formats d’une même image n’a rien d’obligatoire. Vous pouvez en effet utiliser le même format d’image pour le placer dans l’emplacement "standard" et l’emplacement "vignette", ce qui a pour avantage d’éviter de surcharger la médiathèque avec plusieurs formats d’une même image.

Ainsi, il est tout à fait possible de prendre des libertés avec les gabarits proposés dans le back-office.