Que sont les images adaptatives ?

Les images adaptatives sont des variantes de ressources sélectionnées ou générées en fonction de la taille d’affichage, de la densité de pixels, des formats pris en charge ou des conditions réseau du destinataire. Chaque variante représente la même source avec un profil de diffusion adapté.

La diffusion d’images adaptatives conserve une source unique et propose plusieurs variantes qui diffèrent par leur largeur en pixels, leur densité de pixels, leur recadrage ou leur format d’encodage. Le standard HTML présente cette technique sous le titre « Images adaptatives » ; MDN parle d’images réactives. La variante peut être choisie à deux endroits. Dans le balisage, srcset et sizes énumèrent les candidats et le navigateur en choisit un, tandis que picture avec des éléments source ajoute des règles de direction artistique (media) et de format (type). Sur le serveur, une même URL renvoie des octets différents selon les en-têtes de la requête, comme Accept, ou les indications client. La sélection dans le balisage nécessite seulement une URL distincte par variante. La sélection côté serveur permet un HTML plus court, mais l’exactitude des résultats dépend de la manière dont les caches sont informés des en-têtes variables.

Pourquoi une petite image sur la page entraîne-t-elle quand même le téléchargement du plus gros fichier ? Le navigateur commence à récupérer les images avant d’avoir appliqué le CSS de la page : la largeur dans la mise en page doit donc être déclarée dans le HTML. Avec les descripteurs w, le standard HTML exige un attribut sizes ; s’il manque ou ne peut pas être analysé, la largeur retenue est 100vw, comme si l’image remplissait la zone d’affichage. Chaque valeur w doit aussi correspondre à la largeur réelle du fichier en pixels. Sur les images avec loading="lazy", la valeur sizes="auto" permet au navigateur d’utiliser la largeur de rendu, suivie d’une liste de repli pour les navigateurs qui ne prennent pas en charge ce mot-clé. Les éléments source ne peuvent omettre sizes que s’ils précèdent un tel élément img, ce que le standard considère comme équivalent à auto.
Puis-je prévoir exactement quel candidat un navigateur chargera ? Pas à partir de srcset uniquement. Le standard laisse le navigateur choisir « d’une manière définie par l’implémentation » et tenir compte de la densité de pixels, du niveau de zoom et éventuellement des conditions réseau. Deux navigateurs peuvent donc charger des fichiers différents à partir du même balisage. En revanche, le choix entre les éléments source repose sur des règles : le navigateur les examine dans l’ordre et utilise le premier dont la requête media correspond et dont il prend en charge le type type, en considérant un attribut absent comme une condition satisfaite. Réservez media à la direction artistique, lorsqu’un recadrage différent doit être affiché, et laissez le navigateur choisir entre les résolutions.
Comment proposer AVIF ou WebP avec une solution de repli ? Placez un élément source par format dans picture, chacun avec un attribut type tel que type="image/webp", puis un élément img dans un format largement pris en charge. Le navigateur ignore tout élément source dont il ne prend pas en charge le type. N’omettez pas type : sans cet attribut, le standard HTML indique que le navigateur ne passera pas à un autre élément source après avoir récupéré une image dans un format qu’il ne prend pas en charge. Lorsqu’un recadrage est aussi sélectionné avec media, fournissez également pour ce recadrage un élément source dans le format de repli et placez ses sources avant celles qui s’appliquent plus largement. Sinon, un navigateur incapable de décoder le format plus récent se rabat sur un autre recadrage.
Qu’est-ce qui change lorsque le serveur choisit la variante ? Les caches doivent connaître les en-têtes de requête dont le choix dépendait. Une réponse sélectionnée selon Accept ou une indication client devrait mentionner cet en-tête dans Vary ; sinon, un cache peut réutiliser une variante pour une requête qui en nécessitait une autre. Des indications comme Sec-CH-Width ne sont envoyées qu’après activation par le serveur avec Accept-CH, et MDN classe Sec-CH-Width comme expérimental. Vérifiez donc la prise en charge par les navigateurs et conservez un choix par défaut approprié pour les requêtes sans indications.

Diffusez des variantes plus petites sur les écrans étroits tout en conservant des versions plus denses pour les écrans à haute densité de pixels. Des règles de dimensionnement incorrectes peuvent gaspiller de la bande passante ou donner une image visiblement floue à ses dimensions de rendu.

Le Smart CDN de Transloadit peut créer les variantes à la demande. Une URL tlcdn.com désigne votre Workspace, un Template et le fichier source. Des paramètres d’URL, comme une largeur, renseignent les variables du Template qui configurent des Robots tels que /image/resize. Une requête sans résultat en cache exécute le Template ; celles qui trouvent un résultat en cache réutilisent le résultat stocké. Le choix de l’URL chargée par un visiteur reste dans votre balisage : les pages liées ici décrivent des variantes accessibles par des paramètres d’URL et ne décrivent pas de sélection à partir d’en-têtes de requête tels que Accept. Énumérez donc les URL des variantes dans srcset ou picture.

Chaque absence de résultat en cache entraîne l’importation et la transformation du fichier et compte dans votre utilisation : la première requête pour chaque nouvelle combinaison de paramètres, ainsi que toute requête ultérieure effectuée lorsque la copie en cache n’est plus disponible, ce qui dépend de vos paramètres de cache. Les résultats trouvés en cache ne sont pas transformés à nouveau. Limitez les variables acceptées par un Template et signez les URL du Smart CDN pour empêcher les visiteurs de demander des variantes arbitraires. Lorsque toutes les dimensions sont connues avant la publication, exécuter une Assembly une seule fois et diffuser ses sorties stockées évite la transformation à la demande.

Découvrir les fonctionnalités de Transloadit pour les images

Que sont les images adaptatives ?

Fonctionnement des images adaptatives

Points clés

Quand les images adaptatives sont importantes

Comment Transloadit facilite l’utilisation des images adaptatives

Références

Transformer vos connaissances sur les médias en une chaîne de traitement opérationnelle