b*cms support

Hur förbereder jag mina bilder för b*cms?

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, t.ex. logotyper.

 

Hur stora skall bilderna vara?

Bildupplösning är i regel oviktigt när det handlar om bilder på webben*. Det som är viktigt är 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.

Bästa resultat får du om dina bilder har lika många pixlar på bredden som layouten är (100% storlek). Layout-bredden varierar från 480 eller 560 pixlar upp till 800 eller 980 pixlar för hela layoutbredden. Är du osäker på vilken bredd din sidmall har, så ladda upp bilden i 980pixlars bredd. Om bilderna är större än layouten medger så skalas de ner automatiskt. 

* Retina-skärmar medger visserligen en högre upplösning, men b*cms har inte stöd för retina.

 

Bredden är viktigast!

Det är storleken på bredden som är viktig! Bildens höjd anpassar sig alltid efter bredden. Undantaget är sidmallen breda bilder som har en inställning där höjden kan anpassas efter fönstrets höjd.

 

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%. 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 sällan 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