Nahrajete na web krásnou fotku, ale stránka se načítá celou věčnost a návštěvník odchází dřív, než cokoliv uvidí. Problém nebývá v hostingu ani v kódu – obvykle je to nekomprimovaný obrázek o velikosti 8 megabajtů tam, kde by stačilo 200 kilobajtů. Komprese obrázků je tak pro zdraví vašeho webu nutnost.
Co se vlastně při kompresi děje?
Každý digitální obrázek je složen z obrovského množství dat. Fotoaparát nebo telefon ukládá informace o každém jednotlivém pixelu – jeho barvu, jas, kontrast. Výsledný soubor proto bývá velký, i když se jedná o zdánlivě obyčejný záběr.
Komprese funguje tak, že tato data inteligentně zjednodušuje. U ztrátové komprese (typicky JPEG) algoritmus analyzuje obraz a rozhodne, které detaily lidské oko stejně nevnímá, například jemné přechody ve stínu, nepatrné variace barvy na jednobarevném pozadí. Tyto informace pak prostě zahodí.
U bezztrátové komprese (PNG, WebP v bezztrátovém režimu) se naopak hledají opakující se vzory v datech a ukládají se efektivněji, takže obrázek lze kdykoli obnovit v původní podobě bez jediného změněného pixelu.
Prakticky to znamená, že fotografie jdou nejlépe komprimovat ztrátově (ztráta kvality bývá při rozumném nastavení neviditelná), zatímco loga, ikony nebo screenshoty s ostrými hranami a textem si zaslouží bezztrátový přístup.
JPEG, PNG, WebP, AVIF – v čem se liší?
Formát JPEG tu je od roku 1992 a pořád dominuje fotografiím na webu. Je ho všude plno, každý prohlížeč ho zvládne a při správném nastavení kvality (kolem 75–85 %) vypadá fotka skvěle při zlomku původní velikosti.
PNG vznikl jako náhrada za tehdy patentovaný GIF. Podporuje průhlednost a hodí se pro grafiku s ostrými hranami. Na fotografie je ale nešikovný – soubory bývají zbytečně velké.
WebP vyvinul Google s cílem nabídnout menší soubory při stejné nebo lepší vizuální kvalitě. V praxi WebP fotografie bývají o 25–35 % menší než srovnatelné JPEG soubory. Všechny moderní prohlížeče ho dnes bez problémů zobrazí.
AVIF je nejnovější z hlavních formátů. Kompresní výsledky jsou ještě lepší než u WebP, zejména při nižší kvalitě nebo u fotografií s přirozenými texturami. Podpora v prohlížečích je zatím o něco slabší, ale rychle roste.
Více o různých formátech obrázků se dočtete tady.
Pokud spravujete web a chcete jednoduché pravidlo: fotografie převeďte do WebP, loga a grafiku s průhledností nechte v PNG nebo také WebP, a nové projekty stavte s myšlenkou na AVIF jako budoucí standard.
Jak moc velký obrázek na web vlastně potřebujete?
Tady se skrývá jedna z nejčastějších chyb. Nahrajete fotografii v rozlišení 4000 × 3000 pixelů, protože „ať to vypadá hezky“. Jenže web ji zobrazí na šířku 800 pixelů. Zbylé tři čtvrtiny dat se stáhnou a zahodí.
Před kompresí proto obrázek ořízněte nebo zmenšete na skutečné rozměry, v jakých se zobrazí. Teprve pak ho komprimujte. Tímhle dvojitým krokem – nejdřív resize, pak komprese – dosáhnete dramaticky menších souborů, než kdybyste jen hráli s nastavením kvality. Více se optimální velikosti obrázků věnuje například tento článek.
Jako orientační čísla: obrázek na šířku celé stránky (hero banner) by se měl vejít do 150–200 kB, menší produktové foto do 50–80 kB, miniatura klidně do 20 kB.
Nástroje, které fungují
Squoosh od Googlu je zdarma, běží v prohlížeči a nic neinstalujete. Nahrajete obrázek, vyberte formát a posuvníkem nastavte kompresní poměr. Živý náhled ihned ukazuje, jak bude výsledek vypadat. Pro příležitostné použití ideální.
TinyPNG (a jeho sestra TinyJPG) zvládne hromadné zpracování až 20 souborů najednou a je oblíbený u webových vývojářů. Má i placené API, přes které lze kompresi automatizovat.
Pokud pracujete ve Photoshopu, funkce „Exportovat pro web“ nabídne detailní kontrolu nad výsledkem. Lightroom zase při exportu fotek dovolí nastavit kvalitu a rozměry v jednom kroku.
Pro WordPress existuje řada pluginů – Imagify, ShortPixel nebo Smush – které nově nahrané obrázky automaticky komprimují na pozadí. Jednou se nastaví a pak o to nemusíte přemýšlet.
Komprese a rychlost webu
Google sleduje rychlost načítání stránek a promítá ji do hodnocení ve vyhledávání. Konkrétně sleduje metriky Core Web Vitals, mezi nimiž je LCP (Largest Contentful Paint) – čas, za jak dlouho se načte největší viditelný prvek stránky. A tím největším prvkem bývá právě obrázek.
Pomalý web ale neškodí jen ve výsledcích vyhledávání. Studie opakovaně ukazují, že každá sekunda načítání navíc snižuje konverze. Zákazník, který čeká, odchází. A pokud přijde přes mobil se slabším signálem, situaci to ještě zhoršuje.
Správně komprimované obrázky dokáží zkrátit dobu načítání stránek o desítky procent bez jakékoli viditelné změny vizuální kvality. To je přesně ten typ optimalizace, který nevyžaduje nový design ani přepis kódu.
Jedna věc, na kterou se zapomíná
Komprese řeší velikost souboru. Ale stejně důležité je takzvané líné načítání (lazy loading). Obrázky pod viditelnou částí stránky se při lazy loadingu nenačtou hned, ale až ve chvíli, kdy se k nim uživatel přesune. Moderní prohlížeče to zvládají nativně přes atribut loading=“lazy“ v HTML. Tohle nastavení v kombinaci s dobrou kompresí posune výkon webu výrazně dopředu.
Na konci každého projektu zkontrolujte obrázky jako první
Komprese obrázků patří k těm optimalizacím, které nepotřebují tým vývojářů ani velký rozpočet. Stačí správný nástroj, pár minut a disciplína nenahrazovat nahranými soubory rovnou surové fotky z fotoaparátu. Kdo tohle dělá systematicky od začátku, ušetří si pozdější bolení hlavy se šnečím webem a jeho návštěvníci si pravděpodobně ani nevšimnou, že se vůbec něco změnilo. Což je vlastně ten nejlepší výsledek.
