Squoosh è un'applicazione web gratuita creata dal team di Google Chrome per ottimizzare e comprimere immagini direttamente dal browser.
Cosa puoi fare con Squoosh:
- Ridurre il peso delle immagini mantenendo una buona qualità.
- Convertire formati (JPEG, PNG, WebP, AVIF, ecc.).
- Ridimensionare immagini a dimensioni specifiche.
- Regolare qualità e compressione con anteprima in tempo reale.
- Confronto "prima/dopo" con uno slider interattivo.
- Funziona offline dopo il primo caricamento (PWA).
Passo-passo: ottimizzare un’immagine con Squoosh (veloce e pratico)
Di seguito trovi una guida pratica, in italiano, per ridurre il peso di un’immagine mantenendo una buona qualità — usando Squoosh direttamente nel browser.
Prima di cominciare — cosa ti serve
- File originale ad alta risoluzione.
- Decide dove userai l’immagine (thumbnail, post, hero, social) — le impostazioni cambiano a seconda dell’uso.
- Apri il browser e vai su squoosh.app.
1) Carica l’immagine
- Trascina l’immagine nella finestra o clicca al centro per selezionarla dal disco. L’editor si apre subito.
2) Dai un’occhiata rapida (preview / confronto)
- Squoosh mostra la versione “prima / dopo” con uno slider — usalo per valutare la perdita visiva man mano che cambi le impostazioni.
3) Ridimensiona (se necessario)
- Attiva Resize e imposta la larghezza (width) in pixel adatta al tuo layout. Esempi pratici: thumbnail 200–400px, immagine di contenuto 800–1200px, hero 1.200–1.920px (adatta via srcset per responsive). Ridurre i pixel è spesso il fattore più efficace per tagliare kb.
4) Scegli il formato (codec)
- Opzioni comuni in Squoosh: AVIF, WebP, MozJPEG (JPEG), PNG / OxiPNG, ecc.
- AVIF → migliore compressione (file più piccoli) ma encoding più lento e qualche incompatibilità residua con app vecchie.
- WebP → buono compromesso (ottima compressione + supporto diffuso).
- MozJPEG / JPEG → utile per compatibilità massima. Scegli in base a compatibilità e risparmio byte: prova sempre a confronto visivo.
5) Regola qualità ed “Effort”
- Muovi lo slider Quality per trovare il punto “peso accettabile / qualità visiva”.
- Per WebP/AVIF spesso vedrai anche un controllo Effort (o simile): aumenta l’effort per una compressione più accurata (ma più lenta). Se vuoi il massimo risparmio di byte accetta tempi di codifica più lunghi; se servono molti file rapidamente tieni effort basso.
6) Ottimizzazioni avanzate (quando servono)
- Quantize / Reduce palette: utile per illustrazioni o PNG con pochi colori (riduce la tavolozza e il peso).
- Progressive JPEG / Chroma subsampling / Dithering: disponibili per alcuni formati; agiscono su qualità e dimensione — prova e confronta.
- Attenzione: AVIF può dare file molto piccoli ma impiega molto più tempo a codificare rispetto a WebP/JPEG.
7) Controlla metadati (EXIF)
- Squoosh di norma non preserva tutti i metadati EXIF (molti utenti lo usano anche per rimuovere metadata prima di pubblicare). Se devi conservare EXIF (es. per archiviazione fotografica), considera un passaggio separato con exiftool o strumenti che mantengono i metadati.
8) Scarica e prova
- Scarica il file ottimizzato e testalo nel contesto reale (pagina web, anteprima social, ecc.). Confronta con l’originale: se noti artefatti, alza un po’ la quality o scegli un codec diverso.
Impostazioni “quick” consigliate (punti di partenza)
- Thumbnail/avatar: width 200–400 px, formato WebP, quality 60–75.
- Immagine contenuto / blog: width 800–1200 px, WebP o AVIF, quality 65–80.
- Hero / full-width: width 1.200–1.920 px (servire vari formati con srcset), WebP/AVIF, quality 65–80.
Nota: le percentuali di quality sono un punto di partenza: controlla sempre visivamente.
Se hai molte immagini (batch / automazione)
- Squoosh è ottimo per singoli file; per processi in massa usa strumenti da riga di comando o librerie: @squoosh/cli (fork/varianti), sharp (Node), imagemin o GUI come ImageOptim per macOS. Queste soluzioni possono essere integrate nella tua pipeline di build (CI) o nello script di deploy.