Optimera bilder för webben

Varför är det viktigt med rätt bildformat?

Att använda moderna bildformat och att använda dem rätt är avgörande för såväl kvalité som prestanda. Utöver att en snabbladdad webbplats uppskattas av besökarna så påverkar det dessutom ranking i sökmotorer positivt. Vi har sett exempel på där felaktig användning av bilder ger en webbplats som tar tio gånger längre tid att ladda jämfört med om bilderna varit korrekt optimerade.

WebP - för fotografiska bilder

WebP är ett rastrerat bildformat vilket innebär att bilderna är uppbyggda av en mängd pixlar i olika färger. Bildformatet är framtaget av Google och optimerat för att göra bilder på webben snabbladdade. Vid redaktionellt arbete i Sitevision kommer de allra flesta komma långt med att enbart använda formatet WebP för sina bilder.

WebP ger ca 25-34 % mindre bildfiler till motsvarande kvalitet som jpg-formatet ger men för en dåligt komprimerad bild kan vinsterna bli betydligt större.

Nästan 97 % Länk till annan webbplats. av internetanvändarna globalt har i skrivande stund stöd för WebP i sin webbläsare och de få som använder en webbläsare som saknar stöd för filformatet har sannolikt problem på många webbplatser idag (och med mer än bara bilder). Genom att gå över till WebP hjälper man till att driva utvecklingen framåt och att de sista användarna slutligen inser att de behöver uppgradera sin webbläsare.

Formatet WebP har stöd för att komprimera med två olika metoder

• Lossy eller förstörande komprimering (likt jpg-formatet)
• Lossless eller icke-förstörande komprimering (likt png-formatet)

Lossy används i regel för fotografiska bilder (foton) och Lossless är avsett för datorgenererad grafik som logotyper, illustrationer och skärmdumpar som ofta blir suddiga med förstörande komprimering.

WebP Lossless har även stöd för animerade bilder och ersätter därmed det gamla gif-formatet som inte komprimerar lika bra.

Att spara som WebP i Photoshop ger bäst kontroll

I de senaste versionerna av Adobe Photoshop (från och med version 23.2) finns stöd för att spara bilder som WebP. För äldre versioner av Photoshop finns det plugins man kan installera (se länk längre ner i artikeln).

För den som vill kunna anpassa optimeringen av bilder maximalt är att spara dem via Photoshop den rekommenderade vägen. Detta gör man via Arkiv > Spara en kopia och väljer formatet WebP.

När du valt var bilden ska sparas ställer man in om komprimeringen ska vara icke-förstörande eller förstörande samt ställa kvalitetsnivå för den sistnämnda varianten och kan genom att spara ut versioner med olika komprimeringgrad testa sig fram för en lagom nivå för varje individuell bild.

Någonstans runt hög kvalitet brukar ge ett gott resultat men beroende på bildens komplexitet och vilken prioritering man gör mellan filstorlek och kvalitet kan man alltså laborera med detta.

• Mer information om WebP i Photoshop och länk till Plugins Länk till annan webbplats.
• Observera en möjlig fallgrop. I Sitevision finns ett antal moduler/funktioner där man kan ställa om automatisk omskalning av bilder, exempelvis i nyhetsmodulen. Om en omsorgsfullt WebP-bild komprimerats med Photoshop kan den hypotetiskt bli större efter en automatisk omskalning i Sitevision.

Konvertera bilder till WebP i Sitevision - enkelt men något trubbigt

I Sitevision kan man högerklicka på bilder i filarkivet eller i en bildmodul Länk till annan webbplats. och välja Konvertera till WebP. En dialogruta öppnas där man kan förhandsgranska kvalitén samt se den nya mindre filstorleken och bekräfta konverteringen eller avbryta. En konverterad bild kan inte återställas.

Man kan alltså inte göra några inställningar för komprimeringen men det är å andra sidan lätt att konvertera och ger oftast en avsevärd prestandaförbättring jämfört med de äldre filformaten. I exemplet ovan blir en WebP-version av bilden knappt 8 % av jpg-versionen.

Noterbart är att

• det går inte att komprimera flera bilder i taget utan behöver göras per bild
• animerade gif-filer har i våra tester inte konverterats till animerad WebP trots att stödet finns i WebP-formatet
• PNG-bilder inte tycks konverteras till WebP Lossless och datagenererade bilder bör därför konverteras med hjälp av Photoshop för bästa resultat

SVG - för vektoriserade logotyper och illustrationer

Nästa bildformat blir något av en överkurs för många redaktörer men bör ändå kunna intressera den som vill hantera illustrationer och logotyper på bästa sätt. Om skalbarhet inte är en nödvändighet kan man dock ofta nöja sig med att spara logotyper som WebP Lossless.

Att en bild är vektoriserad innebär att den är uppbyggd av matematiska formler (kurvor och linjer). För vektoriserade logotyper och illustrationer är SVG det bäst lämpade webbformatet idag.

Formatet ger fantastisk kvalitet till små filstorlekar och kan dessutom skalas om fritt med bibehållen skärpa. Formatet har ännu bättre webbläsarstöd än WebP Länk till annan webbplats. - över 98 % - och vi har använt det i många år för vitala detaljer som logotyp i sidhuvud och ikoner på webbplatser.

För att spara en bild som SVG förutsätter det att man har ett vektoriserat original (oftast i .eps- eller .ai-format) som man öppnar i Adobe Illustrator och går till Arkiv > Spara som och väljer SVG som filformat.

Rekommendationer i korthet

• Sätt igång direkt och konvertera alla fotografiska bilder till WebP-formatet!
• Inför en redaktionell rutin för att alla fotografiska bilder på webbplatsen sparas i WebP-format
• Var extra noga med att använda WebP-formatet för stora bilder, exempelvis i sidhuvuden och heros
• Använd Photoshop för bästa resultat och prioritera bilder på viktiga sidor