Základní principy digitální reprezentace obrazových informací

Použití počítače jako nástroje renderování k tvorbě a manipulaci s obrazy se nazývá počítačová grafika.[1] Zobrazovací zařízení, obrazovka počítače se skládá z 2D pole „lokací“ nazývaných pixely. Pixely jsou rozmístěny po ose x a ose y: p[x,y]. Pixel prezentovaný obrazovkou počítače se skládá ze subpixelů. Jednotlivý subpixel nese konkrétní, základní barvu, nutnou pro zobrazení pixelu v konkrétním barevném prostoru (např. prostor RGB: Pixel p1 nese červenou barvu, p2 zelenou, p3 modrou, např. čistě červená v celých číslech je definována takto: (255, 0, 0)).[2] Aditivním mícháním těchto základních barev se jednotlivé barevné složky sčítají a vytvářejí světlo.[3] Lidské oko pak blízko sobě položené subpixely o rozdílných barvách vnímá jako jeden pixel o jedné barvě a intenzitě.

Existují dva základní principy digitální reprezentace obrazových informací, dva základní způsoby, jak počítač ukládá a zpracovává obrazové informace: Bitmapová grafika a vektorová grafika.

Bitmapová (rastrová) grafika

V bitmapové grafice je obrázek popsán jednotlivými pixely, které jsou uspořádány do mřížky. Pixel má určenou polohu a barvu.

  • Tvořena pixely
  • Nelze měnit velikost, aniž by se nesnížila kvalita
  • Detailní obrazy s velkým rozlišením jsou náročné na velikost souboru
  • Rastrové obrazy jsou nejčastějším obrazovým formátem
  • Rastrové programy jsou nejvhodnější pro editování fotografií
  • Programy: Photoshop, GIMP, Corel Photo-Paint
  • Formáty: jpg, gif, png, tif, bmp, psd

Vektorová grafika

Formáty

Komprese

Paměťová náročnost rastrových obrazů roste kvadraticky s jejich rozlišením.[4] Komprese je tedy vhodným nástrojem ke snížení výsledné velikosti (v B) při zachování informace.[5] Ze souboru se odstraňují nadbytečná data, která člověk nevnímá.[6] Komprese se dělí na dvě základní kategorie: Ztrátová komprese a bezztrátová komprese. Umělec Pete Ashton na Instagramu pod jménem I Am Sitting In Stagram[7][8] re-postuje stejnou fotografii stále dokola. Tímto demonstruje, jak Instagram pokaždé zpracovává a komprimuje fotografie. Celé to můžeme nazvat generation loss.[9] Pokaždé, kdy si nahrajeme fotografii na Facebook, pak ji stáhneme, pak ji nahrajeme na Twitter, poté ji stáhneme a nahrajeme na Instagram, fotografie ztratí svou původní kvalitu.

Ztrátová komprese

Tato komprese se využívá k markantnímu snížení velikosti souboru, avšak na úkor kvality. Níže je ukázka kvality v závislosti na snížení velikosti souboru. Soubor vlevo je velký 40 kB a má nastavenou kvalitu na 10 %, pravý soubor pak na 100 % a výsledná velikost činí 141 kB.

Komprese10.jpgKomprese100.jpg

Bezztrátová komprese

Komprimováním bezztrátově se velikost souboru nesníží do takové míry, jako je tomu u ztrátové komprese. Oproti ztrátové kompresi lze komprimovaný soubor navrátit do původní podoby. U ztrátové komprese dochází k neodvratné ztrátě dat.

Formáty

Bitmapové formáty

  • BMP – V tomto formátu jsou pixely zaznamenány tak, jak jdou za sebou. 24 bitová barevná hloubka, 32 bitová při využití alfa kanálu. Alfa kanál udává průhlednost pixelu. BMP nevyužívá žádnou kompresi.[10]
  • GIF – Dříve velmi používaný formát pro zobrazení obrazové informace na internetu, velmi populární je využívat formát GIF k ukládání animací. 8 bitová barevná hloubka, je tedy ideální pro jednoduché barevné objekty. GIF využívá bezztrátovou kompresi.[11]
  • JPEG – Velmi populární obrazový formát napříč platformami. Tento 24 bitový formát využívá ztrátovou kompresi, díky níž lze dosahovat vysoké kvality při markantnímu snížení datové velikosti. Kvalita se snižuje s velikostí souboru. Tento formát je vhodný pro digitální fotografie, pro které byl navržený algoritmus komprese. Nevýhodou je komprimace při každém ukládání. Pro vyšší kvalitu při stejném kompresním poměru lze využít formát JPG2000.[12]
  • PNG – Oficiální formát pro obrazové informace na internetu. 24 bitová barevná hloubka. Podporuje alfa kanál. Je tedy vhodný na různé ikony. Využívá bezztrátovou kompresi. Pro ukládání animace se užívá formát APNG.[13]
  • TIFF – Využití zejména v tisku. Až 24 bitová barevná hloubka. Formát využívající bezztrátovou kompresi a umožňuje uložení více bitmapových vrstev.[14]
  • RAW – Třída souborových formátů, které využívají zařízení určené pro fotografii a video. RAW obsahuje pouze minimálně zpracovaná „surová“ data ze senzoru, zapsána 12 nebo 14 bity na bod. Pro optimální grafickou hodnotu je nutné RAW „vyvolat“, nastavit vyvážení bílé, expozici, kontrast apod. Díky této variabilitě je tento formát vhodný pro profesionální práci. Tato „surová“ data jsou velmi objemná a náročná na kapacitu paměťového média a také náročná na rychlost paměťového média, proto se v mobilních telefonech využívá JPEG formát a v profesionální branži RAW.[15]
  • PSD – Jedná se o formát, který ukládá Photoshop. 48 bit, alfa kanál, vrstvy, masky, bitmapy, vektory, texty apod., nekomprimovaný. Profesionální formát, jehož velikost závisí na komplexitě obsahu (1 GB není výjimkou).[16]

Vektorové formáty

  • PostScript: EPS, PS – PostScript je programovací jazyk, kterým se analyticky popisují všechny objekty, jako množina geometrických tvarů. K otevření je zapotřebí specifický program, pro zobrazení se využívá rastrových formátů, nejčastěji TIFF.[17]
  • PDF – Využívá PostScript jazyka, umožňuje tedy interpretovat PostScript soubory. Dále umožňuje embedování fontů a ukládání bitmapy. Je to populární formát pro zobrazování komplexních souborů na různých platformách.[18]
  • AI, CDR, DXF – Formát programů specializujících se na práci s vektorovou grafikou, zde Illustrator, ai; CorelDraw, cdr; CAD programy, dxf. Dále 3D programy, jako 3dsMax, 3ds; 3D soubory pod aplikacemi CAD, stl; ale i RAW, který uchovává „surová“ data o prostorových objektech.
  • SVG – Vektorový formát založený na XML, který se používá pro zobrazení vektorové grafiky a animací v internetovém prohlížeči. Nespornou výhodou využití objektů ve formátu SVG je responzivita. Zmenšením či zvětšením toho samého souboru nedojde ke ztrátě kvality. Stejný soubor lze i měnit v reálném čase: Měnit barvu, animovat, posouvat, tvarovat apod.[19]
  • VRML – Jazyk určený pro popis prostorových těles virtuální reality.[20]

Shrnutí

Komprese

  • Snížení velikosti redundancí dat
  • Ztrátová: Nevratné odebrání informací, viditelné snížení kvality
  • Bezztrátová

Formáty bitmapa

  • JPEG: Fotografie, ztrátová komprese, velmi populární, internet
  • PNG: Bezztrátová komprese, alfa kanál, internet
  • BMP: Žádná komprese, alfa kanál, velikost dle rozlišení

Formáty vektor

  • EPS, PS: PostScript
  • PDF: PostScript, pracuje i s bitmapami, fonty atp.
  • SVG: Internet, responzivita

Rozlišení

Rozlišení je počet pixelů, které mohou být zobrazeny na zařízení. Běžně se uvádí počet pixelů na ose x a ose y: např. 1920×1080 px, dalo by se uvézt i 2,1 Mpx, ovšem 2,1 Mpx může značit i rozlišení 1080×1920 px, nebo jiné.

Rozlišení DPI a PPI

  • DPI – Dots per inch, DPI je hustota obrazových bodů na jeden palec. DPI se uvádí zejména při tisku a skenování. Každý pixel se tiskne jako jinak barevná tečka.[21]
  • PPI – Pixels per inch, PPI je hustota obrazových pixelů, na zobrazovacím zařízení (monitor počítače).

Čím je hodnota DPI, resp. PPI, vyšší, tím je obraz jemnější. Na disku ale zabere vyšší místo, na papíře menší (pokud se obraz nepřevzorkuje). Pro tisk se používá minimální rozlišení 300 DPI, obrazovce monitoru zcela postačí 72 PPI. Retina displej iPhonu 6 disponuje rozlišením 326 PPI.[22] Ze standardní pozorovací vzdálenosti nejsou jednotlivé pixely viditelné, obrazovka působí ostřeji. Stejného efektu se dá dosáhnout i u nižší hustoty pixelů na stejné velikosti displeje.

Barevná (bitová) hloubka

Barevná hloubka v bitech určuje počet bitů, které jsou použity k popisu určité barvy každého pixelu, a to u rastrové grafiky. Čím vyšší je barevná hloubka, tím větší je barevná škála a také paměťová náročnost. Nejpoužívanější je barevná hloubka o hodnotě 24 bitů, tedy 224 (16,8 mil. barev).[23] Máme-li obrázek o velikosti 600×600px při 16 bitové hloubce, pak 2 bajty na každý pixel (8 bitů je 1 bajt). Dostaneme se tedy po výpočtu 600×600×2 k výsledné velikosti souboru 720 kB. Při 24 bitové hloubce pak 1,08 MB. Ukázka 3, 4, 6 a 8 bitové barevné hloubky:

Cd3bit.pngCd4bit.pngCd6bit.pngCd8bit.png

Odkazy

Reference

  1. What is Computer Graphics? Cornell University Program of Computer Graphics. 1998, [cit. 1.6.2016]. Dostupné z: http://www.graphics.cornell.edu/online/tutorial/
  2. Subpixel in Science. Dictionary.com, [cit. 1.6.2016]. Dostupné z: http://www.dictionary.com/browse/pixel
  3. POYNTON, Charles. Digital video and HDTV algorithms and interaces. Amsterdam: Morgan Kaufmann Publishers, c2003. Morgan Kaufmann series in computer graphics and geometric modeling. ISBN 1-55860-792-7.
  4. ŽÁRA, Jiří. Moderní počítačová grafika. 2., přeprac. a rozš. vyd. Praha: Computer Press, 2004. ISBN 80-251-0454-0.
  5. MAHDI, O.A.; MOHAMMED, M.A.; MOHAMED, A.J. Implementing a Novel Approach an Convert Audio Compression to Text Coding via Hybrid Technique. (PDF). International Journal of Computer Science Issues 9 (6, No. 3): 53–59. 2012, [cit. 1.6.2016]. http://ijcsi.org/papers/IJCSI-9-6-3-53-59.pdf
  6. PUJAR, J.H.; KADLASKAR, L.M. A New Lossless Method of Image Compression and Decompression Using Huffman Coding Techniques. (PDF). Journal of Theoretical and Applied Information Technology 15 (1): 18–23. 2010, [cit. 1.6.2016]. Dostupné z: http://www.jatit.org/volumes/research-papers/Vol15No1/3Vol15No1.pdf
  7. I Am Sitting In Stagram. Dostupné z: https://www.instagram.com/sitting_in_stagram/
  8. I Am Still Sitting In Stagram. Dostupné z: https://www.instagram.com/sitting_in_stagram2/
  9. Generation loss. Wikipedia.com, [cit. 1.6.2016]. Dostupné z: https://en.wikipedia.org/wiki/Generation_loss
  10. BMP file format. Wikipedia.com, [cit. 1.6.2016]. Dostupné z: https://en.wikipedia.org/wiki/BMP_file_format
  11. GIF. Wikipedia.com, [cit. 1.6.2016]. Dostupné z: https://en.wikipedia.org/wiki/GIF
  12. JPEG. Wikipedia.com, [cit. 1.6.2016]. Dostupné z: https://en.wikipedia.org/wiki/JPEG
  13. History of PNG. Libpng.org. 29.5.2010, [cit. 1.6.2016]. Dostupné z: http://www.libpng.org/pub/png/#history
  14. JAMES D. MURRAY AND WILIAM VANRYPER. Encyclopedia of graphics file formats. 2. ed. Bonn [u.a.]: O'Reilly, 1996. ISBN 1565921615.
  15. Camera Raw Formats. Digital Preservation. Library of Congress. 4.10.2006, [cit. 1.6.2016]. Dostupné z: http://www.digitalpreservation.gov/formats/fdd/fdd000241.shtml
  16. KNOLL, T. Adobe Photoshop, File Formats, Specification. Adobe Systems Incorporated. 2013, [cit. 1.6.2016]. Dostupné z: https://www.adobe.com/devnet-apps/photoshop/fileformatashtml/
  17. PostScript Turnes 20. (PDF). Adobe Systems Incorporated, [cit. 1.6.2016]. Dostupné z: https://www.adobe.com/products/postscript/pdfs/postscript_is_20.pdf
  18. PDF Reference. (PDF). 6th ed., version 1.7. Adobe Systems Incorporated. 2006, [cit. 1.6.2016]. Dostupné z: https://www.adobe.com/content/dam/Adobe/en/devnet/acrobat/pdfs/pdf_reference_1-7.pdf
  19. Scalable Vector Graphics (SVG) 1.2. W3C Working Draft. World Wide Web Consortium. 2002, [cit. 1.6.2016]. Dostupné z: https://www.w3.org/TR/2002/WD-SVG12-20021115/
  20. RAGGETT, D. Extending WWW to support Platform Independent Virtual Reality. Hewlett Packard Laboratories. World Wide Web Consortium. 1994, [cit. 1.6.2016]. Dostupné z: https://www.w3.org/People/Raggett/vrml/vrml.html
  21. Print Resolution: Understanding 4-bit depth. (PDF). Xerox Corporation. 2012, [cit. 1.6.2016]. Dostupné z: http://www.office.xerox.com/latest/XOGFS-17
  22. Retina Display. Wikipedia.com, [cit. 1.6.2016]. Dostupné z: https://en.wikipedia.org/wiki/Retina_Display
  23. Color depth and high dynamic range color, After Effects Help/Color basics. Adobe Systems Incorporated, [cit. 1.6.2016]. Dostupné z: https://helpx.adobe.com/after-effects/using/color-basics.html

Související články

Bitmapová grafika Vektorová grafika Komprese obrazových informací Formáty obrazových informací Rozlišení obrazových informací

Archivovaná verze stránky je dostupná na tomto odkazu.