Ridimensiona immagini _

Come funziona il ridimensionamento di immagini nel browser

Ogni ridimensionamento è un breve pipeline che gira interamente in JavaScript. Nessuna libreria codec viene scaricata e nessun server è coinvolto. La Canvas API nativa del browser decodifica il file, lo ridisegna alle dimensioni target e lo ricodifica in memoria, poi ti consegna un Blob che la pagina può visualizzare in anteprima o comprimere in uno ZIP. Poiché ogni passaggio rimane nel sandbox della scheda, i file originali non raggiungono mai la rete.

1. 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.
2. Calcola le dimensioni target dalla modalità scelta — un limite del lato più lungo, una larghezza e altezza esatte, o una scala percentuale. Il blocco delle proporzioni mantiene le proporzioni corrette quando si modifica un singolo campo.
3. Crea un Canvas fuori schermo alle dimensioni target e chiama ctx.drawImage(source, 0, 0, width, height) per ridisegnare i pixel decodificati. Il browser gestisce l'interpolazione che leviga il risultato scalato.
4. Chiama canvas.toBlob per ricodificare nel formato sorgente. PNG rimane senza perdita, JPEG e WebP vengono ricodificati ad alta qualità. La pagina mostra poi una scheda prima/dopo e offre un download per immagine o un unico ZIP costruito in memoria con fflate.

Perché ridimensionare le immagini?

• Le immagini sovradimensionate sono la causa più comune di pagine lente. Una foto di telefono da 4000×3000 inserita direttamente in un layout largo 600 pixel invia circa 40 volte più pixel di quanti lo schermo possa mostrare. Limitare il lato più lungo a 1600 px prima del caricamento taglia drasticamente il peso della pagina e migliora l'LCP dei Core Web Vitals.
• I form di upload impongono dimensioni rigide. Slot per avatar, portali di foto d'identità, annunci su marketplace e card OG per i social richiedono dimensioni precise in pixel: 1200×630 per un'anteprima Open Graph, 512×512 per un'icona app, 150×150 per una miniatura. Centrare il numero esatto evita il ciclo dei caricamenti rifiutati.
• I client di posta e di chat ricomprimono silenziosamente qualsiasi immagine grande, il che può rovinare uno screenshot pulito. Ridimensionare da soli a una larghezza ragionevole mantiene il risultato prevedibile invece di lasciarlo alla pipeline lossy di qualcun altro.
• La coerenza del batch conta per gallerie e cataloghi. Passare una cartella di foto di dimensioni diverse per un unico target di 800×800 fa sì che ogni card si allinei nella griglia, senza immagini giganti che rompono il layout.

Applicazioni comuni

Il ridimensionamento compare ogni volta che le dimensioni sorgente e le aspettative della destinazione non corrispondono. Tre schemi ricorrono continuamente.

• Preparare foto prodotto per un negozio Shopify o WooCommerce. Una cartella di originali della fotocamera da 4000 pixel viene limitata a un lato più lungo di 1600 px per far caricare velocemente la vetrina, mantenendo le proporzioni intatte per evitare distorsioni.
• Generare asset per i social e le app da un file master. Impostare un esatto 1200×630 per la card Open Graph, poi 512×512 per un'icona app, esportando ciascuno in un paio di clic senza aprire un editor pesante.
• Ridurre un batch di screenshot QA o di supporto prima di allegarli a un ticket. Scalare una cartella di 50 immagini al 50% tipicamente riduce l'archivio di circa tre quarti prima che vada nel bug tracker.

Un esempio pratico: foto da 4000 px a immagine web da 1600 px

Una foto di 4000×3000 direttamente dal telefono è un payload comune, molto più grande di quanto qualsiasi layout web abbia bisogno. È un buon riferimento per ciò che il ridimensionamento risparmia.

Trascina la foto nella zona di upload, lascia la modalità su Limita lato più lungo e imposta il valore su 1600. La pipeline Canvas ridisegna l'immagine a 1600×1200 con le proporzioni preservate, poi la ricodifica nel formato originale. La scheda di output mostra le nuove dimensioni e la dimensione del file, che per un JPEG tipico scende da diversi megabyte a qualche centinaio di kilobyte. Clicca Scarica sulla scheda per ottenere il file singolo, o Scarica .zip se hai ridimensionato più immagini in un unico passaggio. Il ciclo completo, dal trascinamento al download, gira in frazioni di secondo e usa zero banda dopo il caricamento iniziale della pagina.

Quali modalità di ridimensionamento sono disponibili?

Tre. Limita lato più lungo limita il maggiore tra larghezza o altezza a un valore in pixel e scala l'altro lato per corrispondere — è il default sicuro perché non distorce mai. Larghezza × altezza esatte consente di digitare entrambi i numeri, con un blocco delle proporzioni che ricalcola il secondo campo dal rapporto sorgente quando si modifica il primo — disattiva il blocco quando un form richiede una dimensione esatta non proporzionale. Scala per percentuale moltiplica entrambe le dimensioni per un singolo fattore, utile per dimezzare o raddoppiare un intero batch in una volta. Sei predefiniti con un clic (da 1920×1080 fino a una miniatura di 150×150) coprono i target più comuni.

Questo avviene sul mio dispositivo?

Sì, interamente. La pagina usa la Canvas API nativa del browser e la Web File API per decodificare, ridisegnare 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: apri DevTools, passa al pannello Network e avvia un ridimensionamento. 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, il che rende questo strumento sicuro per documenti d'identità scansionati, immagini mediche e altro materiale che non vorresti mai caricare.

Il ridimensionamento ridurrà la qualità?

Ridurre un'immagine (downscaling) ha un aspetto eccellente — il browser fa la media dei pixel sorgente in meno pixel, quindi il dettaglio rimane nitido e il file diventa molto più piccolo. Ingrandire oltre la risoluzione sorgente (upscaling) non può inventare dettagli mai catturati, quindi un'immagine piccola scalata verso l'alto apparirà sfocata; questo è un limite di qualsiasi ridimensionatore, non di questo in particolare. L'output mantiene il formato sorgente: PNG rimane senza perdita, mentre JPEG e WebP vengono ricodificati a un'impostazione di alta qualità in modo che la differenza visiva dall'originale sia difficile da notare.

Quali formati di file supporta?

In input, è accettato qualsiasi formato che il browser possa decodificare: PNG, JPEG, WebP, GIF e BMP coprono quasi tutti i file prodotti da un telefono, una fotocamera o uno strumento di screenshot. L'output preserva il formato sorgente dove l'encoder Canvas lo supporta — PNG, JPEG e WebP funzionano direttamente. GIF e BMP, che la Canvas API può decodificare ma non ricodificare, vengono salvati come PNG senza perdita. Il nome del file ridimensionato include le nuove dimensioni (ad esempio foto-1600x1200.jpg) così che un batch sia facile da ordinare.

Trascina le tue immagini, scegli una dimensione, ridimensiona. Tutto gira nella tua scheda. Nessun upload, nessun account, nessuna coda server.