Fotka nahraná rovnou z telefonu má klidně pět megabajtů. Na webu se přitom zobrazí v okénku širokém pár set pixelů. Návštěvník tak stahuje mnohonásobně víc dat, než kolik očima uvidí, a přesně tady se rodí většina pomalých webů. Vím to z auditů: když měřím rychlost, skoro vždycky skončím u obrázků.
Optimalizace obrázků znamená pět konkrétních věcí: správný formát (dnes WebP nebo AVIF), rozměry podle toho, jak velký se obrázek skutečně zobrazuje, kompresi, popisný název souboru s alt textem a rozumné načítání (lazy loading). Nic z toho není věda a většinu zvládnete i bez programátora. Projdu to s vámi po krocích, s čísly, která jsem si ověřila, a s poctivou poznámkou, kdy se tím naopak trápit nemusíte.
Proč obrázky rozhodují o rychlosti webu
Google měří rychlost webu metrikami Core Web Vitals a nejdůležitější z nich je LCP (Largest Contentful Paint): čas, za který se vykreslí největší prvek na obrazovce. Dobrá hodnota je do 2,5 sekundy. A čím tím největším prvkem bývá? Podle HTTP Archive (Web Almanac 2024) je to na 73 % mobilních stránek obrázek, na počítačích dokonce na 83 %.
Jinými slovy: o rychlosti vašeho webu z velké části rozhoduje jedna fotka, ta hlavní nahoře na stránce. Když váží dva megabajty, žádný plugin to nezachrání. Když váží sto kilobajtů, máte z krku to nejtěžší.
Druhý důvod je obrázkové vyhledávání. U některých oborů (produkty, interiéry, móda, recepty) lidé hledají očima a z Google Images chodí reálná návštěvnost. A třetí důvod je přístupnost: správně popsané obrázky přečtou i hlasové čtečky, které používají nevidomí.
Jedno ale musím říct hned: obrázky samy o sobě váš web na první stránku nevytáhnou. Je to hygiena a rychlost, žádné kouzlo. Jenže pomalý web dnes prohrává i s dobrým obsahem — a obrázky jsou nejlevnější místo, kde se rychlost dá vyhrát.
Formáty: WebP jako standard, AVIF jako bonus
JPEG a PNG nejsou špatně, jen jsou staré. Novější formáty umí stejný obraz zabalit do výrazně menšího souboru:
- WebP je formát od Googlu a dnes bezpečná volba pro všechno. Podle dokumentace Googlu je při ztrátové kompresi o 25–34 % menší než srovnatelný JPEG a bezztrátově o 26 % menší než PNG. Umí průhlednost i animace. Zobrazí ho zhruba 96 % prohlížečů v provozu; vypadnou jen opravdu staré verze.
- AVIF je novější formát postavený na videokodeku AV1. U fotek bývá ještě menší než WebP a zvládá HDR. Podpora je dnes kolem 93 % — Safari ho umí od verze 16.4 z roku 2023, takže starší iPhony potřebují zálohu.
- SVG je vektor pro loga, ikony a grafy: zůstává ostrý při libovolném zvětšení a váží pár kilobajtů. Kdy ho použít a kdy ne, rozebírám v článku o vektorové grafice.
Pro pořádek: Google ve vyhledávání obrázků indexuje BMP, GIF, JPEG, PNG, WebP, SVG i AVIF. S indexací si tedy hlavu nelamte a formát vybírejte prostě podle velikosti souboru.
V praxi doporučuju: převod do WebP udělejte vždycky, nic tím nezkazíte. AVIF nasaďte přes prvek <picture>, který starším prohlížečům podstrčí zálohu:
<picture>
<source srcset="produkt.avif" type="image/avif">
<source srcset="produkt.webp" type="image/webp">
<img src="produkt.jpg" alt="Popis obrázku" width="800" height="600">
</picture>
Prohlížeč si vezme první formát, kterému rozumí. A atributy width a height tam nejsou omylem: díky nim si prohlížeč dopředu rezervuje místo a stránka při načítání neposkakuje.
Víte jistě, co je na vašem webu špatně? Já to zjistím za vás. Projdu ho ručně, žádný automat — a do 48 hodin máte seznam věcí, které vás v Googlu brzdí, seřazený podle důležitosti. Zdarma.
Rozměry: neposílejte lidem billboard do kapsy
Nejčastější chyba, kterou v auditech potkávám: obrázek má 4000 pixelů na šířku a zobrazuje se ve sloupci širokém 800. Prohlížeč stáhne všechno a teprve pak zmenšuje. Zaplatí to návštěvník, daty i čekáním.
HTML na to má zabudované řešení, atribut srcset: nabídnete obrázek v několika velikostech a prohlížeč si vybere tu, která sedí na displej. Ručně to psát nemusíte — WordPress generuje srcset automaticky už od roku 2015 (verze 4.4) a moderní e-shopové platformy to řeší podobně. Na vás zbývá jediné: nenahrávat originály z foťáku. Před nahráním obrázek zmenšete zhruba na dvojnásobek největší šířky, ve které se bude zobrazovat; rezerva je kvůli displejům s vysokým rozlišením.
Komprese: kvalita 80 stačí
Rozdíl mezi kvalitou 100 a 80 na webu okem prakticky nepoznáte. Soubor je přitom menší o desítky procent. Tři nástroje, které fungují a jejichž existenci jsem si dnes znovu ověřila:
- Squoosh (squoosh.app) — bezplatný nástroj od Googlu, běží přímo v prohlížeči. Posuvníkem srovnáváte před a po, exportuje WebP i AVIF. Na jednotky obrázků ideální.
- TinyPNG (tinypng.com) — klasika na hromadné zmenšování, dnes zvládá kromě PNG a JPEG také WebP a AVIF.
- ShortPixel — plugin pro WordPress, který komprimuje a převádí do WebP automaticky při nahrání. Nastavíte jednou a přestanete na to myslet.
Opatrnější jsem jen u produktových fotek v e-shopu, kde zákazník zkoumá detail materiálu. Tam dávám kvalitu vyšší a šetřím radši na rozměrech. Jak s obrázky naložit na produktových stránkách, popisuju v článku o SEO pro e-shopy.
Název souboru a alt text: dvě minuty práce
IMG_8532.jpg neříká Googlu nic. cervene-damske-lodicky.webp říká všechno. Přejmenujte fotky před nahráním na web: malými písmeny, bez diakritiky, slova oddělená pomlčkami. Google ve své dokumentaci popisné názvy souborů výslovně doporučuje — je to jeden ze signálů, podle kterých poznává, co na obrázku je.
Alt text je textový popisek obrázku v kódu stránky. Čtou ho hlasové čtečky a vyhledávače, a když se obrázek nenačte, zobrazí se místo něj. Pište do něj, co je na obrázku vidět, jednou větou a bez lopotného vršení klíčových slov. Je to větší téma, než kolik se sem vejde — jak alt psát, kdy ho nechat prázdný a proč je primárně pro lidi, najdete v samostatném článku o alt textech. Tenhle průvodce se stará o výkon; ten druhý o popisky.
Lazy loading: zrychlovač, který umí i škodit
Lazy loading znamená, že se obrázek stáhne, až když k němu návštěvník doroluje. Fotky v patičce tak nebrzdí start stránky. Dnes na to stačí atribut loading="lazy" přímo v HTML, rozumí mu všechny běžné prohlížeče a žádný skript navíc nepotřebujete.
Jedna past ale stojí za odstavec, protože ji vídám i na profesionálně stavěných webech: lazy loading na hlavním obrázku nahoře. Ten se má načíst okamžitě. Když mu dáte loading="lazy", prohlížeč ho odloží, LCP se zhorší a výsledek je přesně opačný, než jste chtěli. Platí tedy: lazy jen na obrázky, které nejsou vidět hned po načtení. Hlavnímu obrázku nechte výchozí loading="eager" a přidejte mu fetchpriority="high", ať ho prohlížeč stáhne přednostně.
Jestli si nejste jistí, který obrázek je na vaší stránce ten „největší", ukáže vám ho zdarma PageSpeed Insights — návod na čtení jeho výsledků má samostatný článek.
Co ještě pomáhá, když máte základ hotový
Image CDN. Služba, která obrázky rozkopíruje na servery po celém světě a každému návštěvníkovi je pošle z toho nejbližšího, rovnou ve správném formátu a velikosti. Pro e-shop s tisíci produktů rozumná investice. Menší web ji nepotřebuje; kroky výš tam udělají mnohem víc muziky. Pokud CDN používáte, ověřte si jeho doménu v Search Console, ať vám neutíkají hlášky o chybách procházení.
Obrázková mapa webu (image sitemap). Rozšíření souboru sitemap.xml, kterým Googlu ohlásíte obrázky, které by při procházení nemusel najít. Smysl má u velkých galerií a fotobank; běžnému firemnímu webu nic nepřinese.
Nejste si jistí, jestli to děláte správně? Vstupní SEO audit u mě máte zdarma.
Kdy obrázky řešit nemusíte
Teď ta poctivá část. Máte web o pěti stránkách a deseti fotkách, které jste jednou prohnali kompresí? Hotovo, nekupujte na to další nástroje. A pokud vám PageSpeed ukazuje slušná čísla, nehoňte skóre 100. Návštěvníkovi je skóre jedno; potřebuje stránku, která se načte dřív, než ho přejde chuť.
Obrázky si zaslouží soustavnou péči ve třech situacích: máte e-shop nebo galerii se stovkami souborů, LCP máte v červených číslech, nebo fotky prodávají to, co nabízíte. Ve všech ostatních případech stačí návyk: každý obrázek před nahráním zmenšit, zkomprimovat a pojmenovat.
Časté otázky
Co je optimalizace obrázků?
Úprava obrázků na webu tak, aby vážily co nejméně a vypadaly pořád dobře: správný formát (WebP, AVIF), rozměry podle skutečného zobrazení, komprese, popisný název souboru s alt textem a lazy loading. Výsledkem je rychlejší web a šance na návštěvnost z obrázkového vyhledávání.
Jaký formát obrázků je pro web nejlepší?
Na fotky WebP, případně AVIF se zálohou přes prvek picture. Na loga a ikony SVG. Animované GIFy nahraďte videem nebo animovaným WebP, bývají několikanásobně menší.
Zhorší komprese kvalitu fotek?
Při kvalitě kolem 80 rozdíl na obrazovce nepoznáte a soubor se zmenší o desítky procent. Výjimkou jsou fotky, kde zákazník zkoumá detail — u nich nastavte kvalitu výš a ušetřete spíš na rozměrech.
Pomůže optimalizace obrázků pozicím v Googlu?
Nepřímo. Menší obrázky zrychlí web, rychlost patří mezi hodnoticí signály a k tomu se přidá návštěvnost z obrázkového vyhledávání. Slabý obsah ale rychlé obrázky nezachrání; berte je jako technický základ, na kterém obsah teprve stavíte.
Nejlevnější zrychlení, jaké váš web má
Za ta léta v auditech nenacházím exotické technické závady. Nacházím pětimegové fotky. Je to nejčastější rychlostní nález a zároveň ten s nejlacinější opravou: odpoledne práce s nástroji zdarma, žádný vývojář, žádný nový rozpočet.
Součástí SEO auditu, který dělám zdarma, je rychlost vždycky — dozvíte se, které obrázky váš web zpomalují, o kolik a která oprava vydělá nejvíc. Píšu to lidsky, ať se výsledkem prokoušete bez slovníku, a moje zjištění u vás přistanou nejpozději pozítří.
Zdroje k faktům v článku:
- Doporučení Googlu k obrázkům: popisné názvy, podporované formáty, CDN a Search Console (ověřeno 15. 7. 2026): developers.google.com/search/docs/appearance/google-images
- Úspora WebP oproti JPEG a PNG (ověřeno 15. 7. 2026): developers.google.com/speed/webp
- Podpora WebP a AVIF v prohlížečích (ověřeno 15. 7. 2026): caniuse.com/webp, caniuse.com/avif
- LCP a hranice 2,5 s: web.dev/articles/lcp
- Obrázek jako LCP prvek na 73 % mobilních stránek: Web Almanac 2024, kapitola Performance
- Automatický srcset ve WordPressu od verze 4.4: make.wordpress.org
