Quale tag HTML aiuta a caricare immagini diverse per diverse risoluzioni dello schermo?

In HTML, per caricare immagini diverse a seconda della risoluzione dello schermo si utilizza il tag <picture>. Al suo interno, si possono specificare più <source> con l'attributo media, che definisce le condizioni per la selezione dell'immagine, e il tag <img> con un'immagine di riserva.

Esempio:

<picture>
  <source media="(min-width: 800px)" srcset="large.jpg">
  <source media="(min-width: 400px)" srcset="medium.jpg">
  <img src="small.jpg" alt="Esempio di immagine">
</picture>

In questo esempio, il browser sceglierà large.jpg se la larghezza dello schermo è di 800px o più, medium.jpg per larghezze tra 400px e 799px, e small.jpg per schermi più piccoli.

Inoltre, per casi semplici, si può usare l'attributo srcset nel tag <img>, specificando immagini diverse con le loro dimensioni.