Unité Web et multimédia
Bureau de la communication
Gestion des images
Créer, insérer et modifier une image
⬅ Retour aux tutoriels
«Une image vaut mieux que mille mots» disait Confucius. De ce fait, la photographie doit être considérée comme une information à part entière et non comme un simple agrément visuel.
Le site lausanne.ch utilise et décline ce média de plusieurs manières et dans différents contextes. Accroche, bandeau, contenu, diaporama, etc., les formes et les formats sont multiples. Mais avant de songer à toute publication, assurez-vous que vous disposez des droits nécessaires. C’est d’autant plus important lorsqu’il s’agit de personnes, en particulier d’enfants.
- On appelle DÉFINITION le nombre de pixels (de points) constituant l’image, c'est-à-dire le nombre de colonnes de l’image que multiplie son nombre de lignes. La RÉSOLUTION, exprimée en DPI (dot per inch – pixels par pouce) détermine le nombre de pixels affichés par unité de mesure.
Les deux illustrations ci-dessous font la même taille (1 pouce = 2.54 cm), seule la résolution change.
Les formats d’images acceptés par Magnolia sont les suivants:
- Webp: nouveau format qui permet aux sites web d'afficher des images de qualité avec des tailles de fichiers inférieures aux formats traditionnels comme PNG et JPEG
- JPG (JPEG): format le plus courant sans transparence possible, 16 millions de couleurs, compression variable.
- PNG: format courant avec transparence possible, généralement utilisé pour les logos.
- GIF: format d’image compressé, 256 couleurs, souvent de petite taille, principalement utilisé pour les logos et les animations de petite taille car il permet aussi la transparence.
Différentes dimensions d'images (en px) sont nécessaires selon les composants utilisés sur une page du site. Vous trouverez ci-dessous les principales tailles nécessaires:
© Ville de Lausanne
- Carrousel panoramique: 1940x746px
© Ville de Lausanne
- Carrousel d'accroches FOCUS (comme par ex. la page accueil Lausanne.ch): 1000x746px
- Accordéon d'accroches, format carré (utlilsé sur les pages Accueil de section): 640x640px
- Accordéon d'accroches: format portrait: 1940x1000px
- Textes et images: max: 1200x900px (recommandé 960x720)
- Vignette de Sommaire de rubrique: 640x480px
Les images peuvent être insérées dans différents composants Magnolia. Vous trouverez ci-dessous une marche à suivre pour les plus communs. Il est important de renseigner les copyrights de l'image.
- Texte et image:
Le téléchargement d'images se fait dans l'onglet Image (accessible en cliquan sur le crayon du composant Texte et image) > Uploader normal > Uploader.
- CARROUSEL D'IMAGES ZOOMABLES
Ce composant offre la possibilité d'ajouter plusieurs images zoomables qui défilent.
Pour ajouter des images il faut cliquer sur le + dans Nouveau composant Carrousel d'images
- Carrousel d'accroches
Ce composant permet d'affficher plusieurs images qui défilent côte à côte ou sous forme de colonne de 1 à 3 images.
Pour ajouter des images il faut cliquer sur le + dans Nouveau composant Carrousel
- CARROUSEL PANORAMIQUE
Ce composant permet d'affficher plusieurs images (max. 8) sur une page d'acceuil de section. Pour ajouter une image il faut cliquer dessus pour que les éléments du carrousel s'affiche en dessous et ensuite cliquer sur le petit +en bas à droite.
- Sommaire de rubrique
Le Template Sommaire de rubrique est composé de menus liants les sous-pages avec des images/vignettes. Suivez ce tutoriel pour les modifier.
- Image dans un paragraphe ou un tableau
Pour insérer une image dans un paragraphe ou un tableau il faut au préalable l'ajouter à la médiathèque.
Dans le composant Texte et Image il faut ensuite cliquer sur l'icône image.
Pour les images provenant de la médiathèque officielle:
- ©Auteur de l'image – Ville de Lausanne
- ©Ville de Lausanne (lorsque le/la photographe n'est pas connu·e)
Pour les images provenant de site externe, il est impératif de se renseigné sur le copyright à insérer.
- ©Auteur de l'image – Unsplash (par exemple)
Avant toute chose, assurez-vous que vous disposez des droits de publication et de diffusion nécessaires.
Pour les diaporamas externes (exemple) un logiciel nommé Jalbum est nécessaire, il faut donc passer par l'équipe web.
Toutefois, il vous incombe de faire un tri strict et sélectif des photos à publier, de les renommer (voir ci-après) puis de traiter celles-ci avant de les transmettre à Info web.
- Sélectionner les images:
- 12 images max pour les petits diaporamas (Magnolia).
- 36 images max pour les grands diaporamas (jAlbum).
- S’assurer que les fichiers n’excèdent pas 3 Mo par fichier.
- S’assurer que le format est du JPG.
- Respecter une nomenclature de type informatique (pas d‘espaces, pas de caractères spéciaux, pas d’accents) et numéroter les fichiers dans l’ordre d’apparition souhaité. Exemple: fete-du-bois-2013_001.jpg
- Rédiger une note (Word) qui:
- indique le lieu et la date des prises de vue;
- décrit brièvement le sujet du reportage;
- mentionne l’auteur des images;
- explicite les conditions d’utilisation.
- Transmettre les fichiers à l'équipe web
- soit par courrier sur support cd-rom à l’adresse inscrite en marge;
- soit via un service d’hébergement genre Dropbox (http://www.dropbox.com), WeTansfer (http://www.wetransfer.com), etc.