Guida all'ottimizzazione SEO dei file immagine WebP

Ben ritrovati su questi lidi!

La velocità dei siti web è sempre più un fattore di gradimento cruciale per gli utenti, e in molti casi influisce direttamente sulla possibilità di posizionarsi a discapito dei propri concorrenti.
Come sappiamo, tempi di caricamento superiori a 3 secondi rendono la permanenza degli utenti nel sito una scommessa.

[toc]

Google è sempre in prima linea per fornire ammonimenti, guide e risorse per incentivare gli sforzi degli sviluppatori in direzione di un continuo miglioramento delle performance dei siti, e per ridurre i tempi di caricamento da mobile. Lighthouse SEO ci offre una buona serie di suggerimenti per agire su quei fattori che ritardano la visualizzazione delle pagine web.

Tra i parametri adottati dai tool della suite Google per verificare l’efficacia delle risorse c’è anche il “Serve Images in Next-Gen Formats”, ovvero il fornire le immagini nei formati Next-Gen.
Le ultime versioni del tool Lighthouse, a quanto pare, rilevano come non ottimizzate quelle immagini nei vecchi formati che impattano negativamente sulla velocità di caricamento.

Dato che ogni introduzione che viene incontro alle esigenze di rapida visualizzazione da mobile è bene accetta, scopriamo cosa è il formato WebP e come implementare le immagini con queste caratteristiche per migliorare le prestazioni del nostro sito web.

Contenuti Nascondi

1 Quali sono i vantaggi SEO di Webp?

2 Come implementare le immagini WebP

2.1 Post simili:

Quali sono i vantaggi SEO di Webp?

Il formato Next-Gen, a parità di qualità, permette di offrire immagini di dimensioni minori e perciò più rapide da caricare. Oltre a una maggiore compressione, offre anche una resa visiva più efficace degli equivalenti tradizionali. Il WebP è uno dei principali formati Next-Gen, anche se non tutti i browser riescono a visualizzarlo.

WebP è un formato di compressione lossless o loosy che permette di risparmiare il 30% delle risorse rispetto ai convenzioni JPEG. Viene supportato di Chrome, Firefox, Opera ed Edge.

WebP è un formato che permette di comprimere le immagini con maggiore efficacia dei formati fino a ora diffusi garantendo un’ottima qualità visiva.
Implementare o convertire le immagini WebP permette di dare una bella spinta ai tempi di caricamento delle immagini, ma per attivarle è necessario gestire attentamente le loro impostazioni.

Come implementare le immagini WebP

Poiché questo formato è così recente, l’implementazione delle immagini in WebP non è proprio una cosa scontata: per ogni immagine deve essere indicato a livello di codice sia il formato WebP (per i browser di ultima generazione) che quella tradizionale jpg o png per i browser di vecchia generazione.

WordPress purtroppo non è concepito per implementare in maniera nativa le immagini WebP.
Per implementare le immagini WebP nei siti WordPress possiamo utilizzare tuttavia vari plugin e metodologie.

WebP Express ricorre alle ordinarie librerie di elaborazioni immagini per convertire i formati tradizionali in WebP, e per convertire il codice necessario per mostrare l’immagine nel formato adeguato.

Questo plugin permette di definire:

se attivare un redirect ai formati tradizionali quando quello WebP non e visualizzabile
il modo specifico con cui convertire le immagini
la libreria grafica da utilizzare la conversione

Tuttavia, c’è sempre il rischio di scontare qualche conflittualità o errore, nonché di una certa capacità pratica di implementazione delle appropriate configurazioni. Sempre meglio fare il backup!
Inoltre, non è scontato che i comuni hosting abbiano già implementato le librerie grafiche necessarie per la conversione, perciò all’uopo può rendersi necessario contattarli per chiedere di integrarle.

In alternativa ci sono soluzioni freemium come Imagify che permettono di convertire le immagini e al contempo di serbare in backup la versione tradizionale.

Se si vuole lavorare direttamente a livello di codice da convertire si può scaricare da GitHub la soluzione chiamata WebP on demand, che è alla base anche di molti plugin.

Una soluzione molto semplice per implementare lato codice di inserire le immagini che possano essere consultate in formato WebP consiste nell’utilizzare il tag <picture> anziché <img> : questo tag infatti permette di contemplare più fonti in modo da permettere al browser di scegliere. Possiamo adottare una sintassi del tipo:

</picture>

per contrassegnare le immagini sia nella versione WebP che JPEG.

Inoltre, nella sezione degli sviluppatori, Google mette a disposizione una serie di risorse per lo sviluppo con Webp, ad esempio la librerialibwebp che si può applicare per implementare la codifica e la decodifica di webp nelle proprie applicazioni.

A quanto pare, questo formato sta riservando grosse potenzialità in fatto di ottimizzazione delle immagini per diminuire i tempi di caricamento . E tu che cosa ne pensi? Parliamone qua sotto!