Jak optimalizovat obrázky pro SEO a rychlost webu
Proč obrázky zpomalují web
Zeptáte se, kolik váží průměrná webová stránka? Podle HTTP Archive kolem 2,3 MB — a z toho skoro 1 MB jsou obrázky. Fotky z fotoaparátu, nekomprimované PNGy, loga ve špatném formátu. Všechno to návštěvník musí stáhnout, než uvidí obsah.
Největší dopad mají obrázky na LCP (Largest Contentful Paint) — metriku, která měří, kdy se načte ten nejviditelnější prvek na stránce. Často je to právě hlavní obrázek. Máte-li na homepage hero sekci s fotkou 4 MB, LCP se vám snadno dostane přes 5 sekund. A Google chce vidět pod 2,5 sekundy.
Z auditů na SEO Radaru vidíme opakující se scénář: e-shop s produktovými fotkami v plném rozlišení, blog s obrázky v JPEG 100% kvalitě, firemní web s JPG logem místo SVG. Každý web se dá zrychlit alespoň o třetinu jen tím, že správně nastavíte optimalizaci obrázků SEO a formáty.
Správný formát — WebP, AVIF, SVG
Tohle je první krok. Formát rozhoduje, kolik dat se přenese. Klasické JPEG a PNG sice fungují všude, ale jsou zastaralé.
WebP formát
WebP vznikl u Googlu a dnes ho podporují všechny moderní prohlížeče. Oproti JPEG a PNG je o 25–35 % menší při stejné kvalitě. Fotka, co v JPEG zabere 200 kB, v WebP klidně 130 kB.
Kdy použít: fotky, ilustrace, cokoliv, co není vektorové.
AVIF
AVIF je ještě novější — až o 50 % menší než JPEG. Problém? Starší Safari ho nepodporuje dobře a kódování je pomalejší. Pro 2026 už je použitelný, ale doporučuju ho nasazovat s WebP fallbackem.
Kdy použít: hero obrázky, kde záleží na každé desetině sekundy LCP.
SVG
Scalable Vector Graphics — vektorový formát pro loga, ikony, jednoduché ilustrace. Není to obrázek v pixelech, ale sada instrukcí, jak to nakreslit. Výhoda: neomezená kvalita bez ohledu na velikost, váží kolem pár kB.
Kdy použít: logo v hlavičce, ikony, grafy.
Co nepoužívat: PNG pro loga s textem (pětkrát větší než SVG), BMP (zastaralé), TIFF (web to ani nezobrazí).
Jak vybrat
- Logo, ikony → SVG
- Fotografie → WebP (s JPEG fallbackem)
- Hero obrázky na landing page → AVIF + WebP fallback
- Screenshoty, ilustrace → WebP nebo PNG (pokud potřebujete průhlednost)
Komprese bez ztráty kvality
Máte správný formát. Teď ho musíte správně zkomprimovat. JPEG kvalita 100 % je zcela zbytečná — rozdíl mezi 100 % a 85 % lidské oko nepozná, ale soubor je dvojnásobný.
Doporučené nastavení:
- JPEG/WebP fotky: kvalita 80–85 %
- PNG grafika: optimalizace přes TinyPNG nebo Squoosh
- SVG: minifikace přes SVGO
Nástroje
Squoosh — webová aplikace od Googlu, kde nastavíte formát, kvalitu a velikost ručně. Vidíte porovnání před/po. Skvělé pro jedno nebo pár fotek.
Sharp — Node.js knihovna pro hromadnou konverzi. Když potřebujete převést 500 produktových fotek do WebP, tohle je cesta.
TinyPNG — online nástroj, který spolehlivě stlačí PNG i JPEG. Zdarma 20 obrázků najednou, API za peníze.
ImageMagick/cwebp — CLI nástroje pro pokročilé. Dají se zapojit do build procesu. Příklad: cwebp -q 85 input.jpg -o output.webp.
Když stavíte e-shop nebo blog, nedělejte to ručně. Nastavte automatickou kompresi při uploadu — WordPress má pluginy jako ShortPixel, Shopify dělá optimalizaci default.
Lazy loading a responsive images
Máte obrázek optimalizovaný. Ale stahovat ho hned při načtení stránky? Ne nutně.
Lazy loading
Odložené načítání — prohlížeč stáhne obrázek až těsně před tím, než se dostane na obrazovku. Ušetříte datový provoz a hlavně zrychlíte LCP, protože prohlížeč nemusí stahovat fotky z patičky.
<img src="obrazek.webp" alt="Popis" loading="lazy">
Jediný atribut loading="lazy" a je to. Funguje v Chrome, Firefox, Safari, Edge. Jediná výjimka: hero obrázek nebo cokoliv „above the fold" (viditelné bez skrolování) by mělo mít loading="eager" nebo žádný atribut — jinak se zpomalí LCP.
Responsive images — srcset a sizes
Mobilní telefon nepotřebuje obrázek 2 000 px široký. Stáhne si ho, ale zobrazí v 400 px — zbytečně spotřebovaná data.
<img
src="obrazek-800.webp"
srcset="obrazek-400.webp 400w,
obrazek-800.webp 800w,
obrazek-1600.webp 1600w"
sizes="(max-width: 600px) 400px,
(max-width: 1200px) 800px,
1600px"
alt="Produktová fotka"
loading="lazy">
Prohlížeč si podle šířky obrazovky vybere správnou verzi. Mobil stáhne 400px, desktop 1600px. Šetříte megabajty.
Picture element
Když chcete pro mobil úplně jiný obrázek (třeba oříznutý):
<picture>
<source media="(max-width: 600px)" srcset="mobil.webp">
<source media="(min-width: 601px)" srcset="desktop.webp">
<img src="desktop.webp" alt="Popis">
</picture>
A nebo kombinaci formátů s fallbackem:
<picture>
<source type="image/avif" srcset="obrazek.avif">
<source type="image/webp" srcset="obrazek.webp">
<img src="obrazek.jpg" alt="Popis">
</picture>
Starší prohlížeč bez podpory AVIF a WebP dostane JPEG. Moderní prohlížeč AVIF.
Alt text — SEO i přístupnost
Google obrázky nevidí. Jediná informace, kterou má, je alt text (alternativní popisek). Bez něj netuší, co obrázek zobrazuje — a nemůže ho zařadit do Google Images. Navíc to dělá web nepřístupný pro lidi, kteří používají čtečky obrazovky.
Jak psát dobrý alt text
Správně:
<img src="cerny-kocour-na-posteli.webp" alt="Černý kocour spící na bílé posteli">
Popisuje, co je na obrázku. Konkrétně. Google to pochopí, uživatel čtečky si to poslechne a ví, co mu uniklo.
Špatně:
<img src="img_1234.webp" alt="Obrázek">
Vůbec nepomáhá. Stejně špatné je alt „fotka" nebo prázdný alt u důležitého obsahu.
Kdy alt vynechat:
Dekorativní obrázky (oddělující čáry, pozadí) by měly mít prázdný alt (alt=""), ne chybějící alt atribut. Říká to čtečce: tohle přeskoč.
<img src="dekorace.svg" alt="">
Časté chyby
- Keyword stuffing — „koupě bot Praha levné boty boty online Praha". Nečitelné a Google to trestá.
- Alt „image" — WordPress to dělá default, pokud nic nevyplníte. Zbytečné.
- Chybějící alt úplně — porušení WCAG, problém pro nevidomé, Google neví, co je na obrázku.
- Alt duplicitní jako okolní text — Pokud obrázek ilustruje odstavec, který už popisuje totéž, alt může být kratší nebo odlišný.
Jak zkontrolovat obrázky na webu
Chrome DevTools
Zmáčkněte F12, záložka Network, reload stránky. Filtr Img. Vidíte všechny obrázky, jejich velikost, čas načítání. Kliknete na obrázek → Headers → vidíte formát a cache nastavení.
Záložka Lighthouse → spustíte audit → sekce Performance vám ukáže, které obrázky jsou moc velké. A sekce Accessibility kontroluje alt texty.
PageSpeed Insights
pagespeed.web.dev — zadáte URL, Google vám řekne:
- Které obrázky mají next-gen formát doporučený (WebP/AVIF)
- Kde chybí šířka/výška (způsobuje CLS posuny)
- Které jsou moc velké a dají se zkomprimovat
SEO Radar
Náš audit kontroluje formát obrázků (jestli používáte moderní WebP/AVIF), lazy loading (jestli se obrázky pod záhybem načítají odloženě) a cache hlavičky (jestli prohlížeč může obrázky ukládat). Výsledek dostanete s konkrétním doporučením, co změnit.
Díváme se taky na LCP a Core Web Vitals — protože obrázky jsou nejčastější příčinou pomalého LCP.
Často kladené otázky
Mám převést všechny obrázky na WebP?
Ano, pokud chcete nejlepší poměr kvalita/velikost. Fallback na JPEG nebo PNG můžete řešit přes <picture> element. Starší prohlížeče (IE 11) WebP neumí, ale těch je v roce 2026 už minimum.
Stačí změnit příponu z .jpg na .webp?
Ne. Musíte obrázek skutečně převést (překódovat). Jen přejmenováním soubor nefunguje. Použijte Squoosh, cwebp, Sharp nebo online konvertor.
Co když mám WordPress?
Plugin ShortPixel nebo Imagify vám automaticky převede nahrané obrázky do WebP a nastaví lazy loading. Platí se za větší objem, ale zdarma máte prvních pár set obrázků.
Lazy loading zpomalí LCP?
Ano, pokud ho použijete na hero obrázek (první viditelný obsah). Ten musí mít loading="eager" nebo žádný atribut. Lazy loading patří jen na obrázky pod záhlavím, které uživatel uvidí až po scrollování.
Je lepší JPG nebo PNG?
JPG pro fotografie — lepší komprese, menší soubory. PNG pro grafiku s průhledností (loga, ikony) nebo screenshoty s ostrými hranami textu. Ale oboje nahraďte WebP, který umí obojí a je menší.
Tip: Vyzkoušejte si bezplatný SEO audit a zjistěte, jak si stojí obrázky na vašem webu — formát, komprese, cache nastavení a dopad na Core Web Vitals.