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 až 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
