Optimalizace obrázků a médií: drobnost, která zásadně zrychlí váš web

Rychlost webu je dnes jednou z nejdůležitějších metrik. Ovlivňuje SEO, konverze, použitelnost i to, jak dlouho návštěvník na stránce vydrží. A přesto největším zabijákem výkonu bývá úplně obyčejná věc – přerostlé obrázky a neoptimalizovaná média. Dobrá zpráva? Stačí několik jednoduchých kroků a váš web může být násobně rychlejší.

Proč na optimalizaci médií záleží víc, než si myslíte

Média (zejména obrázky a videa) jsou z hlediska výkonu webu často největším a nejproblematickějším prvkem. A přitom jde o oblast, kterou mnoho webů vůbec neřeší. Výsledek? Stránky, které se načítají pomalu, zbytečně zatěžují mobilní návštěvníky, snižují skóre v Core Web Vitals a přicházejí o návštěvníky i konverze.

Podle analýzy HTTP Archive tvoří obrázky, videa a další mediální obsah v průměru 60–80 % veškerých dat, která se při načtení stránky přenesou. Tento podíl je tak velký, že i drobná úprava má obrovský dopad. Už pouhé zmenšení obrázků o 20–30 % může zrychlit web o stovky milisekund a při větším počtu médií klidně i o sekundy.

A právě tady se optimalizace médií stává jedním z nejefektivnějších zásahů:

• jeden neoptimalizovaný obrázek může mít 4 MB, zatímco jeho optimalizovaná AVIF varianta může mít 50–100 KB,
• jedno video bez komprese může mít 200 MB, po optimalizaci jen 10 MB,
• ikona v PNG má klidně 80 KB, SVG alternativa jen 2 KB.

Moderní obrazové formáty – WebP a AVIF

Když se mluví o optimalizaci obrázků, většina lidí si představí jen kompresi JPEGů. Realita je ale mnohem dál. Dnes existují moderní formáty, které dokážou dramaticky zmenšit velikost souboru, udržet skvělou kvalitu a zrychlit web natolik, že rozdíl poznáte okamžitě. Nejvýznamnějšími z nich jsou WebP a AVIF, a na mnoha webech by se měly stát výchozí volbou, píše web Imagify.

WebP: nový univerzální standard pro většinu webů

WebP vznikl pod křídly Googlu a jeho cílem bylo nabídnout moderní náhradu za JPEG, PNG a GIF v jednom formátu. A to se povedlo.

Výhody WebP:

• běžně o 25–35 % menší velikost než JPEG při stejné vizuální kvalitě
• podporuje jak lossy, tak lossless kompresi
• zvládne transparentnost (stejně jako PNG)
• umí jednoduché animace (jako GIF, ale v mnohem menší velikosti)
• je podporován prakticky všemi moderními prohlížeči, včetně Safari (Safari 16+ má WebP plně implementované)

Typický příklad z praxe: JPEG 300 KB → WebP 180 KB → úspora 40 %

Proto se WebP stal bezpečnou volbou pro každodenní použití. Zejména pro e-shopy, blogy a portfolio weby, kde je množství médií velké a záleží na každém kilobajtu.

AVIF: formát budoucnosti s nejlepší kompresí na trhu

AVIF je novější a technologicky pokročilejší formát vycházející z video kodeku AV1 (používaného např. Netflixem, YouTube a dalšími streamovacími službami). Právě díky tomu dokáže stlačit fotku na extrémně malou velikost, aniž by utrpěla kvalita.

Výhody AVIF:

• typicky o 40–50 % menší velikost než JPEG
• často o 20–30 % menší než WebP
• výborná kvalita při nízkém šumu a vysoké ostrosti
• podpora HDR a širokého barevného gamutu
• výrazně lepší komprese složitých detailů (např. tráva, vlasy, textura)

Typický příklad z praxe: JPEG 450 KB → WebP 280 KB → AVIF 120 KB (To je zmenšení o 73 % oproti JPEG.)

Nevýhodou AVIF je pomalejší komprese (export trvá déle než u WebP), ale pro webové nasazení to prakticky nevadí. Jednou optimalizujete, tisíckrát se načte rychleji.

Podpora v prohlížečích je dnes velmi dobrá (Chrome, Edge, Firefox, Safari 17+). AVIF se rychle stává novým standardem, zejména pro velké webové aplikace a obrázky, kde záleží na každém kilobajtu.

Nástroje pro rychlou optimalizaci obrázků

Optimalizace obrázků nemusí být složitá. Naopak existuje spousta nástrojů, které dokáží obrázky zmenšit během vteřin. Výběr správného řešení závisí na tom, jestli jste běžný uživatel, grafik, vývojář nebo provozujete e-shop s desítkami nových produktů denně. Níže najdete kvalitní nástroje, které zvládnou optimalizaci spolehlivě a rychle.

Online nástroje

• Squoosh.app – open-source komprese WebP/AVIF. Nabízí živý náhled před a po, detailní nastavení komprese, převod mezi desítkami formátů, možnost snížit barevnou hloubku, měnit rozlišení atd.
• TinyPNG/TinyJPG – jednoduchá optimalizace PNG/JPEG. Perfektní pro rychlou kompresi desítek obrázků bez větších zásahů.
• CompressOrDie – extrémně detailní nastavení komprese. Umožňuje experimentovat s různými kodeky, analyzovat výsledný obraz pixel po pixelu a ladit kompresní profil pro různé typy obrázků.

Pro vývojáře (CI/CD)

• sharp (Node.js) – nejpoužívanější nástroj pro server-side obrazové operace. Umožňuje automaticky převádět formáty (WebP, AVIF), měnit rozměry, komprimovat a generovat více verzí obrázků pro responzivní design. Ideální pro e-shopy, blogovací platformy, SaaS (cokoliv dynamického).
• ImageMagick – legendární CLI nástroj pro libovolnou manipulaci s obrázky. Masivní flexibilita a možnost připojit ho do build pipeline.
• Cloudinary/Imgix – automatická optimalizace na CDN vrstvě

Ikony a UI prvky: PNG je minulost, SVG je budoucnost

SVG je dnes pro ikony, loga a UI grafiku jednoznačně nejlepší volbou. Na rozdíl od PNG je vektorový, takže se škáluje do libovolné velikosti bez ztráty kvality. Díky tomu je dokonale ostrý na mobilu, desktopu i 4K displejích. To řeší problém, který PNG neumí – nezávislost na rozlišení a zařízení, uvádí web MDN Web Docs.

Další výhodou je velikost souboru. Jednoduché ikony v SVG mají často jen 1–3 KB, zatímco stejné PNG mohou mít 50–150 KB. U větších UI sad se tak úspory násobí a web se citelně zrychluje.

SVG navíc můžete stylovat pomocí CSS, měnit barvy, velikost či chování při hoveru, nebo přidávat animace. PNG je statický obraz – neumí nic z toho. Pro moderní UI, dark mode a responzivní design je tedy SVG ideální.

Právě proto se SVG stává standardem pro ikony a komponenty UI, loga, ilustrace a jednoduché tvary. PNG stále dává smysl u složitých rastrových obrázků, ale pro grafické prvky webu už je jednoznačně na ústupu.

Optimalizace videí: zásadní pro rychlost i data návštěvníků

Video je jedním z datově nejnáročnějších prvků, které se na webu načítají. I krátká smyčka může mít desítky megabajtů, a pokud ji na stránce vložíte bez komprese, výrazně zpomalí načítání, zvýší datovou zátěž a zhorší skóre Core Web Vitals. Přesto se s neoptimalizovanými videi na webech setkáváme překvapivě často, a dopad na uživatele bývá dramatický, zejména na mobilních sítích.

Podle měření Netflixu je rozdíl mezi neupraveným videem a videem komprimovaným moderními kodeky až desetinásobný.

Například 1080p video může mít v RAW podobě 150–200 MB, zatímco po běžné kompresi H.264 spadne na 15–20 MB a u H.265 nebo AV1 dokonce na 5–12 MB. A to už je rozdíl, který pozná každý návštěvník, a to v rychlosti načtení i spotřebovaných datech.

Optimalizace videa ale není jen o kompresi. Je důležité myslet na několik klíčových kroků:

1. Správný kodek a bitrate – kodeky jako H.264, H.265 (HEVC) nebo moderní AV1 dokážou dramaticky snížit velikost videa při zachování vysoké kvality. Správně nastavený bitrate pak určuje, kolik detailů zůstane zachováno a kolik se zahodí.
2. Rozlišení nepřehánět – častá chyba: vložit na web video v 4K, přestože se zobrazuje v malém okně. Pro většinu webů je 1080p naprosto dostačující. Pro mini animace nebo UI smyčky dokonce stačí 720p.
3. Streaming místo přímého souboru – namísto nahrání videa přímo na hosting je vhodné využít platformy jako YouTube, Vimeo nebo specializované CDN služby. Ty se postarají o adaptive streaming (HLS/DASH), buffering, přehrávání na různých zařízeních a nižší datovou zátěž.
4. Poster image a lazy loading – video by se nemělo automaticky načítat, pokud není na obrazovce. Díky poster se místo videa načte jen obrázek, dokud uživatel nezačne přehrávat. To dramaticky zrychlí první vykreslení.
5. Krátké smyčky nahradit animovaným WebP nebo Lottie – pro malé dekorativní animace (např. v hero sekci) není video vůbec potřeba. Lepší varianty –animované WebP (násobně menší než GIF), Lottie animace (vektorový JSON formát, extrémně lehký) nebo dokonce jednoduché CSS animace.
6. Nezapomeňte na mobilní uživatele – uživatelé na LTE nebo 3G sítích jsou nejcitlivější na velikost videí. Špatně nastavené video může stát návštěvníka desítky MB dat, způsobit několikasekundové zpoždění, vést ke zvýšenému bounce rate a zhoršit metriky jako LCP nebo FID. Proto je dobré videa optimalizovat, streamovat a odkládat načítání tam, kde to dává smysl.

Praktická ukázka dopadu na výkon

Představte si homepage s 15 obrázky:

1. Varianta A – bez optimalizace, průměrná velikost obrázku: 1,5 MB, celkem: 22,5 MB
   → načtení na mobilním LTE: 5–7 sekund
2. Varianta B – optimalizace + WebP/AVIF, průměrná velikost obrázku: 90 KB, celkem: 1,35 MB
   → načtení na mobilním LTE: 0,7–1,2 sekundy
3. Výsledek – lepší SEO, nižší bounce rate (míra okamžitého opuštění), výrazně vyšší konverze a kvalitnější UX

Optimalizace jako z nejrychlejších způsobů, jak zlepšit výkon webu

Optimalizace obrázků, ikon a videí patří mezi nejefektivnější zásahy, které můžete na webu udělat. Nevyžaduje dramatický redesign ani složité programování – stačí správné formáty (WebP, AVIF, SVG), rozumné rozlišení, vhodné kodeky u videí a chytré nástroje.

A výsledek je ale zásadní. Web se načítá rychleji, má lepší skóre v Core Web Vitals, méně zatěžuje mobilní uživatele a výrazně zvyšuje konverzní poměr.