Hur förbereder jag mina bilder för b*cms?
Bildformat och andra specifikationer i korthet
Bildformat som stöds: JPG, PNG, GIF (med korrekt filändelse)
Maximal tyngd: 1 megabyte
Rekommenderad storlek: 1000 pixlar på bredden
Färgsystem: RGB
Komprimering: 60-80%
Vilka format stödjer b*cms?
B*cms stödjer bildformaten JPG, PNG och GIF. JPG rekommenderas för fotografiska bilder och PNG för bilder som skall ha en genomskinlig bakgrund. Observera att filerna måste ha korrekt filändelse när du laddar upp dom.
Hur stora skall bilderna vara?
Det som är viktigt är att hålla reda på hur många pixlar som finns i bilden. Du kan se antal pixlar i bilden om du öppnar den i photoshop och väljer "storlek på bild", eller högerklickar på bilden i utforskaren/finder för att få mer information. Ibland används "bildpunkter" eller "punkter" som synonym till pixlar.
Det är storleken på bredden som är viktig! Bildens höjd anpassar sig alltid efter bredden.
När bilderna visas på din hemsida så skalas dom om automatiskt beroende på i vilken layout de förekommer. För att vara säker på att dina bilder kan visas i alla sammanhang så bör de vara minst 980 pixlar breda.
Undvik tunga nedladdningar genom att komprimera bilderna!
Max tyngd för en bild är 1 megabyte. Men du vinner egentligen inget i bildkvalitet genom att ligga så nära 1 mb som möjligt. Tvärtom kommer det att ta längre tid att visa sidan om du har för tunga bilder.
Du gör bilderna lättare genom att komprimera dom när du sparar. Rekommenderad komprimering är 60-80%. Se exempel nedan.
Spara inte om dina jpg-bilder med ny komprimering efter ändring utan utgå alltid från ett original i ett format som Photoshop (PSD) eller TIFF (TIF).
OBS! Tänk på att JPG-bilder måste vara sparade med RGB-färg och inte i CMYK-läge. Detta är speciellt viktigt att tänka på om du bearbetar bilder som använts i en katalog eller annan trycksak.
*
Exempel: bilderna nedan är sparade från samma photoshop-bild men med olika komprimering (eller kvalitet): 100% respektive 50%. Skillnaden är knappt synbar för blotta ögat men bilden som är sparad med 100% kvalitet väger mer än fem gånger så mycket än den som är sparad med 50%. På en dålig uppkoppling kan den extra vikten göra att sidan uppfattas som segladdad.
Storlek: 560x330px
Komprimering: 50%
Tyngd: 24kb
Storlek: 560x330px
Komprimering: 100%
Tyngd: 131kb
Använd profiler vid behov
En bild som visar starka och klara färger i photoshop eller andra bildredigeringsprogram på datorn, kan se matt och urblekt ut när den visas på en hemsida. I Photoshop sparar man gärna bilder med profilen Adobe RGB för att bevara så mycket färginformation som möjligt, men AdobeRGB fungerar inte alltid bra på webben. Därför bör du konvertera dina bilders färg med en generell monitorprofil (sRGB IEC61966-2.1) innan du sparar dom för webben. Läs i manualen till photoshop hur du gör. Tänk på att inte konvertera din originalbild eftersom du kan förlora färginformation som inte kan ersättas.
Notera att det finns stora skillnader i stödet för färghantering i olika webbläsare och även om vissa klarar av att visa färger bra med AdobeRGB så bör du ha som regel att använda sRGB. Läs mer om detta här.
*
I detta exempel har jag utgått från en och samma bild i photoshop som importerats från en kamera och tilldelats profilen Adobe RGB. Sedan har jag sparat två kopior i jpg-format. Den övre har inte konverterats till sRGB innan den sparades. Det har däremot den undre. Ingen av dessa bilder har sparats med ICC-profil.
Bild som inte konverterats till sRGB (sparad med inställningar för Adobe RGB):
Samma bild som konverterats till sRGB med profilen sRGB IEC61966-2.1 innan den sparats (notera den ökade färgmättnaden):
*
EXEMPEL 2 - Nedanstående bilder har inbäddade färgprofiler. Om de ser ut att ha samma färgmättnad och lyster så är din webbläsare bra på färghantering. Men lita inte på att andra webbläsare är det!
Bild med AdobeRGB-färg och inbäddad profil
Bild med sRGB-färg och inbäddad profil
