Codifica in modo efficace le immagini

Quando esamini le tue performance di pagina su Google Pagespeed o Gtmetrix, e guardi alle chiamate, le immagini probabilmente rappresentano la maggior parte delle dimensioni totali della pagina rispetto ai file HTML, CSS o JavaScript.

Se queste immagini non sono compresse, sprecano larghezza di banda e aumentano i tempi di caricamento della pagina perché il browser deve dedicare più tempo al download delle stesse.

La codifica efficace delle immagini riduce le dimensioni della pagina e contribuisce a velocizzare il caricamento di una pagina web.

In che modo la codifica efficace delle immagini influisce sulle prestazioni della pagina?

È probabile che le immagini non compresse vengano pubblicate con una qualità molto elevata, risultando quindi in file di grandi dimensioni.

Più grande è l’immagine, più tempo il browser impiega a scaricarla, aumentando ulteriormente il tempo che i tuoi visitatori trascorrono in attesa del caricamento della pagina.

Quando ciò accade per più immagini sulla tua pagina, le dimensioni del file possono aumentare in modo significativo e risultare in una pagina molto lenta.

La codifica efficiente delle immagini, ovvero l’utilizzo di immagini compresse, può ridurre le dimensioni dei file di ogni immagine e accelerare i download delle immagini per un caricamento della pagina più veloce.

Esistono 2 tipi di algoritmi di compressione comunemente utilizzati, vale a dire:

Compressione lossy(con perdita di dati): riduce le dimensioni dei file a scapito della qualità dell’immagine.
Compressione lossless(senza perdita di dati): riduce le dimensioni dei file senza sacrificare la qualità.

Per saperne di più, leggi il nostro articolo: Come ottimizzare le immagini

Cosa innesca il problema della “codifica efficiente delle immagini” su PageSpeed?

Google attiva questo messaggio se rileva che alcune delle tue immagini potrebbero essere ottimizzate e compresse. Rileva inoltre anche, quale immagine potrebbe essere più piccola e migliora le prestazioni.

Lighthouse scansiona le immagini visualizzate sulla pagina e imposta il livello di compressione all’85%.

Se il potenziale risparmio è pari o superiore a 4 KB, PageSpeed Insights segnala l’immagine e la contrassegna nella colonna “Risparmio potenziale”:

L’impatto delle immagini ottimizzate sulle prestazioni

La codifica efficiente delle immagini è una tecnica di ottimizzazione che consente di fornire immagini di dimensioni inferiori, caricandole più velocemente.

Le immagini non ottimizzate di qualità molto elevata spesso danno luogo a file di grandi dimensioni. Se ne hai 20 sulla tua pagina web, il tempo di caricamento probabilmente aumenterà, danneggiando l’esperienza dei tuoi visitatori.

Suggerimenti degli esperti: se il potenziale risparmio di KB è importante, questa dovrebbe essere considerata un’ottimizzazione ad alta priorità per evitare qualsiasi impatto sulla velocità del tuo sito web.

Nella sezione successiva, condivideremo le tecniche di ottimizzazione delle immagini che ti consentono di pubblicare correttamente le tue immagini sul tuo sito WordPress.

Come codificare in modo efficiente le immagini su WordPress

Esistono due modi efficaci per codificare in modo efficace le immagini e correggere questo consiglio di PageSpeed Insight: i primi due del nostro elenco. Oltre a questi, ci sono anche altri cinque passaggi che possono aiutarti a ottimizzare le tue immagini:

• Comprimi le tue immagini
• Converti immagini in WebP (formato di nuova generazione)
• Implementa il caricamento lento
• Fornisci immagini con le dimensioni corrette
• Utilizza un CDN per immagini
• Converti GIF animate in video
• Utilizza intestazioni con scadenza a lungo termine per le immagini

Esaminiamo ogni passaggio.

1. Comprimi le tue immagini

La compressione delle immagini riduce il file immagine mantenendone la qualità. Le immagini possono essere archiviate e visualizzate nella loro forma più efficiente, ovvero correttamente codificate nella pagina web.

La compressione delle immagini può essere con perdita di peso ma senza perdita di qualità(lossless). Dipende da quanto vuoi incidere sulla sua qualità.

La compressione dell’immagine dovrebbe essere quasi invisibile a occhio nudo. Ad esempio, ecco come appare un’immagine ottimizzata e non ottimizzata:

Le immagini non ottimizzate influiscono in modo significativo sulla velocità della tua pagina e rallentano il tuo sito WordPress. Per fortuna ci sono molti plugin là fuori che possono ottimizzare le tue immagini in pochi passaggi. (Vai alla nostra sezione bonus per vedere come Imagify può aiutarti).

2. Converti immagini in WebP (formato di nuova generazione)

WebP è un formato immagine di nuova generazione che fornisce un livello di compressione superiore per le immagini. Di conseguenza, le tue immagini vengono codificate meglio, aumentando il punteggio delle prestazioni nell’audit PageSpeed.

Secondo lo studio di Google, “le immagini WebP sono più piccole delle loro controparti JPEG e PNG, di solito nell’ordine del 25-35% in meno nella dimensione del file”. Nella figura seguente, possiamo vedere che WebP offre una compressione migliore rispetto al formato JPEG:

Il formato WebP funziona anche con immagini PNG trasparenti, con lo stesso risultato in termini di prestazioni: la dimensione del file è molto più leggera utilizzando il formato WebP.

se vuoi saperne di più sul formato next-gen ti consigliamo di leggere questo interessante articolo che spiega come utilizzare il formato WebP su WordPress.

3. Implementare il lazy loading

Il lazy loading può aiutarti a codificare in modo efficiente le tue immagini perché visualizza solo le immagini di cui l’utente ha bisogno.

Verranno visualizzate dal browser solo quando si trovano nel viewport dell’utente.

È una tecnica di ottimizzazione delle immagini che posticipa il caricamento delle immagini lower-the-fold per dare priorità ai contenuti più critici.

Per implementare manualmente il lazy loading, puoi aggiungere il seguente script di lazy loading sull’immagine:

“loading=lazy”

 

Se ti senti a disagio nell’aggiungere manualmente questo codice alle tue immagini, ti consigliamo di utilizzare un plugin WordPress gratuito come Lazy Load di WP Rocket.

4. Servi immagini di dimensioni corrette

Lighthouse semplifica la ricerca di immagini di dimensioni errate sul tuo sito WordPress. Ecco le risposte alle domande più comuni sulle dimensioni corrette.

Come fai a sapere che non stai utilizzando la dimensione giusta per la tua immagine?

Controlla la tua pagina su PageSpeed Insights e controlla se ricevi l’avviso “Ridimensiona correttamente le immagini”.

Come verificare la dimensione effettiva dell’immagine fornita dal browser?

Utilizza il pannello DevTools Elements di Chrome per verificare la dimensione in cui viene visualizzata un’immagine:

Qual è una buona dimensione dell’immagine?

Il tuo browser non dovrebbe mai pubblicare immagini più grandi dello schermo dell’utente (mobile, tablet o desktop). Google consiglia di utilizzare le dimensioni ottimali delle immagini, comprese quelle con il punto di pareggio, per offrire immagini completamente responsive.

In che modo ciò influisce sulle prestazioni?

Mantenere immagini che si adattino perfettamente agli schermi degli utenti garantirà che vengano caricate rapidamente sui loro dispositivi.

Per dimensionare correttamente le tue immagini ed evitare rallentamenti del tuo sito web, puoi utilizzare diverse tecniche:

• Acquista strumenti di progettazione come Photoshop o Lightroom
• Utilizza il software già installato sul tuo computer e ridimensiona manualmente ciascuna immagine
• Utilizza un plug-in di ottimizzazione delle immagini, come Imagify per ridimensionare in blocco tutte le immagini esistenti sul tuo sito:

5. Utilizzare un CDN immagini

Un altro modo per codificare in modo efficiente le immagini su WordPress è utilizzare un provider CDN affidabile. Una CDN consegnerà le tue immagini più velocemente agli utenti di tutto il mondo e aiuterà a risolvere molti problemi di PageSpeed Insights. La figura seguente mostra come RocketCDN utilizza la memorizzazione nella cache nei propri punti di presenza situati in ogni continente.

Il passaggio a un CDN di immagini può comportare un risparmio del 40–80% nella dimensione del file di immagine. Perché la percentuale di risparmio è così alta? Una CDN di immagini ti consente inoltre di ridimensionare le tue immagini per ciascun tipo di dispositivo, riducendo il consumo di larghezza di banda e migliorando le prestazioni del tuo sito.

6. Converti GIF animate in video

La conversione di una GIF animata in un video aumenterà le prestazioni perché un file video .mp4 è molto più leggero di una GIF.

– Dimensione file GIF: 5,3 MB
– Dimensione file MP4: 898 KB (molto più leggero)

Esistono molti modi per convertire le GIF in MP4. Nell’ esempio, abbiamo utilizzato due strumenti gratuiti: Photopea e il convertitore GIFTOMP4.

7. Utilizza intestazioni con scadenza a lungo termine per le immagini

Imposta un’intestazione con scadenza elevata per le immagini per garantire che il browser le conservi più a lungo. In questo modo, è necessario ricaricarli ogni volta che c’è una visita, riducendo il tempo di caricamento totale della tua pagina.

Puoi utilizzare uno strumento come WP Rocket che abilita la memorizzazione nella cache del browser (e fa scadere le intestazioni) per impostazione predefinita non appena attivi il plug-in. WP Rocket imposta tempi di scadenza ottimali per le tue immagini.

La parte finale è un piccolo bonus! Presenteremo Imagify, un potente plug-in di compressione delle immagini che codifica in modo efficiente le immagini per te. Se hai creato il tuo sito web con WordPress, anche PageSpeed Insights ti consiglia di utilizzare un plugin: