Come ottimizzare le immagini online con Google Squoosh

Come usare la browser app Google Squoosh per comprimere le foto e renderle meno pesanti per velocizzare le pagine web e risparmiare banda

Nei mesi scorsi mi sono occupato molto attivamente del tema della compressione delle foto pubblicate nei siti e nelle pagine web in genere. Poter abbassare il peso delle immagini, mantenendo una buona qualità delle foto, consente dei vantaggi riguardo alla velocità di caricamento della pagina e al consumo di banda (per chi usa Wordpress).

Ho pure fatto dei test di cui ho condiviso il risultato. Il miglior modo per comprimere le foto è quello di usare il tool nativo di Photoshop, denominato Salva per il web. Nel test veniva compressa una stessa immagine JPG con Gimp e RIOT, con Photoshop, con Caesium, con XnView e RIOT e con JPG Optimizer.

Se siete utenti di Blogger, c'è la buona notizia che la compressione delle foto, prima che vengano caricate sui server di Google, non serve più tanto. Dai test che ho effettuato, risulta infatti che le immagini, caricate su Blogger e poi scaricate con il destro del mouse, risultano avere la stessa pesantezza delle stesse immagini precedentemente ottimizzate. Rimane importante ridimensionare le foto, per pubblicarle della larghezza supportata dal layout della pagina. Se abbiamo un'area del post larga 700 pixel, dobbiamo caricare immagini non più larghe di quel valore, perché è tutto peso aggiuntivo che può essere risparmiato.

Google è da sempre attentissimo al tema della velocità di caricamento delle pagine web e il peso delle immagini è uno dei fattori che più la rallentano. Ha quindi messo a punto uno strumento per ridurlo, mantenendo buona la qualità delle foto. Tale tool è una browser app messa a punto dal GoogleChromeLabs e pubblicata su GitHub.

Squoosh è il nome di questa app che funziona in modo molto intuitivo. Si trascina una foto con il drag&drop nell'area dello strumento. L'immagine verrà immediatamente visualizzata nella scheda del browser. Offre varie tecniche di compressione con molteplici opzioni di controllo. Essendo uno strumento basato su browser, ti consente di provare rapidamente varie modifiche per ottenere la migliore compressione in base alle tue esigenze.

Al centro dell'immagine sarà mostrata una retta verticale con un cursore per spostarla orizzontalmente. Sulla sinistra viene visualizzata l'immagine originale e sulla destra quella ottimizzata. Nel test p.e. si ottiene una immagine di una qualità identica, se confrontata con occhio umano, con un peso che viene ridotto dell'86%.

Si può agire sugli strumenti presenti sulla destra, per applicare le varie opzioni di compressione e avere immediatamente l'anteprima del risultato finale. Vediamo i singoli strumenti:

1. Resize - per diminuire la larghezza della immagine mantenendone l'aspect ratio. Si possono anche impostare i metodi di ridimensionamento: alta, media o bassa qualità oltre alla pixellatura.
2. Riduzione del colori - permette di ridurre il numero dei colori dagli originali 256.
3. Compressione - per scegliere il formato di uscita: MozJPEG, OptiPNG, WebP, Brwoser PNG, Browser JPEG, Browser WebP o Immagine Originale.
4. Qualità - con il cursore per impostare la qualità di uscita in percentuale

Cliccando su Show Advanced Settings vengono mostrati altri tool su cui intervenire:

1. Canali - YCbCr, RGB e scala di grigi (Greyscale).
2. Separazione delle qualità cromatiche
3. Rendering progressivo
4. Smoothing - levigatura con cursore
5. Quantizzazione

Nella parte bassa verrà mostrato il peso della immagine risultante con la percentuale di guadagno. Si clicca sul pulsante in basso a destra a forma di freccia verticale, per il download della foto ottimizzata. Per una migliore valutazione si può agire sullo zoom dalla rotellina del mouse e si può riposizionare la foto.