Résumé

  • En février 2013, le W3C a publié deux premiers projets sur les images adaptatives, dont une proposition pour l’élément picture, élaborés avec le Responsive Images Community Group.
  • Le HTML actuel distingue le choix d’une résolution avec srcset et sizes du choix d’un cadrage avec picture, source et une condition media.

Un directeur artistique reçoit une photographie de côte. Il aime l’ampleur du ciel, la bande d’écume, le phare minuscule au loin. Il la place dans une page large et tout fonctionne. Le lendemain, la même page tient dans la main d’un lecteur. La mer remplit toujours l’image; le phare réclame une loupe. Réduire fidèlement une photographie peut produire un résultat infidèle à son intention.

Le navigateur sait calculer des dimensions. Il ne sait pas ce que le journaliste voulait montrer. Il fallait donc donner à la rédaction un moyen d’offrir plusieurs versions, sans obliger la page à attendre un script pour découvrir quelle image télécharger. Les feuilles de style adaptaient déjà les colonnes et les espacements. Le contenu photographique, lui, restait souvent attaché à une seule adresse dans img src. C’était une drôle de manière de fabriquer un journal qui change de format à chaque lecteur.

Le 26 février 2013, le groupe HTML du W3C a annoncé deux premiers projets publics. L’un portait sur picture; l’autre recensait les besoins auxquels une solution devait répondre. Le Responsive Images Community Group avait travaillé avec lui. Cette double publication racontait déjà l’ordre des choses: avant de discuter des balises, il fallait comprendre pourquoi une image unique perdait son sujet en route.

Le projet initial consacré à picture décrivait un conteneur d’images dont la source dépendrait de requêtes média CSS. Une page pouvait exposer ses choix directement dans le HTML; le navigateur les rencontrait pendant la lecture du document. Le texte était un chantier en 2013. Son idée féconde était plus simple que ses débats de syntaxe: déclarer des candidats et les situations où ils conviennent, puis laisser le logiciel choisir au bon moment.

La note du W3C sur les cas d’usage séparait deux problèmes qu’un service photo connaît bien. Le premier concerne la résolution. Si le cadrage reste identique, on peut préparer des fichiers de tailles différentes pour un écran dense, une mise en page étroite ou une grande fenêtre. Le second concerne la direction artistique. Dans un cadre vertical, le sujet d’une scène horizontale peut s’évanouir. Il faut alors une autre composition, préparée par une personne qui sait ce que raconte la photo.

Le chapitre actuel du HTML de WHATWG consacré aux images répartit ces tâches. srcset permet d’annoncer plusieurs fichiers et leurs densités. Quand la largeur affichée dépend de la fenêtre, des descripteurs de largeur accompagnés de sizes indiquent la place prévue pour l’image. Le navigateur peut tenir compte de sa densité d’affichage, du zoom et d’autres conditions pour choisir parmi les ressources offertes. La rédaction remplit la carte; le navigateur sert la table.

Pour changer le cadrage, picture contient des éléments source. Une condition media permet de proposer, par exemple, la côte entière à une grande fenêtre et un phare rapproché à une petite. Le navigateur examine les sources dans l’ordre et utilise la première condition applicable, puis choisit un fichier parmi ses candidats. L’élément img placé à l’intérieur reste l’image effectivement affichée et fournit une solution de repli. Les photographies ont été préparées en amont: aucun algorithme n’a besoin de deviner où se trouve le phare.

Les deux choix peuvent se combiner. La version rapprochée peut avoir plusieurs résolutions, tout comme la version panoramique. On demande d’abord quelle composition convient au cadre, puis quel fichier convient à l’affichage. C’est une distinction pratique pour les rédactions: acheter ou produire dix tailles d’un mauvais cadrage ne sauvera jamais le personnage caché dans un coin.

L’alternative textuelle sur img porte aussi une responsabilité. Le phare, s’il est le sujet, doit rester reconnaissable dans la description destinée aux lecteurs qui reçoivent des mots plutôt que des pixels. Les variantes visuelles peuvent changer; le rôle de l’image dans l’article doit rester clair. Le HTML est ici un contrat entre une décision humaine et une sélection mécanique.

L’épisode de 2013 montre une évolution discrète du Web. Les pages avaient appris à se plier; leurs images devaient apprendre à conserver ce qui comptait pendant le pliage. Le maquettiste fournissait les cadrages. Le navigateur faisait le service. Sur le téléphone, le phare retrouvait enfin une taille convenable pour un phare.