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

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.

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.