Fotografie z telefonu nebo fotoaparátu vypadá skvěle, ale na web ji takovou nahrát nemůžete. “Váží” celé megabajty a načítá se sekund. Google vás za ni trestá nižšími pozicemi ve výsledcích vyhledávačů. Přesně tady nastupuje online JPEG optimalizátor. Nástroj, který z velké fotografie udělá soubor vhodný pro web, aniž by ji vizuálně zničil.

Co JPEG optimalizátor vlastně dělá?

JPEG optimalizátor je nástroj, ať už online, desktopový nebo zapojený přímo do redakčního systému, který zmenší datovou velikost souboru ve formátu JPEG. Výsledný soubor pak váží méně, načítá se rychleji a přitom vypadá na obrazovce prakticky stejně jako originál.

Slovo „prakticky” je tady důležité. JPEG komprese je ze své podstaty ztrátová a to je vlastnost, která ji odlišuje od jiných typů komprese. Při každém uložení se část dat nenávratně odstraní. Inteligentní JPEG optimalizátor ale pracuje s tím, že lidské oko některé změny jednoduše nepostřehne. A právě tato data odstraní jako první.

Jak komprese funguje uvnitř?

Aby bylo jasné, co se s obrázkem při kompresi děje, je potřeba se na chvíli podívat pod pokličku.

JPEG formát byl navržen speciálně pro fotografie s přirozenými přechody barev – krajiny, portréty, produktové snímky. Při ukládání rozdělí obrázek na malé bloky o velikosti 8 × 8 pixelů a každý z nich zpracuje matematickou transformací, která zachytí, jak moc se barvy a jas v daném bloku mění. Výsledná data pak seřadí od nejdůležitějších po nejméně důležité. Podrobněji o JPEG formátu zde.

Úroveň komprese pak určuje, kolik z těchto dat se skutečně uloží. Na vysoké kvalitě – řekněme 90 procent – se zahodí jen zanedbatelné množství informací a výsledek je vizuálně k nerozeznání od originálu. Na nízké kvalitě – třeba 40 procent – se odstraní velká část dat a fotografie začíná vykazovat typické artefakty: rozmazané hrany, kostičkování v plochách, barevné skvrny.

Dobrý JPEG optimalizátor hledá bod, kde je komprese co největší, ale vizuální degradace ještě není viditelná pouhým okem. Tento bod leží pro většinu fotografií někde mezi 70 a 85 procenty kvality – a při správném nastavení přináší zmenšení souboru o 50 až 80 procent oproti originálu.

Ztrátová komprese a proč to nevadí?

Pojem „ztrátová komprese” zní hrozivě. Ve skutečnosti je ale důmyslně navržena tak, aby pracovala s omezeními lidského vnímání.

Lidské oko je mnohem citlivější na změny jasu než na změny barvy. JPEG to využívá – při kompresi redukuje barevnou informaci výrazněji než informaci o jasu, protože mozek tuto změnu prostě nezaznamená. Stejně tak reaguje na ostré přechody jinak než na plynulé plochy. Nebe na fotografii může být komprimováno agresivněji než tvář člověka v popředí, aniž by to bylo vidět.

Problém nastane až tehdy, když se soubor komprimuje opakovaně. Každé další uložení odstraní další část dat – a artefakty se postupně hromadí. Proto je dobrým zvykem pracovat vždy z originálu a výsledný soubor pro web vytvořit jedním krokem, ne postupným přeukládáním.

Pokud vás zajímá technická stránka ztrátové komprese, tak se více dočtete zde.

Kdy je JPEG správná volba a kdy ne?

JPEG není vhodný pro všechny typy obrázků. Funguje výborně pro fotografie, kde jsou přirozené přechody barev a kde drobné ztráty dat vizuálně nevadí. Pro loga, ikony, grafiku s ostrými hranami nebo obrázky s průhledným pozadím je JPEG špatná volba – tam patří PNG.

Specifickým problémem jsou obrázky s textem. Pokud je text součástí fotografie, agresivní JPEG komprese ho rozmaže do nečitelnosti. V takovém případě je lepší použít PNG nebo WebP, které text zachovají ostřejší.

WebP je formát, který v posledních letech přebírá část území, kde dříve vládl JPEG. Při srovnatelné kvalitě váží přibližně o čtvrtinu méně a podporují ho všechny moderní prohlížeče. Online JPEG optimalizátory proto dnes často nabízejí i možnost převést soubor přímo do WebP a pro weby to bývá nejrychlejší cesta ke zlepšení výkonu.

Jak online JPEG optimalizátor použít v praxi?

Online nástroje pro kompresi JPEG fungují bez instalace a bez registrace. Nahrajete soubor, nástroj ho zpracuje a stáhnete výsledek. Celý proces trvá sekundy.

Nejpoužívanější bezplatné nástroje jsou TinyJPG, Squoosh od Google a Compressor.io. Každý z nich pracuje trochu jinak. TinyJPG optimalizuje automaticky a bez nastavení, což je vhodné tehdy, když nechcete nic řešit a potřebujete rychlý výsledek. Squoosh nabízí detailní kontrolu nad úrovní komprese a umožňuje vizuální srovnání originálu a výsledku vedle sebe. Compressor.io nabízí volbu mezi ztrátovou a bezeztrátovou kompresí a zpracuje i jiné formáty než JPEG.

Pro weby na WordPressu existuje ještě pohodlnější cesta: pluginy ShortPixel, Imagify, Smush a další optimalizují obrázky automaticky při každém nahrání. Nemusíte na nic myslet, plugin pracuje na pozadí a výsledky se projeví na rychlosti webu bez jakéhokoliv ručního zásahu.

Co optimalizátor nenahradí?

JPEG optimalizátor vyřeší datovou velikost souboru. Nenahradí ale správné pojmenování souboru a alt text, tedy dva textové prvky, které Google čte a hodnotí při indexaci obrázků.

Soubor pojmenovaný „DSC00391.jpg” Googlu nic neřekne. „kadernictvi-brno-strihat-vlasy.jpg” ano. Stejně tak alt text, což je popis obrázku v kódu stránky, pomáhá vyhledávačům pochopit, co je na fotografii vidět. Technicky optimalizovaný obrázek se správným popisem pak pracuje na dvou frontách najednou: nezpomaluje web a zároveň přináší šanci na viditelnost ve vyhledávání obrázků.

Rychlost webu dělají maličkosti

Optimalizace JPEG souborů je práce, která není vidět. Návštěvník nevnímá, že se stránka načetla za 1,2 sekundy místo 3,8 sekundy, vnímá jen to, že web funguje, nebo nefunguje. Že na něm buď zůstal, nebo zavřel záložku.

Každý neoptimalizovaný obrázek je malá zátěž, která se sčítá s dalšími. A weby, které tuto zátěž ignorují, to pociťují v datech. Ve vyšší míře opuštění, nižší konverzní míře a postupně klesajících pozicích ve vyhledávání. Optimalizátor JPEG tento problém neřeší celý. Řeší ale jeho největší část – a to je dobrý začátek.

Bohuslav Krpata