Le balisage des images responsives peut être divisé en deux scénarios: lorsque l'objectif est d'obtenir les images les plus efficaces possible, et lorsque vous avez besoin d'un contrôle explicite sur la source d'image sélectionnée par le navigateur. Vous pouvez les considérer comme des syntaxes descriptives et prescriptives.
Dans ce module, vous découvrirez les deux approches. Nous allons d'abord voir srcset et sizes, et expliquer comment aider le navigateur à faire le meilleur choix en fonction des informations qu'il dispose sur l'utilisateur, son appareil et sa situation de navigation. Vous découvrirez ensuite l'élément <picture>, qui permet de contrôler explicitement la sélection de la source en fonction de facteurs tels que la taille de la fenêtre d'affichage et la compatibilité du navigateur avec les formats d'image.
Syntaxes descriptives
Une syntaxe descriptive fournit au navigateur des informations sur les sources des images et leur utilisation, mais c'est le navigateur qui décide en dernier lieu de prendre des décisions. Il s'agit de loin du scénario le plus courant. Pour la grande majorité des images, vous ne voulez pas de contrôle précis sur le comportement du navigateur. Les navigateurs disposent de beaucoup plus d'informations que les développeurs Web et peuvent prendre des décisions complexes basées sur ces informations. Vous ne pouvez pas prédire avec précision les contextes de navigation des utilisateurs, car ils contiennent trop d'informations sur leur matériel, leurs préférences et leur vitesse de connexion. Dans le meilleur des cas, vous pouvez faire des suppositions éclairées, mais vous ne pouvez pas savoir avec certitude comment chaque utilisateur navigue sur le Web. Du point de vue du développeur, le principal cas d'utilisation des images responsives est strictement axé sur un objectif: permettre aux navigateurs d'effectuer des demandes d'images les plus efficaces possible, en fonction des informations dont ils disposent.
Pour permettre aux navigateurs de faire ces choix, srcset vous permet de fournir au navigateur une liste des sources potentielles pour remplir une seule <img>, tandis que sizes vous permet de fournir au navigateur des informations sur la façon dont cette <img> sera affichée. Vous apprendrez à les utiliser dans le module suivant.
Syntaxes prescriptives
Avec une syntaxe normative, vous indiquez au navigateur ce qu'il doit faire, c'est-à-dire la source à sélectionner, en fonction de critères spécifiques que vous avez définis. Bien que ce cas d'utilisation ne soit pas aussi courant que de "charger simplement l'élément le plus efficace pour afficher cette image", il nous permet de fournir des instructions d'utilisation au navigateur afin de tenir compte des informations qu'il n'a pas avant le transfert des éléments, telles que le contenu des sources ou leurs formats.
Bien que srcset et sizes fournissent une syntaxe pour transmettre des informations au navigateur de l'utilisateur et lui permettre de prendre des décisions concernant les sources d'image, il peut arriver que vous ayez besoin d'un contrôle explicite sur le fichier source présenté et le moment où il est présenté. Par exemple, vous pouvez afficher des versions du même contenu image avec différents formats, en fonction de différents traitements de conception au niveau des points d'arrêt de mise en page, ou vous assurer que seuls les navigateurs compatibles avec un encodage spécifique reçoivent des sources spécifiques.
Dans ce cas, vous devez contrôler explicitement la source qui s'affiche, et à quel moment. Il s'agit des garanties que srcset et sizes ne peuvent pas nous fournir par nature. Pour obtenir ce contrôle, nous devons utiliser l'élément <picture>.