Oggi parleremo di un argomento che mi sta a cuore: la compressione delle immagini! Sto scherzando, ma c'è qualcosa di stranamente soddisfacente nel ridurre enormi percentuali delle dimensioni di un file immagine senza diminuirne la qualità.

L'ispirazione per questo post è nata da un post molto popolare nel gruppo Facebook di Beaver Builders. Avevo appena filmato un video tutorial sull'attivazione e l'utilizzo del nuovo algoritmo Guetzli di Google in ImageOptim e sono rimasto scioccato da tutte le altre opzioni con cui non avevo familiarità. In questo articolo parleremo di alcuni suggerimenti e strumenti per comprimere le immagini per il web.

Terminologia iniziale

Prima di approfondire, stabiliamo una terminologia comune.

JPEG, PNG, SVG : questi sono i tre tipi di file immagine più popolari sul web. Per questo tutorial, ci concentreremo principalmente su JPEG e PNG poiché beneficiano maggiormente della compressione e dell'ottimizzazione.

I JPEG sono generalmente migliori per immagini ad alta fedeltà come foto e grafica web che non hanno alcuna trasparenza.

I PNG sono ottimi per cose come icone e loghi o qualsiasi cosa che richieda trasparenza. I PNG possono anche essere ottimizzati in modo significativo dopo essere usciti da Photoshop o dallo strumento di editing grafico preferito.

Lossless e Lossy – Questi sono metodi di compressione. La compressione senza perdita significa che la tua immagine non perderà alcuna qualità. Letteralmente nessuno. Ciò comporta la rimozione dei metadati dall'immagine o di qualsiasi cosa che non influisca sulla qualità.

Con perdita significa che l'algoritmo di compressione ridurrà la qualità dell'immagine. Otterrai risultati di compressione migliori ma sacrificherai la qualità dell'immagine. La maggior parte degli strumenti di compressione con perdita fornisce un cursore percentuale in modo da poter scegliere il bilanciamento tra qualità e dimensione del file.

Consiglio dell'esperto: per sfondi di immagini di grandi dimensioni, spesso sfuoco leggermente l'immagine o aggiungo uno strato di colore opaco sulla foto. Ridurre il dettaglio e/o normalizzare il colore è una bella scelta di stile estetico che riduce notevolmente le dimensioni del file. Puoi vederlo in azione sulla nostra pagina dei lavori.

Quanto dovrei comprimere le immagini?

L'obiettivo della compressione delle immagini è ridurre il più possibile le dimensioni del file senza sacrificare troppo la qualità. Si tratta più di un'arte che di una scienza e il livello di "qualità accettabile" varierà a seconda della situazione.

Uno studio fotografico probabilmente vorrà mettere in risalto il proprio lavoro con la massima qualità, mentre un sito web immobiliare potrebbe essere disposto a sacrificare la qualità in cambio della visualizzazione di più immagini sulla pagina.

La maggior parte dei software di editing delle immagini consente di esportare immagini con qualità variabile. Tuttavia, se utilizzi uno strumento di compressione delle immagini dedicato, a volte è meglio fornire a quel software la migliore qualità possibile e lasciare che gli algoritmi di compressione funzionino da lì.

Opzioni degli strumenti di compressione delle immagini

Come ho scoperto di recente, le opzioni non mancano quando si tratta di strumenti e servizi per la compressione delle immagini.

ImageOptim

Ho iniziato con, e preferisco ancora, ImageOptim. ImageOptim è disponibile solo su OSX, ma supporta la compressione con e senza perdita di dati sia per i file JPEG che PNG. Può anche essere configurato per utilizzare l'algoritmo di compressione relativamente nuovo di Google, Guetzli. Guetzli, in media, può ridurre le dimensioni dei file del 20-30% in più rispetto ad altri algoritmi.

ImageOptim è un programma che risiede nel Dock del tuo Mac e puoi semplicemente trascinare e rilasciare le immagini sull'icona del programma e lui le comprimerà. Tendo a ottimizzare una o due immagini alla volta, quindi questa soluzione funziona benissimo per me. Tuttavia, se stai lavorando su un numero elevato di immagini o immagini con file di grandi dimensioni, alcune delle altre opzioni potrebbero essere una scelta migliore per lavori di grandi dimensioni.

Smush di WPMU Dev

Smush è un plugin WordPress gratuito di WPMU Dev che può essere configurato per ottimizzare le immagini esistenti nell'installazione di WordPress e/o mentre le carichi su WordPress. Smush è fantastico perché il lavoro pesante viene svolto dai server di WPMU Dev e ottimizzano e ridimensionano le immagini.

Se stai creando siti Web per i clienti, in particolare quelli a cui piace caricare immagini da diversi megabyte direttamente dalla propria fotocamera digitale, Smush è un'ottima opzione da impostare e dimenticare.

TinyPNG

TinyPNG è un compressore di immagini basato sul web. Puoi caricare le tue immagini (fino a 5bm) e scaricare la versione compressa. Ciò utilizzerà la larghezza di banda, quindi potrebbe non essere l'opzione migliore se utilizzi una connessione Internet lenta o a pagamento. Supporta i tipi di file JPEG e PNG. È gratuito. Non sembra offrire alcun controllo sul livello di qualità della compressione.

Dopo aver giocato con TinyPNG, penso di preferire ancora ImageOptim, ma sarebbe un'ottima opzione per gli utenti Windows, lavori rapidi una tantum o utenti che cercano specificamente un compressore basato sul web. Oppure, se stai tentando di scaricare l'elaborazione sul cloud anziché sul tuo computer locale.

Immagina

Imagify è un'altra opzione SASS basata sul web che fornisce un plugin WordPress dedicato per ottimizzare e ridimensionare le immagini mentre le carichi o direttamente dall'area di amministrazione di WordPress. Il plugin Imagify WordPress vanta un'impressionante recensione media di 4,5 stelle e molte recensioni sottolineano che la qualità dell'immagine ottenuta con Imagify è migliore rispetto alle alternative.

Imagify ha un piano gratuito che ti consente di caricare e ottimizzare immagini inferiori a 2 MB. La versione ottimizzata delle immagini rimarrà disponibile per il download dai loro server per 24 ore.

JPEG Mini

JPEGMini è un servizio SASS che dovrebbe attrarre le persone che cercano una soluzione da lavoro. Immagina di avere il compito di ottimizzare decine di migliaia di immagini di prodotti ad alta risoluzione per un negozio di e-commerce. JPEGMini ti consentirebbe di scaricare tutta l'elaborazione sui loro server cloud, presumibilmente veloci e ottimizzati.

ShortPixel

ShortPixel è un altro SASS basato sul web. Se stai cercando di scaricare la compressione delle immagini su un server cloud, è un'ottima opzione da provare. Il loro piano gratuito ti consente di ottimizzare fino a 100 immagini al mese e hanno piani premium a partire da $ 5 al mese per ulteriori. ShortPixel ha anche un plugin per WordPress e sono i preferiti dal resto del team BB.

Immagina

Qual è il tuo preferito?

Se visiti il ​​thread Facebook originale che ha ispirato questo post, vedrai molte altre opzioni e persone che preferiscono l'una o l'altra per una serie di motivi. Ci manca il tuo preferito? Fateci sapere di cosa si tratta e perché vi piace nei commenti.

Inoltre, se sei il tipo che mangia, dorme e respira la performance, questa intervista con Jon Brown sulle migliori pratiche per la performance moderna probabilmente ti piacerà.