När vi sparar bilder för webben har vi ett mål. Bilden ska väga så lite som möjligt utan att det påverkar bildens synbara kvalitet. För att vi ska lyckas med det gäller det att vi väljer rätt filformat till rätt typ av bild.

PSD är arbetsformat – JPG, GIF och PNG är slutformat

De filformat du har att välja mellan är JPG, GIF och PNG. Samtliga tre filformat är det jag brukar kalla för slutformat. Med det menar jag att man aldrig sparar en bild i något av de tre filformaten innan man är 100% färdig med bilden. Så länge du fortfarande ska redigera en bild är det bästa filformatet att spara bilden som, Photoshops eget, PSD.

PSD står för Photoshop document och fördelen med att spara bilder för webben i det filformatet är att om du öppnar en bild som är sparad som PSD kommer allt i bilden vara exakt likadant som det såg ut när den sparades. Ingenting ändras eller försvinner när du sparar en bild som PSD. Men PSD-filer kan inte visas i en webbläsare, så när vi redigerat färdigt en bild och ska publicera den på hemsidan sparar vi den i någon av de tre formaten JPG, GIF och PNG.

 bilder för webben i Photoshop   

Spara bilder för webben i Photoshop

Idag kan du spara bilder för webben på tre sätt i Photoshop. Under Arkiv >> Exportera hittar du alla tre varianterna. Vi har den klassiska metoden Spara för webben (gammal), den nyare Exportera som och det snabbare sättet, Snabbexportera som. De olika metoderna har alla sina för- och nackdelar. Vilken metod du än väljer kan du spara i alla de tre filformat som fungerar på webben. Och oavsett hur du väljer kommer alla tre metoderna att spara bilden i färgrymden sRGB som alla webbläsare använder.

Bilder kräver mycket data och en högupplöst bild innehåller mycket information och väger därmed en hel del. När man ska visa bilder på webben gäller det att bilden väger så lite som möjligt. Idag är hastigheten på en webbplats en viktig rankingfaktor för sökmotorerna och bildernas storlek är en av de viktigaste faktorerna när det handlar om att påverka hur snabbt en webbplats laddar in i webbläsaren.

Därför gäller det, när man sparar bilder för webben, att man får ner filstorleken så mycket som möjligt. För att göra det komprimerar man bilderna. Förlustfri komprimering som ZIP eller LZW-komprimering fungerar bra till text eller dataprogram. Men till bilder fungerar inte förlustfri komprimering lika bra. Istället minskar man filstorleken genom att kasta bort information i bilden som våra ögon inte kan se. Men om komprimeringen är för kraftfull riskerar man det som kallas för ”artefakter” eller ”brus” i bilden. Med andra ord kan man se att bildens kvalitet försämrats. Det gäller med andra ord att inte ta i för mycket eller att spara om en bild för webben flera gånger för till slut kommer det att synas att en bild komprimerats.

bilder för webben

JPEG/JPG

JPEG (Joint Photographic Experts Group), eller JPG är det vanligaste filformatet när man ska spara bilder för webben. JPG använder komprimering av bildens data för att minska filstorleken på en bild. När du har ett fotografi i färg och vill få så bra bildkvalitet och liten filstorlek på en gång är det JPG som gäller. När du sparar en bild som JPG får du själv välja vilken kvalitet som bilden ska ha. Du kan välja mellan fem kvaliteter som Maximum, Mycket Hög, Hög, Mellan och Låg. Du kan också ställa in kvaliteten i en skala mellan 0 till 100 där 0 är mycket låg kvalitet och 100 maximal kvalitet. Ju lägre kvalitet du väljer, desto mindre blir filstorleken.

Jag brukar oftast hamna på kvalitet Hög och i undantagsfall kvalitet Mellan. I den absolut lägsta kvaliteten brukar man kunna se att komprimeringen förstört bilden en del. Men det kan skilja en del mellan olika bilder så lite på ditt eget omdöme och gör en egen bedömning. JPG är i alla fall det filformat jag alltid använder till vanliga färgfotografier.

En nackdel med JPG-filer är att de inte kan sparas med genomskinlighet bevarad. Det betyder att om man har en logotyp eller en frilagd form kan man inte visa den genomskinlig som JPG-fil på webben.

GIF

Ett filformat man använde betydligt oftare förr om åren är GIF (Graphics Interchange Format). Filformatet GIF minskar filstorleken genom att använda en indexerad färgpalett med högst 256 färger. Ett vanligt fotografi kan innehålla över 16 miljoner färger så GIF med sina 256 färger minskar en bilds färgomfång en hel del. Förut när de flesta bildskärmar bara visade 256 färger var det inga problem, men idag är 256 färger i minsta laget för vanliga fotografier.

En GIF-fil kan vara genomskinlig vilket gör att filformatet passar bra till logotyper och andra objekt som innehåller genomskinlighet och inte innehåller fler än 256 färger. GIF är också det enda filformatet som stödjer rambaserad animering. Du kan med andra ord göra en animering i Photoshop och spara som en GIF-animering

PNG

Eftersom GIF-filer bara kan innehålla 256 färger och JPG-filer inte kan vara genomskinliga utvecklade man filformatet PNG (Portable Network Graphics). PNG finns i två olika versioner, PNG-8 och PNG-24, men PNG-8 har egentligen bara samma egenskaper som GIF-formatet. Så när vi talar om PNG idag menar vi egentligen PNG-24. PNG-24 använder 24 bitar per pixel, d.v.s. 8 för rött, 8 för grönt och 8 för blått, alltså samma som JPG-formatet. Vi kan med andra ord visa över 16 miljoner färger i PNG-formatet. Dessutom stödjer PNG också genomskinlighet. Till skillnad från GIF där en pixel enbart kan vara genomskinlig eller inte genomskinlig kan en PNG-fil innehålla genomskinlighet i 256 nivåer, alltså halvgenomskinlighet.

Eftersom PNG-24 både kan innehålla mer än 16 miljoner färger och vara genomskinliga passar filformatet både till fotografier och ritad grafik. Det finns dock ett men, även till PNG-formatet och det handlar om filstorleken. En bild i PNG-format väger oftast 3-5 ggr mer än samma bild, i samma kvalitet fast som JPG. Även till bilder med färre färger än 256 brukar PNG-filer väga mer än samma bild sparad i GIF-formatet.

I Photoshop kan man också spara bilder som BMP (Windows Bit Map). BMP är inte komprimerat överhuvudtaget och bör inte alls användas på webben alls.

bilder för webben

Sammanfattning – spara bilder för webben

Ska jag sammanfatta vilka filformat i korthet kan jag göra det så här: Vanliga fotografier sparar jag nästan alltid som JPG, kvalitet Hög. Det ger mig en bild med hög kvalitet och liten filstorlek. Bilder med genomskinlighet, halvgenomskinlighet eller ritade figurer som exempelvis logotyper sparar jag som PNG-24. Det ger mig en hög kvalitet, om än lite större filstorlekar. I undantagsfall väljer jag GIF för genomskinliga bilder eller ritad grafik med få färger. En logotyp innehåller sällan fler färger än 256. Eftersom man endast kan animera GIF-filer är det också det enda möjliga valet till animerade bilder.

Hoppas att den här guiden kan vara till bra hjälp när du själv ska spara dina bilder för webben.

Filformat Färgdjup Färger Komprimering Transparens Animering
JPG 24-bit 16,9 milj Förstörande Nej Nej
GIF 8-bit 256 Förlustfri per pixel Ja
PNG-8 8-bit 256 Förlustfri per pixel Nej
PNG-24 24-bit 16,9 milj Förlustfri gradvis Nej

Vill du lära dig mer om hur du sparar bilder för webben?

Vi har Photoshopkurser, både på distans och i klassrum där du lär dig allt du behöver för att behärska Photoshops många verktyg och inställningar.

Share This