WebP och WordPress = förbättrad laddningstid och prestanda?

Stefan Römershäuser Senast uppdaterad den 21 oktober 2020
8 Min.
webp (webp) WordPress
Senast uppdaterad den 21 oktober 2020

Många WordPress -Användarna är intresserade av imageformat WebP eftersom det kombinerar fördelarna med JPG och PNG. Samtidigt ersätter den dock inte de två vanliga bildformaten. För WordPress användare som använder många bilder bör dock vara särskilt användbara för WebP. Vi förklarar varför detta är fallet i den här artikeln.

I dessa tider, det blir allt viktigare att göra användarupplevelsen av din webbplats besökare så trevlig och enkel som möjligt. Människor är visuella och kan ofta absorbera information som de ser snabbare och bättre. Den snabba vyn av en skylt, bläddra igenom en hemsida innan bussen anländer i fem minuter. Vi känner alla till dessa situationer. 

Eftersom bilder vanligtvis står för mer än hälften av en webbplats lagringsutrymme, det finns en hel del potential för optimering.

Nu några fakta om WebP innan vi går till ämnena.

  • WebP stöder videoformat VP8, som är lämplig för små animerade bilder som vi känner den från GIF-filer.
  • Den maximala bildstorleken för WebP är 16 383 x 16 383 pixlar.
  • Du kan också skala upp eller ned en WebP-avbildning, liknande SVG-filer, men många tillåter det inte av säkerhetsskäl.

Följande ämnen behandlas i denna artikel idag:

  1. Skillnader jämfört med JPG och PNG

- Filstorlekar jämfört
- Färgrymd/djup
- Support/support

  1. Vilka krav behöver jag för WebP i WordPress ?
  2. Hur klistrar jag in WebP-bilder i WordPress ?

- A. Plugin Använda
- Lägg till något i serverns .htaccess
- Function.php fil till dig WordPress - Themes Komplettera. 

  1. Min slutsats om WebP

Skillnader jämfört med PNG och JPG 

WebP och PNG

En WebP-bild är upp till cirka 25-30 procent mindre än en PNG, utan förlust av kvalitet. Bakgrunder kan dock fortfarande vara genomskinliga. Detta varierar bara mellan själva bilden, bilddjup, detaljer, färgrymd, etc. På grund av den lilla filstorleken ger WebP-formatet en klar fördel när det gäller prestanda.

png vs webp

De två bilderna visar att WebP-avbildningen är 30,1 procent mindre än PNG-versionen. Jag har valt den förlustfria metoden här och medvetet satt styrenheten av kvaliteten till 80 procent. De återstående 20 av 100 procent kan nästan aldrig ses, så 80 procent är helt tillräckligt för online-applikationer. 

Nackdelar med PNG-format

PNGs är inte lämpliga för fotografer eftersom de skapar en mycket större bildfil. PNG-formatet används oftast för skärmbilder eftersom datorer lagrar bilder som PNG. Varför? - Eftersom skärmdumpar är ofta en blandning av bild och text. 

PNG används till exempel för bilder som kräver en genomskinlig bakgrund. Detta gör formatet mycket varierande och populärt i grafisk design, eftersom många element ofta möts där.

PNG finns i PNG-8- och PNG-24-format. PNG-8 använder ett färgdjup på 8-bitars och högst 256 färger. PNG-24 använder ett 24-bitars färgdjup med upp till 16,7 miljoner färger. Png-24 liknar således JPEG-formatet. Så låt oss gå vidare med JPG-format:

Bildformatet JPG

I direkt jämförelse med JPG, webp bilden är ca 25 till 35% mindre - trots den konstanta kvaliteten på bilden. Det finns inget att säga mellan de två kandidaterna JPG och WebP - WebP är helt enkelt bättre val.

jpg vs webp

Baserat på de två bilderna kan man säga att WebP-bilden är 24,7 % mindre än JPG-versionen. I JPG-versionen ställer jag in kvaliteten på "Hög".

JPG-formatet är lämpligt om du kan leva med kvalitetsförluster och det spelar ingen roll för skärpa och detaljer. Formatet används ofta för färgglada bilder, eftersom sammansättningen av JPG gör det möjligt att representera många färger och graderingar.  

Liten anmärkning:

Hur bilder i slutändan ser ut för dig beror på många faktorer: till exempel skärmupplösningen (HD, QHD, UHD/4K, 8K, etc.), skärminställningen som sRGB, adobeRGB, bildskärmsläget och enheten som du visar bilderna med. Nyligen hade jag problemet att mina bilder såg annorlunda ut på min skärm och hemsida. 

Mitt tips: Numera är alla webbläsare i sRGB-läge. Så om du skapar något för webben i Photoshop, till exempel, ställa in bildskärmen till sRGB. Sedan får du se hur det ser ut när det landar på din sida. 🙂 

Färgrymd/djup

Det blir lite komplicerat här. WebP baseras på den förstörande videokomprimeringsalgoritmen VP8 (VP8) med komprimering upp till 24 bitar och en maximal storlek på 16 383 x 16 383 pixlar. Så det har alltid ett färgdjup på 24 bitar, precis som JPG. Färgdjupet i PNG varierar från 8 till 48 bitar, den senare gör föga meningsfullt på grund av den stora filstorleken, 

Som en VP8 bitstream, förlustfri skapande av WebP-bilder fungerar bara med 8-bitars bildformat - även känd som YUV420 bildformat.

YUV420-formatet bubblar upp: Låt oss först titta på hur en bildskärm visar en bild som standard: varje färg kan representeras av tre färger (den så kallade RGB-modellen), dvs röd, grön och blå.

Varje färg individuellt – röd, grön och blå – kan spelas in i 1 byte (8 bitar) på datorn. En pixel på en bildskärm har 3 byte (varje byte har information om färgen röd, grön och blå)

Det mänskliga ögat är mycket känslig när det gäller ljusstyrka, men mindre känsliga för färger och deras graderingar. Till exempel består termen YUV av Y = luminans (ljusstyrka) och du och V betyder krominance (färg). Så YUV är som RGB, som visar en färg.

Men varför behöver vi det ändå?

Eftersom filstorleken är viktig. I RGB-modellen måste vi använda 3 byte (24 bitar) för att lagra en färg. Med YUV, å andra sidan, är storleken halveras på grund av hur den beräknas och sedan lagras. Det är komplicerat, men jag anser att informationen är tillräcklig i det här läget och ger viss klarhet.

Support/support

Statistiken visar vilken webbläsare som används mest av vilken "slutenhet" som PC, surfplatta eller smartphone. Eftersom WebP inte stöds av alla webbläsare bör du ha detta i åtanke.

Naturligtvis kan du se att "mobila enheter" är mer i fokus, vilket också förklarar varför bättre stöd för WebP tillhandahålls för smartphone. Se därför till att kontrollera din användarstatistik och se från vilken webbläsare och enhet du får flest besökare.

Följande lista visar vilka webbläsarversioner som redan har nytta av WebP på vilka slutenheter. 

Uppdaterat stöd för stationära webbläsare

- Firefox från version 65.x
– Opera från version 39.x
- Chrome från version 23.x
- Kant från version 17.x
- Internet Explorer version 11.x eller senare

Uppdaterat stöd för mobila enheter

– Android Browser 5.6 eller senare (Krom 67)
- Android Chrome från version 73.x
- Opera Mini alla versioner
- Opera Mobile från version 12.x
- Android Firefox från version 66.x
- Internet Explorer Mobile version 11.x eller

WebP VP8 (animerade bilder)

– Google Chrome (Skrivbord och Android) version 32.x
- Microsoft Edge version 18.x eller senare
- Firefox från version 65.x
– Opera från version 19.x

Jag kunde inte hitta WebP-stöd för andra webbläsare och enheter just nu.

Vilka är förutsättningarna för WebP i WordPress ? 

Än så länge ingen, men... Den dåliga nyheten är tyvärr att WordPress för närvarande inte stöder WebP-bilder på egen hand. Därför går vi nu vidare till nästa punkt.

Olika sätt att använda WebP i WordPress att inkludera:

  1. A Plugin Använda

För detta ändamål kan till exempel Plugins ShortPixel (Gratis version), Optimus (Betald version) eller EWWW Image Optimizer (Free Version). 

Optimus:

Optimal WebP

Tyvärr stöds WebP endast av den betalda versionen av Optimus. Det RAIDBOXES redan integrerad cachelagring på serversidan behöver du inte en "Cache Enabler" Plugin , som rekommenderas här av Optimus.

ShortPixel:

Shortpixel WebP

I ShortPixel kan du markera markeringen som visas ovan. Men innan dess skulle jag återställa alla bilder du har till originalet och sedan alla på en gång med Plugin Optimera. Då ska du också se samtidigt att du har olika filtyper från dina bilder.

EWWW Bildoptimerar:

Ewww Bildoptimerar WebP
  1. Justeringar i .htaccess för WordPress Göra

Vissa värdar har möjlighet att ändra något på HTACCESS-filen, avsiktligt blockerad av säkerhetsskäl. Om du är värd på en Apache-server kan du göra följande justering:


    Skriv omEngine På
    RewriteCond %{HTTP_ACCEPT} image/webp
    RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
    Skriv omRule (wp-content/------------------------------------------ (jpe?g|png)
[T=image/webp,E=accept:1]



    Rubriktillägg Vary Acceptera env=REDIRECT_accept

AddType bild/webp .webp

Och på en Nginx:

http config block
map $http_accept $webp_ext {
standard "";
"A*webp" ".webp";
}
server config block
location ~* ^/wp-content/.+\.(png|jpg)$ {
add_header Vary Acceptera;
try_files $uri-webp_ext $uri =404;

På RAIDBOXES Den här skrivregeln stöds redan av företaget. 

Var kan jag hitta dem?

Filen finns på webbservern, där WordPress Installerat. Rotkatalogen är huvudkatalogen där domänen finns på webbhotell. Om du inte kan se dem måste du ställa in "fjärrfilmasken" på -la så att du också kan se dolda filer. Naturligtvis förutsätter detta att du har åtkomsträttigheter eller ens värd dig själv och använda ett FTP-program som FileZilla. 

Det finns ett tredje - och något komplicerat - sätt att göra något i din function.php fil WordPress - Themes så att du kan ladda upp bilder i WebP-format hemifrån. Hur detta fungerar kan du till exempel i den här artikeln Läsa.

Slutsats

Tyvärr är WebP ännu inte samma sak som JPG och PNG, men det kommer säkert att bli allt viktigare i framtiden. Slutligen förbättrar WebP webbplatsens prestanda och därmed användarupplevelsen och tillfredsställelsen hos dina webbplatsbesökare.

Plugin Ja | Nej?

Det finns mycket bra Plugins , som tar arbetet ifrån dig under WebP-stöd och optimerar dina avbildningar. Personligen har jag Plugin Optimus. Annars skulle det säkert vara värt att överväga att inkludera det på sidan som en kod, särskilt eftersom du då Plugin skulle spara mer. Men summan av kardemumman är att du är Plugin klokt i denna fråga.

Vem är WebP lämplig för?

WebP är i grunden användbart för varje sida. Naturligtvis är formatet särskilt lämpligt för webbplatser med många bilder. Till exempel för fotografer som vill hålla sin bildkvalitet så hög som möjligt, men ändå fäster stor vikt vid en snabb laddningstid. Men även andra WordPress -Användare som kreatörer eller de som har något att visa i visuell form bör göra allt för att göra användarupplevelsen av sina potentiella kunder och fans så trevlig som möjligt.

Jag hoppas att du gillade artikeln och jag ser fram emot din åsikt! 

Stefan är en spirande bloggare med sin hemsida aspiring-artist.com. Han bloggar om konst, insåg WordPress sidor för andra blivande konstnärer och är en rådgivande grupp. Konstnärer behöver också en individuell webbplats och en meningsfull logotyp och branding. Sträva efter storhet

Liknande artiklar

Kommentarer om den här artikeln

Skriv en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är * Markerade.