Ottenere altissimi livelli di compressione immagini con TinyPNG e Webp

Le immagini sono la componente più pesante di un sito web. A dimostrarlo è una ricerca condotta httparchive.org che riporta come nel 2017 più della metà della dimensione di un sito web è rappresentata da immagini.

Per i siti che ne fanno un grosso uso, come gli e-commerce, la compressione delle immagini è una pratica di performance fondamentale per velocizzare la visualizzazione della pagina e ridurre il tempo di download.

Diversi sono gli strumenti che consentono di ottenere gradi di compressione delle immagini elevati ma oggi vedremo una tecnica per ottenere un livello di compressione in alcuni casi superiore al 90%!

Per ottenerlo utilizzeremo il tool gratuito TinyPNG ed il nuovo formato di immagini WebP.

TinyPNG

TinyPNG utilizza è uno dei migliori compressori di immagini online. Utilizza la tecnica smart lossy compression che consente di ridurre il numero di colori dell’immagine con effetti all’occhio quasi del tutto invisibili.

Può essere utilizzato per comprimere immagini PNG e JPEG.

TinyPNG mette a disposizione un plugin per WordPress gratuito che consente di comprimere in modalità batch, ovvero automaticamente in una volta sola, tutti le immagini della media library.

E non solo: le immagini caricate di volta in volta saranno automaticamente compresse.

WebP

WebP è il nuovo formato di immagini pensato per il web sviluppato da Google, che consente di ottenere elevati livelli di compressioni.

Paragonata a PNG, un’immagine WebP presenta un peso minore di circa il 26%, per arrivare fino anche al 34% rispetto ad immagini JPEG.

Sebbene supportato nativamente solo da Google Chrome ed Opera, il supporto a WebP può essere esteso alla maggior parte del browser integrando lo script Javascript WebPJS. Per WordPress è disponibile il plugin wp-webp.

Compressione combinata

Iniziamo il nostro processo di compressione! Per notare le differenze effettueremo le compressioni sulla seguente immagine HD dal peso di 406,9 KB.

Come prima cosa colleghiamoci al sito di TinyPNG, effettuiamo l’upload dell’immagine. A questo punto partirà il processo di compressione che terminerà con un Panda felice che ci comunicherà il grado di compressione ottenuto e ci inviterà al download dell’immagine compressa.

In questo caso abbiamo ottenuto un grado di compressione del 68%. Il nuovo peso dell’immagine è di 130,6 KiB. 

Com’è possibile notare non esiste reale differenza visibile all’occhio umano, nonostante l’immagine restituita da TinyPNG sia tre volte più leggera rispetto all’originale.

Adesso procediamo alla conversione dell’immagine in formato WebP. Per farlo possiamo utilizzare questo tool online oppure anche il convertitore cwebp di Google disponibile per Linux, Mac e Windows.

Per comodità utilizziamo il tool online che ci chiederà di effettuare l’upload dell’immagine, ovvero quella ottenuta da TinyPNG, e di settare il livello di qualità, che va settata in 80 (ottanta).

Basterà cliccare su Convert ed il browser scaricherà automaticamente l’immagine convertita con estensione .webp. Eccola:

La nuova immagine ha un peso di appena 76.6 KB, un risparmio di 330.3 KB rispetto all’immagine originale. In termini di compressione abbiamo ottenuto un diminuzione del peso del 81.9%.

Ma perché non convertire direttamente l’immagine originale in WebP? Bella domanda! Dopo aver effettuato centinaia di conversioni mantenendo inalterato il livello di qualità WebP, noterete dei difetti visibili all’occhio umano e non è quello che vogliamo ottenere.

Passando da TinyPNG questo difetto scompare con il risultato che riusciremo ad ottenere immagini anche più leggere pur mantenendo inalterata la qualità!

In un articolo successivo vedremo come convertire in WebP tutte le immagini ospitate sul nostro server e su WordPress, per consentire di iniziare a servire comodamente immagini WebP ed ottenere elevati livelli di prestazioni.

Sei riuscito ad ottenere compressioni anche migliori? Condividi le tue esperienze commentando questo articolo!