Comment utiliser srcset, sizes et picture correctement
Les images responsives laissent le navigateur choisir le fichier le plus petit utile pour l'écran et la mise en page du visiteur. L'essentiel est de fournir des variantes de largeur fiables, de décrire l'emplacement affiché avec sizes, et de garder les décisions d'accessibilité dans votre page, pas dans un générateur d'images.
Par PixoPublié Mis à jour
Générez de vraies variantes de largeur
Commencez par plusieurs fichiers qui conservent le ratio d'aspect de la source, par exemple 320, 640, 960, 1280 et 1920 pixels de large. N'agrandissez pas un original plus petit, et ne conservez pas de dérivé plus grand que la source sans raison précise. Le générateur d'images responsives de Pixo applique ces deux règles et écrit les dimensions et types MIME obtenus dans manifest.json.
Utilisez les descripteurs de largeur dans srcset
Listez chaque candidat avec sa largeur réelle en pixels, par exemple image-640w.webp 640w. Le descripteur w n'est pas la largeur CSS et ce n'est pas un multiplicateur de densité ; il indique au navigateur la largeur intrinsèque de ce fichier. Chaque chemin du srcset généré pointe vers une ressource incluse dans le ZIP, donc copiez le dossier des ressources et le balisage ensemble.
Faites correspondre sizes à la mise en page
L'attribut sizes décrit la largeur d'affichage de l'image avant que le navigateur ne télécharge le fichier. Un bon point de départ est (min-width: 1024px) 50vw, 100vw pour une image qui occupe la moitié de la fenêtre sur ordinateur et toute la largeur sur les écrans plus petits. Remplacez cet exemple par vos points de rupture CSS et largeurs d'emplacement réels ; un sizes inexact peut amener le navigateur à choisir des fichiers inutilement volumineux ou visiblement flous.
Utilisez picture pour les choix de format
Un élément picture peut proposer des sources WebP tout en conservant un repli img en JPEG ou PNG. Placez les éléments source en premier et l'élément img en dernier. Le navigateur sélectionne une source prise en charge et utilise tout de même l'élément img pour la requête de repli, la largeur et la hauteur intrinsèques, le comportement de chargement et le texte alternatif accessible.
Gardez width, height et alt dans la page
Définissez width et height à partir du manifeste généré afin que le navigateur puisse réserver le bon espace selon le ratio d'aspect et réduire les décalages de mise en page. Pixo laisse volontairement alt vide, car seul l'auteur de la page sait si l'image est informative, fonctionnelle ou décorative. Rédigez un texte alternatif contextuel et concis pour les images significatives, et laissez alt vide uniquement pour les images décoratives.
Déployez et vérifiez le pack complet
Décompressez le pack, publiez le dossier des ressources sans renommer ses fichiers, collez picture.html dans votre page, puis ajustez sizes et alt. Testez ensuite à des largeurs d'écran étroites et larges, vérifiez dans le panneau Réseau qu'un seul candidat est demandé plutôt que l'ensemble, et assurez-vous que chaque URL demandée renvoie le type MIME d'image attendu.