Generatore di srcset
NovitàCrea markup <img> responsive con srcset e sizes a partire dalle tue larghezze.
<img> uses the extension above. width/height to reserve space and prevent layout shift (CLS). Runs entirely in your browser. Nothing is uploaded.
Genera srcset, sizes e markup picture in un unico posto
Scrivere il markup delle immagini responsive a mano è laborioso — la lista srcset, l'attributo sizes corrispondente, il blocco <picture> con i fallback WebP e AVIF — e un singolo errore di battitura basta perché il browser scarichi silenziosamente il file sbagliato. Questo generatore srcset costruisce l'intero tag per te: inserisci un nome file e le tue larghezze e produce un elemento <img> o <picture> responsive completo e pronto da copiare, con descrittori corretti, caricamento lazy e decodifica asincrona.
È un generatore di immagini responsive gratuito che funziona interamente nel browser — nessuna registrazione, niente viene caricato, e continua a funzionare offline una volta caricato.
srcset e sizes spiegati
Un'immagine responsive necessita di due parti che lavorano insieme. srcset è la lista di file e le loro larghezze reali — hero-640.jpg 640w dice al browser che quel file è largo 640 pixel. sizes descrive quanto sarà larga l'immagine nel tuo layout, ad esempio (max-width: 600px) 100vw, 600px. Il browser legge sizes, moltiplica per il rapporto pixel del dispositivo e scarica il candidato srcset più vicino.
Passa il descrittore a x per ottenere il markup di densità pixel — logo.png 1x, logo@2x.png 2x — ideale per immagini a dimensione fissa come loghi e icone su schermi Retina, dove i descrittori w e sizes sarebbero eccessivi.
Quando usare l'elemento picture al posto di srcset
Il semplice srcset gestisce il cambio di risoluzione — la stessa immagine a dimensioni diverse. Usa l'elemento <picture> quando hai bisogno di più controllo: fornire formati moderni con un fallback, o l'art direction (un ritaglio diverso su mobile rispetto al desktop).
In modalità <picture>, questo strumento emette un <source type="image/avif">, un <source type="image/webp"> e un fallback <img> JPEG o PNG, in modo che i browser moderni ricevano il formato più leggero e quelli più vecchi vedano comunque un'immagine.
Ridimensiona la tua immagine a ogni larghezza, in locale
Il markup è solo metà del lavoro — hai ancora bisogno dei file ridimensionati veri e propri. Trascina un'immagine nello strumento e lo strumento la ridimensionerà a ognuna delle tue larghezze direttamente su un canvas HTML, permettendoti poi di scaricare l'intero set con nomi file che corrispondono esattamente al markup generato (hero-320.jpg, hero-640.jpg e così via).
Nessun upload, nessuna pipeline di build. Poiché ingrandire oltre l'originale aggiunge solo sfocatura, lo strumento segnala qualsiasi larghezza maggiore della sorgente per mantenere preciso il tuo set di immagini.
Confronto con Squoosh, Responsivebreakpoints.com e Cloudflare Image Resize
Squoosh (di Google) eccelle nella compressione e conversione di singole immagini — è ottimo per scegliere la giusta impostazione di qualità per un WebP o AVIF. Ma non genera markup srcset né produce un tag immagine responsive completo da incollare in HTML. È uno strumento di compressione, non un generatore di markup.
Responsivebreakpoints.com di Cloudinary carica la tua immagine sui server Cloudinary per calcolare i breakpoint ottimali e generare immagini ridimensionate. I risultati sono solidi, ma il file lascia il tuo computer e si applicano i termini di Cloudinary. Cloudflare Image Resize e Imgix sono servizi CDN — elaborano le immagini al momento della consegna ma richiedono configurazione dell'account, integrazione API e fatturazione continuativa. Il generatore srcset di UtiloKit occupa una posizione diversa: genera markup HTML completo e ridimensiona le immagini localmente lato client, senza upload, senza account, senza costi e senza limiti di dimensione del file.
Larghezze, breakpoint e Core Web Vitals
Un set di larghezze affidabile è 320, 640, 960, 1280 e 1920, raddoppiando approssimativamente a ogni passo per coprire i telefoni fino ai grandi schermi Retina; aggiungi 2560 per gli hero a schermo intero. Fornire un'immagine della giusta dimensione è uno dei più grandi vantaggi per i Core Web Vitals: meno byte significa un Largest Contentful Paint più veloce, e aggiungere gli attributi width e height previene lo spostamento del layout (CLS) che penalizza sia gli utenti che i ranking.
Aggiungi loading="lazy" alle immagini fuori schermo affinché si carichino solo quando entrano nella viewport, e fetchpriority="high" al tuo hero affinché si carichi per primo — entrambi sono toggle in un clic qui.
Privato, istantaneo e offline — funziona su qualsiasi dispositivo
Non c'è nulla da installare e nessun account da creare. Ogni tag viene assemblato nel browser mentre digiti, e qualsiasi immagine tu ridimensioni viene elaborata localmente con la Canvas API — non viene caricato nulla. Il generatore funziona offline una volta caricata la pagina, quindi puoi creare markup img srcset e <picture> responsive ovunque — in aereo, sul telefono, senza Wi-Fi.
Frequently asked questions
Cos'è srcset e cosa fa?
L'attributo srcset ti permette di elencare più versioni della stessa immagine a larghezze diverse, così il browser può scaricare quella più adatta al dispositivo. Invece di inviare un file grande a tutti i visitatori, scrivi srcset="hero-320.jpg 320w, hero-640.jpg 640w, hero-1280.jpg 1280w" e il browser sceglie l'immagine più piccola che risulta ancora nitida — risparmiando banda sugli smartphone e servendo immagini nitide sui laptop Retina, tutto senza JavaScript.
Quando dovrei usare srcset?
Usa srcset ogni volta che un'immagine viene visualizzata a dimensioni diverse su schermi diversi — banner hero, immagini degli articoli, foto prodotto, qualsiasi cosa fluida. È lo strumento giusto per il cambio di risoluzione: la stessa immagine, solo più grande o più piccola. Se hai bisogno di cambiare il ritaglio o l'immagine stessa a certi breakpoint (art direction), usa l'elemento picture. Le icone e i loghi piccoli a dimensione fissa non hanno bisogno di srcset.
Come si usano srcset e sizes insieme?
srcset elenca i file e le loro larghezze reali in pixel (640w significa che il file è largo 640 pixel); sizes dice al browser quanto sarà larga l'immagine prima che venga calcolato il layout. Insieme: srcset="img-640.jpg 640w, img-1280.jpg 1280w" sizes="(max-width: 600px) 100vw, 600px". Il browser legge sizes — 'larghezza del viewport completa sotto i 600px, altrimenti 600px' — calcola i pixel necessari (larghezza visualizzata × rapporto pixel del dispositivo) e sceglie il candidato srcset più vicino.
Qual è la differenza tra i descrittori w e x?
I descrittori w descrivono la larghezza reale di ogni file in pixel — image-640.jpg 640w — e devono essere abbinati a sizes; il browser effettua poi i calcoli per qualsiasi schermo. I descrittori x descrivono solo la densità dei pixel — image.jpg 1x, image@2x.jpg 2x, image@3x.jpg 3x — e sono adatti per immagini a dimensione fissa come un logo che deve semplicemente risultare nitido sugli schermi Retina. Usa w per immagini fluide guidate dal layout e x per quelle a dimensioni fisse.
Come fornisco WebP e AVIF con un fallback?
Usa picture con un source per ogni formato moderno e un img normale come fallback: source type="image/avif" srcset="…", poi source type="image/webp" srcset="…", poi img src="hero.jpg" …. Il browser usa il primo formato supportato e ricade sul JPEG o PNG img se non ne comprende nessuno — i browser più vecchi vedono comunque un'immagine. Abilita AVIF e WebP in modalità picture e questo strumento scrive l'intero blocco, descrittori inclusi.
Quali larghezze di immagine dovrei generare?
Un set di uso generale solido è 320, 640, 960, 1280 e 1920 — coprendo dai telefoni piccoli ai grandi schermi Retina — raddoppiando approssimativamente a ogni passo. Per le immagini hero a schermo intero aggiungi 2560; per i contenuti che non superano mai, diciamo, 800px di larghezza, non hai bisogno di nulla più largo di circa 1600 (800 × 2 per Retina). Non generarne così tante che i passi diventino inutili; quattro o sei larghezze di solito bastano.
Perché il mio srcset non funziona?
I soliti colpevoli: (1) stai testando su uno schermo dove il browser ha correttamente deciso che il file più grande non è necessario — ridimensiona la finestra o rallenta su una connessione lenta per vedere il cambio; (2) sizes è assente o errato, quindi il browser assume 100vw e scarica un file grande; (3) i file elencati non esistono effettivamente in quei percorsi (controlla il pannello Rete per i 404); (4) la cache sta servendo una dimensione già scaricata. srcset è un suggerimento e il browser può scegliere un'immagine più grande dalla cache — è un comportamento previsto.
Related tools
Vedi tutti gli strumenti
Novità Escape / Unescape JSON
Esegui l’escape di testo grezzo in una stringa compatibile con JSON e l’unescape inverso.
Novità Codici di stato HTTP
Riferimento ricercabile dei codici di stato HTTP con significati in parole semplici.
Novità Cheatsheet delle Regex
Riferimento ricercabile dei token e dei flag delle espressioni regolari.
Novità Tabella ASCII
Codici dei caratteri ricercabili in decimale, esadecimale, ottale e binario.
Novità Convertitore da PX a REM
Converti tra px, rem, em e pt rispetto a una dimensione del font radice.
Novità Convertitore di colonne del foglio di calcolo
Converti il numero di colonna di un foglio di calcolo nella sua lettera (1 → A) e viceversa.