Hur man använder bilder som WebP i WordPress (3 metoder)

Det är dock inte lätt att leverera bilder via WebP. Det beror på din servers webbserver, vald cdn, tema, caching plugins, etc.

Den här guiden hjälper dig att leverera WebP-bilder till WordPress på tre sätt.

Vad är WebP?

Nytt bildformat för webben

av Google

WebP är ett bildformat (som png och jpg) utvecklat av Google. WebP (.webp)-bilder tenderar att vara mycket mindre, vilket snabbar upp webbplatser och använder mindre bandbredd.

Beroende på bilden kan du minska storleken från 25 % till 70 %.

JPEG, PNG, GIF, etc. har sina för- och nackdelar. Tabellen nedan ger dig en idé:

WebP har nästan alla funktioner som nämns ovan! Varför kan vi då inte använda WebP överallt?

Varför inte använda WebP överallt?

Som du kan se stöder endast 80 % av enheterna endast WebP. Inte bara äldre webbläsare, Safari/iOS Safari stöder fortfarande inte WebP.

Varför är det så svårt att betjäna WebP?

Som du märkt levererar vi bilder enligt webbläsaren. Om webbläsaren inte stöder WebP måste vi förse dem med originalbilden (jpg/png/gif).

Det finns två huvudsakliga sätt att betjäna WebP:

Använda bildtaggen

Vi kan användabildtaggen för att tala om för webbläsaren att vi har ett WebP-format. Om webbläsaren stöder det kommer den vanliga/reservbilden att laddas.

<picture><source srcset="img.webp" type="image/webp"><source srcset="img.jpg" type="image/jpeg"><img src="img.jpg"></picture>

Med ett annat svar

I ett annat svar, som vanligt, har du en fil. Exakt:

<img src="img.jpg" />

En bild-URL stöder leverans av jpg- och webp-filer. Detta är vad servern gör.

Även om det är ett .jpg-filtillägg, om webbläsaren stöder WebP, kommer svaret att vara WebP. Kallas även "diverse response".

Bildtagg kontra olika svar

Var och en har sina för- och nackdelar. Här är en jämförelsetabell:

Hur serverar man bilder i WebP i WordPress?

Metod #1 - Använd endast CDN med Fly WebP-konvertering

Detta är förmodligen den enklaste lösningen. Vissa CDN-leverantörer stöder för närvarande on-the-fly bild till WebP-konvertering tillsammans med bildoptimering.

Här är några:

• BunnyCDN
• Cloudflare med polska (Pro Plan)
• Molnigt
• ShortPixel Adaptive Images (använder StackPath CDN)
• WP komprimera

Du kan också spara diskutrymme med den här metoden eftersom du inte behöver lagra både vanliga och konverterade WebP-bilder.

BunnyCDN

BunnyCDN kommer med Bunny Optimizer, som kan komprimera bilder och konvertera dem till WebP i farten.

Metod #2 - Användning av olika svar + CDN

Som beskrivits ovan kommer ett "variantsvar" att ha en enda bild-URL som kan tjäna både WebP- och icke-webp-bilder beroende på den begärda webbläsaren.

Vi måste också välja rätt CDN som stöder WebP-förfrågningshuvuden som en cache-nyckel. Annars, när WebP-bilden är cachad på servern, kommer den att levereras till webbläsare som inte stöder WebP.

Anpassa varierat svar i WordPress

Det enklaste sättet att ställa in ett rikt svar för WebP i WordPress är att använda plugin-programmet WebP Express. Installera bara plugin-programmet och klicka på "Spara inställningar och tvinga fram nya .htaccess-regler".

WebP Express kommer att konfigurera WebP-omvandlaren och skriva över reglerna så att när den tar emot en förfrågan kommer den att konvertera bilderna till WebP direkt, och om webbläsaren inte stöder WebP, kommer standardbilden att levereras.

Om du är i Nginx

WebP Express lägger till de nödvändiga ".htaccess"-omskrivningsreglerna, men fungerar bara på en Apache-, LiteSpeed- eller OpenLiteSpeed-server. Om du använder Nginx måste du redigeranginx.configoch lägg till följande kod:

# WebP Express-regler# --------------------plats ~* ^/?wp-content/.*.(png|jpe?g)$ {add_header Variera Acceptera;går ut 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;}# Dirigera förfrågningar för icke-existerande webbps till konverteraren ~* ^/?wp-content/ .*.(png|jpe?g).webp$ {try_files$uri/wp-content/plugins/webp-express/wod/webp-realizer.php?wp-content=wp-content;}# -- ------------------ (WebP Express-regler slutar här)

Ovanstående kod lägger till de nödvändiga svarshuvudena (cachehanteringen varierar också) och försöker leverera WebP om den finns, annars omdirigerar den till omvandlaren (baserat på webbläsarstöd)

CDN-leverantörer som stöder Diverse Response

Om din CDN-leverantör inte stöder WebP som en cachningsnyckel, kommer WebP-filer att levereras till webbläsare som inte stöder WebP. På samma sätt finns det en chans att icke-webp-bilder kommer att levereras till webbläsare som stöds.

BunnyCDN , KeyCDN , Google CDN och många andra CDN-leverantörer stöder WebP som en cache-nyckel. Se till att du aktiverar dem i inställningarna.

VBunnyCDN :

VKeyCDN :

Använder du Cloudflares gratisplan?

Tyvärr stöder inte Cloudflares gratisplan WebP som cache-nyckel. Använd antingen ett CDN som BunnCDN eller uppgradera till deras professionella plan.

Skapa ett varierat svar + CDN med populära värdleverantörer

Se till att WebP Express är installerat.

• Kinsta eller WP Engine - kontakta deras supportteam för att lägga till ovanstående Nginx-konfiguration och inkludera WebP-cache-nyckeln i deras CDN (KeyCDN).
• Cloudways - installera bara WebP Express och spara inställningarna med .htacess. Eftersom Cloudways använder en hybrid Apache + Nginx-metod fungerar det direkt.
• SiteGound - Kontakta support för att lägga till Nginx-konfigurationen. Använd ett CDN som stöds enligt ovan.
• LiteSpeed ​​​​/ OpenLiteSpeed ​​​​/ Apache-server - installera bara WebP Express och spara inställningar med '.htacess'. Använd även ett CDN som stöds enligt ovan.
• Anpassad VPS med Nginx (LEMP Stack) - Konfigureranginx.confoch använd ett CDN som stöds enligt ovan.

Metod #3 - Använda en bildtagg

Om båda ovanstående metoder inte fungerar för dig kan du använda bildtaggen. Den kräver ingen serverkonfiguration (redigering av nginx.conf) och stöder alla CDN-leverantörer.

Om du använder den här metoden ändras HTML-koden för WebP-leverans. Det fungerar inte med bakgrundsbilder, är inkompatibelt med vissa teman, caching-plugins, lazy loading plugins, etc.

Om du använder den här metoden kommer alla img-taggar att konverteras så här:

<picture><source srcset="img.webp" type="image/webp"><source srcset="img.jpg" type="image/jpeg"><img src="img.jpg"></picture>

Om webbläsaren stöder WebP levereras motsvarande fil, annars levereras en vanlig bild.

Anpassa en bildtagg för WebP i WordPress

Det enklaste sättet att ställa in en bildtagg är genom WebP Express.

Ställ in arbetsläget på "CDN friendly" och aktivera "Alter HTML".

Slutsats

Jag önskar att den dagen skulle komma då alla webbläsare stöder WebP!

Om du kan spendera några dollar i månaden, så är det enklaste och mest effektiva sättet att använda ett CDN som BunnyCDN, som konverterar bilder till WebP i farten. Annars, håll dig till metod #2 som jag nämnde ovan.