Produci srcset e sizes per un’immagine

Gli sviluppatori front-end vi ricorrono quando un’immagine deve restare nitida su più schermi senza scaricare il file maggiore.

Produci srcset e sizes per un’immagine. I dati restano sul dispositivo e il risultato è facile da controllare e riutilizzare.

Come si usa

Inserisci il nome del file immagine, per esempio photo.jpg.
Digita la larghezza massima visualizzata in pixel.
Avvia il generatore per produrre gli attributi srcset e sizes.
Copia il markup generato nel tuo elemento immagine.

Esempio

Un integratore front-end sta preparando un banner che deve rimanere nitido su telefoni e schermi grandi. Inserisce photo.jpg e una larghezza massima di 1200 pixel, poi genera gli attributi. Il codice viene incollato nel template così il browser può scegliere. Prepara anche i file immagine con le larghezze suggerite dall'output.

Input

photo.jpg
1200

Limiti e formati

Lo strumento crea markup per una singola immagine; non ridimensiona i file immagine.
Le varianti dell'immagine devono esistere con le larghezze suggerite nell'output.
La scelta finale dipende anche dal browser e dalla densità dello schermo.
Controlla i percorsi e i nomi dei file prima di pubblicare il markup.
Il codice generato non sostituisce i controlli visivi su diversi dispositivi.

Dove avviene il trattamento

I dettagli che digiti vengono elaborati all'interno del tuo browser per creare il markup responsive. Nessun file immagine viene caricato e nessuna informazione viene inviata all'esterno. Puoi copiare il risultato non appena appare.

Domande frequenti

Questo strumento ridimensiona la mia immagine?

No, non modifica il file immagine stesso. Genera solo gli attributi srcset e sizes dal nome e dalla larghezza che fornisci. Prepara le diverse versioni dell'immagine con uno strumento di ridimensionamento separato.

Perché vengono elencate diverse larghezze?

Il browser sceglie la versione che si adatta meglio allo schermo e alla densità di pixel. Offrire diverse larghezze aiuta a evitare di inviare un file grande a un dispositivo piccolo. I valori esatti seguono la larghezza massima che hai inserito.

Posso usarlo per un'immagine di sfondo CSS?

Gli attributi srcset e sizes sono per elementi immagine, non per sfondi CSS. Per gli sfondi, usa media query o tecniche di CSS adattivo. Adatta il metodo a come viene visualizzata l'immagine.