Ottimizzare immagini WordPress: guida completa

26 Luglio 2020 / Pubblicato in: , da Ivan Messina
Nessun commento

Su SupportHost ci focalizziamo sulle prestazioni del tuo sito, per questo dopo aver spiegato come velocizzare WordPress voglio spiegare come ottimizzare le immagini per il web.

Le immagini sono una parte importante per il tuo sito web. Aggiungono stile al tuo sito, ma possono appesantire la pagina, e ridurne di troppo le dimensioni le fa vedere sfocate e quindi non piacevoli.

Per questo motivo dobbiamo trovare un compromesso tra dimensioni, risoluzione e qualità. Ovviamente dopo aver scelto il giusto formato per le immagini.

In quest'articolo vedremo come fare ad ottimizzare le immagini da 1.6MB a 550KB senza perdere in qualità.

In questo articolo voglio spiegarti come ottimizzare al meglio le immagini per ottenere il massimo, sia in termini grafici che in termini di prestazioni

Se vuoi puoi vedere le operazioni che ho eseguito in questo breve video:

Ottimizzare immagini WordPress: perché farlo?

Negli anni ho avuto modo di mettere mano in siti creati da persone diverse. Uno dei problemi più comuni è quello di avere immagini pesanti, vale a dire immagini con dimensioni troppo grandi o qualità troppo alta che appesantivano inutilmente la pagina web.

Come spiegavo in un articolo precedente è importante che il tuo sito sia veloce se vuoi avere successo sul web. Allo stesso tempo è importante che le tue immagini abbiano una buona qualità dal momento che sono parte integrante della grafica, che ti permette di dare una buona prima impressione.

Compreresti mai da un sito che ha il logo sfocato? Probabilmente no!

Controllando le statistiche del web di httparchive notiamo che la pagina media nel web ha i seguenti numeri:

DimensioneRichieste
Valori medi sul web1999.9 Kb74

Notiamo che le immagini pesano per quasi il 50% quando parliamo di dimensioni e richieste:

DimensioneRichieste
Valori medi per le immagini947.1 Kb29

Un flusso di lavoro per ottimizzare al meglio le immagini del sito è facilissimo da implementare, ed è anche facile correggere le vecchie immagini in termini di dimensioni e risoluzione in modo automatico.

Ottimizzare le immagini per il web ha diversi vantaggi:

  • Dal momento che la velocità del sito rientra tra i fattori di ranking potresti avere un vantaggio SEO
  • Avrai un risparmio di spazio e traffico mensile sul tuo hosting/server
  • Migliorerai i tempi di caricamento delle pagine, specialmente su mobile, visti i limiti della connessione 3g

Qui di seguito ho eseguito un test sulla stessa pagina, usando GTmetrix, cambiando come unico parametro la connessione.

Velocita Da Desktop
Test con connessione normale
Velocita Da Mobile
Test con connessione 3G

Notiamo l'impatto che hanno le dimensioni di pagina sul tempo di caricamento quando si usa una connessione lenta.

Trovare il giusto compromesso

Prendiamo due casi limite.

Aggiungiamo alla nostra pagina una foto in altissima qualità, con 5000 px di larghezza e 4 MB di peso.

Sicuramente la qualità sarà ottimale, ma influirà pesantemente sul tempo di caricamento della nostra pagina web, specialmente con connessioni più lente.

Prendiamo la stessa foto di prima, adesso però ne riduciamo le dimensioni e la qualità fino a farla pesare 50Kb.

Sicuramente l'impatto sul tempo di caricamento sarà minimo, a spese della qualità dell'immagine che sarà sgranata e sfocata.

Dobbiamo quindi trovare un punto d'incontro far questo due casi limite in modo da trovare il miglior compromesso.

Vediamo quindi come fare.

Scegliere il formato giusto

Il nostro obiettivo è quello di trovare il giusto compromesso tra dimensioni, compressione e formato in modo da avere immagini leggere ed al tempo stesse gradevoli alla vista.

Esistono diversi formati per le immagini, ognuno adatto ad un utilizzo piuttosto che un altro.

  • png: sono immagini di ottima qualità, ovviamente a scapito delle dimensioni. Solitamente si usano per immagini con pochi colori come ad esempio il logo o le illustrazioni.
  • jpg: viene usato principalmente per le foto. Questo formato ci permette di trovare un buon bilanciamento tra le dimensioni e la qualità del file.
  • gif: questo formato immagine usa soltanto 256 colori ed è la scelta migliore per le immagini animate.
  • svg: (Scalable Vector Graphics) è supportato dai principali browsers, incluso internet explorer. Trattandosi di un formato vettoriale le immagini non sono mai sfocate e le dimensioni sono tendenzialmente ridotte. Questo formato è un'ottima scelta per la grafica del sito web, tutte le immagini che fanno parte della grafica del nostro sito web (come ad esempio il logo) sono in svg.
  • webp: è un nuovo formato sviluppato da Google che permette di ridurre le dimensioni delle immagini fino al 34% mantenendone la qualità. Ancora non è supportato completamente ma sempre più browser supportano questo nuovo formato. Tra gli ultimi ad averlo introdotto c'è safari per OSX e IOS.

Tipi di compressione

Esistono diversi tipi di compressione, sta a noi scegliere quale usare. Se vuoi fare una prova puoi usare questo strumento.

  • Lossy: questo è un tipo di filtro che elimina una parte dei dati riducendo la qualità dell'immagine. A seconda del livello la qualità può essere ridotta di molto. Usando ShortPixel ridurrai in automatico la qualità senza che si noti alcuna differenza ad occhio nudo.
  • Lossless: questo filtro comprime i dati ma non riduce la qualità dell'immagine.
  • Glossy: ShortPixel usa questa configurazione come via di mezzo tra le due sopra, questa configurazione è consigliata per i fotografi che non vogliono ridurre la qualità delle foto per ovvi motivi.

è un filtro che comprime i dati. Non riduce la qualità ma richiede che le immagini vengano decompresse prima di poter essere rese a video. È possibile eseguire una compressione senza perdita sul desktop utilizzando strumenti come Photoshop, FileOptimizer o ImageOptim.

Dimensioni immagini per il web

Una fotografia scattata con una reflex ha delle dimensioni che si aggirano sui 6000 x 4000 pixel e una risoluzione di 300 pixel per pollice. Una risoluzione di questo tipo serve per la stampa o per un ingrandimento, ma non per uno schermo.

Uno monitor in formato full HD ha una risoluzione massima di 96 dpi e dimensioni massime di 1920 x 1080 pixel.

La differenza tra le dimensioni della foto e quella del monitor è la quantità di dati superflui.

A questo dobbiamo aggiungere il fatto che raramente un'immagine nel tuo sito prenderà tutto il monitor. In linea di massima raramente avrai bisogno di immagini con dimensioni superiori a 1200 pixel o 1400 pixel, ovviamente dipende dal tema.

WordPress fa già un ottimo lavoro, penserà in automatico a ridurre le dimensioni delle immagini durante l'upload e usa un srcset per ogni immagine, ma possiamo fare di meglio. Ecco come.

Ottimizzare Immagini WordPress Guida Completa

Ottimizzare immagini WordPress in automatico

Se fai un ricerca su Google troverai una serie di post che altro non sono che una lista di plugin che ti permettono di ottimizzare le immgini in automatico.

Questo tipo di articoli sono veloci da scrivere e facili da posizionare su Google, ma aiutano ben poco l'utente, che deve scegliere un plugin in particolare ed impostarlo come si deve.

Da anni usiamo ShortPixel che offre un ottimo servizio ed un ottimo plugin ad un prezzo accessibile.

ShortPixel offre un piano gratis, dei piani a pagamento mensile e dei piani a consumo. Starà a te decidere quale utilizzare in base alle tue esigenze. Tieni presente che ogni misura di un'immagine viene considerata come un'immagine diversa. Vale a dire che se ottimizzi tutte le dimensioni il numero di immagini da ottimizzare potrebbe crescere.

Tieni presente che per la maggior parte dei siti l'acquisto di 10.000 ottimizzazioni "one time" sono più che sufficienti, ed il costo sarebbe di 9.99$. Un costo tutto sommato molto ridotto calcolando i benefici che questo plugin ci offre.

Di tanto in tanto ci sono delle offerte su appsumo a prezzi estremamente convenienti.

È ovviamente possibile ottimizzare a mano tutte le immagini, ma si tratta di un lavoro lunghissimo e che potrebbe potenzialmente generare errori.

L'uso di un plugin ci permette di eseguire un'azione massiva in tempi ridotti e con ottimi risultati. Possiamo inoltre cambiare il tipo di formato, ridurre le dimensioni delle immagini troppo grandi e usare il formato webp.

Vediamo come.

Un caso studio per l'ottimizzazione delle immagini

Prima di scrivere questo articolo ho creato un nuovo sito usando la prova gratuita che offriamo con hosting WordPress. Ho preso alcune immagini in giro per il web, alcune con piccole dimensioni, altre larghe 5000 pixel, ed aggiunto uno screenshot creato col mac, un file png di 2880 pixel di larghezza e più di 1MB di peso.

Il risultato è questo:

Ottimizzare Immagini WordPress Caso Studio
La situazione iniziale

Come prima cosa vorrei far notare che WordPress esegue una prima "ottimizzazione" nel senso che riduce le dimensioni del file, se controlli il waterfall infatti tutti i files che avevano grandi dimensioni sono stati ridimensionati a 1024 pixel di larghezza o di altezza.

Non è quello che cerchiamo ma meglio di niente.

Installazione e configurazione di ShortPixel

Come prima cosa dobbiamo installare ShortPixel, registrarci sul loro sito e richiedere una chiave API per poter usare il plugin.

Una volta ottenuta la chiave la aggiungiamo e impostiamo in plugin in questo modo, per adesso saltiamo la parte delle impostazioni avanzate, che controlleremo a breve.

Configurazione Base Shortpixel
Configurazione base ShortPixel

Adesso possiamo scorrere in basso e cliccare su "Salva e Vai all'ottimizzazione in blocco" per iniziare l'ottimizzazione delle immagini.

NOTA: prima di eseguire questa operazione controlla il resto della guida ed imposta correttamente anche la sezione "Avanzate" del plugin. Altrimenti ti troverai a eseguire l'ottimizzazione delle stesse immagini due volte e quindi usare il doppio dei crediti inutilmente. Io faccio in due passi per dimostrare come funziona.

Prima ottimizzazione

Lanciamo il processo di ottimizzazione e vediamo cosa abbiamo ottenuto.

Ottimizzazione In Corso
Ottimizzazione in corso

Dopo questa prima ottimizzazione la dimensione della pagina è passata da 1.84MB a 1.08MB. La dimensione totale delle immagini è passata da 1.6 MB a 839.9KB. Le dimensioni totali delle immagini sono quasi dimezzate.

Seconda ottimizzazione

A questo punto modifichiamo le impostazioni nel tab "Avanzate" in questo modo:

Impostazioni Avanzate Shortpixel
Impostazioni avanzate ShortPixel

Le impostazioni che ho cambiato rispetto a quelle di default sono:

  • Ho impostato il plugin in modo da convertire le immagini png in jpg, ma non se hanno la trasparenza. Per questa opzione devi vedere che tipo di immagini hai in png. Nel caso di SupportHost tutti i png sono screenshot, quindi il formato png è più adatto del formato jpg, per questo motivo non usiamo quell'opzione sul nostro sito.
  • Ho impostato ShortPixel per creare le immagini webp e per fornire le immagini webp dove compatibili. Dopo aver selezionato questa opzione shortpixel mostra un alert indicando di controllare il sito, quindi se imposti il plugin allo stesso modo controlla che non ci siano errori di nessun tipo.

Nota che in nessun caso le immagini svg che usiamo (ad esempio il logo) vengono toccate da ShortPixel

A questo punto ho eliminato i metadati, in questo modo ShortPixel non sa più che aveva già ottimizzato le immagini e possiamo farle ottimizzare di nuovo creando i formati webp.

Come dicevo prima tu non dovrai eseguire questo passaggio dal momento che lancerai l'ottimizzazione in blocco di ShortPixel soltanto dopo aver impostato tutto correttamente.

Adesso la dimensione della pagina è scesa a 827KB mentre la dimensione totale delle immagini è di 557.1KB. Un netto miglioramento rispetto alla posizione di partenza.

Conclusioni

L'ottimizzazione delle immagini è importantissima ai fini delle prestazioni. Vediamo che risultati abbiamo ottenuto da un sito "normale" (ho ripreso immagini da un altro sito, quindi immagini che normalmente troveresti in un sito non ottimizzato) dopo un lavoro di ottimizzazione.

OriginaleOttimizzazioneWebp
Dimensione totale della pagina1.84MB1.08MB827KB
Dimensione totale delle immagini1.6MB839.9KB557.1KB
Cambiamento delle dimensioni della pagina

In pochi semplici passi abbiamo ridotto a quasi un terzo il peso delle immagini, lasciando la loro qualità invariata.

Su connessioni lente questo si traduce in una riduzione sostanziale dei tempi di caricamento.

Hai fatto un test prima e dopo aver eseguito questo tipo di ottimizzazione sul tuo sito? Fammi sapere i risultati tra i commenti, per poter aggiungere altre statistiche in questo articolo.

Potrebbe interessarti anche:

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *