Co je obrázkové SEO? 8 tipů pro váš e-shop (2026)

Ve světě rychlých nákupů je blesková odezva e-shopu naprostý základ. Dobře připravená produktová fotografie dokáže výrazně zkrátit dobu načítání a přímo ovlivnit vaši míru konverze.

Kvalita fotek vaše zboží prodává. Pro vynikající uživatelský zážitek a viditelnost obchodu je ale úplně stejně důležité i obrázkové SEO. Pokud se naučíte vizuály správně technicky upravovat, přinese vám to hmatatelné výsledky od usnadněného budování značky až po větší návštěvnost od lidí, kteří vyhledávají přes Obrázky Google.

Co je obrázkové SEO?

Obrázkové SEO znamená technickou přípravu vašich vizuálů tak, aby vypadaly bezchybně na počítači i mobilu a zároveň nezpomalovaly váš web. Zahrnuje to cílenou úpravu formátu, rozměrů a rozlišení podle použitého zařízení při zachování naprosto čisté kvality.

Hrají v tom roli tři hlavní prvky:

1. Formát souboru obrázku
2. Rozměry obrázku (výška a šířka)
3. Rozlišení obrazovky

Proč řešit obrázkové SEO?

Vizuální obsah je pro kvalitní online nákupní zážitek naprosto zásadní. Zákazníci si vaše produkty zkrátka nekoupí, pokud si je nemohou podrobně prohlédnout. Data z HTTP Archive ale ukazují, že neupravené soubory tvoří v průměru necelých 38 % celkové velikosti mobilní webové stránky.

Poctivé obrázkové SEO tak radikálně snižuje datovou náročnost stránky a patří k pevným základům moderního designu webových stránek. Přináší mimo jiné tyto konkrétní výhody:

Vyváženost mezi rychlostí a kvalitou

Správné obrázkové SEO pro počítače i mobily pomáhá najít ideální průsečík mezi rychlostí načítání a špičkovou kvalitou zobrazení. V e-commerce musíte ukazovat atraktivní fotky. Zákazníkům to zjednodušuje procházení nabídky a prokazatelně zlepšuje jejich celkový dojem z nákupu.

Google už v minulosti potvrdil, že rychlost webu je jedním z hlavních signálů, které jeho algoritmus používá při hodnocení stránek. Pomalý web znamená, že vyhledávače v rámci svého rozpočtu na procházení zkontrolují méně podstránek. To může výrazně negativně ovlivnit indexaci celého e-shopu.

Lepší výkon ve vyhledávání

Díky obrázkovému SEO čtenáři i vyhledávače mnohem lépe pochopí strukturu vašeho webu. Zároveň tím zvyšujete šanci, že se váš obsah objeví vysoko ve výsledcích. Aktuální data ukazují, že obrázky se zobrazují u 36,7 % vyhledávacích dotazů na Googlu.

Špičkové obrázkové SEO tak může vašim fotkám pomoci získat přední pozice ve vyhledávání obrázků na Googlu. Přivedete díky tomu více relevantní návštěvnosti a velmi přirozeně posílíte sílu své značky.

Jak nastavit obrázkové SEO pro web

1. Používejte stručné a výstižné názvy obrázků

Nahrát obrázky na web a ponechat jim výchozí názvy z fotoaparátu je sice velmi snadné, ale pokud vám záleží na SEO obrázků, je důležité používat relevantní klíčová slova, která pomohou stránce lépe se umísťovat ve vyhledávačích.

Vytváření popisných názvů souborů s klíčovými slovy je pro optimalizaci obrázků zásadní. Vyhledávače neprocházejí jen textem na stránce, ale také názvy souborů obrázků.

Vezměte si například tento obrázek:

Můžete použít obecný název, který obrázku přiřadil fotoaparát (například DCMIMAGE10.jpg). Mnohem lepší ale bude soubor pojmenovat třeba 2012-Ford-Mustang-LX-Red.jpg.

Zamyslete se nad tím, jak vaši zákazníci hledají produkty na vašem webu. Jaké vzorce pojmenování používají? V uvedeném příkladu mohou zájemci o auta hledat například:

• 2012 Red Ford Mustang LX
• Ford Mustang LX Red 2012
• Red Ford Mustang LX 2012

Podívejte se do analytiky svého obchodu a zjistěte, jaká slova lidé reálně používají. Určete nejčastější vzorce hledání a podle nich nastavte názvy samotných souborů. Pokud se nechcete nořit hluboko do dat, držte se při pojmenování alespoň logických frází a buďte naprosto konkrétní.

Podobné případové studie od zavedených portálů, jako je Moz, jasně ukazují, proč je strategické pojmenování souborů tak důležité. Zlepší to vaše on-page e-commerce SEO a je to spolehlivá cesta, jak zvýšit návštěvnost webu díky lepším pozicím ve výsledcích vyhledávání.

2. Pečlivě vyplňujte alt texty pro lepší obrázkové SEO

Atribut alt (alt text) představuje textovou náhradu obrázků v případě, že je prohlížeč nedokáže správně načíst a zobrazit. Je klíčový také z hlediska celkové přístupnosti webu.

Atribut alt má obrovskou hodnotu i pro správné obrázkové SEO. Pokud k vizuálům na e-shopu přidáte vhodné alternativní texty s relevantními klíčovými slovy, pomůžete si získat lepší pozice. Je velmi pravděpodobné, že právě pečlivě vypsané alt texty jsou jedním z nejlepších způsobů, jak zvýšit prodej a dostat vaše produkty do klasického vyhledávání i do Obrázků Google.

Podívejme se na zdrojový kód atributu alt.

Pokud jde o optimalizaci obrázků, absolutní priorita číslo jedna je doplnit atribut alt u každého produktového obrázku na webu.

Tady je několik jednoduchých pravidel pro psaní alt textů:

• Popisujte obrázky přirozeným jazykem, podobně jako při pojmenování souborů.
• Pokud prodáváte produkty s modelovým nebo sériovým číslem, použijte je i v alt textu.
• Nepřeplňujte atributy alt klíčovými slovy (např. alt="ford mustang muscle car buy now cheap best price on sale").
• Nepoužívejte alt texty u čistě dekorativních obrázků. Vyhledávače vás mohou za přehnanou optimalizaci penalizovat.

Čas od času si také udělejte rychlou namátkovou kontrolu. Zobrazte si zdrojový kód stránek a ověřte, že atributy alt stále existují a dávají smysl. Při tempu, jakým se podnikání často vyvíjí, je překvapivě snadné něco přehlédnout.

3. Rozměry obrázků a úhly záběru vybírejte s rozmyslem

Je běžnou praxí prezentovat produkt z více úhlů. Když se vrátíme k příkladu s Mustangem, určitě by nestačil jen jeden záběr, zvlášť pokud se ho snažíte prodat. Dává smysl ukázat například:

• Interiér
• Zadní část vozu (zejména spoiler)
• Disky kol
• Motor (přece jen je to Mustang)

Nejlepší způsob, jak z těchto doplňkových fotografií vytěžit maximum, je správně vyplnit alt texty. To znamená vytvořit pro každý produktový záběr jedinečný atribut:

• 2012-Ford-Mustang-LX-Red-Leather-Interior-Trim.jpg -> s atributem alt: alt="2012 Ford Mustang LX Red Leather Interior Trim"
• 2012-Ford-Mustang-LX-Red-Rear-View-Air-Spoiler.jpg -> s atributem alt: alt="2012 Ford Mustang LX Red Rear View Air Spoiler"

Klíčem je doplnit základní atribut alt o konkrétní popis, aby se lidé, kteří hledají přesně tento detail, dostali právě na váš web.

4. Změňte velikost obrázků

Všechny soubory byste měli od začátku spravovat tak, aby na vašem webu vypadaly skvěle na všech zařízeních, zejména na mobilech a monitorech s vysokým rozlišením.

Displeje s vyšší hustotou pixelů zobrazují podstatně více bodů na stejné fyzické ploše než starší obrazovky. Aby na nich vaše vizuály působily naprosto ostře a ne zrnitě, potřebujete alespoň 2× větší varianty. Pokud máte na webu zástupce o velikosti 200 × 200 pixelů, pro křišťálově ostré zobrazení budete reálně potřebovat originál o velikosti 400 × 400 pixelů. Většina dnešních chytrých telefonů už používá rozlišení 2× nebo dokonce vyšší.

Nejjednodušší cestou k řešení je použít síť pro doručování obsahu (CDN). CDN kompletně převezme složitou práci se změnou velikosti a doručí tu vůbec nejlepší možnou variantu přesně podle typu zařízení daného uživatele. Zároveň bleskově zrychlí načítání, protože data posílá ze serverů, které jsou fyzicky blíže koncovému návštěvníkovi.

Poznámka 💡 Pokud prodáváte na Shopify, vaše Shopify šablona používá naši CDN pro obrázky. Zajímá vás, jak funguje? Nahrajte vlastní obrázek a vyzkoušejte Shopify CDN. Pokud vyvíjíte motivy, podívejte se, jak psát v Liquidu kód pro responzivní obrázky (k dispozici pouze v angličtině).

5. Zvolte správný formát obrázku

Výběr vhodného formátu patří k nejdůležitějším technickým krokům, které musíte nastavit pro bezchybně optimalizované obrázky pro web. Některé soubory nabízejí viditelně vyšší kvalitu než jiné. Určité formáty naopak zabírají zbytečně mnoho datového prostoru, což fatálně ovlivňuje celkovou rychlost načítání.

Na začátku je určitě dobré vědět, že existují dva hlavní typy zobrazení: rastrové a vektorové.

Vektorová grafika je založená na čistě matematických vzorcích. Kdykoli potřebujete prvek, který lze donekonečna zvětšovat nebo zmenšovat bez jediné ztráty kvality, sáhněte přímo po vektorech. Tím absolutně nejběžnějším formátem je dnes SVG (Scalable Vector Graphics). Je perfektní pro firemní loga, navigační ikony a další jednoduchou linkovou grafiku, kde vyžadujete dokonalou ostrost.

Rastrové formáty se oproti tomu skládají z pevných bodů (pixelů). Ty umožňují vytvářet nádherně detailní vizualizace a typicky se používají pro klasické fotografie. Čím více pixelů fotka obsahuje, tím větší a vizuálně bohatší ve výsledku je.

Během let postupně vznikaly stále novější a efektivnější kodeky. Například GIF byl jednou z prvních verzí obrazového kodeku pro weby, ale výsledná kvalita byla z dnešního pohledu velmi slabá, protože jeho komprese technicky zprůměrovala sousední barevné body. Novější generace komprimují data efektivním způsobem, který běžné lidské oko téměř nerozpozná.

To v praxi znamená, že se současnými formáty můžete snadno doručovat nádherné fotky při zlomkové velikosti souboru. Dnes se pro e-shopy nejčastěji používají tyto varianty:

• JPG: Široce používaný formát pro fotografie. Využívá ztrátovou kompresi ke snížení velikosti souboru, ale obětuje část kvality.
• PNG: Oblíbený formát mezi webdesignéry, protože dobře pracuje s průhledným pozadím. Při kompresi se zachovávají všechna původní data, takže se hodí pro grafiku a diagramy na webu.
• WEBP: Moderní formát navržený pro web. Podporuje ztrátovou i bezztrátovou kompresi a oproti JPG a PNG nabízí menší soubory při podobné nebo lepší kvalitě.
• AVIF: Nejnovější obrazový formát, který dokáže obrázky velmi dobře komprimovat s menší ztrátou kvality.

Ne všechny prohlížeče podporují všechny formáty. I tady se image CDN hodí, protože může automaticky vybrat nejlepší formát pro konkrétní prohlížeč a převést váš původní obrázek do tohoto formátu. Pokud CDN s touto funkcí nepoužíváte, budete muset v HTML pracovat se značkou <picture>.

Poznámka 💡 Shopify CDN automaticky rozpozná, které formáty prohlížeč podporuje, a odešle nejlepší dostupnou variantu. Tam, kde je to možné, může obrázky převést například do WebP nebo AVIF a pro starší prohlížeče je poslat jako záložní variantu PNG nebo JPEG.

6. Používejte sitemapu obrázků

Pokud váš web využívá propracované galerie v JavaScriptu, vyskakovací okna nebo jiné moderní prvky pro lepší nákupní zážitek, sitemapa obrázků pomůže Googlu veškerý vizuální obsah mnohem lépe objevit. Weboví roboti zkrátka nedokážou najít to, co není explicitně uvedeno v základním zdrojovém kódu. Pokud tedy chcete crawlerům ukázat cestu ke skrytým fotkám, musíte jejich přesné umístění nadefinovat v sitemapě.

Do souboru robots.txt stačí jednoduše vložit řádek s přesnou cestou k mapě vašeho webu. Zápis vypadá takto:

Sitemap: http://example.com/sitemap_location.xml

Nebo můžete odeslat sitemapu Googlu přes Search Console. Google má řadu doporučení pro publikování obrázků, která mohou vašemu webu pomoci získat lepší pozice ve výsledcích vyhledávání. Pomocí sitemap Google navíc můžete Googlu předat více informací o obrázcích na webu, takže jich může objevit více, než by zvládl sám.

Pokud prodáváte na Shopify, získáte automaticky generovanou sitemapu, která zahrnuje i produktové obrázky. To znamená, že obrázky na produktových stránkách i další důležité obrázky v blogu nebo kolekcích jsou díky sitemapě pro vyhledávače dohledatelné. Zvyšuje to šanci, že se vaše obrázky objeví ve výsledcích vyhledávání a přivedou na web více návštěvníků.

Shopify sitemapu automaticky aktualizuje pokaždé, když přidáte nové stránky nebo produkty, případně odstraníte ty stávající. Nemusíte ji tedy ručně vytvářet ani upravovat.

7. Používejte kvalitní image CDN

Spolehlivá síť pro doručování obsahu (CDN) vám ušetří spoustu starostí. Její výhoda spočívá v tom, že stačí nahrát jeden kvalitní originál a technologie už si s ním sama poradí. Soubor automaticky zmenší, převede do nejlepšího dostupného formátu a uloží do mezipaměti k bleskovému načtení.

U Shopify se fotky datově optimalizují už během samotného nahrávání do administrace. Rozdíl v kvalitě zákazník okem nepozná, ale váš web se načte znatelně rychleji. Vestavěná CDN také sama vyhodnotí, jaké formáty zařízení návštěvníka podporuje. Zvládá i dynamické úpravy, takže můžete grafiku ořezávat bez trvalé ztráty původního souboru.

Obchodníci na Shopify mají přístup k týmu profesionálních služeb, který pomáhá zlepšovat rychlost webu, konverzní poměr i optimalizaci pro vyhledávače.

8. Testujte obrázky

Smyslem obrázkového SEO je v konečném důsledku zlepšit obchodní výsledky. Mluvili jsme o zmenšování souborů i o tom, jak dostat obrázky do indexu vyhledávačů. Ale co testování samotných obrázků, abyste zjistili, co přivádí více zákazníků?

• Testujte počet produktových obrázků na stránce. U některých e-shopů mimo hostované platformy může být problémem rychlost načítání. Možná zjistíte, že menší počet obrázků na stránce zvýší míru prokliku i prodeje. Stejně tak ale může více obrázků zlepšit uživatelský zážitek a přinést vyšší tržby. Bez A/B testování to nezjistíte.
• Testujte, které úhly záběru zákazníci preferují. Pokud nabídnete pohledy, které zákazníci skutečně chtějí vidět, může to posílit jejich důvěru i loajalitu. Dobrou cestou je zeptat se zákazníků, které produktové fotografie pro ně byly nejpřínosnější. Obecně je užitečné si zvyknout oslovovat zákazníky a ptát se jich. Přesto si závěry vždy ověřte testováním.
• Testujte, kolik produktů zobrazovat v kategoriích. Je lepší 10, 20 nebo 100 produktů? Otestujte různé počty položek na stránkách kategorií a zjistěte, co vašim zákazníkům vyhovuje nejvíc.

Nástroje pro optimalizaci obrázků

Když už znáte osvědčené postupy obrázkového SEO, podívejme se na několik nástrojů a pluginů k optimalizaci obrázků, které můžete pro svůj web využít.

Pokud používáte Shopify nebo specializované image CDN, tyto nástroje zpravidla nepotřebujete. Výjimkou je SVGOMG, protože většina image CDN optimalizaci SVG nenabízí.

Squoosh

Squoosh je snadno použitelná webová aplikace pro kompresi obrázků. Stačí obrázek přetáhnout do nástroje a vybrat optimalizovaný formát, například JPEG XL, WEBP, PNG nebo další.

TinyPNG

TinyPNG je další oblíbený nástroj pro optimalizaci obrázků na webu. Využívá chytré techniky ztrátové komprese ke zmenšení velikosti souborů WEBP, JPEG a PNG pro vaše webové stránky.

Můžete s ním zmenšovat obrázky pro aplikace i e-shop, včetně animovaných. Nezaměřuje se jen na kompresi, ale nabízí také API a vývojářské nástroje pro integraci TinyPNG do vlastních softwarových řešení.

API TinyPNG navíc automaticky mění velikost obrázků pro náhledy, odstraňuje nepotřebné části a doplňuje další pozadí. Pokud provozujete web na WordPressu, je k dispozici i jako WordPress plugin.

SVGOMG

SVGOMG je další jednoduchý nástroj pro optimalizaci obrázků. Nabízí několik možností, jak SVG soubory vyčistit a zmenšit. Stačí nahrát SVG nebo vložit jeho zdrojový kód. Pak si můžete pohrát s různými nastaveními a vytvořit vizuálně stejný obrázek, ale s menší datovou velikostí než originál.

Udržte svůj web rychlý a vizuálně atraktivní

Správná práce s fotkami je pro vaše online podnikání absolutně nezbytná. Nejenže tím výrazně zlepšíte prezentaci prodávaných produktů, ale zároveň vytvoříte dokonale plynulý nákupní zážitek a zvýšíte šanci, že vás noví zákazníci najdou v organickém vyhledávání.

Moderní platformy jako Shopify doručují veškeré vizuály návštěvníkům vždy v tom nejvhodnějším formátu a zcela automaticky. Můžete se tak v klidu soustředit na samotný prodej online.