Tuttavia, fornire immagini tramite WebP non è facile. Dipende dal server web del tuo server, dal cdn selezionato, dal tema, dai plugin di memorizzazione nella cache, ecc.
Questa guida ti aiuterà a fornire immagini WebP su WordPress in tre modi.
Che cos'è WebP?
Nuovo formato immagine per il Web
di Google
WebP è un formato immagine (come png e jpg) sviluppato da Google. Le immagini WebP (.webp) tendono ad essere molto più piccole, il che velocizza i siti Web e utilizza meno larghezza di banda.
A seconda dell'immagine, puoi ridurre le dimensioni dal 25% al 70%.
JPEG, PNG, GIF, ecc. hanno i loro pro e contro. La tabella seguente vi darà un'idea:
| JPG | GIF | PNG | SVG | |
| Vettore | ❌ | ❌ | ❌ | ✅ |
| Raster | ✅ | ✅ | ✅ | ❌ |
| Trasparenza | ❌ | ✅ | ✅ | ✅ |
| Animazione | ❌ | ✅ | ✅ | ✅ |
| Perduto | ✅ | ❌ | ❌ | ❌ |
WebP ha quasi tutte le funzionalità sopra menzionate! Allora perché non possiamo usare WebP ovunque?
Perché non usare WebP ovunque?
Come puoi vedere, solo l'80% dei dispositivi supporta solo WebP. Non solo browser legacy, Safari/iOS Safari non supporta ancora WebP.
Perché è così difficile servire WebP?
Come hai notato, forniamo immagini in base al browser. Se il browser non supporta WebP, dobbiamo fornire loro l'immagine originale (jpg/png/gif).
Esistono due modi principali per servire WebP:
Usando il tag immagine
Possiamo usarefototag per dire al browser che abbiamo un formato WebP. Se il browser lo supporta, verrà caricata l'immagine normale/di fallback.
<picture><source srcset="img.webp" type="image/webp"><source srcset="img.jpg" type="image/jpeg"><img src="img.jpg"></picture>Con risposta diversa
In una risposta diversa, come al solito, hai un file. Esattamente:
<img src="img.jpg" />Un URL immagine supporta la consegna di file jpg e webp. Questo è ciò che fa il server.
Anche se è un'estensione di file .jpg, se il browser supporta WebP, la risposta sarà WebP. Chiamato anche "risposta diversificata".
Tag immagine vs risposta diversificata
Ognuno ha i suoi pro e contro. Ecco una tabella di confronto:
| etichetta immagine | Risposta diversificata | |
|---|---|---|
| Funziona con immagini di sfondo | ❌ | ✅ |
| CDN amichevole | ✅ | ✅ (solo alcuni) |
| Il server deve essere configurato | ❌ | ✅ (inginx) |
| Funziona con il caricamento lento | ✅ | ✅ |
Come servire le immagini in WebP in WordPress?
Metodo n. 1: utilizzare CDN solo con la conversione Fly WebP
Questa è probabilmente la soluzione più semplice. Alcuni provider CDN attualmente supportano la conversione in tempo reale da immagine a WebP insieme all'ottimizzazione dell'immagine.
Eccone alcuni:
- Bunny CDN
- Cloudflare con polacco (piano Pro)
- Nuvoloso
- Immagini adattive ShortPixel (utilizza StackPath CDN)
- Comprimi WP
È inoltre possibile risparmiare spazio su disco utilizzando questo metodo poiché non è necessario archiviare immagini WebP normali e convertite.
Bunny CDN
BunnyCDN viene fornito con Bunny Optimizer, che può comprimere le immagini e convertirle al volo in WebP.
Metodo n. 2 - Utilizzo di risposte diverse + CDN
Come descritto sopra, una "risposta di varietà" avrà un unico URL immagine che può servire sia immagini WebP che non WebP a seconda del browser richiesto.
Dobbiamo anche scegliere la CDN giusta che supporti le intestazioni delle richieste WebP come chiave cache. In caso contrario, una volta che l'immagine WebP è stata memorizzata nella cache sul server, verrà consegnata ai browser che non supportano WebP.
Personalizzazione della risposta varia in WordPress
Il modo più semplice per impostare una risposta completa per WebP in WordPress è utilizzare il plug-in WebP Express. Basta installare il plug-in e fare clic su "Salva impostazioni e forza nuove regole .htaccess".
WebP Express configurerà il convertitore WebP e sovrascriverà le regole in modo che quando riceve una richiesta, convertirà le immagini in WebP al volo e, se il browser non supporta WebP, verrà consegnata l'immagine predefinita.
Se sei a Nginx
WebP Express aggiunge le necessarie regole di riscrittura '.htaccess', ma funziona solo su un server Apache, LiteSpeed o OpenLiteSpeed. Se stai usando Nginx devi modificarenginx.confige aggiungi il seguente codice:
# Regole WebP Express# --------------------posizione ~* ^/?wp-content/.*.(png|jpe?g)$ {add_header Varia Accept;scade 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;}# Instrada le richieste di webps inesistenti alla posizione del convertitore ~* ^/?wp-content/ .*.(png|jpe?g).webp$ {try_files$uri/wp-content/plugins/webp-express/wod/webp-realizer.php?wp-content=wp-content;}# -- ------------------ (le regole di WebP Express finiscono qui)Il codice sopra aggiunge le intestazioni di risposta richieste (anche la gestione della cache varia) e tenta di fornire WebP se esiste, altrimenti reindirizzalo al convertitore (in base al supporto del browser)
Provider CDN che supportano Diverse Response
Se il tuo provider CDN non supporta WebP come chiave di memorizzazione nella cache, i file WebP verranno consegnati ai browser che non supportano WebP. Allo stesso modo, esiste la possibilità che le immagini non webp vengano inviate ai browser supportati.
Bunny CDN , KeyCDN , Google CDN e molti altri provider CDN supportano WebP come chiave cache. Assicurati di abilitarli nelle impostazioni.
VBunny CDN :
VKeyCDN :
Stai utilizzando il piano gratuito di Cloudflare?
Sfortunatamente, il piano gratuito di Cloudflare non supporta WebP come chiave cache. Usa un CDN come BunnCDN o passa al loro piano professionale.
Imposta una risposta diversificata + CDN con i provider di hosting più diffusi
Assicurati che WebP Express sia installato.
- Kinsta o WP Engine: contatta il loro team di supporto per aggiungere la configurazione Nginx sopra e includere la chiave di memorizzazione nella cache WebP nella loro CDN (KeyCDN).
- Cloudways: installa WebP Express e salva le impostazioni utilizzando .htacess. Poiché Cloudways utilizza un approccio ibrido Apache + Nginx, funziona immediatamente.
- SiteGound - Contatta il supporto per aggiungere la configurazione di Nginx. Utilizzare una CDN supportata come sopra.
- Server LiteSpeed / OpenLiteSpeed / Apache: basta installare WebP Express e salvare le impostazioni con '.htacess'. Utilizzare anche una CDN supportata come sopra.
- VPS personalizzato con Nginx (stack LEMP) - Configurazione
nginx.confe utilizzare una CDN supportata come sopra.
Metodo n. 3: utilizzo di un tag immagine
Se entrambi i metodi precedenti non funzionano per te, puoi utilizzare il tag immagine. Non richiede la configurazione del server (modifica di nginx.conf) e supporta tutti i provider CDN.
L'utilizzo di questo metodo cambierà l'HTML per la consegna WebP. Non funzionerà con le immagini di sfondo, è incompatibile con alcuni temi, plug-in di memorizzazione nella cache, plug-in di caricamento lento, ecc.
Se utilizzi questo metodo, tutti i tag img verranno convertiti in questo modo:
<picture><source srcset="img.webp" type="image/webp"><source srcset="img.jpg" type="image/jpeg"><img src="img.jpg"></picture>Se il browser supporta WebP, viene consegnato il file corrispondente, altrimenti viene consegnata un'immagine normale.
Personalizzazione del tag immagine per WebP in WordPress
Il modo più semplice per impostare un tag immagine è tramite WebP Express.
Impostare la modalità operativa su "CDN friendly" e abilitare "Alter HTML".
Conclusione
Vorrei che arrivasse il giorno in cui tutti i browser supportano WebP!
Se puoi spendere qualche dollaro al mese, il modo più semplice ed efficiente è utilizzare un CDN come BunnyCDN, che convertirà le immagini in WebP al volo. Altrimenti, attieniti al metodo n. 2 che ho menzionato sopra.
