Non importa quanto sia ottimizzato il tuo sito web, le immagini saranno sempre uno degli elementi a caricamento più lento sulla pagina. Se vuoi rendere veloce WordPress, dovrai implementare una strategia che miri specificamente alle immagini, altrimenti nota come ottimizzazione delle immagini in WordPress.
Nel post di oggi condividiamo sei rapidi suggerimenti per ottimizzare le immagini riducendo le dimensioni dei file, tutto a favore della velocità.
Se vuoi un sito WordPress veloce, continua a leggere!
1. Scegli il tipo di file giusto
Quando si utilizza Photoshop e altri software di modifica delle immagini, è possibile specificare il tipo di file che si desidera salvare. La stragrande maggioranza delle immagini online rientra in due formati di file: JPEG e PNG.
Quindi quale dovresti usare? Dipende. Entrambe le opzioni presentano vantaggi e svantaggi e la scelta giusta dipende in gran parte dallo scenario.
- JPEG – JPEG è l’opzione migliore per fotografie e altre immagini che mostrano una grande varietà di colori. Possono anche essere compressi, sacrificando la qualità per una riduzione delle dimensioni del file.
- PNG – I PNG sono ottimi per grafica, disegni, testo e alcuni screenshot. Supportano anche la trasparenza, a differenza dei JPEG. Questo formato utilizza la compressione senza perdita di dati, il che si traduce in una qualità superiore ma anche in file di dimensioni più grandi.
Di solito, il formato del file è determinato dal tipo di immagine con cui stiamo lavorando, come indicato sopra. Tuttavia, qual è la conseguenza della scelta del formato file errato , in termini di dimensioni del file?
Bene, diamo un’occhiata ad alcuni scenari per verificarlo.
Questo screenshot full-size della mia dashboard di WordPress era 170kb in formato PNG e 253kb come JPEG. Ricorda, gli screenshot sono di solito il dominio dei PNG: i JPEG sono circa il 75% più voluminosi.
Invece, la versione a grandezza naturale di questa foto scattata da me restituisce risultati opposti. La foto in formato JPEG è 1.26mb; il PNG un enorme 7.23mb. Ciò significa che il PNG è più grande del 550% .
Ciò dimostra quanto sia importante il giusto formato di file per la dimensione delle tue immagini. Se proprio devi scegliere, attieniti alla seguente regola: foto e immagini con tanti colori, JPEG; tutto il resto, PNG.
2. Ridimensiona le immagini
Quando si riducono le dimensioni di un’immagine, si riduce la dimensione del file. Senza eccezioni.
Per mantenere il tuo sito leggero e agile, assicurati di ridurre le dimensioni fisiche delle immagini il più possibile, in genere alle dimensioni in cui desideri visualizzare le immagini. Se la larghezza massima del tuo sito web è, diciamo, 1000 pixel, non c’è motivo di caricare un’immagine più larga di 1000 pixel. Immagini con dimensioni più grandi del necessario portano con se una massa di dati superflui, rendendo più difficile eseguire correttamente l’ottimizzazione delle immagini in WordPress.
Anche se la funzione di anteprima (thumbnail) di WordPress può visualizzare immagini di dimensioni inferiori, ciò non modifica le dimensioni del file alla base dell’immagine in questione. Ovviamente, un’eccezione può essere fatta per i fotografi e altri artisti, che potrebbero voler visualizzare una miniatura che si collega al loro lavoro a grandezza naturale e ad alta risoluzione.
Ancora una volta, permettimi di dimostrare il tipo di risparmio che puoi realizzare.
La versione full-size della mia precedente fotografia ha dimensioni di 2592 x 1456 pixel ed è 1,26mb. Tuttavia, vediamo quanto si riduce la dimensione del file quando ridimensiona l’immagine su diverse larghezze.
Un esempio di ottimizzazione delle immagini in WordPress:
- Larghezza 1200 pixel: 394kb
- Larghezza 1000 pixel: 298kb
- Larghezza 800 pixel: 219kb
- Larghezza 600 pixel: 154kb
Come puoi vedere, i risparmi di dimensioni sono davvero sbalorditivi!
Per ridimensionare le immagini in modo rapido , puoi installare Optimole sul tuo sito WordPress che farà tutto con il pilota automatico. Inoltre, il plugin permette con il ridimensionamento delle immagini per una visualizzazione ottimale , il che significa che le immagini non vengono caricate a dimensione intera, ma si adattano alla viewport di ogni utente. In altre parole, Optimole carica le dimensioni dell’immagine perfette, indipendentemente dal dispositivo o dalle dimensioni dello schermo che stai utilizzando .
3. Ritaglia le immagini
Il ridimensionamento delle immagini è il modo rapido e semplice per ridurre le dimensioni del file perchè crea una replica esatta della tua immagine dove tutto è più piccolo.
Ridurre un’immagine oltre un certo punto significa che alcuni elementi saranno visibili a malapena. Ciò è particolarmente problematico quando il punto focale di un’immagine non è molto chiaro.
Il ritaglio è l’alternativa al ridimensionamento. Invece di ridurre l’intera immagine, stai essenzialmente tagliando i bordi, come usare un paio di forbici su una fotografia. La parte dell’immagine che stai cercando di mostrare diventa più prominente e riduci tutte le distrazioni dallo sfondo.
Ecco una dimostrazione di come ritagliare un’immagine possa essere migliore del semplice ridimensionamento, usando uno screenshot di WordPress.
L’immagine ridimensionata:
L’immagine ritagliata:
Naturalmente, il vantaggio del ritaglio è che, proprio come il ridimensionamento, riduce le dimensioni dell’immagine, taglia le dimensioni del file ed è quindi un ottimo modo per eseguire l’ottimizzazione dell’immagine in WordPress.
4. Qualità dell’immagine inferiore (compressione con perdita)
Quando hai finito di ritagliare e ridimensionare le immagini, puoi goderti ulteriori riduzioni della dimensione del file comprimendole. Questa tecnica è particolarmente efficace e diffusa per i JPEG, sebbene anche i PNG possano essere compressi.
JPEG supporta un tipo di compressione chiamata compressione con perdita . Ciò significa che alcuni dei dati dell’immagine vengono eliminati per ridurre le dimensioni del file.
Ad esempio, se due pixel adiacenti mostrano una piccola differenza di colore, ce la caviamo rendendoli uguali. Il cambiamento è appena rilevabile ad occhio nudo, ma avere meno colori mantiene le dimensioni del file basse.
Quando si salva un file JPEG utilizzando un software di modifica delle immagini, verrà richiesto di selezionare un punteggio di qualità compreso tra 0 e 100. Questo è essenzialmente un compromesso tra qualità dell’immagine e dimensione del file.
- Punteggio più alto: compressione più bassa; qualità migliore; file di dimensioni maggiori.
- Punteggio più basso: compressione più alta; bassa qualità; dimensione del file inferiore.
In generale, piccoli cambiamenti nel punteggio di qualità fanno poca differenza per la qualità complessiva della tua immagine. In effetti, è improbabile che i tuoi visitatori possano distinguerla.
Per illustrarlo, guarda le due foto seguenti. Una ha un punteggio di qualità di 100, uno di 80. Quali sono?
Ottimizzazione dell’immagine fotografia WordPress A:
Fotografia B:
La fotografia A ha il punteggio di qualità di 100.
È difficile notare la differenza, giusto? Tuttavia, quando si tratta di dimensioni dei file, la differenza è il giorno e la notte: 350kb contro 150kb.
Tuttacia, non potrai continuare a ridurre la qualità per sempre, perchè, ad un certo punto, noterai ad occhio nudo il calo di qualità. L’immagine seguente ha un punteggio di qualità di 20:
Certo, la dimensione è di soli 50kb, ma con una qualità del genere non lo vorrei sul mio sito.
Ora, non esiste una regola di base per il livello di compressione perfetto. Tuttavia, controintuitivamente, più complessa è l’immagine, più si riesce a ridurre la qualità sulla strada per la massima ottimizzazione dell’immagine in WordPress.
5. Servire le immagini da una CDN
Tutto accade in un attimo online, giusto? Beh, in realtà no. Le distanze geografiche tra la posizione di un visitatore e il server del tuo sito web hanno un impatto sulla velocità del sito: maggiore è la distanza, maggiore è l’attesa.
Per risolvere questo problema di latenza, considerare l’installazione di una CDN. Le CDN memorizzano il tuo sito web su più server sparsi in tutto il mondo, quindi collegano i tuoi visitatori a quello geograficamente più vicino a loro. Risolti i problemi di latenza, il tuo sito web viene pubblicato più rapidamente.
Se vuoi velocizzare WordPress, sarai felice di sapere che il plugin Optimole viene fornito con la sua CDN gratuita – solo per le immagini.
Tutto quello che devi fare è installare e attivare il plugin Optimole e Voilà : le tue immagini verranno visualizzate in tempi record.
6. Lazy Loading
Per impostazione predefinita, il software WordPress tratta tutte le immagini allo stesso modo. Tuttavia, questo è chiaramente un uso inefficiente delle risorse soprattutto se vuoi fare qualsiasi ottimizzazione delle immagini in WordPress.
Dopotutto, un’immagine nella parte inferiore della pagina sarà vista molto più tardi dell’immagine nella parte superiore della pagina – la prima immagine non merita priorità?
La priorità delle immagini è esattamente ciò che consente il Lazy Loading. Le immagini nella parte superiore della pagina hanno la priorità, mentre le immagini above the fold vengono caricate solo quando il visitatore scorre la pagina. Ciò rende il Lazy Loading l’ equivalente “just in time” del caricamento della pagina web.
Se vuoi usare il Lazy Loading per accelerare WordPress, Optimole ti darà di nuovo una mano. La cosa interessante di questo plugin è che offre funzionalità di segnaposto per immagini di bassa qualità, ovvero il Lazy Loadind di un’immagine intermedia di bassa qualità fino a quando l’immagine a dimensioni intere non viene visualizzata interamente .
Conclusioni
E questo conclude la nostra carrellata di sei rapidi suggerimenti che ti aiuteranno con l’ottimizzazione delle immagini in WordPress. Come puoi vedere, combinando molte di queste strategie, puoi risparmiare notevolmente sulle dimensioni dei file delle tue immagini. I tuoi visitatori ti adoreranno per questo – e il tuo sito web si caricherà molto più velocemente!
Buon lavoro!
