Obrázkové SEO: Jak optimalizovat obrázky v roce 2025

15 min čtení

V souvislosti se SEO se často hovoří o hlavních pilířích, které mají největší vliv na umístění ve vyhledávání – přínosný obsah, kvalitní zpětné odkazy a technicky vyladěný web. Důležitou součástí je však i obrázkové SEO. Obrázky totiž neslouží jen ke zlepšení estetiky stránek, mají i podstatný vliv na uživatelskou zkušenost a hodnocení webu ve vyhledávání.

Obrázkové SEO není jen na ozdobu

Spíše než design a vizuální zpracování řeší obrázkové SEO technické aspekty obrázků a jejich význam v kontextu obsahu stránky. Vyhledávač zajímá, co obrázek zobrazuje, zda uživateli na stránce nějak pomůže a jestli načítání stránky není příliš pomalé.

Díky obrázkům může obsáhlejší stránka “dýchat”, což přispívá k lepší uživatelské zkušenosti. Textový obsah můžete obohatit o ilustrační obrázky, které vizuálně “rozbijí” příliš dlouhý text. Uživatel se díky tomu v textu lépe zorientuje a neunaví se tak rychle během souvislého čtení.

Obrázky s názornými příklady mohou také uživateli upřesnit výklad. Tím mu pomáhají lépe pochopit danou problematiku a případně v něm mohou i prohloubit zájem o to dozvědět se více. Přínosný obsah a srozumitelný výklad je pak stěžejní pro obsahové, resp. YMYL weby.

Kromě toho odladěné obrázkové SEO umožňuje stránkám zobrazit se v tzv. obrázkovém vyhledáváním a obrázkových rich snippetech, které jsou mezi uživateli velice oblíbené. To může být klíčové zejména pro produktové stránky e-shopů.

Je však třeba dbát na vhodný formát a velikost obrázků, aby zbytečně nezatěžovaly stránky. Trpělivost uživatele i vyhledávače se snižuje s každou další vteřinou, s níž se stránka načítá.

Stejně tak není radno zapomínat na to, aby obrázky byly správně popsané. Přestože vyhledávač dokáže identifikovat, že se na stránce nachází obrázek, nedokáže již rozpoznat, co přesně představuje. Robot totiž čte obrázek odlišným způsobem než lidé a tak nevidí, co se na obrázku nachází. Řídí se proto tzv. alt textem obrázku v kombinaci s obsahem, který se nachází v okolí obrázku.

Technické aspekty obrázků

Po technické stránce je u obrázků důležitý zejména formát a velikost. Volba formátu totiž ovlivňuje kvalitu a rychlost načítání. Google podporuje klasické rastrové i vektorové formáty a výběr vhodného formátu obvykle závisí na tom, o jaký typ obrázku se jedná.

Velikost obrázků

Abyste zajistili dostatečně rychlé stránky, je třeba dbát na vhodnou velikost obrázků. Vždy byste měli usilovat o co nejnižší možnou velikost souboru – v ideálním případě pod 100 KB.

Je to však o něco komplexnější – Google totiž neposuzuje velikost samotného obrázku, ale pracuje s celkovou velikostí stránky. Je-li na stránce více obrázků, můžete ušetřit místo pro nějaký větší, důležitější obrázek tím, že o něco více zkomprimujete méně důležité obrázky.1

Přesto je třeba přistupovat k obrázkům individuálně. Velikost konkrétního obrázku totiž může mít dopad na jednotlivé metriky tzv. Core Web Vitals. To se může projevit např. tak, že se text načte výrazně rychleji než obrázek, a po jeho načtení celý obsah “poskočí” dolů (CLS).2

Jinou velikost si žádají velké fotografie nebo detailní infografika, pro ikony nebo náhledy je zase nadměrná velikost zbytečná. Každopádně se doporučuje vyvarovat se velikostem nad 500 KB.

Typ obrázkuIdeální velikost (cca)
Ikony a dekorativní obrázky10-50 KB
Náhledy50-150 KB
Fotografie a infografika200-300 KB

Na druhou stranu je zapotřebí – alespoň v rámci mezí – zachovat takovou kvalitu, díky které bude obrázek stále čitelný a dobře viditelný. To lze zajistit výběrem správného formátu a vhodně nastavenou kompresí.

Rastrové formáty

Rastrové formáty se používají zejména pro klasické obrázky jako jsou fotografie, malby nebo ilustrace. Obrázek je vykreslen prostřednictvím obrázkových bodů (tzv. pixelů) v mřížce, což podmiňuje pevně dané rozlišení obrázku.

S vyšším rozlišením výrazně stoupá velikost souboru a to může představovat zátěž pro výpočetní techniku. Naopak při nižším rozlišení je sice nižší i velikost obrázku, ale stejně tak je nižší i jeho kvalita.

JPEG

JPEG (.jpg) je nejčastěji používaný formát se ztrátovou kompresí. Kvůli ztrátové kompresi dochází k ořezání některých dat obrázku, což se odráží na jeho kvalitě a velikosti. Kvalita obrázku je závislá na míře komprese, kterou lze obvykle nastavit při exportu (např. v Adobe Photoshop).

Tento formát je vhodný zejména pro fotografie, jelikož díky komplexnější škále odstínů u jednotlivých pixelů komprese není tak zřejmá. Umožňuje tak zachovat relativně solidní kvalitu i při poměrně nízké velikosti souboru.

PNG

Rastrový formát s bezeztrátovou kompresí, díky které se data obrázku shodují i po komprimaci. Obrázek si tak zachovává kvalitu, nicméně velikost souboru je o něco vyšší než u ztrátového JPEG.

Formát PNG je vhodný zejména pro ilustrace, případně loga (pokud je potřebujete v rastrovém formátu) nebo jakékoliv obrázky, u nichž je třeba zachovat průhledné pozadí či zřetelné obrysy a linie.

WEBP

Jedná se o poměrně nový formát speciálně navržený od Googlu. Nespornou výhodou tohoto formátu je výrazně nižší velikost souboru i při vyšší kvalitě obrázku. Kromě toho umožňuje zachovat i průhledné pozadí – podobně jako PNG.

WEBP je tak v současnosti ideální volbou pro rastrové obrázky na webu. Díky extrémně nízké velikosti nezatěžuje načítání a přesto nabízí relativně vysokou kvalitu, při které je obrázek stále dobře čitelný.

GIF

GIF je historickým předchůdcem formátu PNG a v současnosti jej najdete zejména v podobě krátkých animací. Pro obrázky se dnes téměř nevyužívá a to zejména kvůli omezené škále barev (max. 256).

Mezi zmiňovanými formáty tak z hlediska kvality výrazně zaostává, nicméně jeho využitelnost spočívá právě v jednoduchých animacích. GIF tak najde uplatnění obzvláště v názorných ukázkách, návodech nebo nápovědách.

Vektorové formáty

Zatímco rastrová grafika je vykreslena pomocí obrázkových bodů s pevným rozlišením, vektorová grafika používá k vykreslení křivky. Díky tomu obrázek nemá pevně definovaný rozměr a obrázek lze zmenšovat či zvětšovat, aniž by došlo k degradaci kvality.

Výhodou je poměrně nízká velikost souboru – u jednodušších motivů jsou nároky na vykreslení zcela minimální. Pokud ale soubor obsahuje mnoho komplexních útvarů, nároky na výpočetní techniku se rapidně zvyšují. Vektorové formáty se tak používají obzvláště pro loga nebo jednodušší ilustrace.

Nejrozšířenějším vektorovým formátem je formát SVG, se kterým se na webech setkáte nejčastěji v podobě log.

Mezi vektorové formáty se také řadí i PDF – v rámci SEO se však tento formát používá jako soubor (resp. dokument) na webu, nikoliv pro grafiku.

FormátTyp grafikyVelikostVyužití
JPEGRastrováStředníFotografie a komplexnější obrázky
PNGRastrováVyššíIlustrace a loga
WEBPRastrováNízkáFotografie, ilustrace, případně loga
GIFRastrováNízkáJednoduché animace
SVGVektorováNízkáLoga a jednoduché ilustrace

Alt text a obrázkové SEO

Alt text, jinak zvaný jako alternativní text obrázku, je text, který popisuje, co se na obrázku nachází. Robotům a uživatelům se čtečkou tak pomáhá pochopit obsah obrázku.

Na stránce jako takové se alt text přímo nezobrazuje, nachází se pouze ve zdrojovém kódu stránky. Příklad zápisu vypadá takto:

<img src="seo-rust-navstevnosti.png" alt="Graf růstu návštěvnosti webu po optimalizaci SEO v roce 2025">

Pro obrázkové SEO je alt text klíčový, protože robot vyhledávače nedokáže rozpoznat, co se na obrázku vyskytuje. Obrázky, které nejsou pouze dekorativní a mají z hlediska obsahu skutečný význam, by tak měly být opatřeny krátkým a výstižným popiskem.

Pozor: Alt text neznamená titulek obrázku. Title obrázku je pouze text, který se uživateli zobrazí např. při najetí myší na obrázek. Samozřejmě můžete zvážit, zda si dát práci s titulky obrázků – nicméně jejich přínos je pouze v rámci uživatelské zkušenosti (která je v tomto případě, řekl bych, zanedbatelná). Title obrázku nemá na SEO žádný prokazatelný vliv – pro SEO je důležitý především alt text.

Většina redakčních systémů (CMS) umožňuje nastavit alt text přímo v nastavení obrázku, který vkládáte v administraci. Kromě redakčních systémů lze alt text případně nastavit i prostřednictvím webových doplňků.

Jak napsat správný alt text

Alt text je základ přístupného webu a tak by měl splňovat určitá kritéria, tak aby byl skutečně užitečný a přínosný. Nejenže tím pomáháte vyhledávačům lépe pochopit kontext, ale pomáháte také uživatelům, kteří si obrázek nemohou zobrazit (např. hendikepovaní uživatelé nebo uživatelé se slabším připojením). To všechno jsou benefity pro vaši stránku.

  • Alt text by se měl vejít do 125 znaků,
  • popisuje přesně to, co je na obrázku (nikoliv to, co si přejete aby to znamenalo),
  • obsahuje relevantní klíčové slovo, které je užito zcela přirozeně,
  • není přecpaný klíčovými slovy (tzv. keyword stuffing)
  • je srozumitelný (tak, aby text dával smysl i po přečtení čtečkou),
  • není příliš obecný (např. “graf” neříká, co ukazuje),
  • neobsahuje zbytečná slova jako “obrázek”, “fotografie”, apod.
  • nepoužívejte alt text u obrázků, které jsou pouze dekorativní.3

Příklady správných a špatných alt textů

Typ obrázkuSprávněŠpatně
Grafalt=”Graf růstu návštěvnosti webu po optimalizaci SEO v roce 2025″alt=”graf, SEO, marketing, růst, návštěvnost”
Produktalt=”Kožená pánská bunda s knoflíky, tmavě hnědá”alt=”bunda”
Infografikaalt=”Infografika s 5 kroky, jak optimalizovat obrázky pro SEO”alt=”infografika, SEO obrázky”

Pokud váháte, jak by alt text u vašeho obrázku měl vypadat, zkuste se zamyslet nad tím, jak byste obrázek popsali někomu, s kým zrovna telefonujete.

Analýza altů obrázků

V případě, že si nejste jisti, zda máte u všech obrázků správně vyplněné alty a titulky, můžete využít některý z profesionálních SEO nástrojů. Já osobně mám největší zkušenost s českým Collabimem. Nástroj vám v rámci technické analýzy URL umožní spustit funkci Získávač slov (Keyword Getter), která vám alty a titly ověří.

Jednotná URL a duplicitní obrázky

V případě, že chcete použít jeden obrázek na vícero stránkách, je vhodné dbát na to, aby každý z nich používal stejnou URL. Jednoduše řečeno – vyhněte se duplicitně nahraným obrázkům a místo toho používejte jeden a ten samý obrázek, který již máte nahraný na webu.

Vyhledávač totiž každou odlišnou URL obrázku považuje za nový soubor. Robot tak musí zpracovávat více dat a tím může docházet ke zpomalení indexace jiných částí webu. Používáte-li na stránkách obrázek se stále stejnou URL adresou, zjednodušujete tak práci vyhledávači a šetříte tzv. crawl efficiency pro obrázky.4

Strukturovaná data a rich snippety obrázků

Strukturovaná data jsou často přehlížená, ale mohou výrazně ovlivnit, jak obsah stránek bude vypadat ve výsledcích vyhledávání. V současnosti jsou navíc strukturovaná data ještě více žádoucí, než tomu bylo v minulosti. A právě to, jak výsledky v SERPu vypadají, má výrazný dopad na míru prokliku (CTR).

Co jsou rich snippety?

Rich snippety jsou rozšířené výsledky ve vyhledávání, které kromě standardního titulku a popisku mohou obsahovat:

  • obrázky (např. u receptů, produktů nebo článků),
  • hodnocení (hvězdičky),
  • cenu, dostupnost,
  • nebo další vizuální prvky.

Nevšední prvky ve výňatcích – jako jsou právě obrázky – výrazně zvyšují šanci, že si uživatel vaší stránky všimne. To pak může znamenat i vyšší míru prokliku.5

Rich snippety a obrázkové SEO

Pouze to, že se na stránce nachází obrázek, pro zobrazení rich snipettu nestačí. Samotný obrázek na stránce může podpořit zobrazení webu v obrázkovém vyhledávání (Google Images), ale nikoliv v rich snippetu. Abychom Googlu správně naznačili, že si přejeme zobrazit obrázek v rich snippetu, je nutné:

  • označit obrázek ve strukturovaných datech (schema.org) jako součást entity,
  • obrázek musí být kvalitní a relevantní,
  • musí mít přímou souvislost s hlavním obsahem stránky.

Jaký typ strukturovaných dat použít?

Pro každý typ obsahu se hodí jiný typ strukturovaných dat. Nejčastěji se strukturovaná data používají pro produkty, recepty nebo specifické články. Kompletní dokumentaci najdete na schema.org.

Typ obsahuTyp strukturovaných dat
ProduktProduct
ReceptRecipe
ČlánekNewsArticle, Article, BlogPosting
ObecnéImageObject

Nasazená strukturovaná data pak případně můžete otestovat přes tyto nástroje:

Strukturovaná data jsou šikovným nástrojem, kterým můžete pomoci Googlu lépe pochopit obsah stránky i její vizuální součásti. Zároveň mohou upoutat pozornost uživatele přímo ve vyhledávání, čímž se zvyšuje šance, že se na stránku skutečně proklikne. Často to může být právě obrázek, který rozhodne, jestli se uživatel proklikne na vaši stránku, nebo na stránku konkurence.

Jak na kvalitní obrázkové SEO?

  • Používejte především vlastní obrázky, případně obrázky z fotobanky nebo vygenerované obrázky (např. přes Midjourney). Zajistěte unikátnost, kterou se odlišíte od konkurence.
  • Dbejte na to, aby obrázky měly řádně vyplněné alty.
  • Nevyplňujte alty u obrázků, které jsou pouze dekorativní.
  • Umístěte obrázky k relevantnímu okolnímu textu.
  • Zvolte vhodný formát (ideálně WEBP pro rastr, SVG pro loga).
  • Velikost obrázků by měla být co nejmenší (max. pár set KB) – zároveň však zachovejte dostatečnou kvalitu obrázku.
  • U duplicitních obrázků používejte jednotnou URL adresu.
  • Využijte strukturovaná data pro obrázkové rich snippety.

Často kladené dotazy (FAQ)

Závěr

Kvalitně zpracované obrázkové SEO přináší návštěvnost, lepší uživatelskou zkušenost, ale i konkurenceschopnost v generativním věku. Pokud již aktivně pracujete na SEO svého webu, zahrňte do obsahu i relevantní obrázky. Nejenže bude obsah více dynamický a srozumitelný, ale taktéž se vám otevřou dveře do obrázkového vyhledávání.

Nevíte, jak na obrázkové SEO?

V případě, že si nejste jisti, jak napsat vhodný alt obrázků nebo byste se potřebovali poradit ohledně něčeho jiného v SEO, jsem vám k dispozici. V rámci konzultace s vámi proberu vaše dotazy a navrhnu vám konkrétní řešení. A pokud si se SEO nevíte rady, třeba se domluvíme i na dlouhodobé spolupráci podle vašich potřeb.


Zdroje

  1. Image SEO Best Practices to Make Your Content More Discoverable – Hubspot. Blog.hubspot.com [online]. Dostupné z:  https://blog.hubspot.com/marketing/image-seo ↩︎
  2. Cumulative Layout Shift (CLS) – Web.dev. Web.dev.com [online]. Dostupné z:  https://web.dev/articles/cls ↩︎
  3. How To Write the Best Alternative Text – Moz. Moz.com. [online]. Dostupné z: https://moz.com/learn/seo/alt-text ↩︎
  4. Google updates image SEO best practices to say use the same image URL for same image across your pages – Search Engine Land. Searchengineland.com [online]. Dostupné z: https://searchengineland.com/google-updates-image-seo-best-practices-to-say-use-the-same-image-url-for-same-image-across-your-pages-455329 ↩︎
  5. Structured data markup that Google Search supports – Google Search Central. Developers.google.com [online]. Dostupné z: https://developers.google.com/search/docs/appearance/structured-data/search-gallery ↩︎