Une nouveauté avec HTML 5.1 est qu’il est compatible avec la plupart des navigateurs Web courants. Au centre des innovations se trouve l’adaptation du contenu selon le Responsive Web design. Le problème jusqu’à présent était principalement celui d’un mauvais affichage des contenus avec des résolutions variables. Dans ce but, HTML 5 devait déjà proposer l’élément <picture> comme standard mais il n’en était rien pour des raisons de temps. Les développeurs Web utilisaient toutefois l’élément sans que cela ne soit publié officiellement. Tous les navigateurs courants sont entre-temps devenus compatibles avec l’élément<picture> : sa standardisation avec le nouveau HTML l’a rendu officiel.
L’élément <picture> est un container : des fichiers image peuvent être intégrés via différents éléments source. Grâce à cela, seules les sources d’images adaptées à la résolution et la taille de l’écran utilisé sont chargées, ce qui économise un temps de transmission précieux et avantage la conception mobile d’un site Internet. Pour économiser de la bande passante, un contenu alternatif peut être livré sur les écrans à haute résolution. Cependant, cela nécessite l’attribut <srcset>, introduit avec HTML 5.1 : il place les images de différentes tailles en relation.
L’exemple suivant montre comment intégrer l’élément Fallback avec <img> :
<picture>
<source media="(min-width: 1024px)" srcset="https://www.ionos.fr/digitalguidepompiers-1600.jpg">
<source media="(min-width: 480px)" srcset="https://www.ionos.fr/digitalguidepompiers-480.jpg">
<!---Fallback---> <img src="https://www.ionos.fr/digitalguidepompiers-480.jpg" srcset="https://www.ionos.fr/digitalguidepompiers-320.jpg" alt="fêtedespompiers 2014">
</picture>
Les éléments <picture> et <srcset> vont main dans la main. Bien que les dernières versions des navigateurs Web courants soient déjà compatibles, un Fallback reste une alternative pour les navigateurs non compatibles pour s’assurer que les images s’affichent correctement. Les exigences sont définies dans l’élément source concernant les propriétés d’affichage écran telles que la densité ou la largeur de pixels.