srcset répertorie les fichiers candidats ; size indique au navigateur la largeur de l'emplacement en pixels CSS avant la fin de la mise en page. Les sites qui expédient des srcset sans taille honnête font deviner le navigateur, et sa supposition est le plus gros fichier.
<img
src="photo-800.webp" alt="the workshop bench"
srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1600.webp 1600w"
sizes="(max-width: 700px) 92vw, 560px"
width="800" height="533" fetchpriority="high" />Le calcul en deux minutes
- Ouvrez les outils de développement et lisez la largeur de l'image rendue à chaque point d'arrêt que vous prenez en charge. C'EST la valeur de vos tailles ; écrivez-le en px, pas en vw, où l'emplacement est fixe.
- Générez des fichiers aux deux extrémités de la plage des emplacements (densité 1x et 2x du plus grand). Trois candidats, c'est déjà beaucoup.
- Ne mélangez jamais les descripteurs de densité (1x, 2x) avec les descripteurs de largeur (w) dans un seul srcset ; une syntaxe l'emporte et c'est la forme w pour les mises en page.
Les bugs corrigés par ce guide
- Un héros de bureau livré en octets de bureau sur les téléphones : les tailles ont oublié la casse (largeur maximale).
- Une photo floue de 400 pixels étendue sur le bureau : il n'existait aucun candidat plus gros vers lequel mettre à niveau.
- Changement de mise en page lors du chargement : attributs de largeur/hauteur manquants. Remettez-les; ils ne coûtent rien.
Ce site : un recadrage 3:2 par photo d'article, un héros avide de pages d'article, tout le reste paresseux, Lighthouse 100 sur chaque page mesurée dans ce référentiel. Simple, mesuré et les octets suivent la fenêtre.