Come funziona la conversione immagini nel browser
Ogni conversione è una pipeline a quattro fasi che gira nel tuo browser. Per JPEG e PNG, l’API Canvas nativa del browser gestisce direttamente la codifica. Per WebP su Safari e AVIF su tutti i browser, la pagina carica un codec WebAssembly leggero su richiesta — sempre tutto locale, le tue immagini non lasciano mai il dispositivo.
- 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 per PNG, JPEG e Chrome/Firefox WebP. Per WebP su Safari e codifica AVIF, un worker codec WebAssembly viene caricato al primo utilizzo e gestisce la codifica in un thread in background. L’output PNG è sempre senza perdita; JPEG, WebP e AVIF rispettano il cursore della qualità, che si mappa direttamente sull’impostazione di quantizzazione del codificatore. - 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?
Dal lato input, viene accettato qualsiasi formato che il browser possa decodificare: PNG, JPEG, WebP, GIF e BMP coprono praticamente ogni file prodotto da un designer o da uno strumento di screenshot. I formati di output sono PNG (sempre senza perdita), JPEG, WebP e AVIF. L’output AVIF è supportato tramite un codificatore WebAssembly che viene caricato su richiesta in ogni browser, senza bisogno di un codificatore Canvas nativo.
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.
Come funziona l’output AVIF?
La codifica AVIF utilizza un codec WebAssembly che viene caricato su richiesta la prima volta che selezioni il formato AVIF — nessun plugin, nessun flag del browser, nessuna attesa di una futura versione di Chrome. Il binario WASM è servito dalla nostra origine, codifica completamente la tua immagine in un thread in background e restituisce un blob image/avif standard pronto per il download. L’unica richiesta di rete è il recupero una tantum del codec stesso; nessun dato immagine lascia mai il tuo dispositivo. Una volta caricato, il codificatore rimane in cache per la sessione, quindi le conversioni successive sono più veloci. I file AVIF sono tipicamente il 20–30% più piccoli di WebP e il 50% più piccoli di JPEG a qualità equivalente, rendendoli la scelta migliore per i siti sensibili alle prestazioni.
Trascina le tue immagini, scegli un formato, converti. Tutto gira nella tua scheda — nessun upload, nessun account, nessuna attesa del server.