Gérer les images d'un site web : quel format pour quel visuel, comment dimensionner et compresser, quelles règles de nommage et quel texte alternatif écrire.
Gérer les images d’un site web tient en quatre gestes : choisir un format adapté à la nature du visuel, redimensionner avant de compresser, nommer les fichiers de façon lisible et décrire ce qu’ils apportent. Les médias constituent le premier poste de poids d’une page, loin devant le code et les polices.
Pourquoi les images pèsent plus que tout le reste
Les mesures annuelles du Web Almanac publiées par HTTP Archive placent les images en tête des octets transférés par une page médiane, devant les scripts et les feuilles de style. Ce classement du poids des images se répète d’une édition à l’autre depuis le lancement du rapport en 2019.
La raison tient à la nature du fichier. Une feuille de style de mille lignes pèse quelques dizaines de kilo-octets. Une seule photographie exportée telle quelle depuis un appareil récent en pèse plusieurs milliers. Un article illustré de six visuels non traités transfère davantage de données que l’intégralité du code du site.
Le coût ne s’arrête pas à la bande passante. Chaque image doit être décodée par le navigateur, opération qui mobilise le processeur de l’appareil et vide la batterie d’un téléphone. C’est un des leviers les plus rentables d’une démarche d’écoconception d’un site web, parce qu’il ne retire aucune fonctionnalité au visiteur.
Choisir un format selon la nature de l’image
Un format n’est ni bon ni mauvais dans l’absolu. Un format d’image est adapté, ou non, au type de visuel qu’il encode.
Les photographies
Le JPEG, normalisé sous la référence ISO/CEI 10918 en 1992 par le Joint Photographic Experts Group, reste le socle universel de la photographie en ligne. Sa compression avec perte supprime des informations que l’œil détecte mal, ce qui convient aux dégradés et aux textures naturelles.
Deux formats plus récents font mieux à qualité perçue équivalente. Le WebP, publié par Google en 2010, gère à la fois la compression avec et sans perte, la transparence et l’animation. L’AVIF, dérivé du codec vidéo AV1 par l’Alliance for Open Media à partir de 2019, descend encore plus bas en poids sur les images complexes, au prix d’un encodage plus lent.
Les aplats, la transparence et les captures
Le PNG, recommandation du W3C dès 1996 puis norme ISO/CEI 15948, compresse sans aucune perte. Il excelle sur les zones de couleur unie, les captures d’interface et tout visuel comportant du texte fin, là où le JPEG produit des franges disgracieuses autour des contours nets.
Son défaut apparaît sur les photographies : un PNG de paysage pèse souvent plusieurs fois le poids du JPEG équivalent, sans gain visible. La règle pratique tient en une phrase : photographie en JPEG ou WebP, aplats et transparence en PNG ou WebP.
Les dessins vectoriels
Un logo, un pictogramme ou un graphique construit en formes géométriques n’a rien à faire dans un format matriciel. Le SVG, recommandation du W3C depuis 2001, décrit des tracés plutôt que des pixels. Le fichier pèse quelques kilo-octets, reste parfaitement net à toutes les tailles d’affichage et se colore par la feuille de style du site.
Redimensionner avant de compresser
L’ordre des opérations compte. Réduire les dimensions d’une image agit sur le nombre de pixels à encoder, donc sur le poids, bien plus fortement que le réglage de compression.
Commencez par identifier la largeur d’affichage réelle du visuel sur le gabarit concerné. Une vignette de liste, une illustration d’article et un visuel de bandeau n’ont pas la même largeur maximale. Multipliez cette valeur par deux pour couvrir les écrans à forte densité de pixels, courants sur mobile depuis le début des années 2010, et vous obtenez la largeur d’export.
Les gabarits modernes déclarent plusieurs versions d’une même image et laissent le navigateur choisir celle qui correspond à la place disponible. Trois à quatre largeurs suffisent dans la plupart des cas :
- une version mobile, la plus petite et la plus souvent servie ;
- une version tablette, qui couvre aussi les fenêtres réduites sur ordinateur ;
- une ou deux versions grand écran, dont une pour les affichages à forte densité.
Produire dix variantes complique la chaîne de publication sans bénéfice mesurable.
Compresser sans dégrader visiblement
La compression avec perte se règle sur une échelle de qualité. En dessous d’un certain seuil, les artefacts deviennent perceptibles : blocs carrés dans les ciels, halos autour des contours, aplatissement des dégradés.
Le bon réglage se trouve par comparaison visuelle, pas par un chiffre appliqué à l’aveugle. Exportez la même image à trois niveaux de qualité, affichez les trois à la taille réelle du site, gardez la plus légère dont vous ne voyez pas le défaut. Un visuel de fond très flou supporte une compression agressive, un gros plan de matière beaucoup moins.
Pensez aussi aux métadonnées. Un fichier sorti d’un appareil photo transporte des données EXIF : modèle du boîtier, réglages, parfois coordonnées GPS du lieu de prise de vue. Ces informations gonflent le fichier et peuvent divulguer une adresse. La plupart des outils d’export proposent de les supprimer, à l’exception du profil colorimétrique, qu’il vaut mieux conserver pour éviter les dérives de teinte.
Nommer les fichiers pour les retrouver dans cinq ans
Une bibliothèque médias devient ingérable par accumulation de fichiers dont personne ne sait ce qu’ils contiennent ni où ils servent.
Une convention de nommage tenable
Un nom de fichier utile décrit le sujet, en minuscules, sans accent, avec des tirets comme séparateurs. atelier-menuiserie-etabli.webp se comprend d’un coup d’œil dans une liste de trois cents entrées. IMG_4471.jpg ne dit rien à personne, pas même à celui qui l’a téléversé la semaine précédente.
Les espaces, les accents et les majuscules posent des problèmes concrets : encodage des adresses, différences de sensibilité à la casse entre systèmes de fichiers, ruptures lors d’une migration d’hébergement. Un nom en caractères simples traverse ces frontières sans incident.
Ajoutez une règle pour les variantes. Un suffixe de largeur ou de rôle, appliqué de la même façon partout, évite les fichiers photo-finale-2-vraie-derniere.jpg qui s’accumulent au fil des allers-retours de validation.
Un rangement qui suit la structure du site
Le dossier des médias gagne à refléter l’arborescence du site plutôt qu’un classement par date de téléversement. Retrouver les visuels d’une rubrique devient immédiat, et la suppression d’une section fait apparaître d’un seul coup les fichiers devenus orphelins.
Un point de vigilance : une image déplacée ou renommée après publication casse toutes les adresses qui la référencent. Le navigateur affiche alors un cadre vide, et le serveur enregistre une erreur de plus. Ce cas rejoint la mécanique des liens morts et des erreurs 404 : la redirection, ou la conservation du nom d’origine, coûte moins cher que la réparation ultérieure.
Le texte alternatif décrit, il ne référence pas
Le texte alternatif existe pour restituer l’information portée par une image à qui ne la voit pas. Le critère 1.1.1 des règles pour l’accessibilité des contenus web, publiées par le W3C, impose une alternative textuelle à tout contenu non textuel véhiculant de l’information. Le référentiel général d’amélioration de l’accessibilité, maintenu par la direction interministérielle du numérique, consacre sa première thématique à ce seul sujet.
Écrire un bon alt demande de répondre à une question simple : qu’est-ce que cette image apprend au lecteur ? Une photographie d’illustration se décrit en une phrase courte. Un graphique se résume par son enseignement, pas par la liste de ses points. Un bouton en image se décrit par son action.
Trois erreurs reviennent constamment :
- répéter la légende déjà présente sous l’image, ce qui fait entendre deux fois la même chose ;
- empiler des mots-clés dans l’espoir d’un gain de référencement, pratique que les moteurs identifient sans difficulté ;
- décrire une image purement décorative, alors qu’un alt vide la fait ignorer proprement par les lecteurs d’écran.
Réserver la place et différer le chargement
Deux attributs changent l’expérience perçue sans toucher aux fichiers eux-mêmes.
Déclarer les dimensions d’une image dans le code permet au navigateur de réserver l’espace correspondant avant même de l’avoir téléchargée. Sans cette réservation, le texte se décale au moment où le visuel arrive, phénomène que Google mesure sous le nom de décalage cumulé de mise en page dans ses signaux web essentiels.
Le chargement différé, standardisé dans la spécification HTML du WHATWG, retarde le téléchargement des images situées hors de l’écran jusqu’à ce que le visiteur s’en approche. L’exception à connaître : le visuel principal visible dès l’ouverture ne doit jamais être différé, sous peine de retarder l’affichage du plus gros élément de la page. Testez ce comportement sur un environnement de préproduction avant de généraliser le réglage.
Savoir d’où vient chaque fichier
Une image publiée engage la responsabilité de l’éditeur du site. Le Code de la propriété intellectuelle protège toute œuvre de l’esprit dès sa création, sans formalité de dépôt, au titre de son article L111-1. Une photographie trouvée par recherche visuelle n’est pas libre d’usage parce qu’elle est accessible.
Le sujet représenté compte autant que l’auteur. L’article 9 du Code civil fonde le droit de chacun au respect de sa vie privée, dont découle le droit à l’image : la publication d’une personne reconnaissable suppose son accord. La règle vaut aussi pour les locaux d’un client ou les produits d’un tiers.
La parade est documentaire. Tenez un registre associant chaque fichier à son origine, à la licence qui l’accompagne et à la date d’acquisition. Un tableau de trois colonnes suffit. Il devient précieux le jour où une demande de retrait arrive, ou lorsqu’un prestataire quitte le projet en emportant sa mémoire.
Entretenir la bibliothèque dans la durée
Une bibliothèque médias vit : elle grossit à chaque publication et ne maigrit jamais spontanément. Deux gestes réguliers suffisent à la garder saine.
Le premier consiste à lister les fichiers qu’aucune page ne référence. Ces orphelins s’accumulent après les refontes et les suppressions d’articles, occupent de l’espace et allongent les sauvegardes. Le second consiste à vérifier que les visuels des pages les plus visitées respectent toujours les règles de format et de dimension, car les gabarits évoluent et une image adaptée en 2024 peut se retrouver affichée deux fois plus large après une refonte.
Ces fichiers font partie du site au même titre que la base de données, et méritent la même place dans la procédure de sauvegarde. Une restauration qui rétablit les contenus sans les médias laisse un site troué.
Prochaine étape : relevez les dix pages les plus consultées, mesurez le poids réel des images qu’elles chargent et retraitez celles qui dépassent la largeur d’affichage. Le gain se constate dès la publication suivante.
