Srcset e generatore di dimensioni per immagini reattive
Genera gli attributi srcset e dimensioni di un'immagine reattiva (HTML) nel tuo browser.
Name your files photo-320w.jpg, photo-640w.jpg, etc. Adjust “sizes” to your layout.
🔒 100 % lato client — nessun dato inviato
Genera gli attributi srcset e dimensioni per le tue immagini reattive HTML e offri la giusta risoluzione a ogni schermo. Lo strumento funziona al 100% nel tuo browser senza caricamento di immagini o invio di dati. Un modo semplice per migliorare le prestazioni e il punteggio Core Web Vitals delle tue pagine.
What is it for?
- ▸ Offri immagini ottimizzate per schermi mobili e Retina
- ▸ Riduci il peso della pagina e migliora LCP
- ▸ Genera markup srcset per un tag img o immagine
- ▸ Imposta punti di interruzione delle dimensioni coerenti con il tuo layout
FAQ
A cosa serve l'attributo srcset?
L'attributo srcset fornisce al browser diverse versioni di un'immagine con risoluzioni diverse; sceglie quella più adatta in base alle dimensioni dello schermo e alla densità dei pixel, evitando il download di un'immagine sovradimensionata.
Qual è la differenza tra srcset e le taglie?
srcset elenca le immagini disponibili con le relative larghezze, mentre le dimensioni indicano al browser la larghezza di visualizzazione prevista per ciascun layout. Entrambi sono necessari per una scelta ottimale.
Devo utilizzare srcset con il tag immagine?
srcset funziona direttamente su un tag img per il cambio di risoluzione e all'interno dei tag sorgente di un elemento immagine quando si desidera anche scambiare immagini in base alla condizione (direzione artistica).