Med WordPress 5.8 kommer du kunna ladda upp bilder i filformatet WebP. Tidigare har vi varit tvungna att installera tillägg för att konvertera jpg och png-filer till WebP-formatet. Nu kommer vi kunna ladda upp WebP-bilder direkt till mediabiblioteket i WordPress och då behöver vi ett sätt att skapa bilder i det här formatet.

Vad är WebP?

WebP är ett bildfilformat, utvecklat av Google, som innehåller bilddata med både förlustfri och förstörande komprimering. Formatet kan minska bildfilstorleken upp till 34% mindre än JPEG- och PNG-bilder samtidigt som den behåller samma höga bildkvalitet. Det stöder också animerade bilder och förväntas stödja ännu fler funktioner i framtiden.

Ladda ner och installera WebP-tillägget till Photoshop

Problemet är att Photoshop inte har stöd för WebP-filer. Du behöver ett tillägg till Photoshop för att kunna öppna och spara formatet direkt i Photoshop. Utvecklarna på The WebM Project har skapat ett sådant tillägg, så allt du behöver göra är att installera det.

Windows

Börja med att ladda ner tillägget på länken nedan:
https://github.com/webmproject/WebPShop/releases/download/v0.3.3/WebPShop_0_3_3_Win_x64.8bi

Kopiera filen med filformatet .8bi (WebPShop_0_3_3_Win_x64.8bi) till Photoshop-mappen för tillägg. Oftast är sökvägen C:\Program Files\Adobe\Adobe Photoshop\Plug-ins

Starta om Photoshop om det är öppet

MacOS

Börja med att ladda ner tillägget på länken nedan:

https://github.com/webmproject/WebPShop/releases/download/v0.3.3/WebPShop_0_3_3_Mac_Universal.zip

Extrahera tillägget genom att dubbelklicka på zip-filen du laddat ner.

Kopiera den extraherade filen till Photoshops mapp för tillägg. Oftast är sökvägen Applications/Adobe Photoshop/Plug-ins/

Starta om Photoshop om det är öppet

Obs! I macOS 10.15+, kommer du få felmeddelandet ”WebPShop.plugin kan inte öppnas eftersom utvecklaren inte kan verifieras ”. Du kan gå förbigå det genom att köra följande kommando I Terminalen. (Finder >> Appar >> Verktyg >> Terminal)

sudo xattr -r -d com.apple.quarantine /Applications/Adobe\ Photoshop\ 2021/Plug-ins/WebPShop.plugin

(Obs! Koden kan variera något beroende på vilken version av Photoshop du använder, se årtalet, och sökvägen till Photoshop)

Om metoden ovan inte fungerar kan du läsa mer om hur du installerar appar du själv laddat ner på Apples supportsidor:

https://support.apple.com/en-us/HT202491

Så använder du WebP-tillägget i Photoshop

Öppna bilden, retuschera och justera som vanligt I Photoshop. När man exporterar bilder för webben som JPG, PNG eller GIF kan man ställa in pixelmåtten under exporten. För att spara WebP-bilder i rätt storlek ändrar du pixelmåtten innan du ska spara bilden.

För att ändra storleken på bilder kan du gå in under Bild >> Bildstorlek. Här kan du ändra pixelmåtten för antingen bredd eller höjd.

Vill du ändra både bredd och höjd samtidigt är det bättre att du använder Beskärningsverktyget. Med det verktyget kan du ställa in exakta bredd och höjdmått i pixlar och beskära bilden i de måtten. Vill du veta mer om hur du använder beskärningsverktyget kan du göra det på vår Photoshop Grundkurs.

Normalt sett sparar du bilder för webben under Arkiv >> Exportera, men för att spara bilder i WebP-formatet går du till Arkiv >> Spara som och väljer WebPShop som format.

Spara som WebP

Kvaliteten går från förstörande 0 (bilden komprimeras) till förlustfria 100 (pixlarna förblir exakt desamma). Vanligtvis ökar den komprimerade storleken med kvaliteten men för vissa bilder (t.ex. skärmdumpar, enkla färger…) skapar den förlustfria algoritmen mindre filer.

Mängden komprimering styr kodningshastigheten. Långsammare ökar den visuella kvaliteten och/eller minskar filstorleken.

Förhandsgranskningsfunktionen visar den komprimerade bilden och dess slutliga storlek. Om bilden är för hög eller bred visas ett inzoomat område som kan flyttas.

Obs!: Det här tillägget är en beta-versionen. Om bilderna är väldigt stora eller komprimeringen hård kan tillägget krascha eller hänga sig.

För animeringar väljer ett skjutreglage den aktuella ramen och visar dess förhandsgranskning och varaktighet.

Vanliga inställningar

• För fotografier är kvalitet 70 en bra utgångspunkt. Om små filstorlekar är extra viktigt kan man gå så lågt som 30.
• För artificiella bilder (t.ex. svartvit text, 3D-renderingar m.m…) kan kvalitet på minst 98 vara snyggare och ge mindre filstorlekar.

Så mycket komprimerar WebP-formatet

På bilderna ovan ser vi vilken skillnad i filstorlekar vi får med WebP. Du kanske lägger märke till att bilden till vänster (som är jpeg-bilden) har mer mättade färger. När man sparar bilder som jpeg i Photoshop läggs det till lite extra färg. Vill man göra det till WebP-bilderna får man lägga på mer färg manuellt i Photoshop. I det här exemplet är bilderna bara sparade som dom är.

Ännu större skillnad i filstorlekar om vi tittar på genomskinliga PNG-filer och jämför med WebP-formatet.

Stöd i alla stora webbläsare

Webbläsare som Chrome, Edge och Firefox har haft WebP-stöd en längre tid. Tidigare har WebP-formatet inte kunnat visas i Safari. Eftersom det är en av de mest populära webbläsarna har formatet inte tagit riktig fart förrän nu när även Safari har fått stöd för WebP. Det kan dock finnas dom som inte uppdaterat Safari som inte kommer kunna se WebP-bilder.

I skrivande stund har följande webbläsare stöd för WebP:

    WebP lossy support

•         Google Chrome (desktop) 17+
•         Google Chrome for Android version 25+
•         Microsoft Edge 18+
•         Firefox 65+
•         Opera 11.10+
•         Native web browser, Android 4.0+ (ICS)

    WebP lossy, lossless & alpha support

•         Google Chrome (desktop) 23+
•         Google Chrome for Android version 25+
•         Microsoft Edge 18+
•         Firefox 65+
•         Opera 12.10+
•         Native web browser, Android 4.2+ (JB-MR1)
•         Pale Moon 26+

    WebP Animation support

•         Google Chrome (desktop and Android) 32+
•         Microsoft Edge 18+
•         Firefox 65+
•         Opera 19+

För dig som inte har Photoshop

Om du inte har Photoshop, men ändå vill kunna använda WebP-formatet på din WordPress-webbplats behöver du ett tillägg. De konverterar uppladdade jpeg och png-filer till WebP. De mest populära tilläggen som gör det idag är Smush Pro, ShortPixdel och Imagify.

Alla webbläsare inte kan visa WebP-bilder. Fördelen med att använda tillägg är att de visar de uppladdade jpeg och png-filerna för den som har en webbläsare som inte kan visa WebP. På så sätt uppnår man 100% kompabilitet.

Så nu har du all information du behöver för att sätta igång och använda formatet till dina bilder på webben. Vill du läsa mer om nya filformat till webben kan du klicka här.