Servir des images responsive sans multiplier les fichiers inutiles

La technique consistant à proposer plusieurs tailles d'une même image, en laissant le navigateur choisir celle qui convient, est devenue la norme et elle fonctionne bien. Son effet secondaire est moins commenté : sur un site de contenu, chaque image téléversée engendre huit, dix ou quinze fichiers dérivés, dont la moitié ne sera jamais demandée par personne. Sur un catalogue de cinq mille visuels, cela représente des dizaines de milliers de fichiers, plusieurs gigaoctets de stockage, des sauvegardes interminables et des migrations pénibles. Nous montrons ici comment déterminer le jeu de tailles réellement utile à partir des données du site, comment le mettre en place et comment nettoyer l'existant sans casser les pages publiées.

Comment le navigateur choisit une taille

Comprendre le mécanisme de sélection est le préalable à tout calibrage, car l'intuition se trompe régulièrement sur ce point.

Les deux informations fournies

Le site déclare la liste des fichiers disponibles avec leur largeur réelle en pixels, puis une seconde information indiquant la place que l'image occupera dans la mise en page selon la largeur de l'écran. Cette seconde information est indispensable : sans elle, le navigateur suppose que l'image occupera toute la largeur de la fenêtre et télécharge systématiquement un fichier trop grand. C'est l'erreur la plus fréquente et la plus coûteuse, car elle annule tout le bénéfice du dispositif. Une image affichée dans une colonne de quatre cents pixels recevra alors un fichier de mille six cents. Vérifier la présence et l'exactitude de cette déclaration constitue le premier contrôle à mener. Elle se lit directement dans le code source de la page.

La densité de l'écran

Un téléphone dont l'écran affiche trois pixels physiques pour un pixel de mise en page demandera un fichier trois fois plus large que la place occupée. Une image affichée sur trois cent cinquante pixels de large sur un tel appareil réclame donc un fichier de mille cinquante pixels. Ce multiplicateur explique pourquoi les grandes tailles restent nécessaires malgré la prédominance du trafic mobile. Il explique aussi pourquoi les tailles très petites ne servent presque jamais : aucun appareil actuel n'a une densité de un. Cette observation permet d'éliminer immédiatement plusieurs tailles du jeu généré. C'est le gain le plus simple à obtenir.

La marge de choix du navigateur

Le navigateur n'est pas obligé de prendre le fichier correspondant exactement au besoin calculé : il peut choisir plus grand s'il l'a déjà en cache, ou plus petit si la connexion est mauvaise. Ce comportement varie selon les moteurs et il évolue avec les versions. Il rend inutile la recherche d'une granularité très fine dans le jeu de tailles. Des écarts de deux cents à trois cents pixels entre deux tailles voisines suffisent largement. Proposer quinze tailles espacées de cent pixels ne produit aucun gain mesurable. Cette souplesse est une bonne nouvelle pour qui veut réduire le nombre de fichiers.

Le rôle du format

Le choix de la taille se combine avec celui du format, les navigateurs récents acceptant des formats nettement plus efficaces que les anciens. Un même visuel en format moderne pèse souvent la moitié de sa version historique à qualité comparable, comme le détaille notre article sur la compression des images en WebP et AVIF. Multiplier les formats multiplie aussi les fichiers, ce qui aggrave le problème traité ici. La bonne approche consiste à réduire le nombre de tailles avant d'ajouter des formats. Deux formats et quatre tailles produisent huit fichiers, ce qui reste raisonnable. Deux formats et douze tailles en produisent vingt-quatre par image.

Ce que la mise en page impose réellement

La largeur maximale d'un conteneur de contenu dépasse rarement huit cents pixels sur un site d'articles, et mille deux cents sur une page large. Au delà, l'image est simplement affichée plus petite que sa taille naturelle, ce qui ne sert à rien. Générer des versions de deux mille pixels pour un gabarit dont le conteneur en fait sept cent vingt constitue un gaspillage pur. Relever ces largeurs dans la feuille de style, gabarit par gabarit, donne immédiatement la borne supérieure utile. Ce relevé prend une demi heure et il oriente tout le reste. Il révèle souvent des écarts considérables avec les tailles générées par défaut.

Le cas des images pleine largeur

Une image de bandeau occupant toute la largeur de l'écran doit couvrir les écrans les plus larges, ce qui impose une taille maximale élevée. Ces images sont peu nombreuses et elles justifient un traitement séparé, avec leur propre jeu de tailles. Les traiter comme les images d'article conduit soit à un bandeau flou sur grand écran, soit à des fichiers surdimensionnés pour tout le reste. Séparer les deux familles constitue le principal levier d'optimisation sur un site de contenu. Cette séparation se déclare dans la configuration des tailles. Elle demande une réflexion de dix minutes et elle règle beaucoup de choses.

Déterminer le jeu de tailles utile

La méthode consiste à partir des données réelles plutôt que d'appliquer une configuration par défaut conçue pour tous les cas.

Relever la distribution des largeurs d'écran

L'outil de mesure d'audience fournit la répartition des visiteurs par largeur de fenêtre, information généralement ignorée. Sur un site francophone grand public, trois groupes se détachent nettement : les téléphones autour de trois cent quatre-vingt-dix points, les tablettes et petits portables autour de huit cents, les écrans de bureau au delà de mille deux cents. Cette distribution, croisée avec la densité des appareils, donne directement les largeurs de fichier nécessaires. Elle diffère sensiblement d'un site professionnel à un site grand public. Relever ces chiffres prend quelques minutes et remplace avantageusement toute recommandation générale. Ils doivent être revus une fois par an.

Calculer les largeurs nécessaires

Pour chaque gabarit, la largeur de fichier utile s'obtient en multipliant la largeur d'affichage par la densité des appareils concernés. Une image d'article affichée sur trois cent cinquante points sur téléphone, avec des densités allant de deux à trois, réclame des fichiers de sept cents et mille cinquante pixels. La même image affichée sur sept cent vingt points sur ordinateur, avec des densités de un à deux, réclame sept cent vingt et mille quatre cent quarante. Le regroupement de ces valeurs proches donne un jeu de quatre tailles couvrant tous les cas. Ce calcul, mené une fois par famille d'images, remplace les configurations par défaut. Il aboutit typiquement à quatre ou cinq tailles au lieu de dix.

Vérifier avec les journaux du serveur

Les journaux d'accès indiquent précisément quels fichiers ont été demandés et combien de fois. Une analyse sur un mois révèle les tailles jamais servies, qui peuvent alors être supprimées sans risque. Cette vérification transforme une estimation en certitude. Elle demande une commande de comptage et une lecture de quelques minutes. Elle réserve souvent des surprises, certaines tailles supposées essentielles n'ayant jamais été demandées. C'est la méthode la plus fiable et elle suppose de disposer des journaux.

Tenir compte des usages secondaires

Certaines tailles servent ailleurs que dans les pages : vignette d'aperçu dans l'administration, image de partage sur les réseaux, illustration dans un flux de syndication. Ces usages imposent des dimensions précises qu'il ne faut pas supprimer même si elles n'apparaissent pas dans les journaux des pages publiques. La production de l'image de partage peut d'ailleurs être automatisée côté serveur, ce qui supprime purement et simplement la taille correspondante du jeu généré. Recenser ces usages avant de supprimer évite les régressions désagréables. Un tableau listant chaque taille et son usage clarifie la situation. Il sert ensuite de référence pour toute évolution.

Décider des points de rupture

Les tailles retenues doivent être suffisamment espacées pour que chacune apporte un gain réel. Un écart minimal de trente pour cent entre deux tailles voisines constitue une règle pratique éprouvée. En dessous, le gain de poids ne justifie pas le fichier supplémentaire. Cette règle conduit naturellement à des séries de type quatre cents, six cents, neuf cents, mille trois cents. Elle produit un jeu compact qui couvre tous les besoins. Elle simplifie également la maintenance et la compréhension par les équipes.

Documenter la décision

Le jeu de tailles retenu, avec la justification de chaque valeur, doit être consigné quelque part. Sans cette trace, la première personne qui interviendra rétablira les tailles par défaut en pensant bien faire. Ce document tient en dix lignes et il protège durablement le travail effectué. Il permet aussi de réviser la configuration lorsque la mise en page évolue. Le placer avec la documentation technique du site plutôt que dans un échange de messages garantit sa survie. Cette précaution vaut pour toute optimisation de ce type.

Mettre en place la configuration

La réduction du jeu de tailles se paramètre différemment selon la plateforme, et quelques précautions évitent les mauvaises surprises.

Désactiver les tailles inutiles

Les plateformes de gestion de contenu génèrent par défaut plusieurs tailles, auxquelles s'ajoutent celles déclarées par le thème et par chaque extension. La liste complète se consulte dans les réglages ou par une fonction dédiée. Retirer les tailles inutilisées se fait par une déclaration dans le thème enfant, sans modifier le cœur du système. Il faut procéder taille par taille et vérifier l'affichage après chaque retrait. Un retrait trop hâtif casse un gabarit sans que personne ne s'en aperçoive immédiatement. La prudence coûte peu et évite des retours en arrière.

Déclarer ses propres tailles

Une fois les tailles par défaut réduites, les tailles calculées pour le site sont déclarées explicitement. Chacune porte un nom explicite, ce qui facilite le repérage dans les gabarits. Le recadrage doit être choisi avec soin : une taille recadrée produit un rapport fixe, une taille redimensionnée conserve les proportions. Mélanger les deux comportements dans un même jeu produit des mises en page irrégulières. Cette décision se prend selon le gabarit et non selon la taille. Elle mérite d'être testée sur des images de proportions variées.

Vérifier la déclaration des tailles d'affichage

La seconde information transmise au navigateur, celle qui décrit la place occupée, est générée automatiquement par la plateforme et elle est souvent fausse. La valeur par défaut suppose une image pleine largeur, ce qui conduit au téléchargement de fichiers trop grands. La corriger par gabarit demande quelques lignes et produit un gain immédiat et important. C'est probablement l'optimisation d'image la plus rentable et la moins pratiquée. Le contrôle se fait en observant la taille du fichier réellement téléchargé dans l'onglet réseau. Un écart flagrant avec la taille d'affichage signale le problème.

Traiter le chargement différé

Les images situées hors de la zone visible ne doivent être chargées qu'à l'approche du visiteur, ce que les navigateurs gèrent nativement. L'image principale de la page, en revanche, ne doit jamais être différée, sous peine de retarder l'affichage du contenu principal. Cette distinction est expliquée dans notre article sur le lazy loading et ses effets sur le SEO. Une extension qui applique le chargement différé à toutes les images sans exception dégrade les mesures de performance. Vérifier le comportement sur l'image de couverture constitue un contrôle simple. Il révèle fréquemment une configuration inadaptée.

Éviter la régénération inutile

Modifier le jeu de tailles n'affecte que les images téléversées ensuite, les anciennes conservant leurs dérivés. Une régénération complète est possible et elle prend plusieurs heures sur un catalogue important. Elle n'est pas toujours nécessaire : les tailles existantes continuent de fonctionner et les nouvelles s'appliquent au fur et à mesure des publications. Sur un site où la performance des anciennes pages compte, la régénération se justifie. Elle doit alors être lancée en dehors des heures d'affluence et surveillée. Prévoir une sauvegarde avant reste indispensable.

Contrôler après chaque mise à jour

Une mise à jour de thème ou l'ajout d'une extension peut réintroduire des tailles supplémentaires sans avertissement. Un contrôle périodique du nombre de fichiers générés par image détecte cette dérive. Une commande comptant les fichiers du dossier de médias, comparée au nombre d'images téléversées, donne le rapport moyen. Une augmentation de ce rapport signale une nouvelle taille déclarée quelque part. Ce contrôle prend quelques secondes et il peut être automatisé. Il évite de refaire tout le travail dans deux ans.

Nettoyer un site déjà encombré

Sur un site existant, la question du nettoyage se pose et elle demande des précautions particulières.

Mesurer l'ampleur

Un décompte des fichiers du dossier de médias, rapporté au nombre d'images réellement téléversées, donne immédiatement l'ordre de grandeur. Un rapport supérieur à huit signale une configuration à revoir. Le volume total occupé complète le tableau et permet d'estimer le gain attendu. Ces deux chiffres suffisent à justifier l'intervention auprès d'un décideur. Ils se relèvent en une commande. Les répéter après nettoyage démontre le résultat obtenu.

Identifier les fichiers orphelins

Les dérivés de tailles supprimées de la configuration restent sur le disque sans que rien ne les référence. Ils se repèrent en comparant les suffixes de dimension présents dans les noms de fichiers avec les tailles actuellement déclarées. Un script de listage, sans suppression, produit l'inventaire à examiner. Cette liste doit être vérifiée avant toute action, certains fichiers pouvant être référencés en dur dans un contenu ancien. La prudence impose de conserver une sauvegarde complète du dossier avant suppression. Cette sauvegarde peut être archivée hors ligne une fois le nettoyage validé.

Vérifier les références dans les contenus

Un article ancien peut contenir une adresse d'image pointant directement vers un dérivé, sans passer par le mécanisme de sélection. Supprimer ce fichier casserait l'image dans cet article. Une recherche des suffixes de dimension dans la table des contenus révèle ces cas. Leur nombre est généralement faible et ils se corrigent en remplaçant l'adresse par celle du fichier d'origine. Ce contrôle doit précéder toute suppression massive. Il prend quelques minutes et il évite des dégâts durables.

Procéder par lots

Supprimer trente mille fichiers en une opération présente un risque et rend le retour en arrière difficile. Traiter par lots, en commençant par une taille clairement inutilisée, permet de vérifier l'absence d'effet de bord à chaque étape. Un délai de quelques jours entre les lots laisse le temps de détecter un problème. Cette progressivité allonge l'opération et elle la sécurise considérablement. Sur un site à fort trafic, elle est indispensable. Sur un site modeste, elle reste une bonne pratique.

Surveiller les erreurs après nettoyage

Les journaux d'erreur du serveur signalent les fichiers demandés et introuvables, ce qui révèle immédiatement une suppression malheureuse. Une surveillance de quelques jours après chaque lot suffit à détecter les problèmes. Le nombre d'erreurs de ce type doit rester nul ou négligeable. Une augmentation signale une référence non détectée lors de la préparation. La correction consiste alors à restaurer le fichier concerné depuis la sauvegarde. Cette boucle de contrôle rend l'opération sûre.

Adopter une politique durable

Le nettoyage ne vaut que s'il s'accompagne d'une configuration qui empêche la reconstitution du problème. Documenter le jeu de tailles, contrôler périodiquement le rapport de fichiers et vérifier après chaque mise à jour constituent cette politique. Y ajouter une règle sur les dimensions maximales acceptées au téléversement évite les fichiers de dix mégaoctets déposés par un contributeur. Les techniques générales d'optimisation restent par ailleurs valables et elles sont détaillées dans notre article sur l'optimisation des images pour Google. L'ensemble tient en une page de consignes. Il évite de refaire ce travail tous les trois ans.