Comprimi Immagini Online — JPEG, PNG e WebP

Cos'è la Compressione delle Immagini?

// Compress a JPEG image in the browser using the Canvas API
async function compressImage(file, quality = 0.75) {
  const img = await createImageBitmap(file); // decode the image
  const canvas = document.createElement('canvas');
  canvas.width = img.width;
  canvas.height = img.height;
  canvas.getContext('2d').drawImage(img, 0, 0);
  // quality: 0.0 (smallest file) → 1.0 (original quality)
  return new Promise((resolve) =>
    canvas.toBlob(resolve, 'image/jpeg', quality)
  );
}

// file comes from an <input type="file"> or drag-and-drop
const blob = await compressImage(file, 0.75);
console.log(`Original:   ${file.size} bytes`);
console.log(`Compressed: ${blob.size} bytes`);
// → Original:   2100000 bytes
// → Compressed:  672000 bytes  (~68% reduction)

Caratteristiche Principali

JPEG vs PNG vs WebP

Esempi di Compressione

photo-landscape.jpg (2.1 MB, 4000×3000)

photo-landscape.jpg (680 KB at quality 75)

logo-transparent.png (43 KB, 1200×800)

logo-transparent.png (19 KB a qualità 80)

hero-banner.webp (800 KB, 1920×1080)

hero-banner.webp (250 KB at quality 75)

Come Comprimere Immagini Online

1. 1

   Carica le Tue Immagini

   Trascina le immagini nell'area di upload, o clicca per sfogliare i tuoi file. Puoi selezionare fino a 20 immagini JPEG, PNG o WebP in una volta, ciascuna fino a 10MB.

2. 2

   Regola la Qualità

   Usa lo slider della qualità per impostare il livello di compressione desiderato (0–100). Il valore predefinito è 75, che offre un buon equilibrio. Osserva le dimensioni dei file e i rapporti di compressione aggiornarsi in tempo reale.

3. 3

   Scarica i Risultati

   Clicca Scarica su qualsiasi singolo file, o usa Scarica Tutto per salvare ogni immagine compressa. Usa il pulsante Confronta per ispezionare visivamente la qualità prima di scaricare.

Casi d'Uso

Ottimizzazione delle Prestazioni del Sito Web

Riduci le dimensioni dei file immagine prima di caricarli sul tuo sito web. Immagini più piccole si caricano più velocemente, migliorando i punteggi Core Web Vitals (specialmente Largest Contentful Paint), riducendo i costi di banda e migliorando il ranking SEO.

Riduzione delle Dimensioni degli Allegati Email

Comprimi le immagini prima di allegarle alle email per restare nei limiti di dimensione degli allegati (tipicamente 10–25MB). Un batch di 20 foto può spesso essere compresso da 50MB a meno di 10MB.

Preparazione Upload Social Media

Pre-comprimi le immagini prima di caricarle sulle piattaforme social media. Mentre le piattaforme ricomprimono automaticamente le immagini, partire con un file ottimamente compresso ti dà più controllo sulla qualità finale.

Ottimizzazione di Asset per App e Giochi

Comprimi asset UI, texture e sprite per app mobili, giochi e progressive web app. Asset più piccoli significano download più rapidi, meno utilizzo di storage ed esperienze utente più fluide.

Ottimizzazione di Documenti e Presentazioni

Riduci la dimensione delle immagini incorporate in PDF, documenti Word e presentazioni. Un mazzo di slide di 50MB con foto ad alta risoluzione può spesso essere ridotto a 10MB senza perdita di qualità evidente.

Dettagli Tecnici

Compressione Canvas API

Questo strumento usa il metodo toBlob() della Canvas API HTML5 per la compressione. L'immagine viene disegnata su un elemento canvas invisibile, poi ricodificata con il parametro di qualità specificato. Per JPEG e WebP, il parametro di qualità (0.0–1.0) controlla il livello di compressione con perdita. Per PNG, la Canvas API ignora completamente il parametro di qualità — la codifica PNG tramite Canvas è sempre senza perdita.

Quantizzazione della palette PNG

Poiché Canvas toBlob() ignora il parametro di qualità per il PNG, l’output PNG non passa affatto da Canvas. L’immagine viene invece quantizzata su una palette di colori: lo slider della qualità determina la dimensione della palette — qualità 75 dà 192 colori — e il risultato viene riscritto come un vero PNG, con il canale alfa intatto. La qualità 100 corrisponde a una ricodifica senza perdita che non altera alcun pixel. Se il file quantizzato non è più piccolo dell’originale, lo strumento lo scarta e mantiene i tuoi byte originali.

Comportamento del Parametro di Qualità

Lo slider della qualità mappa al parametro di qualità di Canvas toBlob(): 100 = 1.0 (qualità più alta, file più grande), 0 = 0.0 (qualità più bassa, file più piccolo). Per JPEG, qualità 75 (0.75) è generalmente il punto ideale — sotto 50, gli artefatti diventano evidenti. Per WebP, lo stesso valore di qualità produce file leggermente più piccoli rispetto a JPEG con qualità visiva comparabile.

Memoria e Limiti del Browser

Ogni immagine esiste in memoria sia come oggetto File originale sia come Blob compresso, più due URL oggetto per la visualizzazione di anteprima. Con 20 immagini da 10MB ciascuna, l'utilizzo di memoria di picco può raggiungere circa 400MB. Gli URL oggetto vengono revocati quando le immagini vengono cancellate o la pagina viene scaricata per prevenire perdite di memoria.

Migliori Pratiche

Inizia a Qualità 75 per JPEG/WebP

Qualità 75 è il punto di partenza raccomandato per la maggior parte dei casi d'uso. Riduce tipicamente la dimensione del file del 60–80% con perdita di qualità visibile minima. Aumenta la qualità sopra 85 solo per immagini in cui la preservazione dei dettagli fini è critica (es. imaging medico, fotografia per stampa di qualità).

Usa WebP Quando Possibile

WebP produce file più piccoli del 25–35% rispetto a JPEG alla stessa qualità visiva e supporta la trasparenza come PNG. Tutti i browser moderni supportano WebP dal 2024. Converti immagini JPEG e PNG in WebP per il miglior rapporto compressione-qualità sul web.

Conserva i File Originali

Conserva sempre le tue immagini originali non compresse come file sorgente. La compressione con perdita è irreversibile — ricomprimere un'immagine già compressa degrada ulteriormente la qualità senza significativa riduzione di dimensione (nota come perdita di generazione).

Controlla la Qualità Prima di Scaricare

Usa il pulsante Confronta per ispezionare visivamente gli artefatti di compressione prima di scaricare. Presta particolare attenzione alle aree con testo, bordi netti e gradienti sottili — questi sono i punti dove gli artefatti JPEG sono più visibili.

Raggruppa Immagini Simili

Le immagini con caratteristiche simili (stesso tipo di soggetto, risoluzione, profondità di colore) si comprimono meglio con la stessa impostazione di qualità. Raggruppa le tue foto separatamente dalle tue grafiche/loghi per risultati ottimali.

Domande Frequenti