Les bonnes pratiques pour gérer les images de votre site web

Des images bien choisies et bien préparées rendent votre site plus attrayant, plus rapide et mieux référencé. Cet article regroupe les bonnes pratiques à appliquer avant d'ajouter une image à votre site.

Dans cet article

Trouver des images gratuites
Choisir le bon format
Optimiser vos images
Adapter l'image à son emplacement
Dimensions recommandées

Trouver des images gratuites

Plusieurs banques d'images proposent des visuels gratuits de qualité :

Unsplash : plus d'un million de photos haute définition, proposées par des photographes du monde entier. Les recherches en anglais donnent plus de résultats. Pensez à créditer l'auteur de la photo.
Pexels : photos et vidéos gratuites issues de plusieurs banques d'images, avec recherche en français.
Flaticon : très grande bibliothèque d'icônes, en majorité gratuites, regroupées en ensembles thématiques cohérents. Le compte gratuit exige de citer l'auteur.

Choisir le bon format

JPG : format le plus répandu sur le Web, à privilégier pour les photos et les images comportant un arrière-plan et de nombreuses couleurs.
PNG : format à privilégier pour les images qui comportent une zone transparente, ainsi que pour les logos et les graphiques avec des lignes ou du texte, qu'il garde plus nets.

Optimiser vos images

Des images légères accélèrent l'affichage de votre site, surtout sur mobile où se fait la majorité des visites, et améliorent son référencement.

Redimensionnez : réduisez l'image aux dimensions dont elle a réellement besoin avant de la téléverser.
Compressez : réduisez le poids du fichier avec un outil en ligne gratuit comme TinyPNG ou Compressor.io.
Renommez : donnez à chaque fichier un nom descriptif, sans espaces ni caractères spéciaux (par exemple assemblee-generale-2026.jpg). Vous retrouvez ainsi plus facilement vos images, et les moteurs de recherche les comprennent mieux.
Décrivez : dans l'éditeur de texte, remplissez le champ Texte alternatif de chaque image. Les lecteurs d'écran le lisent aux personnes ayant une déficience visuelle, et les moteurs de recherche s'en servent aussi.

Les images téléversées avec l'éditeur de texte (Parcourir le serveur) pèsent au plus 2 Mo. Une image de plus de 1 600 px de largeur ou de 1 200 px de hauteur est automatiquement réduite au téléversement. Pour en savoir plus, consultez l'article Ajouter une image avec l'éditeur de texte.

Adapter l'image à son emplacement

Module Image : le module Image offre ses propres options de taille. Sans taille définie, l'image occupe toute la largeur de sa zone : dans une zone de 50 %, elle prend donc la moitié de la largeur de la page.
Images des articles : dans les listes d'articles (Articles multiples, Articles en vedette), des images de mêmes dimensions donnent un affichage uniforme. Le recadrage proposé au téléversement de l'image d'un article (16:9, 4:3 ou 1:1) facilite cette constance.
Bannière : la bannière compte souvent parmi les plus grandes images du site. La résolution d'écran d'ordinateur la plus répandue étant de 1 920 × 1 080 px, prévoyez une largeur d'au moins 1 920 px.
Favicon : l'icône affichée dans l'onglet du navigateur n'a pas besoin de dépasser 16 × 16 px.

Dimensions recommandées

Le tableau suivant résume les dimensions à prévoir pour chaque emplacement du site. Les images téléversées dans l'éditeur de texte pèsent au plus 2 Mo, et une image de plus de 1600 px de largeur ou de 1200 px de hauteur est automatiquement réduite.

Emplacement	Dimensions	À savoir
Bannière (module Bannière)	1920 × 530 px	Avec l'apparence par défaut, la bannière a une hauteur fixe d'environ 530 px sur ordinateur et 340 px sur tablette et mobile. L'image est agrandie pour remplir ce cadre, puis centrée. Sur mobile, seule une bande centrale d'environ 600 px de large reste visible : placez-y les textes et les logos.
Carrousel pleine largeur	1920 × 700 px	Zone sécuritaire centrale d'environ 1000 × 520 px, poids idéalement sous 500 Ko. En mode Image avec texte à gauche, préférez une image proche du carré. Voir l'article Carrousel.
Image d'un article	Format 16:9, 4:3 ou 1:1	Le recadrage proposé au téléversement aide à garder le même format pour tous les articles d'une liste (Articles multiples, Articles en vedette, Carrousel).
Module Image	1200 px de large pour une zone de 100 %, 600 px pour une zone de 50 %	Sur ordinateur, le contenu des pages fait environ 1150 px de large. L'image occupe la largeur de sa zone, sauf si vous définissez une largeur.
Image d'un événement	Format carré, de 400 × 400 à 600 × 600 px	Le module adapte l'image à son emplacement : aucune dimension n'est imposée. Gardez le même format pour tous vos événements.
Photo de membre	Format carré, par exemple 500 × 500 px	Utilisez le même format pour toutes les photos, pour un annuaire et des membres en vedette uniformes.
Image partagée sur les réseaux sociaux	1200 × 630 px	JPG ou PNG, idéalement sous 300 Ko.
Favicon	16 × 16 px	Image carrée, au format PNG.

Ces dimensions valent pour l'apparence par défaut du site. Si votre site a une personnalisation avancée (CSS), elles peuvent varier : faites un essai avec une image avant de préparer tous vos visuels.