Det er imidlertid ikke lett å levere bilder via WebP. Det avhenger av serverens webserver, valgt cdn, tema, caching plugins, etc.
Denne guiden hjelper deg med å levere WebP-bilder til WordPress på tre måter.
Hva er WebP?
Nytt bildeformat for nettet
av Google
WebP er et bildeformat (som png og jpg) utviklet av Google. WebP (.webp)-bilder har en tendens til å være mye mindre, noe som øker hastigheten på nettsteder og bruker mindre båndbredde.
Avhengig av bildet kan du redusere størrelsen fra 25 % til 70 %.
JPEG, PNG, GIF osv. har sine fordeler og ulemper. Tabellen nedenfor vil gi deg en idé:
| JPG | GIF | PNG | SVG | |
| Vektor | ❌ | ❌ | ❌ | ✅ |
| Raster | ✅ | ✅ | ✅ | ❌ |
| Åpenhet | ❌ | ✅ | ✅ | ✅ |
| Animasjon | ❌ | ✅ | ✅ | ✅ |
| Tapt | ✅ | ❌ | ❌ | ❌ |
WebP har nesten alle funksjonene nevnt ovenfor! Så hvorfor kan vi ikke bruke WebP overalt?
Hvorfor ikke bruke WebP overalt?
Som du kan se, støtter bare 80 % av enhetene bare WebP. Ikke bare eldre nettlesere, Safari/iOS Safari støtter fortsatt ikke WebP.
Hvorfor er det så vanskelig å betjene WebP?
Som du la merke til, leverer vi bilder i henhold til nettleseren. Hvis nettleseren ikke støtter WebP, må vi gi dem det originale bildet (jpg/png/gif).
Det er to hovedmåter å betjene WebP på:
Ved hjelp av bildekoden
Vi kan brukebildetag for å fortelle nettleseren at vi har et WebP-format. Hvis nettleseren støtter det, vil det vanlige/reservebildet lastes inn.
<picture><source srcset="img.webp" type="image/webp"><source srcset="img.jpg" type="image/jpeg"><img src="img.jpg"></picture>Ved et annet svar
I et annet svar, som vanlig, har du én fil. Nøyaktig:
<img src="img.jpg" />Én bilde-URL støtter levering av jpg- og webp-filer. Dette er hva serveren gjør.
Selv om det er en .jpg-filtype, hvis nettleseren støtter WebP, vil svaret være WebP. Også kalt "mangfoldig respons".
Bildetag vs mangfoldig respons
Hver har sine fordeler og ulemper. Her er en sammenligningstabell:
| bilde-tag | Variert respons | |
|---|---|---|
| Fungerer med bakgrunnsbilder | ❌ | ✅ |
| CDN-vennlig | ✅ | ✅ (bare noen få) |
| Serveren må konfigureres | ❌ | ✅ (nginx) |
| Fungerer med lat lasting | ✅ | ✅ |
Hvordan servere bilder i WebP i WordPress?
Metode #1 - Bruk bare CDN med fly WebP-konvertering
Dette er sannsynligvis den enkleste løsningen. Noen CDN-leverandører støtter for øyeblikket konvertering av bilder til WebP-bilder sammen med bildeoptimalisering.
Her er noen få:
- BunnyCDN
- Cloudflare med polsk (Pro-plan)
- Skyet
- ShortPixel Adaptive Images (bruker StackPath CDN)
- WP komprimere
Du kan også spare diskplass ved å bruke denne metoden siden du ikke trenger å lagre både vanlige og konverterte WebP-bilder.
BunnyCDN
BunnyCDN kommer med Bunny Optimizer, som kan komprimere bilder og konvertere dem til WebP på flukt.
Metode #2 - Bruk av diverse respons + CDN
Som beskrevet ovenfor, vil et "variasjonssvar" ha en enkelt bilde-URL som kan vise både WebP- og ikke-webp-bilder avhengig av den forespurte nettleseren.
Vi må også velge riktig CDN som støtter WebP-forespørselshoder som en hurtigbuffernøkkel. Ellers, når WebP-bildet er bufret på serveren, vil det bli levert til nettlesere som ikke støtter WebP.
Tilpasse variert respons i WordPress
Den enkleste måten å sette opp en rik respons for WebP i WordPress er å bruke WebP Express-plugin. Bare installer plugin-modulen og klikk "Lagre innstillinger og fremtving nye .htaccess-regler".
WebP Express vil konfigurere WebP-konverteren og overskrive reglene slik at når den mottar en forespørsel, vil den konvertere bildene til WebP med en gang, og hvis nettleseren ikke støtter WebP, vil standardbildet bli levert.
Hvis du er i Nginx
WebP Express legger til de nødvendige '.htaccess'-omskrivingsreglene, men fungerer bare på en Apache-, LiteSpeed- eller OpenLiteSpeed-server. Hvis du bruker Nginx må du redigerenginx.configog legg til følgende kode:
# WebP Express-regler# --------------------sted ~* ^/?wp-content/.*.(png|jpe?g)$ {add_header Varierer Accept;expires 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;}# Rute forespørsler for ikke-eksisterende webps til konverteringsstedet ~* ^/?wp-content/ .*.(png|jpe?g).webp$ {try_files$uri/wp-content/plugins/webp-express/wod/webp-realizer.php?wp-content=wp-content;}# -- ------------------ (WebP Express-reglene slutter her)Koden ovenfor legger til de nødvendige svarhodene (bufferbehandling varierer også) og forsøker å levere WebP hvis den eksisterer, ellers omdirigere den til omformeren (basert på nettleserstøtte)
CDN-leverandører som støtter Diverse Response
Hvis CDN-leverandøren din ikke støtter WebP som buffernøkkel, vil WebP-filer bli levert til nettlesere som ikke støtter WebP. På samme måte er det en sjanse for at ikke-webp-bilder vil bli levert til støttede nettlesere.
BunnyCDN , KeyCDN , Google CDN og mange andre CDN-leverandører støtter WebP som en hurtigbuffernøkkel. Pass på at du aktiverer dem i innstillingene.
VBunnyCDN :
VKeyCDN :
Bruker du Cloudflares gratisplan?
Dessverre støtter ikke Cloudflares gratisplan WebP som en hurtigbuffernøkkel. Bruk enten en CDN som BunnCDN eller oppgrader til deres profesjonelle plan.
Sett opp en mangfoldig respons + CDN med populære vertsleverandører
Sørg for at WebP Express er installert.
- Kinsta eller WP Engine - kontakt deres støtteteam for å legge til ovennevnte Nginx-konfigurasjon og inkludere WebP-bufringsnøkkelen i CDN-en deres (KeyCDN).
- Cloudways - bare installer WebP Express og lagre innstillingene med .htacess. Fordi Cloudways bruker en hybrid Apache + Nginx-tilnærming, fungerer det rett ut av boksen.
- SiteGound - Kontakt support for å legge til Nginx-konfigurasjonen. Bruk en støttet CDN som ovenfor.
- LiteSpeed / OpenLiteSpeed / Apache-server - bare installer WebP Express og lagre innstillinger med '.htacess'. Bruk også en støttet CDN som ovenfor.
- Egendefinert VPS med Nginx (LEMP Stack) - Oppsett
nginx.confog bruk et støttet CDN som ovenfor.
Metode #3 - Bruk av en bildekode
Hvis begge metodene ovenfor ikke fungerer for deg, kan du bruke bildekoden. Den krever ikke serverkonfigurasjon (redigering av nginx.conf) og støtter alle CDN-leverandører.
Bruk av denne metoden vil endre HTML for WebP-levering. Det vil ikke fungere med bakgrunnsbilder, er inkompatibelt med enkelte temaer, caching-plugins, lazy loading plugins, etc.
Hvis du bruker denne metoden, vil alle img-tagger konverteres slik:
<picture><source srcset="img.webp" type="image/webp"><source srcset="img.jpg" type="image/jpeg"><img src="img.jpg"></picture>Hvis nettleseren støtter WebP, leveres den tilsvarende filen, ellers leveres et normalt bilde.
Tilpasse en bildekode for WebP i WordPress
Den enkleste måten å sette opp en bildekode på er gjennom WebP Express.
Sett driftsmodusen til "CDN-vennlig" og aktiver "Endre HTML".
Konklusjon
Jeg skulle ønske dagen kom da alle nettlesere støtter WebP!
Hvis du kan bruke noen få dollar i måneden, så er den enkleste og mest effektive måten å bruke et CDN som BunnyCDN, som vil konvertere bilder til WebP i farten. Ellers hold deg til metode #2 jeg nevnte ovenfor.
