WebP e WordPress = tempo di caricamento e prestazioni migliori?

Stefan Römershäuser Ultimo aggiornamento 21.10.2020
8 Min.
webp wordpress
Ultimo aggiornamento 21.10.2020

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 utente dei visitatori del tuo sito web il più piacevole e facile possibile. Le persone sono visive e spesso possono assorbire le informazioni che vedono più velocemente e meglio. Quel rapido sguardo 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.
  • Inoltre, è possibile upscalare o downscalare un'immagine WebP, simile ai file SVG, ma molti non lo permettono per ragioni di sicurezza.

In questo articolo di oggi trattiamo i seguenti argomenti:

  1. Differenze rispetto a JPG e PNG

- Confronto delle dimensioni dei file
- Spazio colore/profondità
- Sostegno/Supporto

  1. Di quali requisiti ho bisogno per WebP in WordPress ?
  2. Come posso inserire immagini WebP in WordPress ?

- Usare un Plugin
- Aggiungi qualcosa in .htaccess del tuo server
- Function.php file del tuo WordPress -Themes aggiungere qualcosa.

  1. La mia conclusione su WebP

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à. 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.

png vs webp

Sulla base delle due immagini, si può dire che l'immagine WebP è del 30,1% più piccola della versione PNG. Ho scelto il metodo lossless qui 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 immagine significativamente 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. 

Il 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.

jpg vs webp

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

Il formato JPG è adatto se si può vivere con la perdita di qualità e la nitidezza e i dettagli non sono importanti. Il formato è spesso usato per immagini ricche di colore, poiché la composizione del JPG permette di rappresentare molti colori e gradazioni.  

Piccolo suggerimento:

L'aspetto finale delle immagini dipende da molti fattori: per esempio, la risoluzione dello schermo (HD, QHD, UHD/4K, 8K, ecc.), l'impostazione dello schermo come sRGB, adobeRGB, la rispettiva modalità di visualizzazione dei vostri monitor, così come il dispositivo con cui visualizzate le immagini. Recentemente, io stesso ho avuto il problema che le mie immagini apparivano diverse sul mio schermo e sul sito web. 

Il mio consiglio: Oggi tutti i browser sono in modalità sRGB. Quindi se create qualcosa per il web in Photoshop, impostate il vostro monitor su sRGB. Poi puoi vedere direttamente come appare quando atterra sulla tua pagina. 🙂

Spazio colore/profondità

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

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

Il formato YUV420 scomposto: Per prima cosa, guardiamo come un monitor visualizza un'immagine per impostazione predefinita: Ogni colore può essere rappresentato da tre colori (conosciuto come il 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 fornisca 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, dai un'occhiata alle tue statistiche utente e vedi da quale browser e dispositivo ricevi il maggior numero di visitatori.

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

Supporto attuale per i browser desktop

- Firefox dalla versione 65.x
- Opera dalla versione 39.x
- Chrome dalla versione 23.x
- Edge dalla versione 17.x
- Internet Explorer dalla versione 11.x

Supporto aggiornato per i dispositivi mobili

- Android Browser dalla versione 5.6 (Chromium 67)
- Android Chrome dalla versione 73.x
- Opera Mini tutte le versioni
- Opera Mobile dalla versione 12.x
- Android Firefox dalla versione 66.x
- Internet Explorer Mobile dalla versione 11.x

WebP VP8 (immagini animate)

- Google Chrome (Desktop e Android) dalla versione 32.x
- Microsoft Edge dalla versione 18.x
- Firefox dalla versione 65.x
- Opera dalla versione 19.x

Non ho potuto trovare il supporto WebP per altri browser e dispositivi al momento.

Quali sono i requisiti per WebP in WordPress ?

Finora nessuna, ma... Sfortunatamente, la cattiva notizia è che WordPress non supporta attualmente le immagini WebP da solo. Perciò ora veniamo 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. A proposito, dato che RAIDBOXES ha già integrato la cache lato server, non hai bisogno di un "Cache Enabler" Plugin, come raccomandato qui da Optimus.

ShortPixel:

Shortpixel WebP

In ShortPixel è possibile selezionare la casella come mostrato sopra. Ma prima reimposterei tutte le immagini che avete all'originale e poi le ottimizzerei tutte in una volta con l'Plugin ottimizzatore. Poi si dovrebbe anche vedere allo stesso tempo che avete 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 dei file remoti su -la per vedere i file nascosti. Naturalmente, questo presuppone che tu abbia i diritti di accesso o addirittura che tu sia ospite e usi un programma FTP come FileZilla.

C'è una terza - e un po' complicata - possibilità di aggiungere qualcosa nel file function.php del tuo WordPress -Themes in modo che tu possa caricare immagini in formato WebP per default. Come funziona, si può leggere per esempio. in questo articolo articolo.

Conclusione

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 dei tuoi visitatori.

Plugin Sì | No?

C'è un ottimo Plugins che fa il lavoro di supporto WebP per te e ottimizza anche le tue immagini. Personalmente, ho usato Plugin Optimus per questo. Altrimenti, varrebbe certamente la pena considerare di includerlo nella pagina come codice, soprattutto perché ti risparmieresti un altro Plugin . Ma la linea di fondo è che si consiglia di utilizzare Plugin per questo.

Per chi è adatto WebP?

WebP è in principio utile per qualsiasi pagina. 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 anche altri utenti di WordPress come i creativi o coloro che hanno qualcosa da mostrare in forma pittorica dovrebbero fare tutto il possibile per rendere l'esperienza utente dei loro potenziali clienti e fan il più piacevole possibile.

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

Stefan è un blogger in erba con il suo sito web aspiring-artist.com Blog di arte, realizza WordPress siti per altri aspiranti artisti ed è consulente. Perché gli artisti hanno bisogno anche di un sito web individuale e di un logo e un marchio significativi. Aspirare alla grandezza

Commenti su questo articolo

Scrivi un commento

Il tuo indirizzo e-mail non sarà pubblicato. I campi obbligatori sono contrassegnati con *.