Obr azové for máty - GIF, J PEG a PNG - jak a kdy je použít?

Transkript

1 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. Formá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. Formát JPG 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

2 Grafické systémy a DTP Formát JPEG proto podporuje ètyøiadvacetibitovou grafiku, obrázek tedy mùže obsahovat až 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. Formá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 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. Formá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

3 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. Formát JPEG 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á. Formá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í formá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