Pourquoi envoyer des images plus petites aux mobiles

Une photo qui couvre un grand écran et la même photo dans une carte sur mobile ne devraient pas être un seul et même fichier. Sinon, le téléphone télécharge des pixels qu’il n’affichera jamais, et le visiteur attend.

Le 24 septembre 2026, nous avons ajouté à la gestion des médias de CMS4 les dimensions des images et un choix de tailles pour le navigateur. Le visiteur ne le voit pas comme une nouvelle entrée de menu. Il s’en aperçoit dès que la page s’affiche sans que rien ne saute. D’autres étapes ont suivi en octobre ; nous les décrivons ci-dessous.

Trois informations sans lesquelles le navigateur devine

Le navigateur choisit lui-même le fichier adapté selon l’écran et la densité de pixels. Il lui faut pour cela :

• Un choix de tailles (srcset). À partir de la photo importée, CMS4 prépare des variantes de 160 à 3 840 pixels de large, jamais plus larges que l’original.

• La place sur la page (sizes). L’espace qu’occupe l’image pour une largeur de fenêtre donnée. Seul le composant qui affiche l’image le sait, c’est donc lui qui fournit cette information.

• Les dimensions (width et height). Elles donnent au navigateur le rapport largeur/hauteur avant l’arrivée du fichier.

Ces trois éléments ne fonctionnent qu’ensemble. Préparer plusieurs fichiers ne suffit pas si le navigateur ignore la place que l’image occupera réellement.

Une place réservée à l’avance

La largeur et la hauteur permettent au navigateur de réserver l’espace avant le chargement de l’image. Textes et boutons ne sautent donc pas à l’arrivée de la photo. Dans une galerie ou une liste de projets, la différence se sent en pleine navigation.

Sur le site P+P dans CMS4, logos et icônes ont ainsi des dimensions exactes : 302 images au total. Toutes les images des 48 pages ont donc leurs dimensions, sans aucun changement visible.

Recadrage, format et densité

Le recadrage change le calcul

Une photo en paysage placée dans une carte haute est recadrée : le navigateur a donc besoin d’un fichier plus grand que ne le laisse penser la largeur de la carte. Pour une image 3:2 dans une vignette 4:5, il faut environ 1,875 fois plus. Les composants CMS4 peuvent ainsi déduire la taille de la forme du cadre dans lequel l’image s’affiche. Le point focal n’est pas inscrit dans le fichier ; il détermine seulement la partie qui reste visible au recadrage.

Un format selon le navigateur, une densité raisonnable

Une même largeur peut arriver dans différents formats : AVIF, WebP, ou encore JPEG ou PNG pour les navigateurs qui n’acceptent pas les formats modernes. CMS4 cherche la qualité de compression de chaque image séparément selon une mesure de similarité visuelle, plutôt qu’un réglage unique pour toutes. Les variantes livrées ne contiennent par ailleurs aucune métadonnée EXIF, XMP ou ICC : les informations que l’appareil photo a inscrites dans le fichier ne voyagent pas avec elles.

Les téléphones à écran très fin téléchargeraient sinon des images prévues pour une densité de pixels triple. Cela représente environ 2,25 fois plus de pixels qu’en densité double, pour une différence invisible à l’œil. Les pages publiées plafonnent donc la densité à environ le double.

Ce qui se charge tout de suite et ce qui peut attendre

L’image principale visible à l’ouverture de la page doit arriver à temps ; une galerie bien plus bas peut attendre que le visiteur s’en approche. CMS4 distingue trois cas : l’image principale de la page se charge en priorité, les autres images du premier écran immédiatement, et toutes les autres en différé.

L’aperçu de la page dans CMS4 veille aussi à ce genre de détail. Si une image principale recevait à la fois l’instruction « charger en différé » et « charger en priorité », l’aperçu signalerait cette contradiction à l’auteur, comme il signale une image sans dimensions ou sans texte alternatif.

Une image bien préparée garde l’essentiel de la photo sans faire attendre le visiteur inutilement.

Vérifier avant de publier

La vérification se fait sur la page réelle et à plusieurs largeurs, pas en regardant le poids des fichiers. Avant de publier, passez en revue :

• L’image principale est-elle marquée comme prioritaire, et elle seule ?

• Le recadrage garde-t-il l’essentiel sur mobile comme sur un grand écran ?

• Chaque image a-t-elle une description dans toutes les langues du site ?

• L’aperçu de la page signale-t-il une image sans dimensions ?

• Comment la page s’affiche-t-elle et se charge-t-elle à plusieurs largeurs de fenêtre ?

La façon dont CMS4 gère la bibliothèque de médias et la performance est résumée sur la page Médias et performance.