Många WordPress-användare är intresserade av WebP-bildformatet eftersom det kombinerar fördelarna med JPG och PNG. Samtidigt ersätter det dock inte de två vanliga bildformaten. För WordPress-användare som använder många bilder bör WebP vara särskilt användbart. Varför det är så förklarar vi i den här artikeln.

I dessa tider blir det allt viktigare att göra användarupplevelsen för din målgrupp 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 blicken på en skylt, bläddra igenom en hemsida innan bussen anländer om 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 pixlar.
• Du kan också skala upp eller ned en WebP-bild, liknande SVG-filer, som många inte tillåter av säkerhetsskäl.

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 kvalitetsförlust. Bakgrunder kan fortfarande vara transparenta. Detta varierar bara mellan själva bilden, bilddjup, detaljer, färgrymd etc. På grund av den lilla filstorleken ger WebP-formatet en tydlig fördel när det gäller prestanda.

Baserat på de två bilderna kan man säga att WebP-bilden är 30,1 procent mindre än PNG-versionen. Jag valde den förlustfria metoden här och ställde medvetet in kvalitetskontrollen på 80 procent. De återstående 20 av 100 procent kan nästan aldrig erkännas, så 80 procent är helt tillräckligt för onlineapplikationer. 

Missgynnar av PNG-formatera

PNG ä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 datorer sparar bilder som PNG. Varför? – Eftersom skärmdumpar ofta är 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 mångsidigt och populärt inom 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 bitar 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 är således jämförbart med JPEG-formatet. Så låt oss fortsätta med JPG-formatet:

Bilden format JPG

I direkt jämförelse med JPG är WebP-bilden cirka 25 till 35% mindre - trots bildens konsekventa kvalitet. Det finns inget att säga mellan de två kandidaterna JPG och WebP - WebP är helt enkelt det bättre valet.

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

JPG-formatet är lämpligt om du kan leva med kvalitetsförluster och det beror inte på skärpa och detaljer. Formatet används ofta för färgglada bilder, eftersom kompositionen av JPG gör det möjligt att visa många färger och gradering.  

En liten anteckning: Hur bilder i slutändan ser ut beror på många faktorer: till exempel skärmupplösningen (HD, QHD, UHD / 4K, 8K, etc.), skärminställningen som sRGB, Adobe RGB, respektive visningsläge för dina bildskärmar och enheten som du tittar på bilderna. Under de senaste dagarna hade jag själv problemet att mina bilder såg annorlunda ut på min skärm och webbplatsen. 

Färgrymd/djup

Det är här det blir lite komplicerat. WebP är baserad på den förstörande videokomprimeringsalgoritmen VP8, med en komprimering på 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, liksom JPG. Färgdjupet på PNG varierar från 8 till 48 bitar, där den senare är lite meningsfull på grund av den stora filstorleken,

Som VP8 Bitstream fungerar den förlustfria generationen webp-bilder bara med 8-bitars bildformatet - även känt som YUV420-bildformat.

YUV420-formatet upplöstes: 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ö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 hur den beräknas och sedan sparas. Det är komplicerat, men jag tror att informationen är tillräcklig 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 det ses att "mobila enheter" är mer i fokus, vilket också förklarar varför bättre stöd för WebP tillhandahålls för smarttelefonen. Se därför till att titta på 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 använder WebP på vilka enheter.

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

• Firefox från version 65.xOpera från version 39.xChrome från version 23.xEdge från version 17.xInternet Explorer från version 11.x

Aktuellt stöd för mobila enheter

• Android-webbläsare från version 5.6 (Chromium 67)Android Chrome från version 73.xOpera Mini alla versionerOpera Mobile från version 12.xAndroid Firefox från version 66.xInternet Explorer Mobile från version 11.x

WebP VP8 (Animerade bilder)

• Google Chrome (Desktop och Android) från version 32.xMicrosoft Edge från version 18.xFirefox från version 65.xOpera från version 19.x

WebP-stöd för andra webbläsare och enheter som jag inte kunde hitta för tillfället.

Krav för WebP i WordPress

Än så länge ingen, men... Tyvärr är den dåliga nyheten att WordPress för närvarande inte stöder WebP-bilder på egen hand. Därför kommer vi nu 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:

Tyvärr stöds WebP endast av den betalda versionen av Optimus. Där Raidboxes har redan integrerat cachelagring på serversidan behöver du inte ett plugin -plugin för "Cache Enabler", som rekommenderas här av Optimus.

ShortPixel :

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:

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;

Vid Raidboxes Förresten stöds den här skriv omskrivningsregeln redan som standard.

Var hittar jag dem?

Filen finns på webbservern där WordPress installerades. Rotkatalogen är rotkatalogen där domänen finns hos webbhotellet. Om du inte kan se dem måste du ställa in "fjärrfilmasken" till -la så att du också kan se dolda filer. Naturligtvis kräver detta att du har åtkomsträttigheter eller till och med är värd för dig själv och använder ett FTP-program som FileZilla.

Det finns ett tredje - och något komplicerat - sätt att lägga till något till funktionen.php fil i ditt WordPress-tema så att du kan ladda upp bilder i WebP-format som standard. Du kan läsa hur detta fungerar i den här artikeln.

För vem är WebP lämplig?

I princip är WebP meningsfullt 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å lägger stor vikt vid en snabb laddningstid. Men andra WordPress-användare som creatives eller de som har något att visa i visuell form bör också göra allt för att göra användarupplevelsen av sina potentiella kunder och fans så trevlig som möjligt.

Slutsats om WebP och WordPress

Tyvärr är WebP ännu inte vanligt som JPG och PNG, men det kommer säkert att bli allt viktigare i framtiden. När allt kommer runt kan WebP förbättra webbplatsens prestanda och därmed användarupplevelsen och tillfredsställelsen för din målgrupp.

Plugin: Ja eller Nej?

Det finns utmärkta plugins som befriar dig från ditt webP-supportarbete och även optimera dina bilder. Personligen använde jag plugin Optimus för detta. Annars skulle det säkert vara värt att överväga att inkludera det på sidan som kod, särskilt eftersom du då skulle spara dig ett plugin mer. Men slutsatsen är att du är välrådd med ett plugin för denna fråga.

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