SEO obrázků: formáty, optimalizace alternativních textů a licenční atribuce

Technické SEO a strukturovaná data
Eva Senková
Obrázkové SEO: Formáty, optimalizácia alternatívnych textov a licenčné atribúty

Proč je SEO obrázků klíčové pro viditelnost i výkon

Obrázky patří mezi největší datové položky na webech. Ovlivňují rychlost (LCP, CLS), přístupnost (a11y), indexaci (Vyhledávání obrázků, Google Discover) i konverze (výpisy produktů). Správná strategie formátů, metadat, licencování a doručování snižuje objem přenášených dat, zlepšuje strojové porozumění obsahu a chrání vás před právními riziky.

Formáty obrázků: kdy a co použít

  • JPEG/JPG: ztrátová komprese vhodná pro fotografie. Používejte progresivní JPEG a optimalizujte kvalitu (~70–85). Nevhodné pro ostrou grafiku s textem a ikonami.
  • PNG: bezztrátový formát s podporou průhlednosti (alfa kanál). Vhodný pro prvky UI, loga a schémata. Soubory bývají větší; zvažte WebP/AVIF se zachováním průhlednosti.
  • WebP: moderní formát (ztrátový i bezztrátový) s výrazně menší velikostí souboru; podporuje průhlednost i animace. V současnosti doporučený výchozí formát pro web.
  • AVIF: nejlepší poměr kvality a velikosti u fotografií, podporuje HDR a průhlednost. Kódování je náročnější; používejte ho pro klíčové hero obrázky nebo v kombinaci se záložním formátem WebP.
  • SVG: vektorový formát pro loga, ikony a jednoduché ilustrace. Dokonale ostré při libovolném DPI. Pozor na nevyčištěné SVG (bezpečnost, nadbytečný kód).
  • GIF: pro animace zastaralý formát; nahraďte ho soubory video/mp4 nebo video/webm (lepší komprese), případně animovaným WebP/Lottie pro mikroanimace v UI.
  • HEIC/HEIF: výborná komprese, slabší podpora v prohlížečích; vhodný pro vstupní zpracování, nikoli pro přímé zobrazení na webu.

Ukázka výstupu s progresivním vylepšováním (AVIF → WebP → JPEG)

Upřednostňujte <picture> s typem a záložním formátem. Příklad (zkrácený, bez bloků):

<picture>
<source type="image/avif" srcset="img-800.avif 800w, img-1600.avif 1600w" sizes="(max-width: 768px) 92vw, 1200px">
<source type="image/webp" srcset="img-800.webp 800w, img-1600.webp 1600w" sizes="(max-width: 768px) 92vw, 1200px">
<img src="img-1600.jpg" alt="Popis scény pro uživatele i indexaci" width="1600" height="900" loading="lazy" decoding="async" fetchpriority="low">
</picture>

Responzivní obrázky: srcset, sizes a art direction

  • Hustota pixelů (deskriptory x): srcset="img@1x.webp 1x, img@2x.webp 2x" pro stejný výřez při různém DPI.
  • Deskriptory šířky (w): generujte více šířek (např. 480, 768, 1200, 1600) a rozhodujte pomocí sizes podle rozvržení.
  • Art direction: různé výřezy pro mobilní zařízení a počítače pomocí <picture> a atributů media u <source> (zachovají kontext a čitelnost motivů).

Výkon a Core Web Vitals: LCP, CLS, INP

  • LCP: hero obrázek bývá často největším prvkem. Použijte preload (např. <link rel="preload" as="image" imagesrcset="..." imagesizes="..." href="...">) a fetchpriority="high" pro klíčový hero obrázek pouze v první obrazovce.
  • CLS: vždy definujte width a height nebo aspect-ratio v CSS, aby při líném načítání nedocházelo k posunům rozvržení.
  • INP: obrázky neblokují interakce přímo, ale náročné skripty galerií ano. Upřednostňujte lehké lightboxy a inicializaci odložte, dokud nejsou ve výřezu.

Líné načítání, dekódování a nápovědy priority

  • loading="lazy" pro neviditelné obrázky pod přehybem stránky; u hero obrázku vždy bez lazy loadingu.
  • decoding="async" umožní prohlížeči dekódovat obrázek mimo hlavní cyklus.
  • fetchpriority: high pro LCP, low pro dekorativní obrázky; nepoužívejte plošně.

CDN a transformace: jak doručit správnou verzi

  • Transformace za běhu: změna velikosti, ořez, výběr formátu (AVIF/WebP) podle klienta, tzv. content negotiation.
  • Client Hints: Accept, Sec-CH-DPR, Sec-CH-Width, Save-Data umožňují CDN vrátit optimální šířku a kvalitu.
  • HTTP/2 a HTTP/3: výhodné pro paralelní stahování a nižší latenci; počet variant však stále minimalizujte.

Metadata, alternativní text a přístupnost

  • Alternativní text: stručný, informačně hodnotný, bez nadbytečných klíčových slov. Popište co a proč, nikoli barvy, pokud nejsou podstatou sdělení. Dekorativním obrázkům nastavte prázdný alt="".
  • Popisek a popis: pro kontext používejte <figure> a <figcaption>.
  • IPTC/EXIF: vyplňte autora, copyright a licenci; při exportu odstraňte nepotřebná GPS data (ochrana soukromí), ale licenční údaje zachovejte.
  • Dekorativní pozadí: obrázek v CSS se neindexuje jako obsah; u důležitých obrázků upřednostňujte <img>.

Indexace: mapy webu s obrázky, strukturovaná data a pravidla robots

  • Image Sitemap: v <image:image> uveďte <image:loc>, <image:title>, <image:caption>, případně <image:license>.
  • Schema.org/ImageObject: u důležitých obrázků uveďte contentUrl, thumbnail, license, creator, copyrightNotice.
  • Robots: blokování v robots.txt brání indexaci. U jednotlivých souborů použijte hlavičky X-Robots-Tag (noimageindex není standardní direktiva, pro dokumenty používejte noindex; obrázky blokujte pomocí disallow nebo odstraněním URL).

Optimalizace kvality: komprese, barvy a ostrost

  • Komprese: používejte perceptuální optimalizaci (AVIF/WebP s cílovou hodnotou PSNR/SSIM nebo vizuální kontrolou kvality). Nenechávejte výchozí nastavení.
  • Color profile: převádějte do sRGB; odstraňte nepotřebné profily ICC, ale ponechte ty, které jsou nutné pro správné zobrazení.
  • Doostření po převzorkování: po zmenšení použijte jemné doostření; zabráníte tak „měkkému“ výsledku.

SVG: výhody, minifikace a bezpečnost

  • Minifikace: odstraňte nepotřebné skupiny, komentáře, vložené styly a nepoužívané definice; exportujte „čisté SVG“.
  • Bezpečnost: zakažte skripty a externí odkazy v SVG od třetích stran; u neznámého obsahu upřednostňujte <img> nebo background-image před vloženým <svg>.
  • Přístupnost: u vloženého SVG doplňte role="img" a aria-label nebo <title> pro čtečky obrazovky.

Animace a krátká videa: kdy nahradit GIF

  • WebM/MP4: pro animace ve stylu GIF použijte video ve smyčce s autoplay muted loop playsinline; soubor bude výrazně menší.
  • Poster: nastavte poster a rozměry, abyste zabránili CLS.
  • Alternativa: pokud musí GIF zůstat, zkuste ho převést na animovaný WebP.

Licence, autorská práva a rizika

  • Royalty-free vs. Rights-managed: RF poskytuje široká práva za jednorázový poplatek, RM je vázána na účel, teritorium a dobu; uchovávejte doklady o nákupu a podmínky licence.
  • Creative Commons: CC BY vyžaduje uvedení autora, CC BY-SA vyžaduje šíření pod stejnou licencí, CC BY-NC zakazuje komerční použití, CC0 (public domain) je bez omezení. Ověřte zdroj a autora.
  • Editorial use only: obrázky určené pouze pro zpravodajské použití; nepoužívejte je v reklamních ani produktových materiálech.
  • Model/Property Release: pro rozpoznatelné osoby či majetek potřebujete při komerčním využití příslušné souhlasy.
  • Obrázky generované AI: zkontrolujte licenční podmínky nástroje a vlastnictví; označte je jako ilustrační, uveďte zdroj a ověřte, že neporušují ochranné známky.
  • Pole IPTC: vyplňte Creator, Credit, Copyright Notice, Usage Terms, Licensor URL; pomáhají předcházet sporům.

Obrázky v e-commerce a jednotlivých vertikálách

  • Produkty: konzistentní pozadí, stejný úhel, více pohledů, detailní makrosnímky; alternativní text s atributy (značka, model, klíčové vlastnosti) bez nadměrného používání klíčových slov.
  • Recepty/Cestování: obrázky s kontextem (postup, mapa, lokalita); použijte schéma Recipe/TouristDestination s odkazy v image.
  • Zprávy: redakční licence, popisy s uvedením autora, NewsArticle s image a author/publisher.

Favicon, dotykové ikony a manifest

  • SVG favicon: škálovatelný, ostrý při vysokém DPI; záložní PNG 32×32.
  • Apple touch icon: alespoň 180×180 PNG v kořenovém adresáři.
  • Manifest PWA: více rozlišení ikon (192, 256, 384, 512) s hodnotou purpose maskable.

HTTP cache a kontrola velikosti

  • Cache-Control: pro verzované soubory nastavte public, max-age=31536000, immutable.
  • ETag/Last-Modified: umožňují ověření bez přenosu souboru; pro agresivní ukládání do mezipaměti CDN upřednostňujte fingerprint v názvu souboru.
  • Velikost: cílem je <200 kB pro LCP hero obrázek a <100 kB pro běžné obsahové obrázky (závisí na rozvržení a zařízení).

Obrázky a bezpečnost

  • Mime sniffing: posílejte správný Content-Type (image/avif, image/webp, image/svg+xml), jinak hrozí zablokování nebo chybné vykreslení.
  • Hotlinking: chraňte originály pomocí URL s tokeny nebo pravidel pro referer; ujistěte se, že CDN tato omezení podporuje.
  • EXIF: při nahrávání obsahu uživateli odstraňte citlivá data (GPS); pokud je to požadováno, licenční údaje zachovejte.

UGC a moderace

  • Omezení nahrávání: limity rozměrů, formátu a velikosti; validace MIME a signatur na straně serveru.
  • Automatické zpracování: generování náhledů, převody do WebP/AVIF, odstranění EXIF, sanitizace SVG.
  • Potvrzení licenčních podmínek: zaškrtnutí políčka a záznamy potvrzující, že uživatel vlastní práva nebo má licenci; uchovávejte záznamy.

Měření a diagnostika

  • Web Vitals: sledujte LCP obrázku v reálném provozu (field data), nejen v laboratorních podmínkách. Identifikujte konkrétní URL a rozměry.
  • Pokrytí: procento pokrytí formáty AVIF/WebP, průměrná velikost obrázku na stránku, počet variant jednoho assetu.
  • Výkon ve vyhledávání: segmentujte kliknutí a zobrazení ve Vyhledávání obrázků; analyzujte CTR podle typu obrázku (produktový, ilustrační).
  • Analytika CDN: poměr zásahů do cache, průměrná odezva podle regionu, transformace podle Client Hints.

Časté chyby a rychlá řešení

  1. Chybějící rozměry → doplňte width/height nebo CSS aspect-ratio, abyste snížili CLS.
  2. GIF na pozadí hero sekce → nahraďte WebM/MP4 a nastavte preload="none" + vhodný poster.
  3. Fotografie ve formátu PNG → převeďte na AVIF/WebP; pro zachování průhlednosti použijte bezztrátový WebP/AVIF.
  4. Keyword stuffing v alt textu → napište přirozený popis relevantní k obsahu, nikoli seznam klíčových slov.
  5. Nejasná licence → používejte pouze obrázky s prokazatelným oprávněním; ukládejte potvrzení a smlouvy.
  6. Náročné galerie → načítejte náhledy líně, použijte loading="lazy", generujte menší miniatury a odložte JavaScript.

Proces a workflow: od zdroje po produkci

  1. Výběr zdroje: vlastní fotografie, fotobanka, generování pomocí AI; zkontrolujte licence a souhlasy (model/property release).
  2. Úpravy: oříznutí podle poměru stran rozvržení, korekce barev, doostření po zmenšení.
  3. Export: AVIF (kvalita podle scény), záložní WebP/JPEG; sRGB; odstraňte nepotřebná metadata.
  4. Doručení: transformace CDN, správa variant podle srcset/sizes, ukládání do cache s fingerprintem.
  5. SEO & a11y: alternativní text, popisek, figure/figcaption, Image Sitemap, ImageObject.
  6. Kontrola: vizuální kontrola kvality při různých DPI, Lighthouse, WebPageTest, metriky LCP/CLS.

Kontrolní seznam (rychlý audit)

  • Hero obrázek má preload a fetchpriority="high", definované rozměry a moderní formát.
  • Ostatní obrázky používají loading="lazy", decoding="async" a správné srcset/sizes.
  • Řetězec záložních formátů: AVIF → WebP → JPEG/PNG podle potřeby.
  • Alternativní texty jsou informačně hodnotné; dekorativní obrázky mají prázdný alt.
  • Image Sitemap a ImageObject pro klíčové stránky; IPTC/EXIF obsahuje autora a copyright.
  • Licence a souhlasy jsou zdokumentované; pro redakční použití je k dispozici vlastní označení.
  • CDN doručuje varianty podle Client Hints; cache je verzovaná a dlouhá.

SEO obrázků není jen komprese. Je to systém: výběr formátu, responzivní doručování, správná metadata a přístupnost, právně čisté licencování a měření dopadu. Když tuto strategii sladíte se svým designem a obsahem, dosáhnete rychlejšího načítání, lepší indexace a vyšší důvěryhodnosti – výsledkem jsou lepší pozice i konverze.