Obrazové formáty - GIF, JPEG a PNG

Grafické systémy a DTP
Obr azové for máty - GIF, J PEG a PNG - jak a kdy je použít?
Za posledních deset let doðlo k bouølivému vývoji v oblasti tvorby webu. Spousta uživatelù se
nauèila jazyk HTML a kaskádové styly nebo alespoò používat nástroje pro tvorbu
dynamických stránek. Možná se ale nìkteøí zapomnìli na chvíli zastavit a podívat se na
základní použití grafiky na webu.
Základní charakteristika
Na úvod urèitì nezaðkodí výlet do historie. Každý formát nejprve struènì pøedstavím a
popíðu, kdy vznikl a jaké má základní vlastnosti. Také se pokusím o vysvìtlení základních
pojmù s touto problematikou spjatých.
F ormát GIF
GIF (The Graphics Interchange Format) byl vyvinut spoleèností CompuServe v roce 1987
(oznaèován jako GIF87). Spolu s formátem JPEG je dnes nejpoužívanìjðím formátem pro
zobrazování webové grafiky. GIF se používá pro zobrazování takzvané bitmapové (rastrové)
grafiky, která se skládá pøevážnì z jednoduchých èárových objektù a ne pøílið velkého poètu
barev. Zjednoduðenì øeèeno, každý obrázek je urèen množinou svých bodù a každý bod
(pixel) je urèen svou pozicí a barvou.
Formát GIF podporuje osmibitovou grafiku, což znamená, že obrázek mùže mít maximálnì
256 barev (každý z 8 bitù mùže nabývat hodnot 0 nebo 1, pokud uvážíme vðechny možné
kombinace nul a jednièek v osmici bitù, dostaneme celkem 256 možností). Formát GIF
samozøejmì podporuje i menðí barevnou hloubku, napøíklad 64 nebo 32 barev. Možná víte, že
formát GIF umožòuje jednu barvu v obrázku nastavit jako prùsvitnou (transparent). Tuto
vlastnost ale najdete až ve vylepðené verzi formátu GIF, oznaèované jako GIF89a. Kromì
tohoto oznaèení se mùžete setkat jeðtì s interlaced GIF89a . Prokládaný GIF se využívá právì
pøi zobrazování webové grafiky, protože umožòuje postupné zobrazování obrázku už v
prùbìhu stahování (obrázek se zobrazí celý, v horðí kvalitì, a postupnì se zaostøuje).
Formát GIF využívá takzvané bezztrátové komprese, což znamená, že uložíte-li obrázek GIF
znovu jako GIF a tak dál, kvalita obrázku zùstane poøád stejná a žádná data se z obrázku
neztratí. Nejlepðí komprese je dosahováno, pokud obrázek obsahuje hodnì jednobarevných
øádkù. Protože soubor formátu GIF mùže obsahovat nìkolik obrázkù, lze vytváøet také
animované gify. Pøípona grafického souboru ve formátu GIF je .gif a MIME typ je
image/gif.
F ormát J PG
Formát J PEG (The Joint Photographics Experts Group) je o nìco mladðím kolegou formátu
GIF. Jeho poèátky se datují do roku 1990, kdy byl standardizován normou ISO, a roku 1991,
kdy zaèal být hojnì používán. Jak je už z názvu formátu patrné, je urèen pøedevðím pro
zobrazování fotografií a obrázkù, které obsahují znaèné množství barev a jejich odstínù.
1
Grafické systémy a DTP
Formát JPEG proto podporuje ètyøiadvacetibitovou grafiku, obrázek tedy mùže obsahovat až
16 777 216 barev. Formát JPEG ukládá vðechny informace o jednotlivých barvách v
takzvaných RGB složkách, kdy každá barva je vyjádøena jako trojkombinace tøí základních
barev - èervené (Red), zelené (Green) a modré (Blue). Zastoupení každé barvy mùžeme
vyjádøit èíslem 0 až 255, což je 8 bitù, barvy jsou tøi, tedy celkem potøebujeme 24 bitù pro
vyjádøení libovolné ze 16 miliónù možných barev.
Podobnì jako GIF využívá i JPEG kompresi, která je ale ztrátová. Pokud uložíte nìjaký
obrázek v souboru typu JPEG, znovu jej otevøete a zase uložíte, kvalita nového obrázku se
podle zvoleného stupnì komprese sníží, dojde ke ztrátì zobrazovaných dat. Narozdíl od
formátu GIF, formát JPEG nepodporuje transparentní obrázky (prùsvitnost zvolené barvy) ani
animace.
Soubory ve formátu JPEG mívají pøíponu .jpg (nìkdy se mùžeme setkat i s pøíponou
.jpeg) a MIME typ je image/jpeg.
F ormát PNG
Poslední na øadì je formát PNG (The Portable Network Graphics). Tento formát je jediným
oficiálním formátem pro bitmapovou grafiku na internetu. Èasto bývá oznaèován jako
nástupce formátu GIF. Konsorcium W3C vydalo jeho specifikaci (respektive doporuèení recommendation) v øíjnu roku 1996. Ve srovnání s formátem GIF má lepðí podporu barev (až
dvaatøicet bitù), lepðí podporu transparence obrázku a více typù prokládání. Jeðtì donedávna
se obrázky ve formátu PNG v prohlížeèích nezobrazovaly, jeho podpora byla
implementována až od jejich ètvrté generace.
Formát PNG také využívá bezztrátovou kompresi, navíc si lze vybrat z nìkolika typù. Formát
PNG také implementuje øadu metod pro lepðí zobrazování obrázkù, napøíklad automatickou
detekce poðkození, jejich praktické využití vðak závisí na výrobcích konkrétních programù.
Bohužel, animované obrázky ve formátu PNG tvoøit nelze. Jak už asi tuðíte, soubory ve
formátu PNG mají pøíponu .png a MIME typ je image/png.
Kompr ese obr ázkù
U vðech formátù jsem uvedl, že používají vnitøní kompresi obrázku. Proè? Dùvod je prostý,
jde o snížení velikosti souboru. Rychlost naèítání webové stránky je jedním z klíèových
faktorù úspìchu webové prezentace. Ne vždy ale mùžeme na kompresi plnì spoléhat, nìkdy
musíme zmenðení velikosti souboru sami pomoci. Níže uvedu nìkolik osobních rad, jak s
jednotlivými formáty nakládat. Vycházím ze svých zkuðeností, které jsem nabyl bìhem let,
kdy jsem se vìnoval tvorbì webových stránek.
For mát GIF
Pøi tvorbì GIFu používejte co nejménì barev, èím více barev bude GIF mít, tím bude
soubor vìtðí.
Komprese je nejúèinnìjðí, pokud GIF obsahuje co nejvíce spojitých jednobarevných
ploch, èím je obrázek komplikovanìjðí, tím je komprese menðí a velikost souboru tak roste.
2
Grafické systémy a DTP
I když formát GIF podporuje 256 barev, je vhodné využívat barvy takzvané webové
palety (jedná se o 216 vybraných barev, èasto se jim øíká bezpeèné barvy – na vðech
platformách se zobrazují vždy stejnì).
Vìtðina dobrých grafických programù mívá nástroje na generování optimalizovaného
GIFu (GIF optimizer ), vyplatí se experimentovat a zkouðet rùzná nastavení. Vìtðinou hned
vidíte, jak se mìní velikost souboru, a zároveò máte k dispozici náhled, jak by vypadal
soubor po transformaci. Mùžete tak snadno najít zlatou støední cestu, hranici, kdy kvalita
obrazu a zároveò velikost souboru jsou na uspokojivé úrovni.
For mát J PEG
Jak už jsem uvedl výðe, vyhnìte se násobnému ukládání JPEG souboru znovu jako
JPEG, dochází ke ztrátì kvality.
I pro formát JPEG existují v øadì dobrých grafických programù optimizéry, které
umožòují odladit JPEG soubor tak, že kvalita zobrazení nebude ðpatná a zároveò velikost
souboru nebude nijak závratná.
For mát PNG
Pro práci s formátem PNG platí podobné zásady jako pro formát GIF. Komprese je
nejúèinnìjðí, pokud obrázek tvoøí velké jednobarevné plochy (nemusí se jednat o øádky,
záleží na zvoleném typu komprese).
Stejnì jako GIF umožòuje PNG prokládání, ovðem pozor, ve vìtðinì pøípadù znaènì
naroste velikost souboru.
V nìkterých grafických programech lze také najít PNG optimizér.
Použití for mátù
Základní použití vychází z vlastností jednotlivých formátù. Formát GIF i PNG se hodí pro
tvorbu jednoduchých obrázkù, jako jsou ikony, navigaèní prvky na stránce, nebo loga. Formát
GIF rozhodnì není vhodný pro ukládání fotografií. Fotografie zobrazená ve 256 barvách bude
vypadat ponìkud zrnitì a z hlediska barevnosti také dost nereálnì. Na fotografie je vhodný
formát JPEG. Pro fotografie lze použít i formát PNG (s 24 bitovou hloubkou), ale asi bych
zatím zùstal u starého dobrého JPEGu. Formát JPEG nepoužívejte na ikony èi jednoduché
grafické prvky, vypadaly by skvrnitì.
3