Nahrajete fotku, kliknete na tlačítko a za pár sekund je váš obrázek o polovinu menší. Vypadá skoro stejně, ale zabírá zlomek místa. Co se vlastně stalo v těch pár sekundách? Pojďme si přiblížit princip online JPEG optimalizátorů.
Kouzlo DCT transformace
Každý JPEG optimalizátor začíná u základního principu, který se jmenuje diskrétní kosinová transformace. Zní to složitě, ale princip je překvapivě jednoduchý. Představte si fotografii rozdělené na malé čtverce 8×8 pixelů. Každý takový čtverec algoritmus analyzuje a převede z barevných hodnot na matematické frekvence.
Lidské oko vnímá hrubé barevné plochy mnohem citlivěji než jemné detaily. Algoritmus tohoto faktu využívá. Vezme si ten čtverec 8×8 pixelů a rozdělí informace na důležité (nízké frekvence) a méně důležité (vysoké frekvence). Vysoké frekvence představují jemné detaily a přechody, které oko těžko zachytí.
Tady přichází ta skutečná komprese. Algoritmus jednoduše vyhodí část těch vysokofrekvenčních dat. Když nastavíte kvalitu na 80 %, zachová 80 % informací a zbytek odstraní. Výsledek vypadá téměř identicky, ale soubor je výrazně menší.
Kvantizační tabulky rozhodují o tom, které informace zůstanou a které zmizí. Každá úroveň kvality používá jinou tabulku. Kvalita 90 % ponechá téměř všechno, kvalita 60 % už osekává původní obrázek agresivněji. Online optimalizátory mají tyto tabulky přednastavené podle osvědčených postupů.
Chytré triky barevného prostoru
JPEG neukládá barvy tak, jak je vidíte. Převádí RGB (červená, zelená, modrá) na YCbCr (jas a dvě barevné složky). Proč? Protože lidské oko reaguje citlivěji na změny jasu než na změny barev. Více o fungování formátu JPEG se dočtete tady.
Princip tzv. chrominance subsampling znamená, že barevné informace se ukládají v nižším rozlišení než informace o jasu. Představte si, že máte fotku 1000×1000 pixelů. Jas se uloží v plném rozlišení, ale barvy třeba jen v 500×500 pixelech. Oko to nepozná, ale ušetříte polovinu dat.
Online optimalizátory často nabízejí různé režimy subsampleru. 4:4:4 znamená žádnou redukci barev, 4:2:2 snižuje rozlišení barev na polovinu horizontálně, 4:2:0 ho snižuje na polovinu v obou směrech. Pro běžné webové fotky funguje 4:2:0 perfektně.
Metadata a jejich skrytá váha
Fotoaparát do každého snímku nahraje spoustu informací. Model fotoaparátu, datum, čas, GPS souřadnice, nastavení ISO, clona, čas závěrky, použitý objektiv. Všechno tohle zabírá místo, často 50-100 KB. Navíc o vás mohou tato metadata občas prozradit více, než byste chtěli.
Pro zobrazení na webu tato data nepotřebujete. Online optimalizátor je prostě smaže. Některé nástroje ponechají základní informace o autorských právech, jiné vymažou úplně všechno. Výsledek je stejný obrázek bez digitální zátěže.
Thumbnaily jsou ještě další skrytý balast. Fotoaparát často vytvoří malou náhledovou verzi a uloží ji přímo do souboru. Tato miniatura zabírá další kilobajty. Optimalizátor ji odstraní, protože prohlížeč si vytvoří vlastní náhled podle potřeby.
Baseline JPEG a jeho klasický přístup
Baseline JPEG se načítá od shora dolů. Představte si stahování fotografie na pomalém internetu devadesátých let. Viděli jste, jak se obrázek postupně vykresluje řádek po řádku shora. Nejdřív hlava, pak ramena, pak zbytek těla. Tohle je baseline režim.
Výhodou je jednoduchost a univerzální kompatibilita. Každý prohlížeč, každé zařízení, každý program baseline JPEG zvládne bez problémů. Nevyžaduje téměř žádnou paměť navíc při dekódování.
Nevýhoda se projeví při pomalém připojení. Návštěvník čeká a postupně se mu odhaluje obrázek po kousku. První tři sekundy vidí jen část fotky, pak další část. Celkový dojem vzniká až úplně na konci načítání.
Velikost souboru zůstává stejná bez ohledu na režim. Baseline vs. progressive nemění velikost komprimovaných dat, mění jen způsob jejich uspořádání.
Progressive JPEG a chytřejší strategie
Progressive JPEG funguje úplně jinak. Místo postupného vykreslování shora dolů zobrazí celý obrázek najednou. Nejdřív ve velmi nízké kvalitě, pak postupně zjemňuje detaily. Vypadá to, jako by se fotka postupně zaostřovala.
Princip spočívá v uložení dat ve více průchodech. První průchod obsahuje hrubý náčrt s nízkým rozlišením. Druhý přidává střední detaily. Třetí a čtvrtý doladí jemnosti. Prohlížeč zobrazí první průchod okamžitě a pak vše postupně vylepšuje.
Uživatelská zkušenost je takto výrazně lepší. Návštěvník během prvních 200 milisekund vidí celý obrázek. Sice rozmazaný, ale vidí celou kompozici, všechny prvky, celkový dojem. Pak během další sekundy sleduje, jak se fotka zjasňuje a zaostřuje.
Psychologický efekt hraje velkou roli. Když vidíte rozmazanou fotku, víte, že se načítá. Když vidíte jen půlku fotky, vypadá to, jako by web zamrznul. Progressive JPEG dává pocit rychlejšího načítání, i když reálná rychlost je stejná.
Starší zařízení s progressive JPEG občas zápasí. Vyžaduje víc paměti při dekódování, protože musí držet informace ze všech průchodů najednou. Na moderních telefonech a počítačích to však není překážkou.
Optimalizační algoritmy v akci
Takzvané Huffmanovo kódování zkomprimuje data ještě víc. Funguje podobně jako ZIP. Často se opakující hodnoty zakóduje kratšími kódy, vzácné hodnoty delšími. Automaticky najde nejefektivnější reprezentaci.
Online nástroje často aplikují několik průchodů komprese. První průchod provede základní kompresi podle nastavené kvality. Druhý optimalizuje Huffmanovy tabulky. Třetí odstraní zbytečná metadata. Každý krok přidá pár procent úspory.
Některé pokročilé optimalizátory experimentují s různými nastaveními a vyberou nejlepší. Zkusí baseline i progressive, porovnají velikost a vyberou menší. Testují různé úrovně chrominance subsampleru a najdou co nejvíce vyvážené řešení.
Když teorie potkává praxi
Technický žargon vám možná zní složitě, ale výsledek je v praxi velice jednoduchý. Nahrajete fotku, nastavíte kvalitu, stáhnete optimalizovaný soubor. Algoritmy za vás udělají všechnu těžkou práci. Nemusíte rozumět DCT transformaci ani chrominanci subsampleru. Stačí vědět, že to funguje a proč to funguje. A až příště kliknete na tlačítko “Optimalizovat”, budete vědět, že se uvnitř odehrává malé matematické divadlo, které vašemu webu přidá na rychlosti.
