TNMK30, 2010 Föreläsning Bilder... Tobias Trofast, LiU 1 Dagens föreläsning Olika grafikformat Bitdjup Färglägen och kanaler Komprimering Filformat Bildkvalitet Upplösning & Interpolering Objektgrafik Ett eller flera objekt som beskrivs matematiskt Renderas ( ritas ) av datorns grafikkort Skalbart utan kvalitetsförluster Objektgrafik Varje objekt har sina egna atribut: Linje Fyllning Effekt Filstorleken bestäms av antalet objekt och deras komplexitet
Objektgrafik Logotyper Illustrationer Fonter Objektgrafik Adobe Illustrator Adobe Flash.eps (Encapsulated Postscript).ai (Adobe Illustrator).pdf (Portable Document Format).svg (Scalable Vector Graphics) Pixelgrafik Skapas genom digital fotografering, skanning, illustration (pixelart) Enda (rimliga) sättet att återge fotografiska bilder Varje pixel har en unik position kulör
Upplösning (Geometrisk) Bildfilen består av en pixelmatris var storlek bestäms av skannern eller kameran Upplösningen = pixlar/cm eller pixlar/tum Upplösning mäts i ppi - pixels per inch (inte dpi) Stor pixelmatris (många pixlar) = Storfil Hög upplösning = Hög detaljåtergivning vid t ex tryck Upplösning (Geometrisk) 72 ppi 96 ppi Upplösning (Geometrisk) Upplösning (Geometrisk) GDK [postscript] GDK Postscript: 1 point = 1/72 inch Apple: 1 pixel = 1/72 inch
Upplösning Apple: 1 pixel = 1/72 inch Skärmupplösning = 72 ppi (Microsoft valde 96 ppi för högre läsbarhet) Upplösning (Geometrisk) MacBook Pro 15" - 110 ppi iphone 3G - 163 ppi ipad 132 ppi iphone 4-326 ppi HTC Desire - 252 ppi* SonyEricsson X1-311 ppi ASUS Eee PC 700-133 ppi Vilken upplösning? För utskrift : 150-200 ppi Beakta också betraktningsavståndet Vepor, banderoller 30 (!) - 170 ppi För tryck : 2 x rastertätheten (ex. 2 x 150 lpi = 300 ppi) 2 kallas samplingsfaktor behöver egentligen bara vara 1,5 Bitdjup (Fotometrisk upplösning) Antal toner en pixel kan anta/kanal 1 bit = 0 eller 1 (t ex svart eller vitt) 8 bitar = 00000000 -> 11111111 = 256 toner (nivåer) 16 bitar = 65 536 nivåer Fler bitar ger större mängd data att lagra
Kanaler 1 databit & 1 kanal > Streckoriginal 2 möjliga kulörer 8 databitar & 1 kanal > Gråskala 256 möjliga kulörer Kanaler 8 databitar & 3 kanaler > t ex RGB 256 kulörer per kanal 16,7 miljoner möjliga kulörer Filstorlek 8 databitar & 3 kanaler, t ex 800 x 0 pixlar 8 databitar = 1 byte varje pixel = 3 bytes 800 x 0 x 3 = 1 440 000 bytes = 1,44 Mb jmf text där varje tecken = 1 byte 1,44 Mb = 1,44 miljoner tecken 200 000 ord 300 sidor text Dataöverföring För att föra över 1,44 Mb Bredband (10 Mbit/s) = 1 s Mobilt bredband (c:a 3 Mbit/s) = 3 s Sämre bredband (512 kbits/s) = 30 s ISDN (128 kbits/s) = 2 min GPRS (56-114 kbits/s) 2-5 min Lösningen heter komprimering!
Komprimering Syftet är att minska filstorleken för att: Minska lagringsutrymmet Öka överföringshastigheten Två typer: Förstörande komprimering Ickeförstörande komprimering Komprimering Komprimering och Dekomprimering Programmet som sparar filen komprimerar, men programmet som skall läsa filen måste kunde dekomprimera filen! Vissa komprimeringsalgoritmer är patenterade (t ex LZW). Ickeförstörande komprimering Bygger oftast på att förenkla beskrivningen av likfärgade ytor. RLE (Run Length Encoding) LZW (Lempel, Ziv, Welch) DEFLATE Run Length Encoding Okomprimerat 180 180 220 180 180 123 123 128 123 123 3 bytes/pixel x 8 pixlar = 24 bytes 110 100 30 (8 bitar = 1 byte) 180 180 123 123 RLE (Run Length Encoding) 180 123,2 220 180 128 123,2 110 100 30 180 123 5 bytes/pixel x 5 pixlar = 20 bytes,2
Run Length Encoding okomprimerat : 143 kb RLE (bmp) : 74 kb RLE (bmp) : 53 kb LZW Okomprimerat 180 180 220 180 180 123 123 128 123 123 3 bytes/pixel x 8 pixlar = 24 bytes 110 100 30 (8 bitar = 1 byte) 180 180 123 123 LZW (Lempel, Ziv, Welch) [A] [B] [C] [A]= 180 123 180 123 220 128 [B]= 180 123 180 123 110 100 30 180 [C]= 123 180 123 LZW okomprimerat : 143 kb LZW (gif) : 61 kb RLE (bmp) : 74 kb DEFLATE LZ77 + Huffman Finns i t ex gzip & pkzip
DEFLATE okomprimerat : 143 kb LZW (gif) : 61 kb RLE (bmp) : 74 kb DEFLATE (png) : 57 kb Förstörande komprimering Komprimerar genom att ta bort information ur bilden: JPEG Förstörande komprimering JPEG - Joint Photographic Experts Group 1982 För smidigare bildöverföring via ISDN Finns som eget filformat, men även som komprimeringsalgoritm i flertalet andra format (t ex TIFF) Förstörande komprimering JPEG - Joint Photographic Experts Group Komprimeringen sker varje gång bilden sparas Komprimerings-/Kvalitetsgraden går att styra Komprimerar genom att likställa områden med liknande kulör Ändrar inte luminansen (där ögat är mycket känsligare)
L -10 a -10 Förstörande komprimering JPEG - Joint Photographic Experts Group Omvandlar till färgrymden YCbCr Samplar ner CbCr, men inte luminansen Y Delar in bilden i pixelblock om 8x8 pixlar Förstörande komprimering JPEG - Joint Photographic Experts Group Använder DCT-transform för att likställa informationen inom blocket Ljusa toner likställs mer än mörka, pga ökats ickelinjära uppfattning Likställningen inom blocket görs genom normalisering Programmet som skall dekomprimera använder en omvänd DCT.
Kanaler / Färg RGB 24-bitar Truecolor RGB 8-bitar indexerade färg, totalt 256 möjliga kulörer RGB 8-bitars websäkra färger, totalt 216 (6 nivåer per kanal; 6x6x6 = 216) Ickeförstörande komprimering Dithering Används för att skapa jämnare, mer fotografiska, tonövergångar med färre färger Ökar visuella kvaliten, men ökar filstorleken utan dithering med dithering Transparens 1-bits transparens Alpha-kanal RGBA
Transparens Transparens Transparens Transparens
Kantutjämning Anti-aliasing Kantutjämning Anti-aliasing Kantutjämning Anti-aliasing Filformat för webben JPEG (Joint Photographic Expert Group) Digitalkameran, Webben och ibland till tryck som leveransformat Förstörande komprimeringsmetod Aldrig som arbetsformat! Gråskala, RGB och CMYK Stödjer färghantering
Filformat för webben GIF (Graphic Interchange Format) Webben Endast indexerad färg 256 kulörer (jmf 16,7 milj) Dithering Enklare animationer Ickeförstörande komprimering LZW Filformat för webben PNG (Portable Network Graphic), 1995 Ersättare till GIF Indexerad färg, Gråskala, RGB Transparens Ickeförstörande komprimering (DEFLATE) Filformat för webben PNG (Portable Network Graphic), 1995 Bitdjupet varierar beroende på färgläge Transparens via alpha-kanal Dithering MNG (Multiimage Network Graphic) för animationer Jämförelse av format och komprimering Originalet 1,3 Mb Komprimerat med JPEG till 80 kb (1/16)
Jämförelse av format och komprimering Originalet 1,3 Mb Komprimerat med JPEG till 50 kb (1/25) Jämförelse av format och komprimering Originalet 1,3 Mb Komprimerat med JPEG till 13 kb (1/100) Jämförelse av format och komprimering Originalet 1,3 Mb Komprimerat med PNG till 641 kb (1/2) Jämförelse av format och komprimering Originalet 1,0 Mb Komprimerat med PNG till 40 kb (1/25)
Jämförelse av format och komprimering Originalet 1,0 Mb Komprimerat med JPEG till kb (1/16) Jämförelse av format och komprimering Originalet 1,0 Mb Komprimerat med JPEG till 40 kb (1/25) Objektgrafik då?? SVG eller SWF SWF ShockWave Flash FutureWave > Macromedia > Adobe Objektbaserade animationer Kan läsas av samtliga webläsare, nästan...
Scalable Vector Graphics Utvecklas av W3C Baserat på XML Anpassningar för mobila enheter Stöd i alla browsers utom IE Möjligt att komprimera (med gzip) SVG TACK! tobias.trofast@itn.liu.se