Generatore di immagini responsive (srcset e sizes)

Generatore di immagini responsive (srcset e sizes): a cosa serve

Le immagini responsive fanno scaricare allo smartphone una foto piccola e allo schermo grande una più grande, rendendo il sito più veloce senza perdere nitidezza. Per questo servono più dimensioni della stessa foto e il codice con srcset e sizes.

Carica l’immagine, scegli larghezze, formato e qualità e scarica tutte le versioni in un .zip. Il codice esce pronto con srcset, sizes in base alla posizione dell’immagine nella pagina, width e height per evitare salti di layout, loading=lazy o fetchpriority=high (con preload) per l’immagine principale, e facoltativamente <picture> con JPG di riserva.

Come si usa

1. Scegli l’immagine.
2. Imposta larghezze, formato e dove appare.
3. Scarica lo .zip e copia il codice.

Quando usarlo

• Foto dei prodotti negli e-commerce.
• Immagine principale delle landing page.
• Gallerie e blog.

Domande frequenti

Cosa fanno srcset e sizes?

Lo srcset elenca le versioni della stessa immagine con la larghezza di ciascuna (per esempio 640w, 1280w). Il sizes dice quanto spazio occupa l’immagine sullo schermo. Con entrambi, il browser sceglie la versione più piccola che resta nitida su quello schermo, e lo smartphone non scarica la foto da 2000 px.

Perché width e height nel tag?

Con width e height, il browser riserva lo spazio dell’immagine prima che sia caricata e il testo non scende di colpo quando compare la foto. Questo migliora il CLS, una delle metriche dei Core Web Vitals di Google.

Quando usare loading=lazy?

Sulle immagini che stanno più in basso nella pagina. L’immagine principale, visibile appena si apre la pagina, non deve mai avere lazy: usa fetchpriority=high per caricarsi il prima possibile.

È davvero gratis?

Sì, 100% gratis. Senza registrazione, senza abbonamento e senza limiti d’uso. Tutti gli strumenti di Tools123 sono gratuiti.

Strumenti simili