Grafické formáty obrázkov, animácie

Pojem grafický formát súhrne opisuje spôsob, akým sú grafické informácie ukladané a reprezentované v počítači. V súčasnosti sa pri publikovaní na Internete používajú tri hlavné grafické formáty.
JPEG - Joint Photographic Experts Group
GIF - Graphics interchange format
PNG - Portable network graphics


 Každý formát pracuje na inom princípe a je vhodný na iné aplikácie a oblasti nasadenia. Ich spoločnou vlastnosťou však je, že na vstupné informácie (obrázky) vždy aplikujú príslušnú kompresnú metódu, ktorá obrázok spracuje podľa presne určených matematických pravidiel. Výsledkom kompresie je znovu obrázok, ktorý sa na prvý pohľad snaží čo najmenej odlíšiť od svojho originálu, ale je napríklad 10 krát menší a teda sa 10 krát rýchlejšie zobrazí v internetovom prehliadači. Veľmi často tieto kompresné algoritmy využívajú istú "nedokonalosť" ľudského oka. Tá spočíva v nedostatočne vyvinutej citlivosti na farebné odtiene.

JPEG ("džej peg") - tento grafický formát patrí medzi najpoužívanejšie nielen pri publikovaní na Internete ale aj pri ukladaní rôznych grafických informácií v počítačoch.

Hlavné charakteristiky:
Vytvorené súbory majú koncovku *.jpg - súbor, ktorý je uložený vo formáte JPEG ľahko rozpoznáme podľa jeho koncovky, napr. obrazok.jpg, auto.jpg
Stratová kompresia - predstavuje typ kompresie, pri ktorej ak sa vstupná informácia (obrázok) skomprimuje a následne dekomprimuje, výsledok v podobe matematických dát sa dosť výrazne líši od originálu, ale obrázky sú si takmer podobné. Výsledok aj napriek nenávratnej strate o farebnej informácii môže byť použitý na účel, pre ktorý bol komprimovaný, napr. publikovanie na Internete.

                                                                                          Rôzne stupne kompresie
                                                           


Pre prácu s obrázkami stratová kompresia znamená, že ak sa raz obrázok skomprimuje týmto spôsobom, neexistuje možnosť, ako naspäť získať obrázok v pôvodnej kvalite.
Tip:
Pri komprimácií obrázkov alebo fotografií do formátu JPEG si vždy uchovajte originály v čo najvyššej kvalite. Pri neskoršom vytváraní koláži alebo úprave obrázkov tak budete stále pracovať v najvyššej kvalite a komprimovať vždy presne podľa potreby.

Dobré výsledky pri ukladaní fotografií - formát JPEG sa najviac hodí na ukladanie fotografií a obrázkov, kde sa vyskytujú veľké farebné plochy. Pri takýchto vstupoch sa dosahujú najlepšie vizuálne výsledky pri čo najnižšej veľkosti súboru.
Nevhodný pri ukladaní čiarovej grafiky, textu, ikon - pri veľmi členitej grafike a pri snahe zachovať čo najviac detailov formát JPEG ukazuje svoje nevýhody. Najlepšie si tento rozdiel ukážeme na príklade.

                                                                                                   Kompresia formátom GIF
                                                                     

                                                                                                    Kompresia formátom JPEG
                                                                     


Na uvedených príkladoch vidieť výrazne horšiu kvalitu a ostrosť detailov pri použití kompresie JPEG ako pri použití formátu GIF pri zachovaní rovnakej veľkosti súboru. Z toho teda vyplýva, že formát JPEG nie je vhodné používať napríklad na grafické tlačidlá menu, menšie prvky navigácie, rôzne ikonky a grafické ozdobné prvky menších rozmerov.
Bez podpory priehľadnosti - formát JPEG nepodporuje priehľadnosť - vlastnosť, pri ktorej možno určiť, ktorá farba sa vo výslednom obrázku nebude zobrazovať a namiesto nej sa bude zobrazovať farba pozadia obrázku. Táto vlastnosť sa používa napríklad pri umiestňovaní grafického loga na farebný podklad a pod.
Farebná hĺbka 16 miliónov farieb - teda ako už bolo spomenuté, dobré výsledky pri ukladaní jemných farebných detailov.


Na nasledujúcom príklade skúste rozoznať, ktorý obrázok je zobrazený bez komprimácie a ktorý je zkomprimovaný do grafického formátu JPEG.    
                                                                                               Obrazok na rozoznanie    
             
                                                                                              Obrazok na porovnanie                                                                                                              
Na prvý pohľad sú takmer identické, ale jeden z nich má veľkosť 300kB a druhý 36kB. Teda rozdiel vo veľkosti je takmer 10 násobný, ale po vizuálnej stránke sú pre ľudské oko takmer nerozoznateľné.

GIF - grafický formát pre obrázky s maximálne 256 odlíšiteľnými farbami. Bol prvýkrát predstavený v roku 1987 a odvtedy sa stal popri JPEGu najpoužívanejším formátom používaným na Internete.

Hlavné charakteristiky:
Maximálne 256 odlišných farieb - vo formáte GIF je možné uložiť obrázok, ktorý obsahuje maximálne 256 odlišných farieb. Aj keď na prvý pohľad sa to môže zdať ako veľká nevýhoda a obmedzenosť, nie je tomu tak. Na príkladoch je dobre vidieť, že pri špecifických obrázkoch nie je farebná hĺbka veľmi dôležitým parametrom.
                                                                                                        GIF, 256 farieb
                                                                                            

                                                                                                          GIF 16 farieb
                                                                                            

Bezstratová kompresia - typ kompresného algoritmu, ktorý umožňuje komprimované údaje rekonštruovať do ich pôvodnej podoby. Pri tomto type spracovania obrázku sa teda nestrácajú žiadne podstatné informácie a to umožňuje obrázkom, skomprimovaným do formátu GIF zachovať si jemné detaily, prechody a ostré hrany pri malej veľkosti výstupného súboru.
Podpora priehľadnosti - pri ukladaní obrázku do formátu GIF je možné určiť, ktorá farba sa bude správať ako priehľadná a bude teda preberať farbu svojho pozadia.
Podpora animácií - pomocou formátu GIF je možné vytvoriť jeden súbor, ktorý obsahuje viacero obrázkov. Pri ich vytváraní stačí nakresliť jednotlivé obrázky, poukladať ich za sebou v žiadanom poradí a nastaviť čas, ktorý sa jednotlivé obrázky budú zobrazovať. Výsledkom sú zaujímavé animačné efekty:
                                                                                                      Animovaný gif
                                                                                               

                                                                                                       Animovaný gif
                                                                                                

Prekladanie - ak sa povolí táto možnosť pri ukladaní obrázku do formátu GIF, pri jeho zobrazovaní dochádza k efektu postupného zobrazovania. Na začiatku sa obrázok javí ako rozmazaný, málo ostrý, ale postupne sa do prehliadača návštevníka nahrávajú chýbajúce obrazové informácie a obrázok sa stáva čoraz zreteľnejší. To umožňuje návštevníkom s nižšou rýchlosťou pripojenia rozhodnúť sa už pri menej detailnejšom náhľade, či počkajú na celý obrázok alebo sa presunú na inú stránku.


Tip:
Aj formát JPEG ponúka podobnú možnosť, nazýva sa progresívny JPEG. Tak ako u GIF, aj u JPEG treba túto možnosť zvoliť pri komprimácii obrázku v grafickom editore.

Zlé výsledky pri ukladaní fotografií - tento fakt vyplýva hlavne z obmedzenia zobrazenia farebnej škály. 256 farieb je vo väčšine prípadov nepostačujúcich pre uspokojivé výsledky.


PNG - formát so zaujímavou históriu vzniku. Pri vzniku formátu GIF sa pre matematický model kompresie použil algoritmus s názvom LZW. Vývojári ho zakomponovali do celého formátu, ale neskôr, už po masovom rozšírení zistili, že na algoritmus LZW sa viaže patent firmy UNISYS. Tá si začala nárokovať patentové práva, čo podnietilo vznik grafického formátu s podobnými vlastnosťami, ale bez licenčných nárokov.

Hlavné charakteristiky
16 miliónov farieb - veľký posun vpred oproti formátu GIF
Bezstratová kompresia
Vylepšená podpora priehľadnosti - lepšie, prepracovanejšie možnosti pri určovaní priehľadnosti jednotlivých farieb
Bez podpory animácií
Prekladanie


 Formát PNG má veľa spoločného s GIF, hlavný rozdiel spočíva v upustení podpory animácií. To však pre formát PNG ani nie je potrebné, keďže počas jeho postupného vývoja došlo k vypršaniu patentu firmy UNISYS na formát GIF. Obidva formáty sú preto teraz voľne použiteľné.

Pri výbere grafického formátu postupujte vždy rozvážne a dôkladne analyzujte vstupný obrázok. Nepoužívajte obrázky v surovej, nespracovanej podobe a vždy ich spracovaniu venujte dostatočný čas. V niekoľkých bodoch si zhrnieme základné pravidlá pri práci s obrázkami na internete:
Ak obrázok obsahhuje veľké farebné plochy, množstvo farieb a málo tzv. "tvrdých prechodov", použite formát JPEG.
Ak potrebujete zachovať jemné detaily, použité farby sa prijateľne zmestia do počtu 256 (pri PNG do 16 miliónov) a chcete využiť aj priehľadnosť, zvoľte GIF alebo PNG.
Obrázky skomprimujte v grafickom editore na čo najmenšiu možnú veľkosť vzhľadom na akceptovateľnú kvalitu. Je lepšie, ak návštevník uvidí mierne neostrú fotografiu, ako keď po 45 sekundách jej naťahovania v najlepšej kvalite zavrie prehliadač a znechutene odíde na inú stránku.
Sledujte veľkosť obrázkov na jednej zobrazenej stránke. Napríklad pri fotogalériách nezobrazujte 10 fotiek vo veľkom rozlíšení naraz, ale radšej zobrazte jednu alebo dve a dorobte vhodnú navigáciu. Najlepším spôsobom je používať tzv. "náhľady" - zmenšené obrázky v nízkej kvalite s rozpoznateľnými detailmi, ktoré po kliknutí zobrazia celú, kvalitnú fotografiu.
V časoch dial-up pripojenia s rýchlosťami do 54kbit/s sa hovorilo, že dobrá úvodná internetová stránka by nemala obsahovať viac ako 40-70kB dát. Aj keď dnes sú už rýchlosti pripojenia niekoľkokrát vyššie, snažte sa maximálne optimalizovať veľkosti obrázkov. Výsledkom bude rýchlo načítaná úvodná stránka a spokojný návštevník, ktorý nečaká 10 sekúnd na zobrazenie úvodného obrázku.