Quelle balise HTML aide à charger différentes images pour différentes résolutions d'écran?

Pour charger différentes images en fonction de la résolution de l'écran en HTML, on utilise la balise <picture>. À l'intérieur, on peut spécifier plusieurs <source> avec l'attribut media, qui définit les conditions pour le choix de l'image, et la balise <img> avec une image de secours.

Exemple:

<picture>
  <source media="(min-width: 800px)" srcset="large.jpg">
  <source media="(min-width: 400px)" srcset="medium.jpg">
  <img src="small.jpg" alt="Exemple d'image">
</picture>

Dans cet exemple, le navigateur choisira large.jpg si la largeur de l'écran est de 800px ou plus, medium.jpg pour une largeur entre 400px et 799px, et small.jpg pour des écrans plus petits.

De plus, pour des cas simples, on peut utiliser l'attribut srcset sur la balise <img>, en indiquant différentes images avec leurs tailles.