Föreläsning i webbdesign Bilder och färger Rune Körnefors Medieteknik 1 2012 Rune Körnefors rune.kornefors@lnu.se
Exempel: Bilder på några webbsidor 2
Bildpunkt = pixel (picture element) Bilder (bitmap /punktgrafik) original 200x150 = 30 000 pixels förstorad 3
Bilder (objektgrafik / vektorgrafik) Objekt byggs upp av matemalska formler LäN an ändra inbördes ordning LäN an skala om Snyggare utskrip 4
Datorns språk I en dator kan mullmedial informalon presenteras. DeNa består av text, bilder, ljud, video, etc... 182 10110110 Koder (sekvenser) av binära tal med 0:or och 1:or för: - siffertal - text - bilder - färg - ljud -... 5
Bitar och bytes Bit Binary digit En 0:a eller 1:a Byte Bitgrupp med 8 bitar 0 0 0 0 0 0 0 0 1 1 1 1 1 1 1 1 0 1 0 1 0 0 1 0 1 1 x128 x64 x32 x16 x8 x4 x2 x1" = 0 = 255 256 olika koder 0 1 00 01 10 11 000 001 010 011 100 101 110 111 00000000 11111111 6
Text ASCII American Standard Code for InformaLon Interchange 7 bitar per tecken è 128 olika tecken Exempel: Tecknet A har koden 65 = 1000001 Tecknet 5 har koden 53 = 0110101 Dator = 69 97 116 111 114 Utökad ASCII T.ex. UTF- 8 eller ISO- 8859-1 (LaLn 1) 8 bitar per tecken è 256 olika tecken Unicode 2 bytes per tecken è 65536 olika tecken 7
Bitmap- grafik Varje pixel har en färgkod 8
1 bit = svart / vin 200x150 pixels = 30000 pixels 30000 bitar / 8 = 3750 bytes 3,5 KB Hur många bitar per pixel? RGB (Röd/Grön/Blå), 1 byte per färg 3 bytes = drygt 16 miljoner färgnyanser 200x150 pixels = 30000 pixels 30000 x 3 bytes 90 KB 8 bitar = 1 byte = 256 färgnyanser 200x150 pixels = 30000 pixels 30000 bytes 30 KB 9
Hur många bitar per pixel? 1 bit = blå / grön Bilden innehåller inte fler färger 1 byte = 256 färgnyanser Bilden innehåller egentligen bara åna färger 10
Färg RGB Röd, Grön, Blå 1 byte per färg è 3 bytes = 24 bitar per pixel Exempel på färger Röd FF0000 Grön 00FF00 Blå 0000FF Gul FFFF00 Lila FF00FF Ljusblå 00FFFF Vit FFFFFF Svart 000000 (hexadecimala koder) 11
Hexadecimala talsystemet 4 bitar ger 16 olika koder 0000 Lll 1111 Hexadecimala talsystemet 16 olika siffror 0-9 och A- F Ger kortare skrivsän av koder som tal 1 0 1 1 0 1 0 0 B" 4" 180" binärt hexadecimalt decimalt 12
Bildstorlek Antal bildpunkter, t.ex. 600x400 (bredd x höjd) Täthet Antal bildpunkter per tum, t.ex. 72 dpi Färgdjup Antal möjliga färger (nyanser) per bildpunkt (pixel), t.ex. 256 eller 65536 Anges ibland i hur många bitar som går åt för an representera en färg i färgskalan, t.ex. 8 bitar (256 färger) eller 24 bitar (drygt 16 miljoner färger) Storlek, täthet, färgdjup è påverkar bildkvalitet, filstorlek och överföringsld 13
Bildskärmen 1024 Origo längst upp Lll vänster Varje fönster har en eget koordinatsystem med origo längst upp Lll vänster 768 0,0 0,0" 120,40" Skärmstorlek Vanligt format (upplösning): Varierar mycket beroende på typ av enhet Förhållande bredd:höjd Vanligt: 4:3 Bredbild: 16:9 bredd (4)" 4:3-format! bredd (16)" 16:9-format! höjd (3)" höjd (9)" 14
Antal bildpunkter för bilder Bild från en digitalkamera: 2 miljoner pixlar: bildstorlek på c:a 1600x1200 bredd" 4 miljoner pixlar: bildstorlek på c:a 2300x1700 höjd" 14 miljoner pixlar bildstorlek på c:a 4320x3240 Förminska bilden Onödigt an ha så stora bilder på en webbsida Förminska Lll den storlek som bilden ska ha på sidan è mindre filstorlek => snabbare nedladdningsld 15
Täthet Antal punkter per tum (pixlar/tum, dots per inch, dpi) Bildskärm: t.ex. 72 eller 96 pixlar/tum Skrivare >300 pixlar/tum 16
Färgsystem FärgpaleN CLUT (Color LookUp Table) RGB Red, Green, Blue CMYK Cyan, Magenta, Yellow, Black projicerande reflekterande HSB HSL Hue, SaturaLon, Brightness Hue, SaturaLon, Lightness... 17
Byte av färgdjup Indexering Gå från en större Lll en färre antal bitar per pixel Dither (mixa olika färger) giner 18
Skalning Förstoring ReplikaLon (närmaste granne) InterpolaLon 19
AnN- alias (kantutjämning) Med anl- alias Utan anl- alias 20
Transparenta bilder En färg säns Lll an vara transparent (genomskinlig) Bakgrunden lyser igenom Bilder med en fåtal färger ( 256) utan interpolalon eller anl- alias Bild där den vita färgen ska vara transparent Bakgrunds- mönster 21
Filstorlek Exempel: Bildstorlek: 800x600 pixlar Färgsystem: RGB med 256 nyanser per röd, grön, blå = 1 byte per färg = 3 bytes per pixel è Filstorlek: 800x600x3 = 1 440 000 bytes = c:a 1,4 MB 800" 600" ÖverföringsLd på nätet: Modem 56K: 56 kilobit per sekund: c:a 200 sekunder Bredband med 2 megabit per sekund: c:a 6 sekunder Bredband med 100 megabit per sekund: c:a 0,1 sekunder 22
Exempel 256 färger = 1 byte per pixel 180 x 210 pixels = 37800 pixels 37800 bytes = 37 KB Reducera antalet färger I bilden används endast sex färger è Kan representeras med tre bitar Komprimering 2 pixels per byte (=4 bitar per pixel) è 37800 pixels / 2 = 18900 bytes = 18 KB Samma färg upprepas Vit, vit,..., vit, gul,..., gul, vit,... => 123 vit, 7 gul, 39 vit,... è 2 KB (gissning) 180" 210" 800" Foton komprimeras enligt liknande princip Olika metoder används i olika filformat 600" 23
Filformat Beskrivning av hur program ska tolka filens innehåll Många filformat för bilder innebär också an bilden komprimeras Exempel: Bildstorlek: 800x600 pixlar Färgsystem: RGB med 256 nyanser per röd, grön, blå = 1 byte per färg = 3 bytes per pixel è Filstorlek: 800x600x3 = 1 440 000 bytes = c:a 1,4 MB Sparas som JPEG i medelkvalitet è Filstorlek: c:a 35 KB 800" 600" ÖverföringsLd på nätet: Modem 56K: 56 kilobit per sekund: c:a 5 sekunder Bredband med 2 megabit per sekund: c:a 0,1 sekunder Bredband med 100 megabit per sekund: c:a 0,003 sekunder 24
Filformat för bilder på webben GIF Graphics Interchange Format Upp Lll 8 bitar för färgkodning è färgpalen med upp Lll 256 olika färgnyanser En färg kan göras transparent Komprimering utan förlust av färginformalon JPEG Joint Photographic Experts Group RGB (Röd, Grön, Blå) med 8 bitar per färg, dvs 24 bitar è drygt 16 miljoner olika färgnyanser Ej transparent Komprimering med förlust av färginformalon PNG Portable Network Graphics Upp Lll 48 bitar för färgkodning (RGB med 16 bitar per färg) PNG- 8 = 8 bitar totalt, PNG- 24 = 24 totalt Komprimering utan förlust av färginformalon 25