Vai al contenuto principale
Bethemesh
Immagini e grafica

Generatore di immagini responsive

Genera localmente varianti PNG, JPEG o WebP, quindi ottieni markup HTML responsive pronto da integrare.

  • Appunti
  • Elaborazione in batch
  • Esporta

Integra questo widget

Personalizza il risultato, controlla l’anteprima e copia il codice.

Anteprima

Tipo di codice di integrazione

Codice da copiare

Responsive e ridimensionato automaticamente da Bethemesh.

I tuoi file vengono elaborati localmente nel browser e non vengono mai inviati ai nostri server.

Aggiungi un’immagine PNG, JPEG o WebP. Le varianti vengono generate localmente nel browser.

Rilascia qui il tuo file

Dimensione consigliata: fino a 25 MB

Ti servono più opzioni?

Usa più strumenti di modifica in un unico spazio, con il file aperto e le modifiche in corso.

Apri l’editor completo

Questo strumento ti è stato utile?

Come funziona questo strumento?

Un’unica immagine grande rallenta gli smartphone, un’unica immagine piccola appare sfocata su uno schermo Retina. Questo generatore crea più larghezze della stessa immagine in WebP, JPEG o PNG e scrive il markup HTML picture con srcset e sizes: il browser scarica poi il file più adatto allo schermo e al layout. Tutto viene calcolato nel tuo browser.

Importa un’immagine PNG, JPEG o WebP fino a 25 MB. Seleziona le larghezze volute tra 320, 480, 640, 768, 1.024, 1.280, 1.600 e 1.920 px (le prime sei sono selezionate per impostazione predefinita) oppure inserisci larghezze personalizzate separate da virgole. L’altezza segue sempre le proporzioni dell’originale.

Scegli i formati (WebP e JPEG predefiniti, PNG facoltativo) e la qualità JPEG/WebP, da 40 a 100 % (82 % predefinito). Le larghezze superiori all’originale vengono ignorate, a meno che tu non consenta l’ingrandimento. Ogni variante si chiama nome-larghezza.estensione, per esempio spiaggia-estate-640.webp: il nome è in minuscolo, senza accenti né spazi.

Il codice generato contiene un elemento picture: un tag source per ogni formato moderno (WebP per primo) e un img di riserva in JPEG, o in PNG se manca il JPEG, il cui src punta alla variante più grande. L’attributo sizes riprende quanto hai scritto e vengono aggiunti loading="lazy" e decoding="async". Scarica tutte le varianti e copia il codice.

Come usare questo strumento

  1. Importa l’immagine

    Aggiungi la versione più grande e nitida che hai.

  2. Imposta le varianti

    Scegli larghezze, formati, qualità e l’attributo sizes del tuo layout.

  3. Scarica e integra

    Salva i file, copia il codice e completa l’attributo alt.

Quale larghezza scarica il browser?

Il browser moltiplica la larghezza indicata da sizes per la densità di pixel dello schermo e di solito sceglie la variante più piccola del srcset che raggiunge quel valore.

Larghezza necessaria

w = s × d

Uno spazio di 390 px con densità 3 richiede 1.170 px: viene scelta la variante 1280w.

w
larghezza necessaria dell’immagine in pixel
s
larghezza di visualizzazione data da sizes, in pixel CSS
d
densità di pixel dello schermo (devicePixelRatio)

Casi d’uso

Immagine principale di un articolo

Servi 320 px agli smartphone e 1.280 px ai grandi schermi partendo da una sola foto.

Passare un sito a WebP

Offri WebP ai browser che lo supportano mantenendo un JPEG di riserva.

Migliorare l’LCP

Riduci il peso dell’immagine più visibile di una pagina per mostrarla prima.

Esempi

Foto di 2.400 × 1.600 px con le impostazioni predefinite

Sei larghezze × due formati. Il codice mette per prima la source WebP e un img spiaggia-estate-1280.jpg con il suo srcset JPEG come riserva.

Input

Spiaggia estate.jpg, larghezze da 320 a 1.280, WebP + JPEG, qualità 82 %

Risultato

12 file, da spiaggia-estate-320.webp (320 × 213) a spiaggia-estate-1280.jpg (1.280 × 853)

Quale file sceglie il browser?

Su un computer con densità 1, lo spazio di 768 px prende la variante 768w; con densità 2 servirebbero 1.536 px: seleziona 1.600 px per coprirlo.

Input

sizes="(max-width: 768px) 100vw, 768px"

Risultato

Smartphone da 390 px con densità 3: 1.170 px → variante 1280w

Consigli e buone pratiche

  • Scrivi un attributo sizes fedele al layout: con 100vw su un’immagine mostrata a 600 px, il browser scarica un file troppo pesante.
  • Prevedi una variante di circa il doppio della larghezza massima di visualizzazione per gli schermi ad alta densità.
  • Il codice contiene alt="": sostituiscilo con una descrizione, salvo per un’immagine puramente decorativa.
  • Non usare loading="lazy" sull’immagine principale visibile al caricamento: rimuovilo per non ritardare l’LCP.

Fonti e riferimenti

Domande frequenti

A che cosa serve l’attributo sizes?

Indica la larghezza di visualizzazione dell’immagine in base allo schermo. Con srcset, il browser ne deduce il file da scaricare prima ancora di conoscere il layout.

Perché alcune larghezze non sono state generate?

Superano la larghezza dell’originale. Ingrandire non aggiunge dettagli; attiva l’opzione solo se ti serve.

Perché WebP e JPEG insieme?

WebP è più leggero a parità di qualità; il JPEG del tag img fa da riserva per i browser o gli strumenti che non leggono WebP.

I file vengono raccolti in uno ZIP?

No, ogni variante viene scaricata separatamente; il browser potrebbe chiederti di consentire più download.

La qualità si applica al PNG?

No. Il PNG è senza perdita: il cursore della qualità riguarda solo JPEG e WebP.

La mia immagine viene caricata su un server?

No. Ridimensionamento e codifica avvengono nel tuo browser.

Strumenti correlati

Continua con questi strumenti

Strumenti simili o complementari a questo.

Strumenti simili

Ridimensionare un’immagine

Ridimensiona un’immagine definendo con precisione larghezza e altezza prima del download.

Immagini e graficaIn evidenzaUsa questo strumento

Ottimizzare un’immagine

Alleggerisci un’immagine regolando la qualità o puntando a un peso in KB, con il peso finale mostrato prima del download.

Immagini e graficaIn evidenzaUsa questo strumento

Leggi anche

GuidaBuone praticheIntermedio

Immagini responsive: capire srcset e sizes

Scopri come srcset e sizes consentono al browser di scegliere un’immagine adatta alla larghezza di visualizzazione, alla densità di pixel e al contesto responsive.

31 agosto 20264 min