Weblog o tvorbě stránek

Weblog nejen o tvorbě stránek a internetu

27.06.2012 Autor: Jiří Chabera Zpět

Formáty obrázků pro webové stránky

Jistě jste se někdy dostali do situace, kdy jste potřebovali na své webové stránky vložit obrázek či foto. Dnes si řekneme ve kterých případech a jaké formáty obrázků jsou pro internetové prezentace grafiku a webdesign nejvhodnější. Začněme tím, jaké formáty si můžeme dovolit použít.
Vzhledem k tomu, že existuje skutečně veliké množství, řádově jsou to desítky grafických formátů, ve skutečnosti jich však můžeme použít pro webové stránky pouze několik.

V základním rozdělení rozlišujeme dva druhy:
1. vektorové formáty
2. rastrové (bitmapové) formáty

Jaký je mezi nimi rozdíl?
Vektory: obrázek je složen z geometrických bodů, přímek, křivek a mnohoúhelníků.
Rastr: obrázek je složen z jednotlivých barevných bodů (pixelů) uspořádaných do pravoúhlé mřížky.

Nás budou dnes zajímat formáty rastrové. Vektory a jejch použití rozebereme příště.
Mezi nejvhodnější rastrové formáty pro použití na www stránkách patří: JPG, PNG a GIF. (přípona souboru).. Velikost těchto formátů se udává v px (pixely) a hustota v DPI (počet bodů na anglický palec).

Nejrozšířenějším formátem je JPG (hovorově:" jepeg"). Digitální fotoaparáty, skenery, kamery(v režimu foto) mají jako výchozí zaznamenávací formát nastaven právě JPG. U formátu jpg lze dále nastavit kompresi a zmenšit tak výrazně datovou velikost obrázku. Tyto vlastnosti předurčují formát jpg jako nejvhodnějšího kandidáta pro použití na webové stránky. S tímto fomátem si dokáží u dynamicky generovaných stránek (PHP,ASP..) poradit vestavěné knihovny webových serverů a za chodu resamplují (převzorkují - mění velikost) zobrazené obrázky.

Dalším formátem je PNG. Je svými vlastnostmi velmi příbuzný jpg. Nelze však nastavit kompresi, zato je možné zprůhlednit vybranou barvu.

Posledním formátem je GIF. Tento formát se moc nehodí na fotografie, umí pouze paletu 256 barev, zato však umí animovanou sekvenci a stejně jako png vybranou půhlednou barvu. Formát gif je však poslední dobou vytlačován a používán čím dál méně.

Kdyz to shrneme:
JPG: vhodné např. pro fotogalerii obrázků, zobrazení fotografií ke článkům.
PNG: Vhodné pro grafický layout (design) stránek, případně drobné navigační prvky jako tlačítka.
GIF: Animované prvky na stránkách, tlačítka (buttony) navigační prvky.

Výhody rastrové (bitmapové) grafiky:
- snadná dostupnost, rozšířený formát.
- snadná manipulace a úpravy..

Nevýhody:
- při vysokém rozlišení může být obrázek objemově-datově příliš veliký.
- obrázek lze pouze zmenšovat. Při zvětšení dochází k rozmazání obrázků, lze tedy zvětšovat pouze v omezené míře. Pozor na tv filmy, kde dokáží rozmazaný záběr zaostřit tak, že přečtou čas na hodinkách.. je to oblbování lidí a hloupá mystifikace od filmových tvůrců.

Existují ještě běžné a známé bitmapové formáty BMP a TIFF.. ty jsou ovšem vhodné pro použití na lokálním počítači.. Jejich datová velikost prakticky neumožňuje použití na webových stránkách.

Autor: Jiří Chabera

nahoru