GIF, JPEG 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.

Dnes najdeme nejen na českém internetu spoustu stránek, kde například ikony jsou uloženy ve formátu JPG, nebo naopak některé fotografie jsou uloženy ve formátu GIF. Tento článek si dává za cíl seznámit nejen začínající vývojáře webu se základními informacemi o použití webové grafiky, respektive uvedených grafických formátů.

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 JPEG

Formát JPEG (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ů.

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.

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 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.

Komprese 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.
• 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ě.

Ukázky

Pro lepší představu zde uvádím několik ukázek obrázků, které jsem ukládal a optimalizoval různými způsoby. Také bych rád předvedl, jak to dopadá, když se pro daný grafický objekt zvolí špatný formát.

GIF není vhodný pro fotografie
(formát PNG omezený na 256 barev také)

JPEG, velikost 37KB, komprese 1%, 16 mil. barev	GIF, velikost 19KB, 256 barev

PNG, velikost 18KB, 256 barev

JPEG není vhodný pro tvorbu ikon
(následující obrázky ukazují 10x zvětšený fragment obrázku ikony)

formát GIF/PNG, bílá plocha je neposkvrněná	formát JPEG, v bílé ploše jsou skvrny

Různé komprese JPEG souboru

komprese 1%, velikost 37KB	komprese 30%, velikost 9KB
komprese 60%, velikost 5KB	komprese 80%, velikost 3KB

Ukázka různých barevných hloubek exportovaného GIFu a PNG
(pouze GIFy, PNG vypadají stejně)

256 barev, GIF: 19,1KB; PNG: 18KB	128 barev, GIF: 17,4KB; PNG: 17,4KB
48 barev, GIF: 17,2KB; PNG: 17,1KB	16 barev, GIF: 12KB; PNG: 12,6KB

Shrnutí

Na závěr jsem poznatky o formátech GIF, JPEG a PNG stručně shrnul do přehledné tabulky:

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.