Föreläsning i webbdesign. Bilder och färger. Rune Körnefors. Medieteknik Rune Körnefors rune.kornefors@lnu.se

Transkript

1 Föreläsning i webbdesign Bilder och färger Rune Körnefors Medieteknik Rune Körnefors rune.kornefors@lnu.se

2 Exempel: Bilder på några webbsidor 2

3 Bildpunkt = pixel (picture element) Bilder (bitmap /punktgrafik) original 200x150 = pixels förstorad 3

4 Bilder (objektgrafik / vektorgrafik) Objekt byggs upp av matemalska formler LäN an ändra inbördes ordning LäN an skala om Snyggare utskrip 4

5 Datorns språk I en dator kan mullmedial informalon presenteras. DeNa består av text, bilder, ljud, video, etc Koder (sekvenser) av binära tal med 0:or och 1:or för: - siffertal - text - bilder - färg - ljud

6 Bitar och bytes Bit Binary digit En 0:a eller 1:a Byte Bitgrupp med 8 bitar x128 x64 x32 x16 x8 x4 x2 x1" = 0 = olika koder

7 Text ASCII American Standard Code for InformaLon Interchange 7 bitar per tecken è 128 olika tecken Exempel: Tecknet A har koden 65 = Tecknet 5 har koden 53 = Dator = Utökad ASCII T.ex. UTF- 8 eller ISO (LaLn 1) 8 bitar per tecken è 256 olika tecken Unicode 2 bytes per tecken è olika tecken 7

8 Bitmap- grafik Varje pixel har en färgkod 8

9 1 bit = svart / vin 200x150 pixels = pixels 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 = pixels x 3 bytes 90 KB 8 bitar = 1 byte = 256 färgnyanser 200x150 pixels = pixels bytes 30 KB 9

10 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

11 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 (hexadecimala koder) 11

12 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 B" 4" 180" binärt hexadecimalt decimalt 12

13 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 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

14 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

15 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

16 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

17 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

18 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

19 Skalning Förstoring ReplikaLon (närmaste granne) InterpolaLon 19

20 AnN- alias (kantutjämning) Med anl- alias Utan anl- alias 20

21 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

22 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 = 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

23 Exempel 256 färger = 1 byte per pixel 180 x 210 pixels = pixels 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) è pixels / 2 = 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

24 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 = 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

25 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