03 – rastrová grafika (teória)

Najskôr pár jednoduchých slov k tomu, v akých jednotkách sa vlastne zapisujú jednotlivé údaje v pamäti počítača.

Najmenšou pamäťovou jednotkou je bit (označenie „b“). Predstavte si ho ako škatuľku. V každom bite môže byť zapísaná jedna z dvoch hodnôt: 0 alebo 1.

Keď dáme 8 bitov vedľa seba, vznikne z toho byte (čítaj „bajt“) (označenie „B“). Jeden byte má teda 8 bitov.

Málokedy sa ale stretávame so zápisom veľkostí nejakých súborov v bitoch, či bytoch, skôr sa stretávame s kilobytes (kilobajtami), megabytes (megabajtami), gigabytes (gigabajtami), či dokonca až terabytes (terabajtami). Aký je vzťah medzi týmito jednotlivými jednotkami?

Ak si myslíte, že jeden kilobyte má 1000 B, vyvediem vás z omylu. Vo fyzikálnom svete by to tak existovalo, v digitálnom svete sa to mierne líši – pohybujeme sa tu totiž v nulách a jednotkách, čiže v binárnej sústave, a preto tu kilo nebude znamenať 1000, ale 1024 (2¹⁰).

Takže platí: 1024 B = 1kB.

Mohli by sme pokračovať ďalej – 1024 kB = 1 MB; 1024 MB = 1 GB; 1024 GB = 1 TB.

Rastrová grafika

Raster
- mozaika bodov (malých štvorcov), ktoré sa nazývajú pixely. Každý bod nesie informáciu o farbe.

Parametre

Farebná hĺbka
- určuje počet farieb, ktoré je možné v obrázku použiť
- každý bod obrázka je reprezentovaný hodnotou, v ktorej je zakódovaná farba
- údaje sú vyjadrené v bitoch.
Veľkosť
- udáva počet bodov, z ktorých je obrázok zložený
- určíme ju teda ako súčin šírky a výšky obrázka v bodoch (pixeloch)

RÔZNE FAREBNÉ HĹBKY

Predstavte si, že na uloženie farby jedného pixela máte k dispozícii iba jeden bit. Koľko rôznych farieb môžete takto zapísať? Iba dve – buď doň zapíšete nulu (čierna farba) alebo jednotku (biela farba).

Teraz si predstavte, že máte dva bity. Koľko rôznych farieb môžete takto zapísať? Štyri – každej z nich priradíte jedno z čísel 00, 01, 10 alebo 11.

Poďme ďalej, majme k dispozícii 3 bity. Koľko farieb môžeme zapísať tentokrát? Nuž 000, 001, 010, 011, 100, 101, 110 a 111. Odpoveď je teda osem – každému z týchto čísel priradíme jednu farbu.

Vidíte už ten vzťah? Jeden bit => 2 farby. Dva bity => 4 farby. Tri bity => 8 farieb. Ako by to asi šlo ďalej? 4 bity => 16 farieb, 5 bitov => 32 farieb, atď.

Ak chcem teda mať v obrázku pre každý pixel možných až 256 farieb, koľko bitov na to potrebujem? Osem, pretože 2⁸ je 256.

Odtiene sivej
- Niektoré obrázky sa ukladajú v tzv. sivej škále (grayscale)
- Výhodné je zakódovať odtiene sivej farby pomocou ôsmich bitov, teda tak, aby informácia o každom bode zaberala 1 Byte.
- Čím bude bod svetlejší, tým väčšia číselná hodnota sa do pamäte uloží.
- Preto bod čiernej farby bude uložený ako 0 a bod bielej farby ako maximálna možná hodnota – 255 (samozrejme sa budú tieto čísla zapisovať v dvojkovej sústave).

Plná farebnosť – RGB farebný režim (red-green-blue)
- Farba každého bodu je namiešaná z troch základných farieb – červenej, zelenej a modrej, pričom každú z týchto farieb môžeme primiešať v jednom z 256 odtieňoch. Máme teda 256 odtieňov červenej, 256 odtieňov zelenej a 256 odtieňov modrej. A koľko bitov potrebujeme na to, aby sme mohli zapísať niektorý 256 odtieňov červenej? Odpoveď je osem (podľa toho, čo je pár riadkov vyššie). Rovnako potrebujeme 8 bitov na zapísanie jedného z 256 odtieňov zelenej a 8 bitov na zapísanie jedného z 256 odtieňov modrej.
- Pri plnej farebnosti je teda každý bod obrázka zakódovaný 24 bitmi, čo sú 3B (3 Bytes (Bajty)).
- Pritom 255 0 0 je sýta červená, 0 255 0 je sýta zelená, 0 0 255 je sýta modrá, 0 0 0 je čierna a 255 255 255 je biela. (A kto bol na hodine pamätá si aj to, že 90 60 90 je fialová. :))

FAREBNÁ HĹBKA	POČET BITOV NA 1 PIXEL	VYSVETLENIE
Čiernobiely obrázok	2	0 je čierna, 1 je biela
Obrázok v odtieňoch šedej	8	dokopy je 256 farieb – na to potrebujem 8 bitov (lebo 2⁸ je 256)
16-farebný obrázok	4	16 farieb = 2⁴ bitov
TrueColor obrázok	24	RGB obrázok, každú zložku viem primiešať v jednom z 256 odtieňov, na každú teda potrebujem 8 bitov, spolu teda 3×8 bitov = 256 bitov

Kompresia

Stalo sa vám už niekedy, že ste chceli uploadnúť obrázok na web, no nešlo to, pretože bol príliš veľký? Myslím si, že aspoň polovica z vás (ak nie viac) takú skúsenosť má. A čo ste urobili? Snažili ste sa ho nejako zmenšiť? Ako? Možno ste mu zmenili veľkosť – to zvyčajne pomôže. Ale možno len stačilo uložiť ho v inom formáte, ktorý používa nejakú kompresiu.

Kompresia je teda proces zmenšovania veľkosti (v princípe čohokoľvek, teraz sa však bavíme o rastrovej grafike). Existujú dva typy kompresie: stratová a bezstratová.

BEZSTRATOVÁ KOMPRESIA

spočíva v tom, že ak sa bod s rovnakou farbou vyskytuje viackrát za sebou, do pamäte neukladáme jednotlivé body, ale uložíme koľkokrát sa bod danej farby vyskytol.
Napr. (zjednodušene) 8-krát červená, 3-krát modrá atď.

Pozrite sa na tento obrázok:

Predstavte si, že jednotlivé štvorčeky sú v tomto prípade len zväčšené pixely, tento obrázok má teda 4×4 pixelov. Prvé štyri pixely majú červenú farbu (255,0,0). Ak by bol obrázok nekomprimovaný, bol by v pamäti počítača uložený takto nejako (veľmi zjednodušene):

na pozícii 0,0 sa nachádza pixel s farbou 255,0,0
na pozícii 1,0 sa nachádza pixel s farbou 255,0,0
na pozícii 2,0 sa nachádza pixel s farbou 255,0,0
na pozícii 3,0 sa nachádza pixel s farbou 255,0,0
na pozícii 0,1 sa nachádza pixel s farbou 255,255,255 (biely)
atď.

Nemusí vás trápiť, ako určiť tie pozície (to teraz nie je dôležité), skôr si všimnite to, aký je takýto zápis zdĺhavý. Štyrikrát zapisujem informáciu o pixeloch, ktoré majú úplne rovnakú farbu.

Ale – ak by sme na tento obrázok aplikovali bezstratovú kompresiu, zápis by vyzeral inak (zas veľmi zjednodušene):

od pozície 0,0 sú 4 pixely s farbou 255,0,0
od pozície 0,1 sú 4 pixely s farbou 255,255,255 (biele)
atď.

Vidíte ten rozdiel? V zápise, kde bola použitá bezstratová kompresia, som použila dve odrážky (tretia bola „atď.“) a zapísala som celé dva riadky pixelov (8 pixelov) z toho obrázka, zatiaľčo v predchádzajúcom zápise bolo tých odrážok až päť a zapísaných bolo iba 5 pixelov. Rýchlejšie, že?

Takže vďaka tomu, že sa obrázok zapíše do pamäte počítača takto „kompaktnejšie“, zaberie tam menej miesta, jeho veľkosť (v Bajtoch) bude teda menšia, ale jeho veľkosť (v pixeloch – rozmery obrázka) sa nezmení.

A prečo sa táto kompresia volá bezstratová? Z komprimovaného zápisu (toho kratšieho) sa totiž vieme vrátiť späť a znova to zapísať tým nekomprimovaným (zdĺhavým) spôsobom. Čiže nestratíme žiadnu informáciu, len to rýchlejšie zapíšeme.

STRATOVÁ KOMPRESIA

Založená je na vynechávaní niektorých málo viditeľných detailov obrazu.
V praxi to znamená, že ak je niekde napríklad jedna svetložltá bodka uprostred veľkého bieleho poľa, jednoducho sa vymaže.

Pozrite sa znova na tento obrázok:

Zdá sa vám rovnaký ako predchádzajúci? Verte mi, že nie je. Totižto druhý a štvrtý pixel v prvom riadku nemajú farbu 255,0,0, ale 254,0,0. Problém (alebo výhoda?) je však v tom, že aj keby ste sa neviem ako snažili, rozdiel nespoznáte. Naše oči totiž taký malý rozdiel vo farbe nedokážu rozlíšiť.

A práve to je to, čo využíva stratová kompresia – nedokonalosť ľudského oka. Pri stratovej kompresii sa teda v prípade, že sú vedľa seba pixely, ktoré majú síce rôzne farby, ale také, ktoré ľudské oko nedokáže rozlíšiť, nastaví všetkým rovnaká farba. A potom sa to môže zapísať rovnako kompaktne ako v prípade bezstratovej kompresie (4xpixel jednej farby).

A prečo sa to volá stratová kompresia? Preto, že až ju raz aplikujeme (použijeme), nevieme sa už vrátiť do pôvodného stavu. Nevieme, či tam vôbec boli nejaké pixely s predtým inou farbou, a ak boli, nevieme, ktoré presne to boli, a navyše nevieme, akú farbu pred tým mali. Takže sme stratili informáciu o pôvodnom stave (preto stratová kompresia).

Grafické formáty

Tých je, samozrejme, neúrekom, uvádzam štyri z nich. Tri z nich sú často používané, jeden takmer vôbec (hneď ten prvý):

BMP (BIT MAPPED PICTURE)

formát, s ktorým najlepšie spolupracuje operačný systém Microsoft Windows. Pôvodne bol určený pre 16-farebné obrázky.
Nevýhodou je, že aj jednoduchý obrázok zaberie veľký priestor na disku.
Prípony, ktoré tento formát používa sú .bmp alebo .dib (Device Independent Bitmap).

JPEG (VYTVORENÝ SKUPINOU JOINT PHOTOGRAPHIC EXPERT GROUP)

využíva stratovú kompresiu na zmenšenie veľkosti obrázka.
Pri tejto kompresii je využívaná nedokonalosť ľudského zraku – napríklad ľudské oko je citlivejšie na zmenu jasu než odtieňa farby.
Formát JPEG je najvhodnejší na fotografie a väčšie farebné obrázky (s farebnou hĺbkou 16,7mil. farieb).
Je nepraktický pre malé grafické prvky (menšie obrázky, čiernobielu grafiku…) s farebnou hĺbkou nižšou než 256 farieb.

GIF (GRAPHICS INTERCHANGE FORMAT)

obvykle sa používa tam, kde nie je vhodné použiť formát JPEG.
GIF pri ukladaní používa bezstratovú kompresiu.
Oproti formátu JPEG má GIF výhodu v podpore tzv. priehľadného pozadia (jedna farba môže byť pri zobrazení skrytá).
Veľkou výhodou tohto formátu je možnosť použiť tzv. animovaný GIF, čo je postupnosť obrázkov premietaných jeden za druhým. Používa sa predovšetkým pre animované reklamné bannery.
Medzi nevýhody patrí farebná hĺbka – maximum je iba 256 farieb (8 bitov na pixel) vybraných z palety 16,7mil. farieb.

PNG (PORTABLE NETWORK GRAPHICS)

tento formát vytvorila organizácia W3C – Word Wide Web Consortium.
kombinuje výhody oboch uvedených formátov – farebná hĺbka môže byť 16,7 mil. farieb, používa bezstratový typ kompresie a podporuje vylepšené prekladanie častí obrázka.
Medzi nevýhody patrí absencia animácií v obrázku a o trochu väčšie pamäťové nároky.

FORMÁT	FAREBNÁ HĹBKA	PRIEHĽADNOSŤ	ANIMÁCIA	KOMPRESIA	VYUŽITIE
bmp	môže byť až 32b (takmer 4 295mil. farieb)	nie	nie	žiadna	žiadne:)
jpg	24b (16,7mil. farieb)	nie	nie	stratová	obrázky na web, fotky
gif	8b (256 farieb)	áno	áno	bezstratová	animované obrázky
png	24b – 32b	áno	nie	bezstratová	obrázky na web v lepšej kvalite ako jpg, fotky

Ako vyrátať veľkosť nekomprimovaného obrázka

vynásobíme výšku obrázka s jeho šírkou a s farebnou hĺbkou
napr. máme obrázok 640×860 pixelov vo farebnej hĺbke 16 bitov:

640 x 860 x 16 = 8 806 400 bitov

Ako to premeniť na MegaBytes (megabajty)?

Najskôr to vydelíme číslom 8, lebo 1 B (Byte) = 8 b (bitov), takže výsledok bude v Bytoch (bajtoch).
Na to, aby sme sa dostali ku kB (kilobajtom), musíme ďalej výsledok deliť číslom 1024.
Na to, aby sme sa dostali ku MB (megabajtom), musíme ďalej výsledok deliť číslom 1024.

Takže:

8 806 400 / 8 / 1024 / 1024 = 1,05 MB