Come funziona la compressione di immagini nel browser
Ogni passata di compressione gira interamente in JavaScript. Nessuna libreria codec viene scaricata e nessun server è coinvolto. La Canvas API nativa del browser decodifica l'immagine, la ricodifica a qualità inferiore e ti consegna un Blob che la pagina può visualizzare in anteprima, scaricare o comprimere in uno ZIP. Poiché ogni passaggio rimane nel sandbox della scheda, i file originali non toccano mai la rete.
- Legge ogni file caricato come Blob e crea un URL oggetto in modo che il browser possa decodificarlo in locale, senza copiare byte su un server né scriverli su disco.
- Disegna l'immagine decodificata su un elemento Canvas fuori schermo, nelle sue dimensioni originali in pixel, pronta per la ricodifica.
- Chiama
canvas.toBlob(callback, mimeType, quality)per ricodificare i pixel. In modalità qualità, il valore dello slider si mappa direttamente sul parametro di quantizzazione del codificatore; in modalità dimensione target, la pagina bisezione il valore di qualità finché il blob di output non rientra nel budget in byte. - Mostra un riepilogo prima/dopo con la dimensione originale, la dimensione compressa e la percentuale di risparmio, poi offre un download per immagine o un unico ZIP per l'intero batch. Lo ZIP viene costruito in memoria usando fflate, una libreria da 8 KB caricata al primo utilizzo.
Perché comprimere le immagini?
- Le immagini più piccole si caricano più velocemente. Ridurre una hero image da 4 MB a 600 KB migliora direttamente il Largest Contentful Paint, uno dei Core Web Vitals che Google usa per il ranking. Su una pagina con più foto, il risparmio si accumula in un primo rendering più rapido.
- I limiti di upload e allegati sono ovunque. Molte piattaforme CMS, strumenti di ticketing e sistemi email rifiutano file oltre 1 o 2 MB. Una rapida passata di compressione porta la foto sotto il limite senza dover aprire un editor completo.
- Larghezza di banda e storage costano a scala. Inviare WebP a qualità 0.8 invece di PNG a dimensione piena può tagliare il payload delle immagini di un terzo o più, riducendo i costi di egress CDN e il consumo di dati mobili dei tuoi visitatori.
- La privacy conta per le immagini sensibili. Poiché tutto gira nel browser, scansioni di documenti, immagini mediche e screenshot interni restano sul tuo dispositivo — nessun upload verso un server terzo come TinyPNG di cui preoccuparsi.
Applicazioni comuni
La compressione si presenta ogni volta che un'immagine è più grande del posto in cui deve andare. Tre pattern che vediamo continuamente.
- Preparare foto prodotto per un negozio online. Gli originali JPEG vengono compressi a qualità 0.8 (o un target di 200 KB) per far caricare velocemente la vetrina e superare i Core Web Vitals su mobile.
- Ridurre gli screenshot prima di allegarli a un bug tracker o a una wiki. Un batch di PNG convertiti in JPEG a qualità 0.85 scende spesso da decine di megabyte a un paio.
- Far rientrare una foto in un limite di upload — un portale di candidature che rifiuta file oltre 1 MB, un sistema email con limite stretto per gli allegati, o un avatar su forum che deve rispettare un budget in byte.
Un esempio pratico: JPEG da 4 MB a 400 KB
Un JPEG da 4 MB appena scattato con la fotocamera di un telefono è un payload comune che fa saltare i limiti di upload e rallenta le pagine. Un buon benchmark per misurare ciò che la compressione risparmia.
Trascina il JPEG nella zona di upload, lascia il formato su JPEG, e trascina lo slider della qualità fino a 0.7 oppure passa alla modalità dimensione target e scrivi 400 KB. In modalità qualità, la pipeline Canvas ricodifica una volta e mostra il risultato, tipicamente tra 500 e 700 KB a seconda della foto. In modalità dimensione target, la pagina prova qualche valore di qualità, si ferma sul più alto che rientra ancora sotto 400 KB e riporta la percentuale di risparmio. Clicca Scarica sulla scheda per ottenere il file singolo, o Scarica .zip se hai compresso più immagini in una volta. L'intero ciclo gira in ben meno di un secondo per un'immagine di queste dimensioni e non consuma banda una volta che la pagina ha finito di caricare.
Qual è la differenza tra modalità qualità e modalità dimensione target?
La modalità qualità ti dà un unico slider da 0.1 a 1.0 che corrisponde al parametro di quantizzazione del codificatore JPEG o WebP — valori più bassi significano file più piccoli con più artefatti visibili. La modalità dimensione target ribalta il problema: indichi una dimensione in kilobyte e la pagina bisezione il valore di qualità, codificando più volte fino a trovare la qualità più alta che rientra ancora nel tuo budget. La modalità dimensione target è comoda quando c'è un limite fisso (un tetto di upload di 1 MB, per esempio); la modalità qualità è più veloce e migliore quando vuoi semplicemente un risultato visivo prevedibile. PNG è senza perdita, quindi nessuna delle due modalità si applica ad esso.
Questo avviene sul mio dispositivo?
Sì, interamente. La pagina usa la Canvas API nativa del browser e la Web File API per decodificare e ricodificare ogni immagine in memoria. Nessun dato immagine viene inviato a un server, non c'è upload temporaneo e nessun giro nel cloud. Puoi verificarlo tu stesso: apri DevTools, passa al pannello Network e avvia una compressione. Le uniche richieste in uscita che vedrai sono il caricamento iniziale della pagina e le chiamate pubblicitarie. Niente a forma di immagine lascia la scheda.
Perché comprimere un PNG a volte non lo riduce quasi per niente?
PNG è un formato senza perdita, quindi la Canvas API non può scartare dettagli per ridurlo — può solo ricompattare gli stessi pixel. Per le fotografie, un PNG è già grande e la ricodifica senza perdita risparmia poco. Il vero guadagno viene dal cambiare il formato di output in JPEG o WebP, che usano la compressione lossy adatta alle foto e risultano regolarmente da 4 a 10 volte più piccoli. Usa PNG solo quando hai bisogno di qualità senza perdita o trasparenza; altrimenti scegli JPEG per le foto o WebP per il miglior equilibrio dimensione-qualità.
Quale formato scegliere?
Per le fotografie, WebP a qualità 0.8 offre il miglior equilibrio dimensione-qualità ed è supportato da ogni browser rilasciato dal 2021 in poi; JPEG è il fallback universale sicuro quando una destinazione è più vecchia o più rigida. Scegli PNG solo quando hai bisogno di qualità senza perdita o di un canale alpha — arte lineare, screenshot di UI, loghi con trasparenza. Se stai ottimizzando per la velocità di pagina e il tuo pubblico usa browser moderni, WebP è quasi sempre la scelta giusta; se alimenti un CMS vecchio o una pipeline di stampa che rifiuta WebP, resta con JPEG.
Trascina le tue immagini, scegli un livello di qualità o una dimensione target, comprimi. Tutto gira nella tua scheda. Nessun upload, nessun account, nessuna coda server.