Le retour de height et width

Fin 2018, Eric Portis publiait un article sur la problématique du jank dû à l’affichage tardif d’une image, qui pousse alors brusquement le contenu de la hauteur de cette dernière. Tant pis si vous aviez commencé votre lecture.

Le problème n’est pas nouveau puisqu’une solution est proposée avec HTML 3.2 : utiliser les attributs height et width pour permettre au navigateur de réserver la surface nécessaire avant le téléchargement de l’image.

Trois ans plus tard, HTML 4 renchérit :

The height and width attributes give user agents an idea of the size of an image or object so that they may reserve space for it and continue rendering the document while waiting for the image data.

Cependant, même des années avant l’essor du responsive design, on se rend bien compte qu’on ne va pas pouvoir se contenter d’images aux dimensions fixes. Pour preuve : les attributs width et height acceptent alors un pourcentage, relatif à la dimension correspondante du parent. En spécifiant une largeur fluide, le navigateur calcule automatiquement la hauteur grâce au ratio d’aspect de l’image. Problème : il faut télécharger l’image pour obtenir ce ratio. La hauteur n’est donc calculée qu’après et va pousser le contenu déjà présent.

HTML5 va ensuite restreindre l’utilisation de ces attributs avec les règles suivantes :

L’idée est d’empêcher toute utilisation de width et height à des fins stylistiques, les seules valeurs admises étant désormais des multiples des dimensions intrinsèques d’une ressource. On peut donc en déduire le ratio d’aspect intrinsèque ; précisément la donnée qu’il nous manquait !

C’est pourquoi à la place d’intrinsicsize, le WICG a songé à utiliser ces attributs dans un nouveau presentational hint : ils définissent la valeur par défaut de la propriété CSS aspect-ratio.

The width and height attributes map to the aspect-ratio property […] on img [, canvas] and video elements, and input elements with a type attribute in the Image Button state.

Par exemple, cela signifie qu’une image définie avec width="200" et height="100" se verra attribuer la déclaration 

aspect-ratio: auto 200 / 100;

par la feuille de style du navigateur. La première valeur auto signifie que le ratio intrinsèque sera utilisé dès qu’il sera disponible, d’où l’importance de spécifier correctement les attributs width et height (sinon vous provoqueriez vous-même un jank !)

Notez qu’une telle image ferait par défaut 200 × 100 pixels, car les attributs width et height sont respectivement des presentational hints des propriétés CSS width et height. Surcharger une de ces dernières implique donc de spécifier l’autre à auto. Par exemple : 

img {
    width: 100%;
    height: auto;
}

Ainsi, le navigateur pourra réserver l’espace correspondant avant même le téléchargement de l’image ! Plus récemment, ceci est également valable pour les vidéos, canevas et boutons image. Alors pensez à ajouter leurs attributs width et height !