HTML: Markup language
CSS: Styling language
JavaScript: Scripting language
Web APIs: Programming interfaces
Learn web development
Get to know MDN better
Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
View in English Always switch to English
Dans cet article, nous allons préciser le concept d'images adaptatives — images qui s'adaptent aux appareils selon les différentes tailles d'écran, résolutions et autres caractéristiques de ce type — et examiner les outils fournis par HTML pour faciliter leur mise en œuvre. Les images adaptatives ne sont qu'une partie (elles préparent le terrain) de la conception de sites web adaptatifs, sujet sur lequel vous en apprendrez beaucoup plus dans un prochain module au sujet des CSS.
Quel problème essayons-nous de résoudre avec des images adaptatives ? Examinons un scénario typique. Un site web classique a peut-être une image d'en-tête pour flatter le regard des visiteurs, plus peut-être quelques images de contenu plus loin. Imaginons que vous souhaitez que l'image d'en-tête couvre toute la largeur de l'en-tête et que l'image de contenu s'insère quelque part à l'intérieur de la colonne de contenu. Voici un exemple simple :
Cela fonctionne bien sur un appareil avec un grand écran, comme un portable ou un ordinateur de bureau (vous pouvez voir cet exemple en direct (angl.) et trouver son code source (angl.) sur GitHub). Nous ne nous attarderons pas sur les CSS, excepté pour préciser ceci :
Tout cela c'est très bien, mais le problème apparaît lorsque vous commencez à regarder le site sur un écran étroit — l'en-tête semble correct, mais commence à prendre beaucoup de hauteur pour un mobile, et la première image de contenu d'autre part n'est pas terrible — à cette taille, vous avez du mal à distinguer les personnes !
Une amélioration serait d'afficher une version recadrée de l'image qui montre les détails importants lorsque le site est consulté sur un écran étroit. Une seconde image recadrée pourrait être affichée pour un appareil à écran de largeur moyenne, comme une tablette. Le problème général qui consiste à vouloir servir différentes images recadrées de cette manière, pour divers agencements, est communément appelé le problème de la direction artistique.
De plus, il n'est pas nécessaire d'intégrer des images aussi grandes sur la page si elle est consultée sur un écran mobile. Cela peut gaspiller de la bande passante ; en particulier, les utilisateur·ice·s mobiles ne veulent pas gaspiller de la bande passante en téléchargeant une grande image destinée aux utilisateur·ice·s de bureau, alors qu'une petite image suffirait pour leur appareil. À l'inverse, une petite image matricielle commence à devenir granuleuse lorsqu'elle est affichée plus grande que sa taille d'origine (une image matricielle a un nombre fixe de pixels en largeur et en hauteur). Idéalement, plusieurs résolutions devraient être mises à disposition du navigateur web de l'utilisateur·ice. Le navigateur pourrait alors déterminer la résolution optimale à charger en fonction de la taille d'écran de l'appareil de l'utilisateur·ice. C'est ce qu'on appelle le problème de commutation de résolution.
Pour compliquer les choses, certains appareils ont des écrans haute résolution qui nécessitent des images plus grandes que ce que l'on pourrait attendre pour un affichage correct. C'est essentiellement le même problème, mais dans un contexte légèrement différent.
Vous pourriez penser que les images vectorielles résoudraient ces problèmes, et elles le font dans une certaine mesure — elles sont petites en taille de fichier et s'adaptent bien, et vous devriez les utiliser autant que possible. Cependant, elles ne conviennent pas à tous les types d'images. Les images vectorielles sont parfaites pour les graphiques simples, les motifs, les éléments d'interface, etc., mais il devient très complexe de créer une image vectorielle avec le niveau de détail que l'on trouve, par exemple, dans une photo. Les formats d'image matricielle tels que JPEG sont plus adaptés au type d'images que nous voyons dans l'exemple ci-dessus.
Ce type de problème n'existait pas lorsque le web est apparu, au début et au milieu des années 90 — à l'époque, les seuls appareils existants pour naviguer sur le Web étaient des ordinateurs de bureau et des portables, donc les ingénieur·e·s des navigateurs et les rédacteur·ice·s de spécifications n'ont même pas pensé à mettre en œuvre des solutions. Les technologies d'images adaptatives ont été mises en place récemment pour résoudre les problèmes indiqués ci-dessus en vous permettant de proposer au navigateur plusieurs fichiers image, soit tous montrant la même chose mais contenant un nombre différent de pixels (commutation de résolution), soit différentes images adaptées à différents espaces (direction artistique).
Note : Toutes les nouvelles fonctionnalités présentées dans cet article — srcset/sizes/<picture> — sont toutes prises en charge dans les versions de navigateurs récemment publiées pour les ordinateurs de bureau et pour les mobiles (y compris le navigateur Edge de Microsoft, même si ce n'est pas le cas d'Internet Explorer).
Dans cette section, nous allons examiner les deux problèmes illustrés ci-dessus et montrer comment les résoudre à l'aide des fonctionnalités d'images adaptatives du HTML. Vous noterez que nous nous concentrerons sur les éléments <img> pour cette section, comme on le voit dans la zone de contenu de l'exemple ci-dessus — l'image de l'en-tête du site est uniquement décorative et donc implémentée avec des images de fond en CSS. CSS propose sans doute de meilleurs outils pour la conception adaptative (angl.) que le HTML, et nous en parlerons dans un module CSS à venir.
Alors, quel est le problème à résoudre à l'aide des commutations de résolution ? Nous voulons afficher un contenu d'image identique, juste plus grand ou plus petit selon l'appareil — c'est la situation de la de