Come fare in modo che l'immagine venga caricata in dimensioni ridotte sui dispositivi mobili?

Per caricare immagini di dimensioni ridotte sui dispositivi mobili, si utilizzano immagini adattive tramite HTML e CSS:

1. Utilizzare l'elemento <img> con gli attributi srcset e sizes, affinché il browser scelga la dimensione dell'immagine più appropriata in base alla dimensione dello schermo:

<img src="image-large.jpg"
     srcset="image-small.jpg 480w, image-medium.jpg 800w, image-large.jpg 1200w"
     sizes="(max-width: 600px) 480px, (max-width: 900px) 800px, 1200px"
     alt="Descrizione dell'immagine">

2. Usare CSS per limitare la larghezza massima dell'immagine:

img {
  max-width: 100%;
  height: auto;
}

3. È anche possibile usare formati di immagine moderni (WebP, AVIF) per ridurre le dimensioni dei file.

In questo modo, il browser su un dispositivo mobile scaricherà il file di dimensione ottimale, migliorando le prestazioni e riducendo il traffico.