Optimalizácia obrázkov a médií: AVIF, Google Lens a vizuálne vyhľadávanie

Obrázky nie sú dekoratívny doplnok. Sú samostatným vyhľadávacím kanálom a priamym faktorom výkonu. Spolurozhodujú o tom, či stránka rýchlo dosiahne svoj Largest Contentful Paint, či sa zobrazí vo vyhľadávaní obrázkov Google a v Google Lens a či multimodálne AI systémy vôbec dokážu obsah obrázka zaradiť. Zároveň patrí SEO obrázkov k najviac zanedbávaným oblastiam technického on-page SEO. Tento článok ukazuje, ako spolu fungujú moderné formáty obrázkov, správne alt texty, optimalizácia Core Web Vitals a štruktúrované dáta, s konkrétnym zameraním na mobilné používanie v Rakúsku.

Prečo SEO obrázkov rozhoduje o viditeľnosti a výkone

Ekonomický potenciál vyhľadávania obrázkov a vizuálneho vyhľadávania je merateľný. Globálny trh vizuálneho vyhľadávania bol v roku 2024 vyčíslený na 41,72 mld. USD a do roku 2032 má vzrásť na 151,60 mld. USD pri CAGR 17,50 % (globálne). Hlavným motorom je Google Lens: podľa Google používa Lens každý mesiac viac ako 1,5 miliardy ľudí (medzinárodne), aby vyhľadávali to, čo vidia. Frekvencia používania je ešte vyššia než počet používateľov: Google v októbri 2024 uviedol takmer 20 miliárd vizuálnych vyhľadávaní mesačne, pričom 20 percent všetkých vyhľadávaní cez Lens súvisí s nakupovaním (medzinárodne). Pre B2B dodávateľov produktov, strojov alebo komponentov je to reálny kanál na objavovanie, ktorý začína priamo pri objekte.

Na technickej strane sú obrázky dominantným faktorom výkonu. Podľa Web Almanac 2025 je obrázok LCP elementom na 76 % mobilných a na 85,3 % desktopových stránok (medzinárodne). To znamená, že vo väčšine prípadov čas načítania najväčšieho obrázka priamo určuje, či stránka splní kritérium Core Web Vitals pre LCP. Kto neoptimalizuje obrázky, neoptimalizuje ani svoje Core Web Vitals.

Napriek tomu zostáva nevyužitý obrovský potenciál. Podľa Web Almanac 2024 nemá 45 percent všetkých img elementov alt text, neprázdny alt atribút má iba 55 percent (medzinárodne) a mnohé z existujúcich alt textov obsahujú len názvy súborov alebo bezvýznamné krátke reťazce znakov. Je to nedostatok v SEO a zároveň problém prístupnosti. Každému, kto to robí lepšie, to otvára konkurenčnú výhodu.

Ako to funguje: ako vyhľadávače a AI interpretujú obrázky

Vyhľadávače a multimodálne AI systémy chápu obrázky cez tri úrovne signálov, ktoré pôsobia spoločne.

• Textový kontext: Alt text, popisok obrázka, názov súboru a okolitý text poskytujú slovný opis obsahu obrázka. Táto úroveň je najdôležitejšia pre klasické SEO obrázkov a pre citovateľnosť v odpovediach AI, pretože ju stroje dokážu spoľahlivo prečítať.
• Vizuálna analýza: Google Lens a modely na rozpoznávanie obrazu analyzujú samotný obrázok a rozpoznávajú objekty, text v obrázku a podobnosť s inými obrázkami. Predpokladom sú ostré obrázky s dostatočne vysokým rozlíšením.
• Štruktúrované dáta: Schema markup ako ImageObject alebo Product sémanticky zaraďuje obrázok, prepája ho s informáciami o licencii, autorovi a produkte a umožňuje rozšírené výsledky vo vyhľadávaní obrázkov Google.

Pre Generative Engine Optimization (GEO) je rozhodujúca textová úroveň. Multimodálne AI systémy ako Google Lens, AI Overviews a AI nástroje na generovanie odpovedí kombinujú analýzu obrázka s alt textom a popiskom, aby pochopili kontext a mohli uviesť zdroj. Obrázok bez opisného alt textu a bez popisku neposkytuje AI žiadnu textovú kotvu, podľa ktorej by mohla stránku citovať. Kto sa chce s obrazovým obsahom objaviť v odpovediach AI, musí obrázok a text chápať ako celok.

Alt text má dvojitú funkciu: je textovou alternatívou pre čítačky obrazovky (prístupnosť podľa WCAG) a zároveň signálom pre ranking vo vyhľadávaní obrázkov. Oba ciele vyžadujú to isté: presnú, opisnú formuláciu v kontexte stránky bez keyword stuffingu. Dobrý alt atribút opisuje, čo je na obrázku vidieť, tak, ako by si to vysvetlil človeku po telefóne.

Osvedčené postupy pre optimalizáciu obrázkov a médií

Písať alt texty opisne a v kontexte stránky

Formuluj alt text tak, aby vystihoval obsah obrázka v kontexte stránky. Negatívny príklad: alt="IMG_4087.jpg" alebo alt="produkt-foto-final-2". Takéto alt texty z názvov súborov sú presne ten problém, ktorý dokumentuje Web Almanac, a pre čítačky obrazovky aj pre vyhľadávače sú bezcenné. Pozitívny príklad: alt="Nerezový závitovkový dopravník FS-200 v prevádzke v potravinárskej výrobe". Vyhni sa keyword stuffingu a frázam ako obrázok alebo fotka, pretože čítačky obrazovky rolu img už oznamujú. Čisto dekoratívne obrázky dostanú prázdny alt atribút (alt=""), aby ich čítačky obrazovky preskočili.

Nasadzovať moderné formáty obrázkov cielene

AVIF je technicky vyspelejší kompresný štandard. Podľa často citovaného medzinárodného porovnania dosahuje AVIF pri rovnakej vizuálnej kvalite o 50,3 % menšiu mediánovú veľkosť súboru oproti JPEG, WebP o 31,5 % menšiu (medzinárodne), z čoho pre AVIF oproti WebP vyplýva náskok približne 27 percent. Praktická logika formátov:

• AVIF: Prvá voľba pre fotografie a zložité obrázky, najlepšia kompresia pri rovnakej kvalite. Kódovanie je výpočtovo náročnejšie, preto varianty najlepšie vygeneruj vopred pri builde alebo cez CDN.
• WebP: Solídny všestranný formát s takmer univerzálnou podporou prehliadačov, ideálny ako stredný stupeň fallbacku.
• JPEG/PNG: Univerzálny fallback pre maximálnu kompatibilitu. PNG len pre obrázky s priehľadnosťou alebo ostrými hranami, inak je JPEG menší.
• SVG: Pre logá, ikony a diagramy, pretože sa škáluje bez straty kvality a je väčšinou veľmi malý.

Podiel AVIF na trhu rastie, formát je však stále mladý. Podľa Web Almanac 2024 sa formáty obrázkov na mobile delia takto: JPEG 32,4 %, PNG 28,4 %, GIF 16,8 %, WebP 12 % a AVIF len 1,0 % (medzinárodne). Práve táto medzera je príležitosťou: kapitola konštatuje, že takmer všetky JPEG, PNG a GIF obrázky na webe by z moderného formátu profitovali.

Doručovať AVIF s fallbackom cez picture

AVIF nenasadzuj bez záložnej úrovne. Element <picture> doručí každému prehliadaču najlepší podporovaný formát:

```html
<picture>
<source srcset="produkt.avif" type="image/avif">
<source srcset="produkt.webp" type="image/webp">
<img src="produkt.jpg" alt="Závitovkový dopravník FS-200 vo výrobe"
width="1200" height="800" loading="lazy">
</picture>
```

Prehliadač vyberie prvý formát, ktorý podporuje. Na vytvorenie variantov sa hodia nástroje ako Squoosh (manuálne), knižnica Sharp (programovo v build pipeline) alebo build pluginy a komponenty frameworkov ako next/image, ktoré automatizujú vyjednávanie formátu a responzívne veľkosti.

Responzívne obrázky so srcset a sizes

Dodaj každému zariadeniu vhodné rozlíšenie. Cez srcset s deskriptormi šírky a sizes načíta smartfón menší súbor než desktop. Transformácia obrázkov na CDN vytvára tieto varianty za behu a formát vyjednáva cez hlavičku Accept. Daj pozor na správne hlavičky cache: verziované URL obrázkov dostanú dlhý max-age v hlavičke Cache-Control. MDN na to odporúča Cache-Control: max-age=31536000, immutable (jeden rok). Vracajúci sa návštevníci tak načítajú obrázky z cache.

Prioritizovať LCP obrázok, nikdy ho nenačítavať cez lazy loading

LCP obrázok (zvyčajne hero obrázok v prvej viditeľnej časti stránky) sa musí načítať čo najskôr. Nastav fetchpriority="high" a podľa potreby preload a z tohto obrázka bezpodmienečne odstráň loading="lazy". Lazy loading LCP elementu je anti-pattern, ktorý spomalí každú stránku. Okrem toho rezervuj cez width a height (alebo aspect-ratio) miesto v layoute, aby si sa vyhol Cumulative Layout Shift (CLS). Lazy loading zostáva správny, ale len pre obrázky pod viditeľnou oblasťou.

Optimalizácia pre Google Lens a vizuálne vyhľadávanie

Vizuálne vyhľadávanie odmeňuje kvalitné, dobre opísané produktové obrázky. Konkrétne:

• Vysoké rozlíšenie a ostrosť: Lens analyzuje samotný obrázok, rozmazané alebo príliš malé obrázky sťažujú rozpoznávanie objektov.
• Štruktúrované dáta: ImageObject a Product schéma prepájajú obrázok, názov produktu, cenu a dostupnosť, čo umožňuje rozšírené výsledky vo vyhľadávaní obrázkov Google.
• Sitemapy obrázkov a indexovateľné URL: Obrázky musia byť dostupné cez stabilnú URL, ktorú crawler dokáže prehľadať, a patria do XML sitemapy, aby ich Google spoľahlivo zachytil.
• Kontextový text a metadáta: Popisok obrázka a okolitý text dávajú Lens a AI textový kontext; metadáta EXIF/IPTC môžu niesť údaje o autorovi a licencii.

Technické SEO obrázkov a schema markup

Používaj výstižné názvy súborov (zavitovkovy-dopravnik-fs-200.avif namiesto img4087.avif), umiestňuj obrázky do tematicky zodpovedajúcej časti textu a pridávaj viditeľné popisky tam, kde obsahovo pomáhajú. Pre rozšírené výsledky vo vyhľadávaní obrázkov Google je relevantná schéma ImageObject s metadátami o licencii a autorovi (license, creator, copyrightNotice), pri produktoch doplnená o schému Product. Obrázky sa tak indexujú a zároveň dostanú využiteľné doplnkové informácie.

Mobile-first na príklade Rakúska

Desktop síce vedie, podiel mobilov je však aj tak značný: podľa StatCounter pripadalo v Rakúsku v máji 2026 41,74 % na mobil, 56,71 % na desktop a 1,55 % na tablet (Rakúsko). Niečo viac ako štyri z desiatich zobrazení stránok teda pochádzajú zo smartfónov, často cez mobilnú sieť s obmedzeným objemom dát a kolísavou šírkou pásma. Každý ušetrený kilobajt skracuje čas načítania a šetrí dáta používateľov, čo sa priamo prejaví na miere odchodov a konverzii. Práve pri týchto návštevách sa AVIF a responzívne doručovanie oplatia.

Časté chyby pri optimalizácii obrázkov

• Názov súboru ako alt text: alt="DSC_0421.jpg" je pre čítačky obrazovky aj vyhľadávače bezcenný a patrí k najčastejším chybám na webe.
• Chýbajúci alt text: Úplne chýbajúci alt atribút premrhá signál pre ranking aj prístupnosť.
• LCP obrázok načítaný cez lazy loading: Keď najdôležitejší obrázok oneskoríš cez loading=lazy, merateľne spomalíš LCP.
• Chýba width/height: Bez rezervovaných rozmerov layout pri načítaní obrázka poskočí, čo zhoršuje CLS.
• AVIF bez fallbacku: AVIF bez záložnej úrovne cez <picture> riskuje, že sa obrázok v starších prostrediach nezobrazí.
• Keyword stuffing v alt texte: Nahromadené kľúčové slová namiesto skutočného opisu škodia prístupnosti aj rankingu.
• Obrázky chýbajú v sitemape: Obrázky, ktoré nie sú uvedené v sitemape, alebo obrázky dodatočne načítané cez JavaScript Google často neindexuje spoľahlivo.

Metriky a meranie

Účinok optimalizácie obrázkov sa ukáže na konkrétnych ukazovateľoch:

• LCP (terénne dáta): Meraj Largest Contentful Paint z Google Search Console a CrUX. Keďže na 76 % mobilných stránok je LCP elementom obrázok, každá optimalizácia obrázkov sa tu prejaví priamo.
• CLS: Skontroluj Cumulative Layout Shift, ktorý pri chýbajúcich rozmeroch obrázkov typicky stúpa.
• Audit lazy loadingu: Uisti sa, že sa LCP obrázok nenačítava cez lazy loading. Web Almanac 2024 ukazuje, že 9,5 percenta img elementov relevantných pre LCP sa na mobile chybne načítava cez natívny lazy loading, pričom natívny lazy loading používa približne tretina všetkých webov.
• Pokrytie alt textami: Prehľadaj web crawlerom a nájdi img elementy nedekoratívnych obrázkov bez alt atribútu alebo s prázdnym alt atribútom. Benchmarkom je zdokumentovaný podiel 45 percent img elementov bez alt textu, pod ktorým by si mal zostať výrazne.
• Veľkosti súborov a formát: Sleduj doručovaný formát a počet bajtov na obrázok, aby si videl podiel AVIF/WebP a dosiahnutú úsporu.
• Viditeľnosť vo vyhľadávaní obrázkov: Sleduj v Search Console zobrazenia a kliknutia z vyhľadávania obrázkov Google ako ukazovateľ výkonu vo vizuálnom vyhľadávaní.

Ďalšie súvislosti

Optimalizácia obrázkov a médií spája tri on-page disciplíny: technický výkon (Core Web Vitals), prístupnosť (alt texty) a sémantické označenie (schema). Pragmatický začiatok: identifikuj LCP obrázok každej dôležitej stránky, doručuj ho ako AVIF s fallbackom cez <picture> a s fetchpriority="high", píš opisné alt texty a cez width/height rezervuj miesto v layoute. V druhom kroku nasledujú responzívne varianty srcset cez CDN, schéma ImageObject/Product pre vyhľadávanie obrázkov a sitemapy obrázkov pre spoľahlivú indexáciu. V Rakúsku, kde niečo viac ako štyri z desiatich zobrazení stránok pochádzajú zo smartfónov, je každý ušetrený kilobajt priamym príspevkom k času načítania a konverzii. Súvisiace témy sú Core Web Vitals a optimalizácia LCP, schema markup na stránke, featured snippets a tiež GEO a citovateľnosť v odpovediach AI.