Sujet : images
-
Images adaptatives avec srcset, sizes et picture
srcset avec des descripteurs de largeur, associé à un attribut sizes, permet au navigateur de choisir le fichier image le plus petit qui remplit l'emplacement pour le viewport et la densité de pixels actuels ; les descripteurs x servent des images de taille fixe à plusieurs densités ; picture avec des éléments source gère la direction artistique et le repli de format. Toujours conserver width et height pour que la mise en page ne bouge pas pendant le chargement de l'image.
-
Un pipeline d'optimisation d'images au moment de la compilation : originaux, échelle de tailles, formats encodés et métadonnées retirées
Conserver les originaux hors de la racine web, en dériver chaque taille et format servis lors d'une étape de compilation reproductible, convertir en sRGB et retirer les métadonnées par défaut (sharp le fait sauf si keepMetadata est appelé ; cwebp n'en copie aucune sauf indication contraire via -metadata), nommer les sorties d'après la source et la largeur ou d'après un hachage de contenu, et vérifier avec exiftool qu'aucune donnée EXIF ou GPS ne subsiste.
-
Livraison d'images : AVIF et WebP avec solutions de repli, chargement différé et priorité de récupération
Servir les formats modernes via des sources picture avec un attribut type et une img JPEG ou PNG comme repli (ou négocier sur Accept avec Vary), ne charger de façon différée que les images situées sous la première zone visible avec width et height définis, et marquer la plus grande image au-dessus de la ligne de flottaison avec fetchpriority=high plutôt que lazy.
Lisible par machine : JSON