Rastrové obrázky – teorie Pavel Roubal © 2009 Rastrové obrázky – teorie Výukový modul projektu: Nové formy výuky ve školách kraje Vysočina Projekt je spolufinancován Evropským sociálním fondem a státním rozpočtem České republiky

Licenční ujednání Pavel Roubal © 2009 Výukový modul můžete zdarma používat ve své výuce. Nesmíte ho šířit (někomu posílat), předávejte pouze odkaz na jeho stažení z webu www.eduit.cz (je tam vždy aktuální verze). Můžete si ho upravit pro potřeby vlastní výuky, upravený modul však nesmíte dále šířit (viz bod 2).

! Dva typy obrázků Nyní se budeme zabývat pouze rastrovými obrázky. Která bota je rastrová a která vektorová? Rastrové (také bitmapové) obrázky se skládají z barevných bodů. Vektorové obrázky se skládají z čar, obdélníků, elips apod., obecně: z křivek. ! Nyní se budeme zabývat pouze rastrovými obrázky.

Dva typy obrázků Rastrové programy se označují Paint…, malují. Vektorové programy se označují Draw…, kreslí.

! Dva typy obrázků Nyní se budeme zabývat pouze rastrovými obrázky. Při zvětšení je vidět bodová struktura rastrového obrázku, vektorový zůstává stále hladký. Křivky tvořící vektorovou kresbu se vždy znovu hladce vykreslí. ! Nyní se budeme zabývat pouze rastrovými obrázky.

Body – pixely Rastrový obrázek (fotografie nebo malba) se skládá z barevných bodů. Bodům se také často říká pixely. Na lupou přiblíženém detailu vidíme jednotlivé body – pixely Otázka: Má pixel nějakou přesně stanovenou velikost?

Počet bodů obrázku 300 px Rastrový obrázek je určen počtem svých bodů (pixelů). Například: 800 × 600 bodů, 1024 × 768 bodů, nebo 3264 × 2448 bodů. Někdy se udává pouze celkový počet (mega)pixelů. 200 px Kolik pixelů má obrázek 800x600? Kolik jich má obrázek auta výše? Kolik Mpix má obrázek 3264x2448 bodů?

Zobrazení na monitoru Monitory mají různý počet bodů. 1920 px Monitory mají různý počet bodů. Stejný obrázek se tedy na nich zobrazí různě. 1080 px Kolik pixelů na šířku má obrázek dítěte výše? Kolik pixelů má menší monitor na obrázku vlevo?

Rozlišení LCD nebo plasmy Kolik obrazových bodů (pixelů) má váš monitor? Počet bodů obrazu je hlavní parametr zobrazovacího zařízení. HD Ready – 720 p, 1360×768 bodů. Full HD – 1080 p, 1920×1080 bodů – ideální rozlišení zobrazovacího panelu

Rozlišení (Jednotkou délky je bohužel jeden palec cca 2,5 cm). Počtu bodů na jednotku délky se říká rozlišení. (Jednotkou délky je bohužel jeden palec cca 2,5 cm). Jednotka se nazývá DPI (dý pí aj, Dot Per Inch, bodů na palec). Obrázek s rozliše- ním 300 DPI obsahuje na každý palec 300 bodů. 80 px 10 cm, tedy 4" Jaké rozlišení má tento obrázek? ……………… DPI

Přiměřené rozlišení Na obrazovce stačí 100 DPI pro kvalitní zobrazení. Na papíru vnímáme body lépe, pro slušný tisk potřebujeme 200 DPI, nejlepší rozpoznatelná kvalita je při 300 DPI. Vyšší rozlišení již nevidíme, nemá tedy smysl ho používat. Tedy: potřebné rozlišení plyne z fyziologie lidského oka.

Příklady: Obrázek 900 bodů široký. Jak velký (na šířku) ho mohu kvalitně zobrazit na monitoru a jak velký ho mohu perfektně vytisknout? Pro monitor potřebuji 100 DPI (musím si pamatovat). 900 bodů mám, potřebuji na každý palec 100, tedy mohu mít obrázek 900/100 =9 palců (22,5 cm) široký. Pro naprosto perfektní tisk potřebuji 300 DPI. 900 bodů mám, tedy při 300 bodů na palec mohu obrázek tisknout 3 palce široký, což je cca 7,5 cm. Pro použitelný tisk stačí 200 DPI, obrázek tedy může být 4,5“ široký, což je 11,25 cm.

Příklady: Obrázek chci perfektně vytisknout 15 cm široký. Kolik bodů musí mít na šířku? 15 cm je 6 palců. Na každý palec potřebuji 300 bodů, obrázek tedy musí mít 6 x 300 = 1800 pixelů na šířku.

Obrázek na monitoru: Snímek z 12 Mpix fotoaparátu má cca 4000 × 3000 bodů. Jak velký se zobrazí na současném full HD LCD panelu v měřítku 1:1? Full HD monitor má 1920 × 1080 bodů, obrázek tedy bude více než dvakrát větší než monitor. 1920 px 4000 px

Obrázek na monitoru: Proč ho ale vidím pěkně celý v okně? Programy (zvláště od firmy Microsoft) automaticky použijí lupu a obrázek ukážou v patřičném zmenšení.

Velikost obrázku Úkol 1: Jděte do složky s fotografiemi a prohlédněte si snímky v náhledu. Úkol 2: Prohlédněte si vybraný snímek. Úkol 3: Zobrazte ho v přiblížení 1:1 (100 %). Úkol 4: Je větší/menší než obrazovka? Proč?

Barevná hloubka: …je počet barev, který může každý bod obrázku mít. Typicky 16,8 miliónů barev, tj. 3 bajty (24 bitů) na pixel. Používá se i 256 barev či stupňů šedi, tj. 1 B (8 bitů) na pixel.

Barevná hloubka: Tento obrázek používá pouze 2 barvy, 1 bit/bod: Jeho barevná paleta

Barevná hloubka: Tento obrázek používá pouze 16 barev, 4 bity/bod: Jeho barevná paleta

Barevná hloubka: Tento obrázek používá pouze 256 barev, 8 bitů/bod: Jeho barevná paleta

Barevná hloubka: Tento obrázek používá 16,8 mil. barev, tedy 24 bitů/bod:

Barevná hloubka: Ukázky obrázků ještě jednou: „Černobílé“ obrázky používají většinou 256 stupňů šedi.

RGB model Monitory, LCD panely, televize a projektory vytváří barvy pomocí tří barev režimu RGB (Red, Green, Blue). Každá složka nabývá hodnot (sytostí) 0–255, tj. 256 odstínů. R G B 256 × 256 × 256 je 16,8 mil. barev. Smícháním plných RGB barev vzniká bílá barva. [255, 255, 255]

Cmyk model Tiskárny vytváří barvy pomocí tří barev režimu CMYK. Cyan Magenta Yellow blacK Každá složka nabývá hodnot (sytostí) 0–100 % . Smícháním 100% barevných složek CMY vzniká černá barva. Ta však je v režimu ještě zvlášť, černý text se netiskne soutiskem barev, ale plnou černou.

Problémy s barevnou věrností Již víme, že monitory vytvářejí barvy v režimu RGB a tiskárny v režimu CMYK, navíc všechna zařízení jsou nedokonalá. Výsledek: obrázek na monitoru se liší od snímané předlohy a výtisk na tiskárně bude mít opět trochu jiné barvy.

Problémy s barevnou věrností – kalibrace Zajistit co nejlepší barevnou věrnost můžeme např. kalibrací monitoru a tiskárny Objednáme si kalibrační výtisk a stáhneme si soubor se stejným obrázkem. Potom se pomocí ovládacích prvků monitoru pokusíme zajistit co nejlepší barevnou shodu. Nakonec soubor vytiskneme na své tiskárně a pomocí jejích nastavení ladíme barevnou věrnost. Úkol: Najděte na webu nějakou kalibrační fotografii.

Pro zajímavost – barevné ICC profily Poznámka: Profesionálové používají přesnou kalibraci pomocí měřicích sond a barevné profily jednotlivých zařízení (tzv. ICC profily). Sonda změří odchylky barev na konkrétním monitoru od vzorových barev a s ní dodaný program vytvoří barevný (ICC) profil monitoru (skeneru, tiskárny). Ten umožňuje programům korigovat zobrazení, aby na tomto zařízení byly barvy věrné.

Formáty souborů: Otevřený obrázek (tedy editovaný v paměti počítače) má určitý počet barevných bodů (pixelů) a podle použité barevné hloubky zabere určitý počet bajtů (spíše megabajtů). Obrázek tukana má 1024 × 768 bodů, celkem tedy 786 432 px, 3B na každý bod, celkem tedy 2,31 MB. Jakou velikost bude mít po uložení na disk počítače?

Formáty souborů: Velikost souboru s obrázkem na disku závisí na použitém formátu souboru. Možností jsou desítky, nejčastěji se používají formáty: BMP : bitová mapa bez komprese. TIFF a GIF: bezeztrátová komprese. JPeG: ztrátová komprese. PNG: moderní formát, ztrátová i bezeztrátová komprese.

Formáty souborů: BMP BMP : bitová mapa bez komprese Velikost souboru s obrázkem na disku je stejná jako jeho velikost v paměti počítače. Nejstarší formát, vznikne uložením množiny bodů do pomyslné „mřížky“ v souboru na disku. Zbytečně velké soubory, dnes není potřeba ho používat.

Komprimované formáty souborů: Velikost souboru s obrázkem na disku je i výrazně menší než jeho velikost v paměti počítače. Komprese: Bezeztrátová (zachová dokonale zdroj) Ztrátová (ale o to účinnější) Znáte nějaký běžně používaný komprimovaný formát pro data (složky se soubory)?

Komprimované formáty souborů: Komprese probíhá při ukládání na disk. Dekomprese při otevírání souboru.

Komprimované formáty souborů Cvičení 1: Najděte na webu odborné texty o psychovizuálním způsobu komprese obrazových dat a vytvořte z nich velmi stručný výtah formou prezentace.

Formáty souborů: TIFF TIFF : bezeztrátově komprimovaný formát Velikost souboru s obrázkem na disku je běžně cca poloviční než jeho velikost v paměti počítače. Stupeň komprese samozřejmě výrazně závisí na konkrétním obrázku. Zkuste odhadnout, který obrázek se lépe podaří zkomprimovat.

Formáty souborů: JPeG JPG : ztrátově komprimovaný formát Velikost souboru s obrázkem na disku je běžně cca desetkrát menší než jeho velikost v paměti počítače. Stupeň komprese/kvality se volí při ukládání obrázku.

Formáty souborů: JPeG Kompresní poměr výrazně ovlivní výslednou kvalitu obrázku. Původní obrázek má 223 KB.

Formáty souborů Cvičení 1: Otevřete si zadaný obrázek a zkuste „ladit“ při uložení stupeň komprese se zapnutým náhledem výsledku. Otázka 2: Jaká komprese je pro tento obrázek ještě použitelná? Otázka 3: Sejměte do schránky (Alt + Prt Scr) okno nějakého nastavení a zkuste ho opět uložit jako JPG obrázek. Otázka 4: Je formát JPG vhodný na sejmutá okna? Proč?

Formáty souborů: GIF GIF : bezeztrátově komprimovaný formát Barevná hloubka obrázku může být max. 256 barev. ALE: Může být průhledný. Může být animovaný. Používá se na tlačítka, čáry apod., obecně grafiku na webu. Používal se na animované bannery.

Formáty souborů: porovnání Různé formáty mají různé vlastnosti a tedy i různé použití. Vysvětlete, proč se liší velikostí jednotlivé typy souborů se stejným obrázkem.

Formáty souborů Cvičení 1: Najděte na webu obrázky počítačových procesorů. Otázka 1: Jaké formáty jsou dominantní? Otázka 2: Jaké počty bodů obrázky většinou mají? Otázka 3: Jak velkou kompresi běžně používají? Otázka 4: Co se dá říci o jejich kvalitě?

Formáty souborů Na nejvyšší kvalitu uložení je vhodný formát: …………. nebo formát …………, za podmínky …………………………………………………………….. Proč?

Komprimované formáty souborů Cvičení 1: Najděte na webu odborné texty o formátu PNG a vytvořte z nich velmi stručný výtah formou prezentace.

Další formáty souborů Cvičení 2: Co je to formát RAW a kde se používá?

Zdroje Roubal, Pavel, Informatika a výpočetní technika pro SŠ díl 2, Computer Press 2005. Wikimedia, otevřená encyklopedie. [online]. [cit. 2010-02-27]. Dostupný z URL: < http://commons.wikimedia.org/wiki/ >. Intel Press Room [online]. [cit. 2010-02-27]. Dostupný z URL: < http://www.intel.com/Pressroom/ >. OpenPhoto Gallery. [online]. [cit. 2010-02-27]. Dostupný z URL: < http://openphoto.net/gallery/index.html >.