Technologie

Obrázkové SEO a jeho dopad na výkon a viditelnost webu

Stanka 0

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 načítání (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 výrazně menší velikostí souboru; 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 klíčové hero obrázky nebo v kombinaci s fallbackem na WebP.
  • SVG: vektorový formát pro loga, ikony, jednoduché ilustrace. Perfektní ostrost na libovolném DPI. Dávejte pozor na nečištěné SVG (bezpečnostní rizika, nadbytečný kód).
  • GIF: zastaralý pro animace; nahrazujte video/mp4 nebo video/webm (lepší komprese), případně animovaným WebP či Lottie pro UI mikroanimace.
  • HEIC/HEIF: velmi dobrá komprese, horší podpora v prohlížečích; vhodné jako vstup pro zpracování, nikoli pro přímý webový výstup.

Vzor výstupu s progresivním zlepš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 při různém DPI.
  • Šířkové deskriptory (w): generujte více šířek (např. 480, 768, 1200, 1600) a rozhodujte pomocí 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" u klíčového hero obrázku 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; hero obrázky vždy bez lazy loadu.
  • decoding="async" nechá prohlížeč 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, formátová dohoda (AVIF/WebP) dle 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; přesto minimalizujte počet variant.

Metadata, alt text a přístupnost

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

Indexace: image sitemapy, structured data a pravidla robots

  • Image Sitemap: v <image:image> uveďte <image:loc>, <image:title>, <image:caption>, případně <image:license>.
  • Schema.org/ImageObject: pro klíčové 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 u dokumentů; 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ílovým PSNR/SSIM nebo vizuálním QA). Nerozmazávejte defaulty.
  • Color profile: konvertujte na sRGB; odstraňte nadbytečné ICC profily, ale ponechte nezbytné pro správné zobrazení.
  • Doostření po změně velikosti: po zmenšení aplikujte jemné doostření; zabráníte „měkkému“ výsledku.

SVG: výhody, minifikace a bezpečnost

  • Minifikace: odstraňte nepotřebné skupiny, komentáře, inline styly, nepoužité definice; exportujte „clean SVG“.
  • Bezpečnost: zakážte skripty a externí reference v SVG od třetích stran; preferujte <img> nebo CSS background-image před inline <svg> pro neznámý obsah.
  • 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.
  • Plakát (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 dává široká práva za jednorázový poplatek, RM je vázaná na účel, teritorium a čas; uchovávejte 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í použití, CC0 (public domain) bez omezení. Ověřte zdroj a autora.
  • Editorial use only: obrázky určené jen pro zpravodajské využití; nepoužívejte v reklamních či produktových materiálech.
  • Model/Property Release: pro rozpoznatelné osoby nebo majetek potřebujete příslušná svolení při komerčním využití.
  • AI-generované obrázky: 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.
  • 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 schemu s odkazy na image.
  • Zprávy: editoriální licence, popisy s atribucí, NewsArticle se image a author/publisher.

Favicon, touch ikony a manifest

  • SVG favicon: škálovatelný, ostrý na 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ílujte pod 200 kB pro LCP hero, běžné obsahové obrázky pod 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 referer politikou; ujistěte se, že CDN podporuje omezení.
  • EXIF: odstraňte citlivá data (GPS) při uploadu UGC; zachovejte licenční pole, pokud je to požadováno.

UGC a moderace

  • Omezení uploadu: limity na rozměry, formát, velikost; serverová validace MIME a podpisů.
  • Automatické zpracování: generování náhledů, konverze do WebP/AVIF, strip EXIF, sanitizace SVG.
  • Licenční potvrzení: checkboxy a logy potvrzující, že uživatel vlastní práva nebo licenci; evidujte záznamy.

Měření a diagnostika

  • Web Vitals: sledujte LCP obrázky ve skutečných datech (field data), nejen v laboratoři. Identifikujte konkrétní URL a rozměry.
  • Coverage: procento pokrytí AVIF/WebP, průměrná velikost obrázku na stránku, počet variant na asset.
  • Výkon ve vyhledávání: segmentujte kliky/imprese v Image Search; analyzujte CTR podle typu obrázku (produkt, ilustrace).
  • CDN analytika: cache hit ratio, 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 pro snížení CLS.
  2. GIF na hero pozadí → nahraďte WebM/MP4 a nastavte preload="none" + vhodný poster
Stanka

Website:

Related Story