Bildernas matematik

1. Inledning

Den här sidan förklarar vad jag kallat "bildernas matematik", alltså olika begrepp som förekommer när man arbetar med bilder och färger. Sidan bygger vidare på Bitar och bytes och Vad är en dator? där begreppen "bitar" och "bytes" förklaras, samt på Färgsidan, som berättar mer om vad färger är.

Känner du dig osäker på olika filformat kan du också titta lite på sidan Bildtyper. Vill du veta mer om hur färger visas på bildskärmen rekommenderar jag dig en titt på sidan som heter Bildskärmar.

2. Vad är en digital bild?

En anledning till att jag skriver den här sidan är att jag ofta får frågan vad en bild är. Det kan t.ex vara så att den som tagit bilder med en digitalkamera eller scannat in en bild, börjat fundera över hur bilderna i datorn uppstår.

Digitalisering

Hur kan det t.ex komma sig att en teckning som målats på en bit väv eller papper går att få in i datorn och upp på skärmen? Jo, det är möjligt genom en process som kallas digitalisering. Den innebär att den analoga bilden görs digital.

Här har jag använt en teckning av en släkting till mig, som ritade denna på 1940-talet och är känd för sina sinnrika gubbar.

Upplösning

Rutnätet symboliserar indelningen av bilden i mindre delar, som sker vid digitaliseringen. Varje sådan liten del utgörs av en punkt (eller fyrkant). Punkternas storlek och täthet avgör hur noggrant bilden kan återges. Ju mindre punkterna är och ju tätare de sitter ihop, desto noggrannare kan detaljerna i originalet återges.

Punkternas storlek utgör den digitaliserade bildens upplösning. Ett annat ord för upplösning skulle kunna vara "detaljnoggrannhet" eller "detaljrikedom". Bildens upplösning är alltså hur många punkter man använder för att bestämma bildens detaljer.

I bilden till höger syns hur teckningen digitaliserats och att ett rutmönster av pixlar bildats. Pixlarna är de fyrkanter som syns. Man använder fyrkanter för att skapa en heltäckande mosaik.

Utan fyrkanter hade det blivit mellanrum mellan pixlarna, vilket gett upphov till oönskade färgförskjutningar. Däremot använder man ofta raster när man skriver ut bilder. Med raster kan man utnyttja mellanrummen mellan pixlarna. Rastertätheten kallas ibland även för rasterfrekvens och mäts i linjer per tum (lpi eller "lines per inch").

Du kan läsa mer om raster på sidan "Utskrift av bilder". Läs mer >

I en scanner sitter det sensorer som känner av hundratals punkter per tum. Digitalkamerans sensorer fungerar efter samma princip. När en sensor känner av den bild eller det objekt som skall digitaliseras och överföras till datorn, gör den det alltså i punkter. En punkt representerar då en liten del av originalet. Ju tätare punkterna sitter desto bättre blir återgivningen av originalbilden. Men samtidigt ökar också filstorleken. Därför försöker man anpassa upplösningen efter vad bilden skall användas till.

En bild som enbart skall visas på bildskärmen behöver oftast inte ha så hög upplösning, eftersom bildskärmar inte klarar av att visa bilder med så hög upplösning. Bildskärmar har en ungefärlig kapacitet på knappt 100 bildskärmspunkter per tum. Noggrannare än så kan den sällan visa bilder, även om bildens upplösning skulle vara bättre.

Skall man däremot skriva ut en bild på fotopapper och inte vill att punkterna skall synas, krävs en upplösning på ungefär 2.500 punkter per tum. Mellan dessa finns lämpliga upplösningar för andra trycksaker. En dagstidning är tryckt med c:a 130 pixlar per tum och en veckotidning med c:a 300 pixlar per tum.

Punkter och pixlar

Man pratar i sådana här sammanhang om dpi, som står för "dots per inch" eller "punkter per tum". Denna enhet används främst för skrivare. Ibland säger man i stället ppi, som betyder "pixels per inch" eller "pixlar per tum". Den enheten används framförallt för bilder på bildskärmen och för bildskärmens, scannerns och digitalkamerans kapacitet.

Att man använder tum och inte centimeter har att göra med att datorerna först började användas i USA, där man använder tum och fot, snarare än centimeter och decimeter.

Hur stor en punkt är går inte att säga generellt. I stället måste man titta på vad det är för punkt man menar. En punkt på bildskärmen brukar vara ungefär 0,25 millimeter. En punkt i en bild kan vara större eller mindre, beroende på bildens upplösning. Alla punkter i en bild är dock alltid lika stora i förhållande till varandra.

I bilder pratar man om en punkt, men menar egentligen en fyrkant. Bildernas pixlar är alltså fyrkantiga och därför är termen "pixel" bättre än "punkt".

När man skriver ut bilder omvandlas ibland pixlarna i bilden till rasterpunkter. Man använder raster bl.a för att undvika punktförstoring. En rasterpunkt kan ha i stort sett vilken form som helst.

På det här viset kan en punkt i en bild representeras av en eller flera bildskärmspunkter. Det finns alltså ingen tydlig koppling mellan de olika punkternas storlek.

Förutom punkter i bilder används punkter också som måttenhet i typografin. Du kan läsa mer om detta på sidan Mer om teckensnitt. Läs mer >

Webbsäkra färger

Varje pixel i den digitaliserade bilden har en färg som representerar motsvarande yta på originalbilden. Om det finns tillräckligt många pixlar kan samtliga färger representeras.

Ibland måste emellertid pixlarna motsvara flera färger i originalbilden. Pixelfärgen får då ett medelvärde av samtliga dessa färger.

Dessutom läggs en s.k kantutjämning till, som du kunde läsa på sidan "Vad är kantutjämning?". Läs mer >

Det gäller alltså att pixlarna är tillräckligt små så att man inte ser de enskilda bildpunkterna så väl och för att man skall kunna skapa snygga övergångar mellan färgerna i bilden.

Vissa färger går att visa på skärmen utan att blanda in andra färger. Sådana färger kallas "webbsäkra" och är 216 till antalet. Alla andra färger brukar utgöras av olika färgblandningar, vilket kan ge ett lite smutsigt eller suddigt intryck, framförallt på dåliga bildskärmar.

Du kan läsa mer om webbsäkra färger på Färgerna på din hemsida. Läs mer >

Webbläsaren använder de webbsäkra färgerna, men utnyttjar dessutom ytterligare 40 för andra saker. Det kan vara ikoner, knappar och annat som operativsystemet bestämmer. Vilka dessa 40 färgerna är beror på vad det är för operativsystem, t.ex Macintosh eller Windows. Det är därför man ibland ser olika färguppsättningar i bildbehandlingsprogrammen.

Genom att bara använda webbsäkra färger försäkrar man sig om att bilderna kommer att se likadana ut på alla datorer och i alla webbläsare!

3. Färgdjupet

Hur kan det komma sig att en bild kan vara sparad med 16,7 miljoner färger, men bara innehålla några tusen av dessa, samtidigt som bara något hundratal visas på skärmen?

Färgdjup

För att besvara frågan måste man känna till lite om vad färgdjup är. Jag använder här termen "färgdjup", men andra föredrar termerna "bitdjup" eller "pixeldjup".

Om vi utgår ifrån bitsystemet, som jag berättade på sidan om bitar och bytes, kan vi säga följande: Med en bit kan vi representera någon av två lägen, t.ex svart eller vitt. En bild med en bits färgdjup innebär alltså att den bara kan ha svart och vitt som färger.

Utökar vi färgdjupet till två bitar får vi fyra möjliga färger (eller nyanser), t.ex vitt, ljusgrått, mörkgrått och svart.

GIF-bilder, som är den vanligaste bildtypen på webben, klarar bara 8 bitars färg. Det betyder att den kan innehålla maximalt 256 olika färger. Hur då?

Talet 256 kan även skrivas som 2⁸, som uttalas "2 upphöjt till 8" och är samma sak som 2x2x2x2x2x2x2x2. 2 står för värdena 0 och 1, 8 står för färgdjupet och 256 alltså det antal kombinationsmöjligheter som är teoretiskt möjliga.

GIF-bilder används därför bara till enkla bilder, som inte kräver någon särskild precision. Även bilder i gråskalor brukar innehålla maximalt 256 olika nyanser, eftersom det mänskliga ögat bara kan hantera så många svart-grå-vita färger samtidigt.

Andra bildformat kan ha andra möjligheter. JPEG-bilder gör det möjligt att använda 24 bitars färgdjup, vilket motsvarar 16,7 miljoner färgnyanser. Detta är den teoretiska gränsen för filformatet.

Färgsystemet som både GIF och JPEG använder heter RGB. I detta färgsystemet kan finnas 256 variationer av vardera rött, grönt och blått. 256x256x256 blir 16.777.216 eller 16,7 miljoner. (Här använder jag punkter för att det skall bli lättare att läsa. Talet är alltså 16777216!)

Sedan finns begränsningar i GIF som inte finns i JPEG. Läs mer om detta längre ner och på sidan om bildtyper. Gå dit >

Kanaler

I många sammanhang, t.ex i bildbehandlingsprogrammen, talar man om kanaler. Man säger att gråskalor bara har en kanal om 8 bitar. RGB har tre kanaler och CMYK normalt fyra. Eftersom RGB har tre kanaler om vardera 8 bitar kallas det för ett 24-bitarssystem. CMYK använder också 8 bitar men har en kanal extra och får då 32-bitarsgrafik.

Det finns också färgsystem som har 16 bitar per kanal och dessutom utnyttjar fler kanaler. Det ger extremt många möjliga färgnyanser, men är inte så vanligt.

Bildens färginformation

I och med att en bild är sparad i JPEG-format vet vi alltså att den använder RGB-färgsystemet, som i vanliga fall klarar av att hantera 16,7 miljoner färger. Men det betyder inte att bilden faktiskt innehåller så många färger. I själva verket kanske den bara innehåller några tusen färger.

I praktiken är det alltså ytterst sällan alla färger används. De flesta kan inte visas på skärmen och därför brukar bildbehandlingsprogrammen ta bort alla "onödiga" fäger, som ändå inte syns men tar upp plats. När JPEG-bilden sparas försvinner alltså information, som sedan inte går att återskapa.

Vill man trycka en bild måste man därför omvandla den till ett annat format. Oftast använder man TIFF eller EPS och omvandlar den dessutom till CMYK-färgsystemet. Då kan det också vara bra att spara den i 24 bitar eller mer. I CMYK förekommer en eller flera komplementfärger, t.ex svart och någon till, och därför använder CMYK-bilder normalt 32 bitars färgdjup.

Så här långt vet vi alltså följande:

Bildskärmens kapacitet

När det gäller bildskärmarnas kapacitet måste man skilja mellan färgdjup och färgåtergivning. Färgdjupet är då det antal färgnyanser en bildskärm har kapacitet att visa över huvud taget, medan färgåtergivningen är det antal färger en skärm klarar av att visa samtidigt.

Här skiljer sig olika skärmar åt, som du kunde läsa på sidan om bildskärmar. Läs mer >

Detta betyder alltså att en JPEG-bild som är sparad i RGB och bara innehåller 2.328 olika färgnyanser, ändå bara kommer att få 256 färger på en SVGA-skärm.

På det här sättet kan vi alltså förklara hur det komma sig att en bild kan vara sparad med 16,7 miljoner färger, men bara innehålla några tusen av dessa, samtidigt som bara något hundratal visas på skärmen!

4. Upplösning och filstorlek

Den digitaliserade bildens upplösning påverkar inte bara kvaliteten utan också hur mycket plats bilden tar upp på hårddisken och hur stor den blir på skärmen eller vid utskrift. Här skall vi titta lite mer på det.

Filstorleken

En bild som har 100x100 pixlar och en bits färgdjup tar upp 100x100x1 bitar i minnet, dvs 10.000 bitar. Delar vi 10.000 med 8 får vi antalet bytes, som blir 1.250, dvs 1,25KB (=kilobytes). Känner du dig osäker på bitar och bytes skall du titta närmare på sidan "Bitar och bytes". Läs mer >

Eftersom bilden bara hade en bits färgdjup blev matematiken enkel. Ökar vi antalet bitar till två blir filstorleken den dubbla. På det viset blir en 8 bitars och 100x100 pixlar stor färgbild just 8 gånger så stor eller 100x100x8, som blir 10KB.

Anledningen till att man räknar så är ju att man har 256 färger per kanal i RGB-systemet och därför måste ha 8 bitar för att kunna representera varje färg.

Eftersom filstorleken ökar så drastiskt försöker man ofta minska formatet, sett till antalet pixlar. Ett annat sätt är att minska antalet färger. Kvaliteten sjunker visserligen på bilden, men skall den bara visas på bildskärmen, t.ex om den ligger på en hemsida, gör detta inte så mycket.

Skall bilden däremot skrivas ut påverkas utskriftskvaliteten negativt av färg- och storleksreduktionen.

Bildstorleken

En bild kommer att bli olika stor på olika bildskärmar. Detta beror dels på att bildskärmarna kan visa olika upplösning och dels på att "dot pitchen" (avståndet mellan bildskärmspunkterna) varierar.

Om avståndet mellan bildskärmens punkter är 0,2 millimeter på den ena skärmen kan den vara 0,23 mm på en annan. Är den inställd på att visa 800x600 pixlar kan en annan vara inställd på att visa 1.024x768 pixlar. Har den 17 tums storlek är en annan 19 tum. Bildskärmarnas olikheter gör alltså bilden olika stor.

Nu är det inte så många som mäter med linjal. Oftast spelar det ingen roll om skillnaden bara är några millimeter och bilden i övrigt är proportionerlig. Ändå kan det vara intressant att se hur bildens storlek varierar på skärmen vid olika upplösningar.

Om vi utgår ifrån att varje bildskärmspunkt är 0,2 millimeter går det c:a 125 sådana punkter per tum. Den kvaliteten är något bättre än dagens skärmar, som är anpassade för 96 ppi. Har vi då en bild som är 100 pixlar bred och varje bildskärmspunkt motsvarar en pixel i bilden blir den alltså 0,8 tum. Omräknat i centimeter blir det ungefär gånger 2,5 eller 2 cm.

Det är oftast svårt att räkna ut hur stor bilden skall vara. Det är därför man måste testa sig fram och titta på bilden i olika bildskärmsupplösningar.

Varför blir en bild på bildskärmen så oerhört mycket mindre när man skriver ut den? Jo, därför att skrivaren kan skriva ut med 300, 600 eller 1.200 dpi. Jämfört med bildskärmens 96 ppi är det en betydande skillnad!

En skrivare som klarar 600 dpi skriver alltså 600 punkter per tum. Punkterna är då ungefär 0,04 mm. En bild som är 100 pixlar bred blir då bara 4 mm på papperet. Försöker man göra den större blir den i gengäld otydlig och suddig.

Utgår vi ifrån att en bildskärmspunkt är 0,2 mm och skrivarens utskriftspunkt 0,04 mm, blir skillnaden ganska stor. Räknat på detta viset blir utskriften på papper ungefär 20% av bilden på bildskärmen. Skriver man ut med 300 dpi är skillnaden 40%.

Det är inte alltid lätt att veta hur stora bildskärmspunkterna är. Men normalt brukar man utgå ifrån att en skärmupplösning på 640x480 pixlar motsvarar 72 ppi och 1.024x768 motsvarar 96 ppi. Högre bildskärmsupplösning brukar oftast inte innebära mindre bildskärmspunkter utan snarare större bildskärmar. 19 eller 21 tum i stället för 17. På det viset kan man få plats med fler punkter och ett högre ppi-värde.

För att få ett mer exakt värde bör man konsultera manualen till sin bildskärm. Där bör man få reda på alla fakta om dess punktstorlek och upplösning.

5. Färgdjup och upplösning i praktiken

För att exemplifiera hur olika färgdjup påverkar bildens kvalitet och filstorlek, har jag tillverkat några exempel. Eftersom det är ganska många bilder har jag tillverkat en egen sida för dessa.

Jag har skrivit in hur stort färgdjupet är och hur mycket varje bild väger. På det viset kan du själv bilda dig en uppfattning om vad som händer. Grundregeln är att ju större färgdjupet är desto tyngre blir filen, mätt i antalet kilobytes.

Gå till sidan Färgdjup och upplösning i praktiken >