Om du vill snabba upp din WordPress-webbplats så kan du få en betydande avkastning på din investering genom att minska filstorleken på dina bilder. I genomsnitt så står bilderna för ungefär hälften av filstorleken på en webbsida. Som ett resultat så kan även mindre förbättringar ge enorma resultat. WebP kan hjälpa dig enormt mycket med detta!
WebP är ett modernt bildformat som kan hjälpa dig att minska storleken på dina bilder utan att ändra deras utseende. Om du lär dig att konvertera en bild till WebP så kan du i genomsnitt minska dess filstorlek med ~25-35 % utan någon märkbar kvalitetsförlust.
De flesta moderna webbläsare och WordPress 5.8+ har stöd för WebP. I den här artikeln så kommer vi att djupdyka in i detta spännande nya bildformat och visa hur du kan utnyttja dess fantastiska egenskaper.
Är du redo? Då sätter vi igång!
Vad är WebP?
Vad är en WebP-fil? I ett nötskal så är WebP ett bildformat som har utvecklats av Google för att göra bilder mer optimerade än populära bildformat (på den tiden). Det finns exempelvis bildformat som JPEG eller JPG och PNG.
Obs: Kolla in hur olika bildfilstyper kan påverka hastigheten på din webbplats.
WebP fokuserar på att leverera samma bildfil, bara med mindre filstorlekar. Genom att minska storleken på dina bildfiler så kan du fortfarande ge besökarna på din webbplats samma upplevelse, men din webbplats laddas snabbare.
I Google’s undersökning av WebP-komprimering så fann Google exempelvis att en WebP-bildfil i genomsnitt är:
- 25-34 % mindre än en jämförbar JPEG-bild.
- 26 % mindre än en jämförbar PNG-bild.
Detta är anledningen till att om du kör din webbplats genom PageSpeed Insights så är en av de många rekommendationerna att servera bilder i nästa generations format som WebP:
Så hur uppnår Google’s WebP-format dessa minskningar av filstorleken?
För det första så har det stöd för förstörande komprimering och förlustfri komprimering. Den exakta minskningen beror med andra ord på om du använder förstörande komprimering eller förlustfri komprimering.
Med förstörande komprimering så använder WebP något som kallas ”prediktiv kodning” för att minska filstorleken. Prediktiv kodning använder värdena för närliggande pixlar i en bild för att förutsäga värden och kodar sedan bara skillnaden. Den är baserad på VP8 key frame-kodning.
Förlustfri WebP använder en mycket mer komplicerad uppsättning av metoder som har utvecklats av WebP-teamet.
Om du vill lära dig mer om WebP-komprimeringsteknikerna i detalj så är den här artikeln en bra utgångspunkt.
Vilka webbläsare stöder WebP?
För att WebP-bilder ska fungera så måste besökarens webbläsare ha stöd för dem. Även om webbläsarstödet har ökat mycket så är kompatibiliteten med WebP tyvärr fortfarande inte universell.
WebP-bilder stöds av populära webbläsare som exempelvis:
- Chrome (dator och mobil)
- Firefox (dator och mobil)
- Microsoft Edge
- iOS och macOS Safari (endast macOS 11 Big Sur och senare)
- Opera (dator och mobil)
När vi skriver det här inlägget så har Safari endast delvis stöd för WebP-bilder.
Internet Explorer saknar också WebP-stöd (men Edge stöder WebP eftersom den är baserad på Chromium). IE-användningen har dock krympt till mindre än 1 % av alla internetanvändare. Det är en välsignelse för alla på webben!
Totalt sett så använder cirka 95 % av internetanvändarna en webbläsare med stöd för WebP. Så även om det verkligen har ett majoritetsstöd så är dessa 5 % ett mindre hinder. Särskilt när det handlar om Safari-användare på äldre macOS-versioner. I vår WordPress WebP-handledning nedan så visar vi dig hur du hanterar detta så att alla dina besökare får en bra upplevelse.
Jämförelse av WebP vs JPG vs PNG storlek
Enligt Google’s tester så är WebP-bilder:
- 25-34 % mindre än jämförbara JPEG-bilder.
- 26 % mindre än liknande PNG-bilder.
Om du vill veta mer om Google’s metodik så hittar du direktlänkar till de fullständiga resultaten nedan:
Båda testerna är baserade på över 11 000 bilder, bland annat:
- Den berömda Lenna-bilden
- 24 bilder från Kodaks bildsvit med äkta färger
- 100 bilder från Tecnick.com
- Ett slumpmässigt urval av över 11 000 bilder från Google Image Search
Så här använder du WebP-bilder i WordPress
Från och med WordPress 5.8 så kan du använda bildformatet WebP på samma sätt som JPEG-, PNG- och GIF-format. Det är bara att ladda upp bilderna till mediebiblioteket och inkludera dem i ditt innehåll. WordPress 5.8+ har stöd för WebP-formatet som standard. Som ett resultat så behöver du inte installera plugins från tredje part för att ladda upp WebP-bilder. Det borde räcka för de flesta vanliga användningsområden.
Om du vill komma igång direkt så kan du läsa vår snabbguide om hur man använder WebP-bilder i WordPress 5.8+. Vi föreslår att du går igenom varningarna om WebP-stödet i WordPress.
Omkring 5 % av alla (främst Safari-användare på äldre macOS) använder dock en webbläsare som inte stöder WebP. Om du konverterar WebP-bilder och använder dem direkt i ditt innehåll så kan dessa besökare inte se dina bilder. Detta förstör deras surfupplevelse.
Det är dessutom inte lika enkelt att generera WebP-bilder som att få fram en JPG/JPEG-bild, som är standardformatet för bildfiler i de flesta kameror, smartphones och bildbibliotek online. WordPress stöder inte automatisk bildkonvertering till WebP-format (ännu!).
Det är dock ingen fara! Det finns en lösning.
Du kan använda ett WordPress-plugin som konverterar dina originalbilder till WebP-formatet och som även tillhandahåller originalbilden som en reservlösning om en besökares webbläsare inte stöder WebP.
Om du exempelvis laddar upp en JPEG-fil till din webbplats så kommer pluginet att:
- Konvertera JPEG-filen till WebP och servera WebP-versionen för Chrome, Firefox, Edge osv.
- Visa den ursprungliga JPEG-filen för besökare som surfar med Safari (på äldre macOS-versioner) och andra webbläsare som inte stöder WebP.
På så sätt kan alla se din bild och alla får den snabbaste upplevelsen.
Nedan så går vi igenom några av de bästa WebP WordPress-pluginen, som alla fungerar med Kinsta och Kinsta CDN.
Kinas funktion för bildoptimering
Den här första är inte precis ett plugin, utan snarare en inbyggd funktion: Kinsta’s Bildoptimering.
Den här funktionen – som nås via Kinsta’s anpassade instrumentpanel, MyKinsta – skapar automatiskt optimerade WebP-kopior av webbplatsens originalbilder. Den visar sedan den mindre av de två bildfilerna för dina besökare.
Genom att alltid se till att den minsta möjliga filen hämtas så ökar bildoptimeringen laddningstiderna omedelbart. Detta kan både förbättra dina SEO-resultat och dina användares upplevelse avsevärt. Funktionen drar direkt nytta av Kinsta’s blixtsnabba CDN för att leverera filerna ännu snabbare.
Webbplatsägare kan välja mellan förstörande komprimering och förlustfri komprimering för sina WebP-bilder, beroende på deras behov. Optimering kan även slås på eller av när som helst om du behöver göra några tester.
Funktionen för bildoptimering är helt kostnadsfri för alla Kinsta-kunder. Så här gör du för att aktivera den:
- Ladda upp dina bilder till ditt Kinsta-hostade WordPress-mediebibliotek.
- Logga in på din MyKinsta-instrumentpanel.
- Navigera till WordPress Webbplatser > webplatsnamn > CDN.
- Klicka på knappen Inställningar under avsnittet Bildoptimering.
- Välj mellan förlustfri och förstörande komprimering och klicka sedan på Spara inställningar.
Om du inte redan har Kinsta-plattformen så kan du prova funktionen själv utan kostnad genom att boka en demo.
Förlustfri komprimering vs förstörande komprimering
Du kan välja mellan förlustfri och förstörande komprimering för dina filer. Även om båda metoderna komprimerar dina bildfiler och tar bort deras metadata så finns det en stor skillnad mellan dem:
- Förlustfri bildoptimering: Förlustfri bildkomprimering har ingen inverkan på kvaliteten på dina bilder. Du bör välja det här alternativet om bildkvaliteten är viktigare för dig än hastigheten.
- Förstörande bildoptimering: Förstörande bildkomprimering kan försämra kvaliteten på dina bilder. Välj det här alternativet om du vill maximera och prioritera hastighet framför bildkvalitet.
Därefter så ska vi titta på några installerbara WordPress-plugins för optimering.
ShortPixel
ShortPixel är ett populärt WordPress-plugin för bildoptimering. Det kan hjälpa dig att automatiskt ändra storlek och komprimera bilderna som du laddar upp till din WordPress-webbplats.
Som en del av dess funktionslista så kan ShortPixel även hjälpa dig att automatiskt konvertera bilder till WebP och servera dessa bilder till webbläsare som stöder det.
ShortPixel räknar varje WordPress-bildstorlek som du optimerar som en kredit. Så om du vill optimera flera bildstorlekar för miniatyrbilder kan en bild tänkas använda många krediter. Det finns inga filstorleksgränser för bilder.
Du kan sprida dina ShortPixel-krediter över ett obegränsat antal webbplatser. Det finns inga begränsningar per webbplats(och alla dina webbplatser kan använda samma ShortPixel-konto).
För att använda ShortPixel för att servera WebP-bilder på WordPress så måste du installera pluginet från WordPress.org. Lägg sedan till din API-nyckel(som du får genom att registrera dig för ett kostnadsfritt ShortPixel-konto).
På fliken Allmänt kan du ställa in grundläggande inställningar för hur bildoptimering fungerar. Exempelvis vilken komprimeringsnivå som ska användas och om du ska ändra storlek på bilderna eller inte:
Om du vill aktivera WebP-bilder så går du till fliken Avancerat och:
- Markerar rutan för WebP Bilder
- Markerar rutan för att leverera WebP-versioner… (den här rutan visas efter att du har markerat den första rutan)
- Markera radioknappen för Användning av <PICTURE>-taggens syntax (detta visas efter att du har markerat föregående ruta)
- Lämna kvar standardvalet Endast via WordPress-krokar
Spara sedan dina ändringar.
Om du hostas av Kinsta så kommer ShortPixel att ge dig ett varningsmeddelande om att konfigurera serverkonfigurationsfiler på Nginx. Om du vill konfigurera dessa inställningar så kan du kontakta Kinsta-supporten, så konfigurerar vi gärna serverkonfigurationen åt dig.
Imagify
Imagify är ett populärt plugin för bildoptimering från samma utvecklare som WP Rocket.
Det kan automatiskt komprimera och ändra storlek på bilderna som du laddar upp till din WordPress-webbplats. Det kan sedan hjälpa dig att konvertera dem till WebP och servera dessa versioner till besökare med webbläsare som stöder det.
När det gäller funktioner så har ShortPixel och Imagify många likheter. Den mest betydande skillnaden kommer när du tittar på prissättningen. ShortPixel debiterar dig baserat på bilder utan någon storleksbegränsning per bild. Imagify debiterar dig baserat på den totala filstorleken, utan någon bildbegränsning.
Så om du behöver optimera många stora bilder kan ShortPixels metod vara billigare. Men om du behöver optimera många små bilder kan Imagifys metod vara mer prisvärd.
Imagify har en begränsad kostnadsfri nivå som tillåter 25 MB optimeringar per månad. Därefter så börjar betalda planer på 4,99 dollar per månad för upp till 1 GB eller 9,99 dollar för en engångskredit på 1 GB.
Precis som hos ShortPixel så kan du sprida dina kontogränser över ett obegränsat antal webbplatser.
För att använda Imagify för att leverera WordPress WebP-bilder så måste du installera pluginet från WordPress.org och lägga till din API-nyckel för att komma igång.
När du har aktiverat pluginet så kan du använda rutan Allmänna inställningar för att välja komprimeringsnivå.
För att aktivera WebP-bilder så scrollar du ner till avsnittet Optimering och hittar avsnittet WebP-format:
- Markera rutan för att Skapa webp-versioner av bilder
- Markera rutan för att visa bilder i webp-format…
- Markera radioknappen för att använda <picture>-taggar
Precis som med ShortPixel så måste du, om du hostas av Kinsta, skapa en Nginx-regel för WebP-cachelagringsbuckets (kontakta Kinsta-supporten).
Optimole
Optimole är ett plugin för bildoptimering i WordPress som fungerar lite annorlunda än Imagify och ShortPixel. Optimole kan automatiskt komprimera och ändra storlek på dina bilder. Det har dock även två andra anmärkningsvärda funktioner:
- Det kan servera dina bilder via sitt CDN (som drivs av Amazon CloudFront).
- Det erbjuder adaptiva bilder i realtid, varvid Optimole levererar den optimalt stora bilden för varje besökare. En person som surfar på en liten skärm får exempelvis en bild med lägre upplösning än en person som surfar på en Retina-skärm.
Detta tillvägagångssätt liknar andra optimerings-/manipuleringstjänster i realtid som Cloudinary, imgix, KeyCDN Image Processing osv.
Optimole kan även leverera WebP-bilder till besökare med webbläsare som stöder det som en del av denna bildoptimering i realtid.
Optimole har en begränsad kostnadsfri plan som kan hantera levererans av bilder till cirka ~5 000 besökare per månad. Därefter så börjar betalda planer på 19 dollar per månad för ~25 000 besökare.
För att komma igång så måste du installera pluginet från WordPress.org och aktivera det med en API-nyckel(som du kan få genom att registrera dig för ett kostnadsfritt Optimole-konto).
När du har gjort detta så börjar Optimole automatiskt att optimera dina bilder och leverera dem via sitt CDN. WebP-stödet är aktiverat som standard, så du behöver inte aktivera det manuellt.
Om du vill konfigurera andra inställningar, som komprimeringsnivåer och skalningsbeteende, så kan du gå till Media → Optimole → Inställningar:
Eftersom Optimole sköter leveransen av dina bilder via sitt CDN så behöver du inte ställa in några Nginx-regler om du hostas av Kinsta.
Sammanfattning
Bilderna på din WordPress-webbplats utgör en stor del av filstorleken på en genomsnittlig sida. Om du kan hitta sätt att minska storleken på dina bilder så kan du snabba upp din webbplats utan att skada användarupplevelsen. WebP är ett modernt bildformat som gör just detta genom att erbjuda en ~25 % minskning av filstorleken jämfört med jämförande JPEG- eller PNG-filer.
Omkring 95 % av Internetanvändarna använder redan en webbläsare som stöder WebP. WordPress 5.8+-versioner har även stöd för WebP från och med nu. Så det finns ingen anledning att inte använda detta.
En minoritet av alla webbläsare, särskilt Safari i äldre macOS-versioner, har dock fortfarande inte stöd för WebP. Du kan därför inte servera WebP-bilder till alla besökare ännu. Det finns dock en lösning på det här problemet. Du kan använda ett WordPress-plugin som konverterar bilder till WebP och serverar WebP-versioner till besökare vars webbläsare har stöd för det. Du använder samtidigt originalbilderna för besökare vars webbläsare inte har stöd för det.
Om du vill ha fler taktiker för att optimera bilder så kan du läsa vår fullständiga guide för att optimera bilder för webbprestanda. Glöm inte att Kinsta’s kunder automatiskt kan generera komprimerade WebP-bilder, utan kostnad för diskutrymme. De behöver bara utnyttja Kinsta’s kostnadsfria, inbyggda funktion för bildoptimering.
Om du har några frågor om hur du använder WebP på WordPress så kan du fråga oss i kommentarerna nedan!
Salman Ravoof är en självlärd webbutvecklare, författare, skapare och en stor beundrare av fri och öppen källkod (FOSS). Förutom teknik är han intresserad av vetenskap, filosofi, fotografi, konst, katter och mat. Lär dig mer om honom på hans hemsida och kontakta Salman på X.
Lämna ett svar