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 le WICG a songé à utiliser ces attributs à la place d’intrinsicsize qui devait répondre à la même problématique (ce dernier est disponible derrière le flag enable-experimental-web-platform-features à partir de Chrome 71). La proposition se résume à une unique ligne de CSS dans la feuille de style des navigateurs :

img, video { aspect-ratio: attr(width) / attr(height); }

Pour le moment, aspect-ratio n’est qu’au statut de draft et attr inutilisable de la sorte, mais les navigateurs peuvent tout de même émuler cette règle, comme Firefox dès sa version 69 (derrière le flag layout.css.width-and-height-map-to-aspect-ratio.enabled).

Il est donc temps de (re)prendre les vieilles habitudes ! Ajoutez height et width à toutes vos images et vidéos, comme celle du début de l’article :

img, video {
    display: block;
    height: auto; /* surcharge l’attribut height */
    margin: auto;
    max-width: 100%;
}
<video
    controls
    src="assets/le-retour-de-height-et-width/jank.mp4"
    height="720"
    width="930"
>