Google PageSpeed: Pubblica immagini in formati più recenti (3 metodi)

Se hai analizzato la velocità del tuo sito web tramite lo strumento Google PageSpeed Insights avrai notato l’avviso “Pubblica immagini in formati più recenti“.

Quali sono le immagini in formati più recenti?

• JPEG 2000
• JPEG XR
• WebP

JPEG 2000, JPEG XR, e WebP sono formati di immagini che hanno una compressione e qualità maggiore rispetto alle immagini meno recenti come JPEG e PNG. Salvare o convertire le immagini in questi formati più recenti significa ottenere un sito più veloce che consuma meno dati.

Se hai bisogno di ottimizzare il tuo sito vai al mio servizio online: Servizio di ottimizzazione velocità WordPress.

Cos’è il formato WebP? E perché dovrei usarlo?

Il formato WebP è supportato da Chrome, Firefox, Opera, Edge e browser Android (vedi qui la lista dettagliata dei browser supportati). Permette di ottenere una compressione con meno perdita di qualità e un peso minore. Le immagini WebP sono più leggere del 26% rispetto alle immagini PNG e 25-34% rispetto alle immagini JPEG.

E’ un formato che supporta anche l’animazione e la trasparenza (noto anche come canale alfa). Puoi convertire una GIF in WebP e ridurre il peso fino al 90%.

Puoi convertire una PNG mantenendo la trasparenza al costo di appena il 22% di byte aggiuntivi. Nei casi in cui la compressione RGB con perdita di dati è accettabile, la perdita di WebP supporta anche la trasparenza, in genere fornendo file di dimensioni 3 volte inferiori rispetto a PNG.

Risolvere l’avviso “Pubblica immagini in formati più recenti” (3 metodi)

Metodo 1: Converti le immagini manualmente

Esistono numerosi siti web per convertire le immagini in WebP direttamente online:

• WebP Coverter
• Zamzar
• Ezgif
• Covertio

Tuttavia non tutti i browser supportano le immagini in formati più recenti come WebP e alcuni utenti potrebbero ancora navigare con software non ancora aggiornati. Per raggirare questo problema, esistono numerosi plugin per WordPress che mostrano le immagini WebP solo ai browser supportati. Uno di questi é WebP Express.

Metodo 2: Utilizza il plugin WebP Express

Il plugin gratuito WebP Express permette di servire le immagini WebP in 4 modalità diverse:

• Varied image responses
• CDN Friendly
• No conversion
• Tweaked

Varied image responses

Con la modalità “varied image responses” il server mostrerà il file WebP ai browsers supportarti, altrimenti mostrerà l’immagine originale.

Potete scegliere di convertire le immagini JPG e PNG da tutto il sito web oppure solo da alcune cartelle. Nel mio caso ho scelto di convertire le immagini JPG dalla cartella “uploads” e le immagini del tema.

Se viene impostata la cartella di destinazione come separata (in separate folder), il plugin metterà le immagini convertite nella sua cartella (wp-content/webp-express/webp-images/doc-root). Se invece viene impostata la stessa cartella di provenienza dell’immagine (mingled) il plugin lascerà le immagini convertite insieme a quelle originali, tranne per le immagini del tema. Se utilizzi il plugin Cache enabler o Shortpixel, scegli l’opzione “mingled”. Se deciderai di cambiare questa impostazioni, le immagini WebP già esistenti verranno spostate.

Nella sezione “Cache-Control header” potete impostare per quanto tempo l’immagine WebP deve essere conservata nella cache del browser.

Le impostazioni verranno salvate nel file .htaccess del vostro sito WordPress se usate un server basato su Apache, LiteSpeed o OpenLiteSpeed. Se il vostro server è basato su Nginx, devi editare manualmente il file nginx.config e aggiungere questo codice:

# WebP Express rules
# --------------------
location ~* ^/?wp-content/.*\.(png|jpe?g)$ {
add_header Vary Accept;
expires 365d;
if ($http_accept !~* "webp"){
break;
}
try_files
/wp-content/webp-express/webp-images/doc-root/$uri.webp
$uri.webp
/wp-content/plugins/webp-express/wod/webp-on-demand.php?xsource=x$request_filename&wp-content=wp-content
;
}

# Route requests for non-existing webps to the converter
location ~* ^/?wp-content/.*\.(png|jpe?g)\.webp$ {
try_files
$uri
/wp-content/plugins/webp-express/wod/webp-realizer.php?wp-content=wp-content
;
}
# ------------------- (WebP Express rules ends here)

Metodo 3: Pubblica immagini in formati più recenti tramite un CDN

Se avete sottoscritto un abbonamento con un CDN (Content Delivery Network) potete attivare la conversione delle immagini in WebP.

Il piano CloudFlare Pro tramite la funzione Polish permette di convertire le immagini in WebP.

Altri CDN che supportano il formato WebP sono BunnyCDN e KeyCDN.

CONCLUSIONE

Se avete un sito web ricco di immagini e Google PageSpeed Insights vi segnata l’errore “Pubblica immagini in formati più recenti” è vivamente consigliato l’utilizzo nel formato WebP, il quale permette il maggiore livello di compressione delle immagini.