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

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

Många WordPress -Användare är intresserade av Image Format WebP eftersom den 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, dock bör vara särskilt användbart 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 ta till sig information de ser snabbare och bättre. Den snabba utsikten över en skylt, bläddra igenom en hemsida innan bussen anländer i fem minuter. Vi känner alla till dessa situationer. 

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

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

  • WebP stöder videoformatet VP8, som är .B för små animerade bilder som vi känner det från GIF-filer.
  • Den maximala bildstorleken för WebP är 16 383 x 16 383 bildpunkter.
  • Du kan också skala upp eller ned en WebP-bild, som liknar 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 din servers .htaccess
- Funktion.php fil av din 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 ca 25-30 procent mindre än en PNG, utan någon förlust av kvalitet. Bakgrunder kan dock fortfarande vara transparenta. Detta varierar bara mellan själva bilden, bilddjup, detaljer, färgrymd etc. På grund av den lilla filstorleken medför WebP-formatet en klar fördel vad gäller prestanda.

png vs webp

De två bilderna visar att WebP-bilden ä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. 

Missgynnar av PNG-formatera

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

PNG används t.ex. Detta gör formatet mycket varierande och populär i grafisk design, eftersom många element ofta möts där.

PNG finns i PNG-8- och PNG-24-format. I PNG-8 används 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. Således är PNG-24 liknar JPEG-formatet. Så låt oss gå vidare med JPG-format:

Bilden format JPG

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

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, jag ställa 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 för bildskärmarna och den enhet med vilken du visar bilderna. Nyligen hade jag problemet att mina bilder såg annorlunda ut på min skärm och hemsida. 

Mitt tips: Numera alla webbläsare är i sRGB-läge. Så om du skapar något för webben i Photoshop, till exempel, ställa in din bildskärm till sRGB. Då 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 bygger på den förlustiga videokomprimeringsalgoritmen VP8 med komprimering upp till 24 bitar och en maximal storlek på 16 383 x 16 383 pixlar. Så det har alltid en färg djup 24 bitar, precis som JPG. Färgdjupet i PNG varierar från 8 till 48 bitar, den senare gör lite mening 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ött, grönt och blått.

Varje färg individuellt – rött, grönt och blått – kan spelas in i 1 byte (8 bitar) på pc:n. En pixel i 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 är termen YUV sammansatt av Y = luminans (ljusstyrka) och du och V betyder krominans (färg). Så YUV är som RGB, som visar en färg.

Men varför behöver vi det egentligen?

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, halveras storleken på grund av det sätt den beräknas och sedan lagras. Det är komplicerat, men jag tror att informationen i detta nu är tillräcklig och ger en 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 ges 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.

I följande lista visas vilka webbläsarversioner som redan har nytta av WebP på vilka ändenheter. 

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

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

Aktuellt stöd för mobila enheter

– Android Browser 5.6 eller senare (Chromium 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 (Desktop 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... De dåliga nyheterna ä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-bildoptimeraren (gratisversion). 

Optimus:

Optimus WebP

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

ShortPixel :

Kortpixel WebP

I ShortPixel kan du placera bocken enligt ovan. Men innan dess skulle jag återställa alla bilder du har till den ursprungliga och sedan alla på en gång med den Plugin Optimera. Då ska du också se samtidigt att du har olika filtyper från dina bilder.

EWWW Bildoptimerare:

Ewww-bildoptimerare WebP
  1. Justeringar i .htaccessen av 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:

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{HTTP_ACCEPT} image/webp
    RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
    RewriteRule ^(wp-content/uploads.+)\.(jpe?g|png)$ $1.webp
[T=image/webp,E=accept:1]

</IfModule>
<IfModule mod_headers.c>
    Header append Vary Accept env=REDIRECT_accept
</IfModule>
AddType image/webp .webp

Och på en Nginx:

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

På RAIDBOXES denna omskrivningsregel stöds redan av företaget. 

Var hittar jag dem?

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

Det finns ett tredje - och något komplicerat - sätt att skapa något i .php fil WordPress - Themes så att du kan ladda upp bilder i WebP-format hemifrån. Hur detta fungerar kan du till exempel i denna artikel.

Slutsats

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

Plugin Ja | Nej?

Det finns mycket bra Plugins , som kommer att ta arbete ifrån dig under WebP stöd och optimera dina bilder. Personligen har jag Plugin Optimus. Annars skulle det säkert vara värt att överväga att inkludera det i sidan som en kod, särskilt sedan du då Plugin skulle spara mer. Men kärnpunkten är att du är Plugin väl råd 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ämplig 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 annonsmaterial 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 enskild webbplats och en meningsfull logotyp och branding. Aspire till storhet

Liknande artiklar

Kommentarer om den här artikeln

Skriva en kommentar

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