Online Tool Store
Generatore di srcset
Ridimensiona un'immagine caricata in più larghezze con l'API Canvas e genera il markup <img srcset sizes> corrispondente e i file scaricabili, nel browser.
🔒 Questo strumento funziona interamente nel tuo browser. I tuoi file non vengono mai caricati su un server.
Per impostazione predefinita è usata un'immagine di gradiente di esempio — carica la tua per sostituirla.
Come funziona
- Carica un'immagine (per impostazione predefinita è mostrato un gradiente di esempio).
- Imposta le tue larghezze target e una base del nome file — le anteprime si aggiornano all'istante.
- Regola l'attributo "sizes" per farlo corrispondere a come l'immagine viene visualizzata nel tuo layout.
- Copia il markup generato e scarica i file ridimensionati da ospitare accanto ad esso.
FAQ
Cosa genera davvero questo strumento?
Ridimensiona la tua immagine caricata in ogni larghezza target usando l'API Canvas, poi scrive il markup <img srcset sizes> corrispondente affinché i browser possano scegliere il file giusto per ogni viewport.
Cosa dovrei mettere nell'attributo "sizes"?
Una descrizione in stile CSS di quanto è larga l'immagine ai diversi viewport, es. "(max-width: 768px) 100vw, 50vw" significa che riempie il viewport su mobile e metà viewport su schermi più grandi. Fallo corrispondere al tuo layout reale.
Devo caricare io stesso i file ridimensionati?
Sì — "Scarica tutte le dimensioni" salva ogni JPEG ridimensionato sul tuo dispositivo con un nome file corrispondente al markup generato (es. photo-640w.jpg). Caricali sul tuo host di immagini o CDN agli stessi percorsi.
Perché i download sono JPEG invece del formato originale?
Il JPEG mantiene le dimensioni dei file piccole e prevedibili per la consegna di foto responsive. Se ti serve un output PNG o WebP per la trasparenza o una migliore compressione, ridimensiona in seguito con un convertitore di immagini dedicato.
La mia immagine viene caricata da qualche parte?
No. Il ridimensionamento avviene localmente su un <canvas> nel tuo browser — il file originale non lascia mai il tuo dispositivo.
Come ci confrontiamo
| Funzionalità | Online Tool Store | Ridimensionamento manuale in un editor di immagini | Servizi di ridimensionamento automatico delle immagini dei CDN |
|---|---|---|---|
| Genera automaticamente il markup corrispondente | ✓ | ✗ | Dipende dal servizio |
| Nessun account o backend richiesto | ✓ | ✓ | ✗ |
| Gratis, nessun costo per immagine | ✓ | ✓ | Prezzo in base all'uso |
Se ti serve solo un set occasionale di immagini responsive e il markup corrispondente — nessun passaggio di build, nessun account CDN — questo strumento produce entrambi in una pagina.