webp wordpress

WebP e WordPress = tempo di caricamento e prestazioni migliori?

Molti utenti di WordPress sono interessati al formato immagine WebP perché combina i vantaggi di JPG e PNG. Allo stesso tempo, però, non sostituisce i due comuni formati di immagine. Per gli utenti di WordPress che usano molte immagini, tuttavia, WebP dovrebbe essere particolarmente utile. Vi spieghiamo perché in questo articolo.

Nel mondo di oggi, è sempre più importante rendere l'esperienza dell'utente del tuo gruppo target il più piacevole e facile possibile. Le persone sono visive e spesso possono assorbire le informazioni che vedono più velocemente e meglio. Una rapida occhiata a un cartellone pubblicitario, lo scorrimento di una homepage prima che l'autobus arrivi tra cinque minuti. Tutti conosciamo queste situazioni. 

Dal momento che le immagini di solito rappresentano più della metà dello spazio di archiviazione di un sito web, c'è un sacco di potenziale di ottimizzazione qui.

Ora qualche altro fatto su WebP prima di passare agli argomenti.

  • WebP supporta il formato video VP8, che è adatto ad esempio per piccole immagini animate come le GIF.
  • La dimensione massima dell'immagine per WebP è di 16.383 x 16.383 pixel.
  • Puoi anche scalare un'immagine WebP verso l'alto o verso il basso, simile ai file SVG, ma molti non lo permettono per ragioni di sicurezza.
Consenso*
Questo campo è per la convalida e non deve essere modificato.

Differenze rispetto a PNG e JPG 

WebP e PNG

Un'immagine WebP è fino a circa il 25-30 per cento più piccola di una PNG, senza perdita di qualità. Allo stesso tempo, gli sfondi possono ancora essere trasparenti. Questo varia solo tra l'immagine stessa, la profondità dell'immagine, i dettagli, lo spazio colore, ecc. A causa delle piccole dimensioni del file, il formato WebP porta un chiaro vantaggio in termini di prestazioni.

Sulla base delle due immagini, si può dire che l'immagine WebP è del 30,1% più piccola della versione PNG. Qui ho scelto il metodo lossless e ho deliberatamente impostato il cursore della qualità all'80%. Il restante 20 del 100 per cento non può quasi mai essere visto, quindi l'80 per cento è perfettamente sufficiente per le applicazioni online. 

Svantaggi del formato PNG

I PNG non sono adatti ai fotografi perché creano un file di immagine considerevolmente più grande. Il formato PNG è usato soprattutto per gli screenshot perché i PC salvano le immagini come PNG. Perché gli screenshot sono spesso un mix di immagini e testo. 

PNG è usato, per esempio, per le immagini che richiedono uno sfondo trasparente. Questo rende il formato molto versatile e popolare nel design grafico, dove molti elementi spesso si uniscono.

PNG è disponibile nei formati PNG 8 e PNG 24. PNG 8 usa una profondità di colore di 8 bit e un massimo di 256 colori. PNG 24 usa una profondità di colore di 24 bit con fino a 16,7 milioni di colori. Così PNG 24 è paragonabile al formato JPEG. Quindi continuiamo con il formato JPG:

Il formato immagine JPG

In confronto diretto con JPG, l'immagine WebP è circa il 25-35% più piccola - nonostante la stessa qualità dell'immagine. Non c'è niente da dire qui tra i due candidati JPG e WebP - WebP è semplicemente la scelta migliore.

Sulla base delle due immagini, si può dire che l'immagine WebP è il 24,7% più piccola della versione JPG. Nella versione JPG ho impostato la qualità su "Alta".

Il formato JPG è adatto se puoi vivere con perdite di qualità e se la nitidezza e i dettagli non sono importanti. Il formato è spesso usato per immagini ricche di colore perché la composizione del JPG permette di rappresentare molti colori e gradazioni.  

Unapiccola nota: il modo in cui le immagini appaiono sullo schermo dipende da molti fattori: per esempio, la risoluzione dello schermo (HD, QHD, UHD/4K, 8K, ecc.), le impostazioni dello schermo come sRGB, Adobe RGB, la rispettiva modalità di visualizzazione dei tuoi monitor e il dispositivo finale con cui visualizzate le immagini. Negli ultimi giorni, io stesso ho avuto il problema che le mie immagini apparivano diverse sul mio schermo e sul sito web. 

Spazio colore/profondità

Qui è dove diventa un po' complicato. WebP è basato sull'algoritmo di compressione video lossy VP8, con una compressione fino a 24 bit e una dimensione massima di 16.383 x 16.383 pixel. Ha quindi sempre una profondità di colore di 24 bit, proprio come il JPG. La profondità di colore di PNG varia da 8 a 48 bit, per cui quest'ultima ha poco senso a causa delle grandi dimensioni del file,

Come bitstream VP8, la generazione senza perdita di immagini WebP funziona solo con il formato immagine a 8 bit - conosciuto anche come formato immagine YUV420.

Il formato YUV420 scomposto: Diamo prima un'occhiata a come un monitor visualizza un'immagine per impostazione predefinita: Ogni colore può essere rappresentato da tre colori (il cosiddetto modello RGB), cioè rosso, verde e blu.

Ogni colore individualmente - cioè rosso, verde e blu - può essere registrato sul PC in 1 byte (8 bit). Così UN pixel in un monitor ha 3 byte (ogni byte ha informazioni sul rispettivo colore rosso, verde e blu).

L'occhio umano è molto sensibile quando si tratta di luminosità, ma meno sensibile ai colori e alle loro gradazioni. Così, il termine YUV è composto da Y = luminanza (luminosità) e U e V significa crominanza (colore). YUV è quindi come RGB, con cui si rappresenta un colore.

Ma perché ne abbiamo bisogno comunque?

Perché la dimensione del file è importante qui. Nel modello RGB dobbiamo usare 3 byte (24 bit) per memorizzare un colore. Mentre con YUV, la dimensione è dimezzata a causa del modo in cui viene calcolata e poi memorizzata. È complicato, ma penso che a questo punto l'informazione sia sufficiente e porti un po' di chiarezza.

Sostegno/Supporto

Le statistiche mostrano quale browser è più utilizzato da quale "dispositivo finale" come PC, tablet o smartphone. Dato che WebP non è supportato da tutti i browser, dovresti tenere d'occhio questo aspetto.

Naturalmente, si può vedere che i "dispositivi mobili" sono più a fuoco, il che spiega anche perché è previsto un migliore supporto per WebP per lo smartphone. Pertanto, date un'occhiata alle vostre statistiche degli utenti e vedete da quale browser e dispositivo ricevete il maggior numero di visitatori.

La seguente lista mostra quali versioni di browser su quali dispositivi finali possono già godere di WebP.

Supporto attuale per i browser desktop

  • Firefox dalla versione 65.xOpera dalla versione 39.xChrome dalla versione 23.xEdge dalla versione 17.xInternet Explorer dalla versione 11.x

Supporto aggiornato per i dispositivi mobili

  • Browser Android dalla versione 5.6 (Chromium 67)Android Chrome dalla versione 73.xOpera Mini tutte le versioniOpera Mobile dalla versione 12.xAndroid Firefox dalla versione 66.xInternet Explorer Mobile dalla versione 11.x

WebP VP8 (immagini animate)

  • Google Chrome (Desktop e Android) dalla versione 32.xMicrosoft Edge dalla versione 18.xFirefox dalla versione 65.xOpera dalla versione 19.x

Al momento non sono riuscito a trovare il supporto WebP per altri browser e dispositivi.

Requisiti di WebP in WordPress

Finora nessuno, ma... Purtroppo, la cattiva notizia è che WordPress non supporta attualmente le immagini WebP da solo. Pertanto, veniamo ora al prossimo punto.

Modi per includere WebP in WordPress :

  1. Utilizzando un Plugin

Per esempio, si può usare Plugins ShortPixel (versione gratuita), Optimus (versione a pagamento) o EWWW Image Optimizer (versione gratuita).

Optimus:

Optimus WebP

Sfortunatamente, WebP è supportato solo dalla versione a pagamento di Optimus. Dal momento che Raidboxes ha già integrato il caching lato server, non è necessario un plugin "Cache Enabler" come raccomandato da Optimus.

ShortPixel:

Shortpixel WebP

In ShortPixel è possibile selezionare la casella come mostrato sopra. Ma prima reimposterei tutte le immagini che hai all'originale e poi le ottimizzerei tutte in una volta con l'Plugin ottimizzatore. Poi si dovrebbe anche vedere allo stesso tempo che hai diversi tipi di file delle vostre immagini.

EWWW Image Optimizer:

Eww Image Optimizer WebP
  1. Fare le regolazioni nel .htaccess di WordPress

Alcuni host hanno deliberatamente bloccato la possibilità di cambiare qualcosa nel file .htaccess per ragioni di sicurezza. Se state ospitando su un server Apache, potete fare la seguente regolazione:

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{HTTP_ACCEPT} image/webp
    RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
    RewriteRule ^(wp-content/uploads.+)\.(jpe?g|png)$ $1.webp
[T=image/webp,E=accept:1]

</IfModule>
<IfModule mod_headers.c>
    Header append Vary Accept env=REDIRECT_accept
</IfModule>
AddType image/webp .webp

E su un Nginx:

# http config block
map $http_accept $webp_ext {
default "";
"~*webp" ".webp";
}
# server config block
location ~* ^/wp-content/.+\.(png|jpg)$ {
add_header Vary Accept;
try_files $uri$webp_ext $uri =404;

A proposito, Raidboxes supporta già questa regola di riscrittura di default.

Dove posso trovarla?

Il file può essere trovato sul server web su cui è stato installato WordPress. La directory principale è la directory principale dove si trova il dominio presso l'host web. Se non potete vederlo, dovete impostare la "maschera di file remoti" a -la in modo da poter vedere anche i file nascosti. Naturalmente, questo presuppone che tu abbia i diritti d'accesso o addirittura che ti ospiti da solo e usi un programma FTP come FileZilla.

C'è una terza - e un po' complicata - possibilità di aggiungere qualcosa nel file function.php del tuo tema WordPress in modo da poter caricare immagini in formato WebP per impostazione predefinita. Potete leggere come funziona in questo articolo.

Per chi è adatto WebP?

In linea di principio, WebP è utile per ogni sito web. Naturalmente, il formato è particolarmente adatto a siti web con molte immagini. Per esempio, per i fotografi che vogliono mantenere la qualità delle loro immagini il più alta possibile, ma danno ancora grande importanza a un tempo di caricamento veloce. Ma altri utenti di WordPress, come i creativi o coloro che hanno qualcosa da mostrare in forma pittorica, dovrebbero anche fare tutto il possibile per rendere l'esperienza utente dei loro potenziali clienti e fan il più piacevole possibile.

Conclusione su WebP e WordPress

Purtroppo, WebP non è ancora comune come JPG e PNG, ma sicuramente diventerà sempre più importante in futuro. Dopo tutto, WebP può migliorare le prestazioni del tuo sito e quindi l'esperienza dell'utente e la soddisfazione del tuo gruppo target.

Plugin: Sì o No?

Ci sono eccellenti plug-in che tolgono il lavoro dal supporto WebP e ottimizzano le vostre immagini. Personalmente ho usato il plugin Optimus per questo. Altrimenti, varrebbe certamente la pena di considerare la possibilità di integrarlo nella pagina come codice, soprattutto perché si salverebbe così un plugin in più. Ma tutto sommato, si consiglia di utilizzare un plugin per questo scopo.

Spero che l'articolo vi sia piaciuto e non vedo l'ora di sapere cosa ne pensate!

Le tue domande su WebP e WordPress

Che domande hai per Stefan? Sentitevi liberi di usare la funzione di commento. Vuoi essere informato sui nuovi articoli sul marketing online? Allora seguici su Twitter, Facebook, LinkedIn o tramite il nostro Newsletter.

Ti è piaciuto l'articolo?

Con la tua valutazione ci aiuti a migliorare ancora di più il nostro contenuto.

Scrivi un commento

Il tuo indirizzo e-mail non sarà pubblicato.