I když je všeobecně známo, jaký formát souboru zvolit na webové stránce pro daný účel, tak se pořád při užití obrázků opakují stejné chyby:

  • Nadbytečné užití obrázků – grafika se vkládá tam, kde stačí text (např. nadpisy), nebo kde je obrázek zbytečný (formátovací vycpávky apod.).
  • Velké obrázky – obrázek velkého rozměru. Líní autoři místo zmenšení obrázku raději nastaví width a height.
  • Špatná volba formátu – schémata v JPEG, fotografie v GIF. Výsledkem je větší soubor a nižší kvalita obrázku.
  • Neoptimalizované obrázky s velkou barevnou hloubkou nebo nízkým stupněm komprese. Nejsou vyjímkou obrázkové 2-barevné odrážky v TrueColor. Většinu obrázků je nutné před použitím na webu optimalizovat.

V souhrnu dojde k neúměrnému zvětšení velikosti stahovaných dat – stránka se pomalu natahuje. Výsledkem je nespokojený uživatel. Autor by si měl dobře rozmyslet, jestli je vůbec nutné do dokumentu nějaký obrázek vkládat.

Pro ty, kteří si myslí, že planě teoretizuji, posloužím touto zkušeností. Z cache jsem si dnes vyzvedl 10 obrázků (5× GIF, 4× JPEG a 1 PNG, velikost 121 kB). Během chvilky jsem je optimalizoval. A výsledek? Soubory po optimalizaci mají 64 kB při totožné kvalitě. Nemyslete si, že jsem vybral nějaké amatérské weby – stačí si zoptimalizovat aktuální logo Google se sněhuláky.

Základní bitmapové formáty pro web

GIF
Graphics Interchange Format od CompuServe Inc. je patentovaný grafický formát využívající bezztrátovou LZW kompesi. Max. 256 barev (1 – 8bitové) s použitím barevné palety. Podporuje průhlednost a animace (sada jednotlivých obrazů). Vhodný pro obrazy bez šumu (grafy, schémata apod. – větší plochy 1 barvy).
JPEG
[džej-peg] od sdružení Joint Photographic Experts Group využívá ztrátovou kompresi založenou na algoritmu diskrétní kosinové transformace. Je standardizován (ISO). Může zobrazit 24b barvy (True Color, tj. 16 777 216 barev) s definovanou úrovní komprese (tzv. Q faktor). Byl vytvořen pro zobrazení reálného světa (typicky fotografie). Pro odstranění známých problémů (vady zobrazení na hranách) byl vytvořen formát JPEG2000, který ale není výrazně podporován.
PNG
[ping]. Portable Network Graphics je nejmladší z uvedených formátů. Využívá bezztrátovou kompresi. Nepatentovaná náhrada a vylepšení formátu GIF: podpora alfa kanálu (poloprůhlednost), gama korekce (meziplatformní řízení jasu), vylepšení komprese atd. Podporuje až 64b barvy.

Podpora grafických formátů

Moderní prohlížeče (IE6 a mladší) podporují výše zmíněné webové grafické formáty (IE Win má problémy s PNG – alfa kanál). Jak je to ale s dalšími používanými grafickými formáty?

Podpora některých grafických formátů v prohlížečích
Prohlížeč BMP EMF JPEG2000 WMF
Amaya 5.3 × × × ×
IE6 ano ano × ano
Mozilla 1.0 ano × × ×
Firebird 0.6 ano × × ×
Firebird 0.7 ano × × ×
Opera 6 ano × × ×
Phoenix 0.4 ano × × ×

Další grafické formáty prohlížeče nezobrazují (testován EPS, IFF, PCX, RAW, TIFF) – viz testovací stránka. Množství podporovaných formátů zobrazených v IE samozřejmě neznamená výhodu pro IE – formáty nejsou určeny pro web. Je škoda, že současné prohlížeče nepodporují JPEG2000, který v mnoha ohledech vylepšuje starý JPEG.

Souvislosti