Grafické formáty

Tato kapitola vás seznámí s principem zobrazování grafiky a nejpoužívanějšími grafickými formáty - GIF, JPEG a PNG i se způsoby komprese obrazových dat.

Barevné režimy

Nedokonalost barvocitlivých buněk v lidském oku (tzv. čípků) umožňuje nahradit viditelné světlo směsí tří základních barev (červené, zelené a modré - RGB). Složením těchto barev (s plnou intenzitou) vznikne bílá. Dlužno dodat, že tato bílá je jiná, než bílá vyzářená ze slunce (měla by správně obsahovat barvy spektra od červené až po fialovou), ale lidské oko tento rozdíl nepozná. Na tomto principu fungují CRT a LCD monitory, a také televizory.

S poněkud odlišným modelem míchání barev pracuje tiskárna. Zde nejde použít RGB režim, protože by nebyla možnost vytvořit černou barvu (černá vzniká nulovým podílem základních barev). Museli bychom tedy tisknout na černé papíry. Je jasné, že něco takového je ekonomicky nemyslitelné, proto vznikl režim CMY (Cyan, Magenta, Yellow = tyrkysová, fuchsiová, žlutá). Používá tří složek které opticky vzniknou smícháním vždy jedné dvojice základních barev. Směsí všech tří složek CMY vzniká černá. Jelikož je barva této černé zkreslená vlivem nečistot v pigmentech barev CMY, tak se často přidává zvlášť ještě kazeta s černou barvou a vzniká tak režim CMYK (K = black).

CMYK režim se samozřejmě při tvorbě webové grafiky nepoužívá, uvedl jsem ho zde, abyste věděli, že to není sprosté slovo až se s ním v nějakém editoru setkáte.

Rozlišení DPI

Rozlišení je další volba, se kterou se setkáte při kreslení grafiky. Zkratka DPI znamená "Dots per inch" neboli česky počet bodů na palec. V konečném důsledku to určuje, jak veliký bude jeden bod obrazu (pixel).

Pro nás je důležité, že monitor zobrazuje grafiku v rozlišení 72dpi - bez ohledu na to, jaké DPI má obrázek definován. Rozdíl pak bude znát až při tisku, kde zvětšování DPI u obrázku se stejným počtem pixelů povede ke zmenšení celkových rozměrů a naopak.

Webovou grafiku je tedy vhodné ukládat v rozlišení 72dpi abychom zamezili změnám rozměrů při tisku stránky.

Komprese dat

Rastrová grafika je tvořena sítí bodů - pixelů. Pokud by byl v souboru popsán každý pixel jednotlivě (barva a pozice), narostla by datová velikost do obrovských rozměrů. A právě na internetu je každý uspořený bit dobrý. Jsou v podstatě dva základní principy komprese obrazových dat. První způsob je neztrátový. To znamená, že soubor neztrácí žádné informace, jen jsou zakódovány tak, aby zabíraly míň místa. Druhý způsob je ztrátový - to znamená, že část informací je vypuštěno, tak aby lidské oko nic nepoznalo. Podrobněji níže.

JPEG - Joint Photographic Experts Group

První z rodiny webových obrazových formátů, který byl vytvořen společností ISO v roce 1990. Dovoluje zobrazit 24bit barevnou hloubku (16 777 216 barev) a 256 odstínů šedé. Umožňuje také uložit obrázek jako Progresivní, který se pak postupně zobrazuje v několika průchodech podle rychlosti načítání.

Jak asi víte, JPEG používá ztrátovou kompresi (částečně i neztrátovou), jejíž intenzita lze nastavit. Protože dokáže zobrazit takové množství barev, je ideální na fotky a barevně pestré obrázky.

Kvůli ztrátovosti komprese (a tím pádem nevratnosti komprimačního procesu) se JPEG nepoužívá jako pracovní soubor. Při každém uložení by se totiž snížila kvalita obrazu. Právě kvůli ztrátovosti se JPEG rovněž nepoužívá na jednoduchou webovou grafiku (málo barev, souvislé barevné plochy). Při ukládání takové grafiky by totiž na souvislých plochách vznikaly tzv. artefakty (shluk pixelů nepřirozené barvy). Stejný efekt sice vzniká i na složitých fotkách, ale zde je není lidské oko schopno zaregistrovat. Na webovou grafiku je tedy vhodnější GIF (viz dále).

Princip komprese JPEG

Zde se pokusím nastínit principy komprese JPEG grafiky - není nezbytně nutné abyste tento odstavec četli, ale pochopení "vnitřností" tohoto procesu vám může usnadnit práci.

Takže prvním krokem optimalizace je převod barevného modelu z RGB do HSB - Hue, Saturation, Brightness (Odstín, Sytost, Jas). Někdy bývá místo Brightness použito Lightness (režim tedy bude HSL). Je to možná lepší v tom, že se pak B neplete s Blue, ale princip je stejný.

Důvod převodu je ten, že tyčinky v lidském oku jsou mnohem citlivější než čípky, proto je oko velmi citlivé na změny jasu (Brightness), ale velice málo na změny barvy (Saturation a Hue). Hlavní podíl komprese tedy bude probíhat na těchto osách, zatímco osa B zůstane prakticky nezměněna:

Následně se tedy zaokrouhlí hodnoty na osách H a S (osa B zůstane nezměněna), což přinese dost podstatnou úsporu dat, aniž by to šlo poznat.

Dalším krokem je rozdělení obrazu na čtverce o hraně 8 pixelů a převod HSB signálu na frekvenční hodnoty pomocí diskrétní kosinové transformace. To má za následek, že se popis 64 pixelů v jednom bloku převede na funkci, a každému z 64 pixelů se přidělí koeficient této funkce.

Tak, a přichází nejvíce ztrátový krok - vydělení koeficientů jednotlivých pixelů koeficientem z tzv. kvantizační matice. Česky řečeno je to jakési zprůměrování koeficientů v rámci každého bloku a tedy zjednodušení funkce. Intenzitu komprese měníme škálováním kvantizační matice - změnou hodnoty kvantizačního koeficientu.

Nakonec ještě přichází poslední krok - neztrátová komprese koeficientů - Huffmanova optimalizace. Funguje na principu přiřazování krátkých slov často se vyskytujícím řetězcům a dlouhých slov těm méně častým (Variable Length Coding).

Právě ono průmerování koeficientů jednotlivých bloků má pak za následek vznik "artefaktů" na rozhraní souvislých barevných ploch. Je tedy dobré používat JPEG skutečně na to na co je určen - fotky a složité barevné obrazce.

Jen dodám, že tento popis je silně zjednodušený a má sloužit jenom k představě, co se zhruba děje "uvnitř".

Ukázka vzniku artefaktů vlivem zprůměrování koeficientů v rámci bloků:

GIF - Graphics Interchange Format

Druhým, velmi hojně využívaným formátem pro web, je GIF, který vytvořila v roce 1987 společnost CompuServe. Jak už jsem naznačil, používá se hlavně pro webovou grafiku, která obsahuje méně barev a tvoří ji většinou souvislé barevné plochy nebo opakující se vzory. GIF používá neztrátovou LZW kompresi (podle jmen tvůrců: Lempel, Ziv a Welsch). "Neztrátová" znamená, že nejsou žádné obrazové informace vypuštěny a nedochází tedy ke zkreslení obrazu.

Jedno omezení GIF přece jenom má - dokáže definovat maximálně 8 bitů barev (256), což v případě webové grafiky většinou bohatě stačí. Pokud obsahuje obrázek víc barev, než 256, nebo potřebujeme sami snížit počet barev (z 60 třeba na 30) kvůli úspoře dat, provede se optimalizace palety - hodnoty barev se zprůměrují a podobné barevné odstíny se nahradí stejnou barvou. Někdy je vhodné zkusit ručně snížit počet barev a sledovat, co se bude dít - mnohdy je optický rozdíl nerozeznatelný a přitom datová úspora značná.

Další specialitou GIFu je průhlednost. Ta zde funguje na principu výběru jedné barvy, která bude zobrazena průhledně. Nelze tedy vytvářet průsvitné barevné přechody nebo vyhlazení okrajů - to dovede až PNG (viz dále).

U JPEGu jsem se zmiňoval o možnost zobrazovat obrázek postupně - podle rychlosti načítání (Progressive). U GIFu existuje něco podobného - je to tzv. Interlaced GIF (=prokládaný), který se začíná zobrazovat i v případě, že ještě není dekódovací slovník úplný.

A nakonec poslední zajímavá vlastnost GIFu je možnost vytvářet animaci. Tato možnost byla přidána ve specifikaci GIF89a a umožňuje v rámci jednoho souboru (se stejnou příponou) zobrazovat posloupnost snímků s definovanou časovou prodlevou. Animovaný GIF umožňuje také ukládat jen rozdíly mezi snímky a tím značně zmenšit velikost souboru oproti případu, kdy by byl ukládán každý snímek zvlášť.

Princip komprese LZW (GIF)

Komprese LZW funguje na principu kódování s použitím slovníku, který je vytvářen během výpočtu - "za chodu". Zjednodušeně algoritmus pracuje zhruba takto:

Program čte obrázek po řádcích po jednotlivých pixelech a na každém zkontroluje jestli je obsažen ve slovníku - pokud ne, přidá ho tam. Dále pokračuje po 2 pixelech - vždy když nějakou dvojici nezná, zapíše ji do slovníku. Dále pokračuje trojicí a opět zapisuje ještě neobsažené trojice. Algoritmus samozřejmě využívá starších záznamů a nové se snaží skládat ze starých. Takto to jde až do posloupnosti o 12 členech, pak se slovník maže a začíná se znovu.

Postupně se tedy do slovníku dostávají nejčastěji se vyskytující posloupnosti a úspora dat se zvyšuje - aniž by se ztrácely jakékoliv informace.

Je tedy na první pohled patrné, že nejlepších kompresních výsledků dosahuje LZW algoritmus u obrázků, které obsahují málo barev a kde se vyskytují velké plochy stejné barvy, nebo kde se opakují podobné vzory.

PNG - Portable Network Graphic

Poslední ze standardních webových formátů obrazu a také nejmladší. Byl vyvinut v roce 1996 konsorciem W3C, jako formát, který slučuje výhody GIFu a JPEGu. Narozdíl od předchozích dvou formátů není zatížen licenčními poplatky.

PNG dovoluje zobrazit barevnou hloubku 24 nebo až 48 bitů na pixel (300 bilionů barev - TrueColor) nebo až 16bitů odstínů šedé (65 536 odstínů). Samostatný 8 nebo 16 bitový alpha kanál, který umožňuje definovat průhlednost a průsvitnost. Přímá podpora gama korekce. Velmi kvalitní algoritmus na opravu poškození během přenosu dat. Progresivní mód s až 7 průchody a rychlejším zobrazením prvního náhledu.

PNG používá velmi efektivní neztrátovou kompresi založenou na algoritmu "deflate", který využívá LZ77 a Huffmanovy komprese (viz dříve), takže dosahuje lepších výsledků, než LZW používaný u GIFu.

Možnost vytvářet PNG animace byla zavržena a pro tyto účely byl vyhrazen nový formát: MNG

Formát PNG je tvořen několika částmi - tzv. chunky [čanky] nebo také česky "shluky". Kromě barevné palety a samotného obrazu jsou zde chunky pro uložení pomocných dat. Proto je PNG využíván některými editory jako nativní (= základní pracovní) formát. To je právě případ editoru Macromedia Fireworks.

Jediné co brání PNG v jeho masivnímu webovému rozšíření je špatná podpora prohlížečů pro jeho zobrazení (zejména dominantního MS Internet Exploreru). Některé prohlížeče nepodporují průhlednost (IE), jiné zase mají problémy s progressive módem. Obecně však platí, že pokud se vzdáte průhlednosti, měla by se PNG grafika zobrazit bezchybně na většině dnešních prohlížečů.

JPEG 2000

Tato nová verze JPEGu je současnou žhavou novinkou. Od svého předchůdce se podstatně liší. Používá jak ztrátovou, tak i neztrátovou kompresi (kompresní poměry až 1:200 respektive 1:2) a to vše s velmi kvalitním optickým výsledkem. Nový JPEG má pracovat ve 2 módech. V základním módu je použito tzv. vlnkové komprese (místo dřívější fraktálové) a druhý, nadstandardní mód je schopen inteligentně komprimovat směs obrazu a textu. Další novinkou je možnost vytvářet animace (podobně jako animovaný GIF). Podpora exportu do JPEG 2000 se však vyskytuje jen v nejnovějších programech (Corel Graphic Suite 11, Adobe Photoshop CS). Tento JPEG má nyní koncovku JP2 nebo JPC. Bohužel podpora tohoto formátu je v současných prohlížečích prakticky nulová - jeho zobrazení se dá zajistit pouze externím Plug-inem (podobně jako Flash).