Come funziona la conversione immagini nel browser
Ogni conversione è una pipeline a quattro fasi che gira interamente in JavaScript. Nessuna libreria codec viene scaricata — la Canvas API nativa del browser gestisce la decodifica e la ricodifica.
- Legge ogni file caricato come Blob e crea un URL oggetto in modo che il browser possa decodificarlo senza copiare byte su un server.
- Disegna l’immagine decodificata su un elemento Canvas fuori schermo, applicando eventuali vincoli di ridimensionamento mantenendo il rapporto d’aspetto originale.
- Chiama
canvas.toBlob(callback, targetMimeType, quality)per ricodificare i pixel. L’output PNG è sempre senza perdita; JPEG e WebP rispettano lo slider della qualità. - Mostra una miniatura prima/dopo con le dimensioni di output e la dimensione del file, poi offre un pulsante di download per immagine o un singolo ZIP per l’intero batch.
Perché convertire i formati immagine?
- Il passaggio da PNG a WebP riduce le dimensioni tipiche dei file del 25–35% senza perdita di qualità visibile a 0,8, il che abbassa direttamente il peso della pagina e migliora i punteggi LCP dei Core Web Vitals.
- PNG conserva la trasparenza che JPEG scarta, quindi PNG→JPEG renderizza i pixel trasparenti su bianco — utile quando la destinazione (email, CMS vecchio) non accetta PNG.
- Le piattaforme social e le reti pubblicitarie hanno requisiti di formato rigidi: Facebook e LinkedIn preferiscono JPEG per le foto; la pipeline di anteprima OG di Twitter gestisce WebP; alcuni ad server rifiutano i creativi non JPEG.
- Standardizzare un batch di immagini in formati misti (screenshot PNG, foto JPEG, esportazioni WebP) in un unico formato prima del caricamento su un CMS o DAM elimina la complessità di gestione dei formati dalla pipeline di ingest.
Applicazioni comuni
La conversione di formato si presenta ogni volta che il formato sorgente e le aspettative della destinazione non corrispondono.
- Preparazione di foto prodotto per un negozio Shopify o WooCommerce — originali JPEG convertiti in WebP a qualità 0,85 per la vetrina, PNG mantenuto per esportazioni pronte per la stampa.
- Conversione di esportazioni PNG fornite dal designer in JPEG o WebP prima dell’incorporazione in una build React o Next.js, in modo che l’ottimizzatore di immagini del framework parta da una sorgente più piccola.
- Elaborazione batch di una cartella di screenshot da un ciclo di test QA — PNG a JPEG a qualità 0,9 per ridurre la dimensione dell’archivio prima dell’allegato a un ticket del bug tracker.
Un esempio pratico: PNG da 2 MB → WebP da 300 KB
Un’immagine hero PNG da 2 MB a 2400×1600 pixel è un payload comune nelle landing page di marketing.
Trascina il PNG qui, scegli WebP come formato di destinazione, imposta la qualità a 0,8 e opzionalmente imposta la larghezza max a 1200 per dimezzare le dimensioni in pixel. La pipeline canvas disegna l’immagine a 1200×800 (aspetto preservato), ricodifica in WebP e la scheda di output mostra il risultato — tipicamente 280–320 KB, una riduzione dell’85%. Clicca Scarica sulla scheda per scaricare il singolo file, oppure clicca Scarica .zip in fondo al pannello se hai convertito più immagini in un unico passaggio. L’intero ciclo, dal trascinamento al download, richiede poche centinaia di millisecondi per un’immagine di queste dimensioni e consuma banda zero dopo il caricamento iniziale della pagina.
Quali formati sono supportati?
Immagini sorgente: qualsiasi formato che il browser può decodificare — PNG, JPEG, WebP, GIF e BMP sono tutti accettati. Formati di output: PNG (senza perdita), JPEG e WebP. L’output AVIF non è ancora supportato perché l’encoder della Canvas API è disponibile solo in Chrome 105+ ed è assente in Safari e Firefox; un percorso AVIF basato su WASM è pianificato per una versione futura.
Questo avviene sul mio dispositivo?
Sì. La pagina usa la Canvas API nativa del browser e la Web File API. Nessun dato immagine viene inviato a un server; la pipeline di conversione gira interamente nella tua scheda del browser. Puoi verificarlo aprendo DevTools e controllando il pannello Rete — non ci sono richieste in uscita dopo il caricamento della pagina.
Qual è il compromesso di qualità tra PNG e JPEG?
PNG è un formato senza perdita — ogni pixel sopravvive esattamente al ciclo di codifica. JPEG usa la compressione DCT e scarta dettagli fini che l’occhio raramente nota; la qualità 0,8 è un punto di equilibrio comune dove la differenza visiva dall’originale è impercettibile per la maggior parte degli spettatori ma il file è 4–6 volte più piccolo del PNG. WebP può operare sia in modalità senza perdita che con perdita; lo slider della qualità qui guida il codificatore con perdita, e la qualità 0,85 supera tipicamente JPEG 0,85 del 25–30% sulle foto naturali.
Quando arriverà il supporto AVIF?
La codifica AVIF tramite canvas.toBlob(…, 'image/avif') funziona oggi solo in Chrome 105+; Safari e Firefox non lo supportano. Una versione futura aggiungerà un percorso AVIF opzionale usando un encoder WebAssembly leggero così che la funzione funzioni in tutti i browser. Nel frattempo, l’opzione AVIF è mostrata come ’prossimamente’ e l’encoder WebP (universalmente supportato nei browser moderni) è l’alternativa di nuova generazione raccomandata.
Trascina le tue immagini, scegli un formato, converti. Tutto gira nella tua scheda — nessun upload, nessun account, nessuna attesa del server.