Obrázkové SEO: formáty, optimalizace alternativních textů a licenční atributy

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

Obrázky patří mezi největší přenosové položky na webech. Ovlivňují rychlost (LCP, CLS), dostupnost (a11y), indexaci (Image Search, Google Discover) i konverze (produktové listingy). Správná strategie formátů, metadat, licencování a doručování snižuje velikost přenosu, zlepšuje pochopení obsahu stroji 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). Vhodný pro UI prvky, loga, schémata. Velikost bývá vyšší; zvažte WebP/AVIF se zachováním průhlednosti.
WebP: moderní formát (ztrátový i bezztrátový) se signifikantně menším souborem; podporuje průhlednost i animace. V současnosti doporučovaný default pro web.
AVIF: nejlepší poměr kvalita/velikost u fotografií, podporuje HDR a průhlednost. Kódování je náročnější; používejte pro kritické hero obrázky nebo v kombinaci s fallbackem WebP.
SVG: vektorový formát pro loga, ikony, jednoduché ilustrace. Perfektní ostrost v libovolném DPI. Pozor na nečištěné SVG (bezpečnost, nadbytečný kód).
GIF: zastaralý pro animace; nahrazujte video/mp4 nebo video/webm (lepší komprese), případně animovaným WebP/Lottie pro UI mikroanimace.
HEIC/HEIF: výborná komprese, slabší podpora prohlížeči; vhodné pro vstup do zpracování, ne přímo jako výstup na web.

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

Preferujte <picture> s typem a fallbackem. 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ů (x-deskriptory): srcset="img@1x.webp 1x, img@2x.webp 2x" pro stejný výřez v různém DPI.
Šířkové deskriptory (w): generujte více šířek (např. 480, 768, 1200, 1600) a rozhodujte přes sizes podle layoutu.
Art direction: rozdílné výřezy pro mobil/desktop přes <picture> a media atributy na <source> (zachová kontext a čitelnost motivů).

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

LCP: hero obrázek je často největší prvek. Použijte preload (např. <link rel="preload" as="image" imagesrcset="..." imagesizes="..." href="...">) a fetchpriority="high" pro klíčový hero pouze na první obrazovce.
CLS: vždy definujte width a height nebo aspect-ratio v CSS, aby se neztrácelo místo při lazy loadu.
INP: obrázky přímo neblokují interakce, ale agresivní skripty galerií ano. Preferujte lehké lightboxy, odložte inicializaci mimo viewport.

Lazy loading, decoding a priority hints

loading="lazy" pro neviditelné obrázky pod ohybem; pro hero vždy bez lazy.
decoding="async" umožňuje prohlížeči dekódovat mimo hlavní cyklus.
fetchpriority: high pro LCP, low pro dekorativní; nepoužívejte plošně.

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

On-the-fly transformace: resize, crop, format-negotiation (AVIF/WebP) podle klienta, tzv. content negotiation.
Client Hints: Accept, Sec-CH-DPR, Sec-CH-Width, Save-Data umožní CDN vrátit optimální šířku a kvalitu.
HTTP/2 a HTTP/3: výhodné pro paralelní stahování a nižší latenci; stále minimalizujte počet variant.

Metadata, alt text a přístupnost

Alt text: stručný, informační, bez klíčových slov navíc. Popište co a proč, ne barvy, pokud nejsou podstatou. Dekorativní obrázky nastavte s prázdným alt="".
Titulky a popis: používejte <figure> a <figcaption> pro kontext.
IPTC/EXIF: vyplňte autora, copyright, licenci; při exportu odstraňte zbytečná GPS data (soukromí), ale zachovejte licenční položky.
Dekorativní pozadí: pokud je obrázek v CSS, není indexován jako obsah; pro důležité obrázky preferujte <img>.

Indexace: image sitemaps, structured data a robots pravidla

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

Optimalizace kvality: komprese, barvy a ostrost

Komprese: používejte percepční optimalizaci (AVIF/WebP s cílovou PSNR/SSIM nebo vizuálním QA). Nenechávejte výchozí nastavení.
Color profile: konvertujte na sRGB; odstraňte zbytečné ICC profily, ale ponechejte nutné pro správné zobrazení.
Ostření po resamplu: po zmenšení aplikujte jemné doostření; zabráníte „měkkému“ výstupu.

SVG: výhody, minifikace a bezpečnost

Minifikace: odstraňte nepotřebné skupiny, komentáře, inline styly, nepoužité definice; exportujte „čisté SVG“.
Bezpečnost: zakázat skripty a externí reference v SVG od třetích stran; preferujte <img> nebo background-image před inline <svg> u neznámého obsahu.
Přístupnost: pro inline SVG doplňte role="img" a aria-label nebo <title> pro čtečky.

Animace a krátká videa: kdy nahradit GIF

WebM/MP4: pro „gif-style“ animace použijte video smyčku s autoplay muted loop playsinline; výrazně menší velikost.
Poster: nastavte poster a rozměry, aby se zabránilo CLS.
Alternativa: pokud musí GIF zůstat, zkuste jej konvertovat do animovaného 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 čas; vždy ukládejte doklady o nákupu a podmínky.
Creative Commons: CC BY vyžaduje atribuci, CC BY-SA sdílení pod stejnou licencí, CC BY-NC zakazuje komerční využití, CC0 (public domain) bez omezení. Ověřte zdroj a autora.
Editorial use only: obrázky určené pouze pro zpravodajství; nepoužívejte v reklamních či produktových materiálech.
Model/Property Release: u rozpoznatelných osob či majetku jsou potřebná příslušná povolení pro komerční využití.
AI-generované obrázky: zkontrolujte licenční podmínky nástroje a vlastnictví; označte jako ilustrační, uveďte zdroj a ověřte, že neporušují ochranné známky.
IPTC pole: vyplňte Creator, Credit, Copyright Notice, Usage Terms, Licensor URL; pomáhají předcházet sporům.

Obrázky v e-commerce a vertikálech

Produkty: konzistentní pozadí, stejný úhel, více pohledů, detailní makra; alt text s atributy (značka, model, klíčové vlastnosti) bez keyword spamu.
Recepty/Cestování: obrázky s kontextem (postup, mapa, lokalita); použijte Recipe/TouristDestination schema s image odkazy.
Zprávy: editoriální licence, popisy s atribucí, NewsArticle se image a author/publisher.

Favicon, touch ikony a manifest

SVG favicon: škálovatelný, ostrý při vysokém DPI; fallback PNG 32×32.
Apple touch icon: minimálně 180×180 PNG v kořenovém adresáři.
PWA manifest: více rozlišení ikon (192, 256, 384, 512) s purpose maskable.

HTTP caching a kontrola velikosti

Cache-Control: pro verzované soubory nastavte public, max-age=31536000, immutable.
ETag/Last-Modified: umožňují validaci bez přenosu; pro agresivní CDN cache preferujte fingerprint v názvu souboru.
Velikost: cílit na <200 kB pro LCP hero, běžné obsahové obrázky <100 kB (záleží na layoutu 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í blokace nebo špatné vykreslení.
Hotlinking: chraňte originály tokenizovanými URL nebo politikou refererů; ujistěte se, že CDN podporuje omezení.
EXIF: odstraňte citlivá data (GPS) u UGC uploadů; zachovejte licenční pole, pokud je to vyžadováno.

UGC a moderace

Omezení uploadu: limity na rozměry, formát, velikost; server-side validace MIME a podpisů.
Automatické zpracování: generování náhledů, konverze do WebP/AVIF, odstranění EXIF, sanitace SVG.
Licenční potvrzení: zaškrtávací políčka a logy, že uživatel vlastní práva nebo licenci; uchovávejte záznamy.

Měření a diagnostika

Web Vitals: sledujte LCP obrázek v polích (field data), nejen lab. Identifikujte konkrétní URL a rozměry.
Coverage: procento AVIF/WebP pokrytí, průměrná velikost obrázku na stránku, počet variant na asset.
Search výkon: segmentujte Image Search kliky/imprese; analyzujte CTR podle typu obrázku (produkt, ilustrační).
CDN analytics: hit ratio cache, průměrná odezva podle regionu, transformace podle Client Hints.

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

Chybějící rozměry → doplňte width/height nebo CSS aspect-ratio pro snížení CLS.
GIF na hero pozadí → nahraďte WebM/MP4 a nastavte preload="none" + vhodný poster.
PNG fotografie → konvertujte na AVIF/WebP; pro zachování průhlednosti použijte