Site Logotype

Optimalizace JPEG obrázků a rozdíl mezi JPEG a progresivním JPEG

Fotografie na webu obvykle vypadají stejně, přesto se v jednom detailu liší. Totiž ve způsobu, jakým se v prohlížeči objevují. Někdy se snímek vykresluje odshora dolů po pruzích, jindy se celý obrázek nejdřív ukáže rozmazaný a postupně se doostří. Tento rozdíl je způsoben dvěma typy kódování JPEG souboru, totiž standardním a progresivním. Rozdíl mezi nimi určuje také způsob, jak nastavit optimalizace JPEG obrázků na vlastním webu.

Jak funguje standardní JPEG

Standardní JPEG, označovaný také jako sekvenční nebo baseline, ukládá data obrázku po jednotlivých řádcích shora dolů. Prohlížeč pak zobrazuje snímek přesně v tomto pořadí, takže na pomalejším připojení je vidět, jak se fotka postupně vykresluje odshora, zatímco spodní část zůstává ještě prázdná nebo šedá.

Tento způsob kódování je nejběžnější, protože ho standardně používá naprostá většina fotoaparátů a telefonů. Pro rychlé připojení nepředstavuje žádný problém, rozdíl se projeví hlavně u větších souborů na pomalejší síti.

Standardní JPEG má i výhodu v rychlosti zpracování na straně serveru i prohlížeče. Dekódování probíhá postupně, po jednotlivých řádcích, takže nevyžaduje tolik paměti najednou jako progresivní varianta, kde musí prohlížeč pracovat s celým obrázkem už od první zobrazené vrstvy. O klasickém JPEG formátu i dalších grafických formátech si můžete více přečíst zde.

Jak funguje progresivní JPEG

Postupné načítání progresivního JPEG od rozmazaného náhledu k ostrému obrázku

Progresivní JPEG ukládá data jinak. Místo postupného vykreslování shora dolů uloží obrázek ve vrstvách, od hrubého náčrtu po ostrý detail. Prohlížeč tak nejdřív zobrazí celou fotku v nízké kvalitě a s každou další načtenou vrstvou se obraz zaostřuje, dokud není hotový v plné kvalitě.

Díky tomu návštěvník webu vidí obsah fotografie mnohem dřív, i když ještě není stažená celá. U rozsáhlé galerie produktů nebo fotoreportáže tak čtenář rozpozná, co je na obrázku, ještě předtím, než se dokreslí poslední detaily.

Rozdíl v reálné rychlosti načítání

Zdání rychlejšího načítání u progresivního JPEG neznamená vždy rychlejší stažení celého souboru. Progresivní varianta bývá u stejné kvality o něco větší než standardní JPEG, protože musí uchovávat informace pro všechny vrstvy zvlášť.

Výsledný dojem rychlosti proto záleží na kontextu použití. U velkých fotografií na pomalém připojení progresivní JPEG poskytne vizuální náhled dřív, u malých webových náhledů s rychlým připojením bývá rozdíl mezi oběma typy kódování zanedbatelný.

Co ovlivňuje volbu kódování kromě rychlosti

Kromě rychlosti načítání hraje roli i to, na jakém zařízení fotku návštěvník prohlíží. Starší mobilní telefony s omezenou pamětí mohou zpracování více vrstev progresivního JPEG zvládat hůř než jednoduché sekvenční vykreslování. U moderních prohlížečů a zařízení tento rozdíl prakticky mizí, výkon dnešních telefonů i počítačů zvládne oba typy bez znatelného zpomalení.

Roli hraje i software, ve kterém se fotky na web nahrávají. Některé redakční systémy a nástroje pro úpravu obrázků převádějí soubory na progresivní JPEG automaticky, jiné zachovávají výchozí sekvenční formát, dokud se nastavení ručně nezmění.

Kdy se progresivní JPEG vyplatí a kdy ne

To, zda raději volit standardní či progresivní kódování závisí na typu obsahu a cílovém publiku webu.

  1. Velké fotografie a galerie – progresivní JPEG dá návštěvníkovi rychlejší vizuální náhled, i když se stahování ještě nedokončilo.
  2. Malé ikony a náhledy – rozdíl mezi oběma variantami je u drobných souborů zanedbatelný, standardní JPEG bývá dostačující.
  3. Weby s pomalejším připojením návštěvníků – progresivní kódování zde pomáhá udržet pozornost čtenáře i během pomalého stahování.
  4. E-shopy s produktovými fotkami – kombinace komprese a vhodného typu kódování snižuje celkovou dobu, než se katalog zobrazí celý.

Jak zvolit správný typ kódování bez technických znalostí

Ruční nastavování typu JPEG kódování při exportu fotografií je zbytečně pracné, zvlášť u desítek nebo stovek obrázků na webu. Praktičtější cestou je nechat volbu na nástroji, který snímky zpracuje hromadně a zároveň zmenší jejich velikost.

Pro rychlé zmenšení souboru i výběr vhodného typu kódování dostatečně poslouží online JPEG optimalizátor přímo v prohlížeči, bez nutnosti cokoli instalovat nebo nahrávat fotky na cizí server.

Menší soubor a rychlejší dojem ze stránky

Standardní a progresivní JPEG nemění obsah fotografie, mění jen způsob, jakým se v prohlížeči objevuje. Pro rychlost webu je nakonec důležitější celková velikost souboru než samotný typ kódování. Kombinace obou kroků, správné komprese a vhodně zvoleného kódování, dá vzniknout webovým fotografiím, které se zobrazí rychle a zároveň zůstanou ostré.

Ivanka Pokorná