Bildtyper

1. Inledning
2. Pixelbaserade bilder
3. Objektgrafik

1. Inledning

Den här sidan kompletterar sidan Introduktion till bilder och ger djupare kunskaper om några grundläggande begrepp bilder och hur de fungerar. På sidan Bildskärmar kan du läsa mer om hur bilderna visas på en bildskärm. På sidan Bitar och bytes kan du läsa mer om begreppen "bitar" och "bytes" och på Färgsidan hittar du mer information om färger.

Det finns i princip två slags bildtyper, pixelbaserade och objektbaserade. Ibland kallar man dem bitmappade respektive vektorbaserade, vilket inte är helt korrekt. Det kommer jag att berätta mer om så småningom.

De båda typerna skiljer sig ganska mycket åt till sin uppbyggnad, även om de inte behöver se olika ut. Speciellt inte på en bildskärm, som ofta har ganska dålig upplösning. Däremot kan man ibland se skillnaden mellan dem när de skrivs ut på papper.

Först kommer jag att berätta om pixelbaserade bilder, som är den grundläggande bildtypen för datorer och webben, samt för alla digitaliserade (inscannade) bilder. Därefter säger jag mer om objektgrafik.

2. Pixelbaserade bilder

Pixel är en kortform för "PICture ELement". Ibland säger man i stället "bitmapp" eller "bitkarta", som är ett sämre uttryck. "Bitmapp" kommer från en tid då varje punkt i en bild motsvarades av en bit. Men idag finns bilder med betydligt större informationsinnehåll, som vi skall se. Därför är "pixelbaserad grafik" bättre än "bitmappad grafik".

Det finns också en annan slags benämning på punkter, nämligen dpi, som betyder "dots per inch" eller "punkter per tum". Ibland säger man också ppi, som står för "pixels per inch" (pixlar per tum). Dpi är framförallt ett mått som används då man pratar om utskrifter, där en punkt motsvarar en punkt i ett raster eller en bläckdroppe. Ppi används mer då bilder digitaliseras med en scanner och visas på bildskärmen.

På Introduktionen till bilder fick du lära dig att det finns två huvudtyper av pixelbaserade bilder, GIF och JPEG. De skiljer sig framförallt åt genom att använda olika komprimeringstekniker. Du kan läsa mer om filkomprimering på sidan om det. Läs mer här >

GIF-formatet har 8 bitar, vilket betyder förmågan att återge maximalt 256 färger. GIF-bilder används till enkla skyltar, banners, animationer och sådant som inte kräver så många färger. JPEG-formatet använder 24 bitars grafik, vilket betyder att det kan återge miljontals färger. JPEG erbjuder även suveräna komprimeringsmöjligheter, vilket gör detta format lämpligt för större och mer informationstäta bilder, t.ex fotografier.

GIF är det vanligaste bildformatet på webben. Det finns i två versioner: GIF-87 och det nyare, GIF-89, som kan göras transparent. Man kan göra många fräcka effekter med GIF-bilder, t.ex visa som interlaced, vilket betyder att bilden hamnar på plats, men är otydlig, för att sedan gradvis bli allt skarpare. På svenska blir "interlaced" samma sak som "sammanflätad".

Fördelen med att spara bilden som "interlaced" i sitt bildbearbetningsprogram, är alltså att browsern visar den korrekta layouten direkt så att den som laddar hem sidan kan läsa den trots att bilderna ännu inte är färdigladdade. Så fungerar det även när du använder width och height (se nedan).

Det finns också andra format, t.ex BMP (BitMaP) i Windows och PICT (PICTure) i Mac. Dessa format används t.ex till bakgrunder och ikoner och använder ingen komprimering. Därför passar de inte för webben. TIFF (Tagged Image File Format) är ett annat format. Du kan läsa mer om vad de innebär på sidan om olika bildtyper. Läs mer här >

En pixelbaserad bild består av ett mönster av små fyrkanter, så som du ser här på bilden. Varje punkt har en viss storlek och färg.

Storleken beror på vilken upplösning bilden är sparad i och vilken färg pixeln har beror på vilket färgdjup eller kulörläge som är valt. Gråtonerna kallas med ett annat ord för tonomfånget.

Pixelbaserade bilder har i princip aldrig större upplösning än skärmen den skapades på. Med "upplösning" menas alltså det antal punkter som finns i bilden. Man pratar ibland om "punkttäthet" i sådana här sammanhang och ju högre punkttäthet desto mindre är pixlarna.

Upplösningen anges med två värden, t.ex 200x100, där det första värdet avser antalet pixlar horisontellt och det andra värdet är antalet pixlar vertikalt. Alltså bredden gånger höjden.

Om en pixelbaserad bild förminskas, tas en del av pixlarna bort och bilden kan då få felaktiga proportioner. Detsamma händer om den förstoras, eftersom pixlar då läggs till, mellan de ursprungliga pixlarna. Förstoras den digitaliserade bilden 3 gånger kommer varje pixel att ersättas med 9 nya. Detta ger lätt förvanskningar och förskjutningar i bilden.

Förutom antalet pixlar är upplösningen också den information som finns lagrad i varje pixel. Svartvita pixelbilder, som ibland kallas streckbilder, lagrar 1 bit i varje pixel, eftersom varje pixel är svart eller vit. Man säger att tonomfånget är en bit.

Gråskalebilder har i stället 8 bitars tonomfång, vilket betyder att varje pixel kan anta någon av 256 olika gråtoner. Anledningen till att man valt just 256 förefaller bl.a hänga ihop med att man med det antalet gråtoner kan skapa mjuka övergångar mellan olika grå nyanser.

Färgbilder kan ha olika färgdjup. På webben använder man 8 bitars GIF-bilder, som ger 256 olika färger. Man kan också välja ut vissa fäger, som man gör med dem man kallar "webbsäkra". Dessa färger är 216 till antalet. Bilder med andra paletter kallar man ibland "indexerade" för att tala om just att de använder en särskild palett.

RGB-systemet tillåter emellertid ungefär 16,7 miljoner olika färger, eftersom varje färg kan anta något av 256 olika nyanser och 256x256x256 blir ungefär så många. Man säger då att RGB-systemet har 24 bitars färgdjup, eftersom 2²⁴ blir 16,7 miljoner.

Känner du dig osäker på färger och bitar kan du dels läsa på Färgsidan och dels om bitar och bytes på Bitar och bytes

Känner man till hur många pixlar en bild består av och dess färgdjup, kan man också räkna ut ungefär hur stor plats bilden tar i minnet. Vår bild på 200x100 pixlar tar då upp 20.000 bitar eller 2,5kB, om den sparas som streckbild. Sparas den i stället som gråskala tar den upp 20.000x8 bitar eller 160kB. Sparas den med 24 bitars färgdjup hamnar vi i stället på 480kB.

För webbanvändning är det därför smart att ta bort så många onödiga färger som möjligt. På det viset får man ner dess filstorlek och därmed dess nerladdningstid. De flesta bildbehandlingsprogram för webbgrafik har automatiska funktioner för detta.

Pixelbaserade bilder lämpar sig framförallt för bildskärmen, men blir inte alltid snygga när man skriver ut dem. Skärmupplösningen på 96dpi och skrivarens minst 300dpi antyder att det blir problem. Bilden blir då alltså bara en tredjedel så stor vid utskriften, jämfört med på skärmen, beroende på just punkttätheten.

Väljer man å andra sidan att förstora den så att den blir lika stor vid utskriften som på skärmen, blir den i stället grynig och full av hackiga mönster. Därför kräver tryckbara bilder en riktigt bra originalbild med hög upplösning.

3. Objektgrafik

Objektgrafik är ett bättre ord än vektorgrafik, eftersom man numera inte bara använder vektorer. En vektor är ett streck mellan två punkter. För att skapa mjuka kurvor, t.ex vid utskrifter av bokstäver, använde man tidigare många små vektorer, som man satte samman. Resultatet blev lite kantiga kurvor.

Idag använder man därför en annan slags objektgrafik, där den vanligaste är Bezierkurvor, som är mjuka kurvor mellan två punkter. Genom att kombinera vektorer och Bezierkurvor, kan man alltså skapa både raka streck och mjuka kurvor.

Objektgrafikens olika objekt, som streck och kurvor, räknas fram matematiskt. Man kan likna det vid ett koordinatsystem, i vilket en linje eller kurva kan beskrivas m.h.a en matematisk formel. Linjen eller kurvan behåller sina proportioner även om koordinatsystemet förstoras eller förminskas. Ytterligare en fördel är att stora bilder tar mycket mindre minne i anspråk eftersom objektformatet ofta innebär en ansenlig komprimering.

Filformat som klarar objektgrafik, är t.ex EPS (Encapsulated Postscript) och PNG (Portable Network Graphics). De flesta format som klarar objektgrafik klarar också av pixelgrafik.

Sedan något år tillbaka finns det standarder för objektgrafik på webben. SWF-filer är sådana. SWF står för ShockWave-Format och tillverkas i bl.a Flash från Macromedia och LiveMotion från Adobe. För att lägga in sådan grafik, måste man använda någon slags "programmering" av webbsidan. Dessutom måste den som tittar på bilden ha rätt tilläggsprogram (plugin).

Följande bild är i Flash-format. Texten under visar hur koden ser ut på hemsidan. Jag har använt Dreamweaver för att skapa koden och har alltså inte skrivit den själv: