WebP e WordPress = tempi di caricamento e prestazioni migliorate?

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

Molti WordPress -gli utenti sono interessati al formato immagine WebP perché combina i vantaggi di JPG e PNG. Allo stesso tempo, però, non sostituisce i due formati immagine comuni. Per WordPress -Tuttavia, gli utenti che utilizzano molte immagini dovrebbero trovare WebP particolarmente utile. Il perché di tutto questo, lo spieghiamo in questo articolo.

Nel mondo di oggi è sempre più importante rendere l'esperienza d'uso dei visitatori del vostro sito web il più piacevole e semplice possibile. Le persone sono visive e spesso possono assorbire le informazioni che vedono più velocemente e meglio. Un rapido sguardo a un cartellone pubblicitario, scorrendo una homepage prima che l'autobus arrivi in cinque minuti. Conosciamo tutti queste situazioni. 

Poiché le immagini di solito costituiscono più della metà dello spazio di archiviazione di un sito web, c'è un grande potenziale di ottimizzazione.

Ora qualche altro fatto su WebP prima di entrare nel merito degli argomenti.

  • WebP supporta il formato video VP8, adatto ad esempio per piccole immagini animate, come lo conosciamo dalle GIF.
  • La dimensione massima dell'immagine per WebP è di 16.383 x 16.383 pixel.
  • È anche possibile scalare un'immagine WebP verso l'alto o verso il basso, simile ai file SVG, ma molti non lo consentono per motivi di sicurezza.

I seguenti argomenti sono trattati oggi in questo articolo:

  1. Differenze rispetto a JPG e PNG

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

  1. Quali sono i requisiti necessari per WebPWordPress ?
  2. Come si inseriscono le immagini WebP in WordPress ?

- PluginUtilizzare su
- Aggiungi qualcosa al .htaccess del tuo server
- Funzione.php del vostro WordPress file -Themes completo. 

  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 alcuna perdita di qualità. Gli sfondi possono essere ancora trasparenti. Questo varia solo tra l'immagine stessa, la profondità dell'immagine, i dettagli, lo spazio di colore, ecc. Grazie alle dimensioni ridotte dei file, il formato WebP ha un chiaro vantaggio in termini di prestazioni.

png vs webp

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

Svantaggi del formato PNG

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

Il PNG viene utilizzato, ad esempio, per le immagini che richiedono uno sfondo trasparente. Questo rende il formato molto versatile e popolare nella progettazione grafica, dato che molti elementi vi confluiscono spesso.

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

Il formato immagine JPG

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

jpg vs webp

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

Il formato JPG è ideale se si può convivere con perdite di qualità e se la nitidezza e i dettagli non sono importanti. Il formato è spesso utilizzato per immagini colorate, in quanto la composizione di JPG permette di visualizzare molti colori e gradazioni.  

Un piccolo indizio:

L'aspetto finale delle immagini dipende da molti fattori: ad esempio, la risoluzione dello schermo (HD, QHD, UHD/4K, 8K, ecc.), le impostazioni dello schermo come sRGB, adobeRGB, la modalità di visualizzazione dei monitor e il dispositivo utilizzato per visualizzare le immagini. Recentemente io stesso ho avuto il problema che le mie foto avevano un aspetto diverso sul mio schermo e sul sito web. 

La mia ipotesi: Al giorno d'oggi tutti i browser sono in modalità sRGB. Quindi, se si sta creando qualcosa per il web in Photoshop, ad esempio, impostare il monitor su sRGB. Poi si può vedere direttamente che aspetto ha quando atterra sul vostro sito. 🙂 

Spazio colore/profondità

Qui è dove le cose si fanno un po' complicate. WebP si basa sull'algoritmo di compressione video con perdita di dati VP8 con una 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 del PNG varia da 8 a 48 bit, anche se quest'ultimo ha poco senso a causa delle grandi dimensioni del file, 

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

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

Ogni colore singolarmente - cioè rosso, verde e blu - può essere registrato sul PC in 1 byte (8 bit). Un pixel in un monitor ha quindi 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ì la designazione YUV è composta da Y = luminanza (luminosità) e U e V crominanza media (colore). YUV è quindi come RGB, che viene utilizzato per rappresentare un colore.

Ma perché ne abbiamo bisogno?

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

Supporto/assistenza

Le statistiche mostrano quale browser è utilizzato più frequentemente da quale "dispositivo finale" come PC, tablet o smartphone. Poiché WebP non è supportato da tutti i browser, è opportuno tenerlo presente.

Naturalmente è ovvio che i "dispositivi mobili" sono più mirati, il che spiega anche perché per lo smartphone viene fornito un migliore supporto per il WebP. Assicuratevi quindi di controllare le statistiche degli utenti e di vedere da quale browser e dispositivo ricevete il maggior numero di visitatori.

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

Supporto attuale per il Browser da tavolo

- Firefox dalla versione 65.x
- Opera dalla versione 39.x
- Cromo dalla versione 23.x
- Bordo dalla versione 17.x
- Internet Explorer dalla versione 11.x

Supporto aggiornato per i dispositivi mobili

- Browser Android 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

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

Quali sono i requisiti di cui WebP ha bisogno WordPress ?

Finora nessuna, ma... La cattiva notizia è che WordPress attualmente non esiste un supporto indipendente per le immagini di WebP. Passiamo quindi al punto successivo.

Possibilità di integrare WebP inWordPress :

  1. PluginUtilizzare su

La Plugins(Versione gratuitaShortPixel), Optimus (Versione a pagamento) o l'ottimizzatore di immagini EWWW (Versione gratuita) sono adatti a questo scopo. 

Optimus:

Optimus WebP

Purtroppo WebP è supportato solo dalla versione a pagamento di Optimus. Poiché il caching lato server è RAIDBOXES già integrato, non è necessario un "Cache Enabler"Plugin, come raccomandato qui da Optimus.

ShortPixel:

Pixel WebP breve

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.

Ottimizzatore di immagini EWWW:

Ottimizzatore d'immagine Ewww WebP
  1. WordPress Effettuare le regolazioni nel .htaccess di

Alcuni hoster hanno la possibilità di modificare qualcosa nel file .htaccess, deliberatamente bloccato per motivi di sicurezza. Se si ospita su un server Apache, è possibile effettuare le seguenti modifiche:


    RiscriviMotori On
    RewriteCond %{HTTP_ACCEPT} image/webp
    RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
    RiscriviRule ^(wp-content/uploads.+)\(jpe?g|png)$ $1.webp
[T=immagine/webp,E=accetta:1]



    Appendice dell'intestazione Vary Accetta env=REDIRECT_accept

AddType image/webp .webp

E su un nginx:

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

A RAIDBOXES proposito, questa regola di riscrittura è già sostenuta da noi. 

Dove posso trovarla?

Il file si trova sul server web sul quale è stato WordPress installato. La directory principale è la directory principale in cui si trova il dominio presso l'host web. Se non lo vedete, dovete impostare la "maschera dei file remoti" su -la in modo da poter vedere i file nascosti. Naturalmente, questo richiede che abbiate i diritti di accesso o che lo ospitiate voi stessi e che usiate un programma FTP come FileZilla. 

C'è un terzo - e un po' complicato - modo per aggiungere qualcosa al vostro WordPress fileThemes function.php in modo da poter caricare le immagini in formato WebP di default. Come funziona, potete scoprire ad esempio in questo articolo. Leggi.

Conclusione

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

Plugin Sì | no?

Ce ne sono di molto buonePlugins, che tolgono il lavoro al vostro supporto WebP e ottimizzano le vostre foto. Personalmente ho preso un appuntamento per questo Plugin Optimus afferrato. Altrimenti, varrebbe certamente la pena di considerare l'inserimento nella pagina come codice, tanto più che in tal caso si potrebbe utilizzare Plugin risparmierebbe di più. Ma il punto è che Plugin per questa faccenda.

Per chi è adatto WebP?

In linea di principio, WebP ha senso per ogni sito. Il formato è particolarmente adatto a siti web con molte immagini. Ad esempio, per i fotografi che vogliono mantenere la qualità dell'immagine il più alta possibile, ma che danno comunque grande valore a un tempo di caricamento rapido. Ma anche altri WordPress utenti, come i creativi o coloro che hanno qualcosa da mostrare in forma pittorica, dovrebbero fare di tutto per rendere l'esperienza d'uso dei loro potenziali clienti e appassionati il più piacevole possibile.

Spero che l'articolo vi sia piaciuto e attendo con ansia la vostra opinione! 

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

Articoli correlati

Commenti su questo articolo

Scrivi un commento

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