Optimalizace obrázků pro mobilní zařízení: formáty a komprese

UX/UI a responzivní design
P. Varga
Optimalizace obrázků pro mobilní zařízení: Formáty a komprese

Optimalizace obrázků

Obrázky patří mezi největší příčiny zátěže webu na mobilních zařízeních. Správná optimalizace snižuje objem přenášených dat, zlepšuje Core Web Vitals (LCP, CLS, INP), šetří baterii a zvyšuje konverze. Cílem je dodat správný obrázek (rozměry, formát, kvalita) správnému zařízení (DPR, šířka viewportu, podpora kodeků) ve správný čas (strategie načítání, cache, priority).

Formáty: kdy použít AVIF, WebP, JPEG, PNG a SVG

  • AVIF: nejvyšší komprese (fotografie, ilustrace), podpora HDR, alfa kanál; náročnější enkódování a starší zařízení mohou mít omezenou podporu.
  • WebP: dobrý poměr kvality a velikosti, široká podpora; vhodný pro většinu mobilních prohlížečů.
  • JPEG/JPG: záložní varianta pro starší prohlížeče; použijte progresivní JPEG, případně mozjpeg.
  • PNG: bezeztrátová grafika, ostré hrany, alfa kanál; zmenšete soubory pomocí pngquant a palet.
  • SVG: ideální pro loga a ikony; lze škálovat bez ztráty ostrosti a vložit přímo do stránky (inline) i stylovat pomocí CSS.

Responzivní dodání: srcset, sizes a <picture>

srcset nabízí varianty podle šířky (w) a hustoty pixelů (x), zatímco sizes prohlížeči říká, jak široký bude obrázek ve viewportu. <picture> řeší art direction a preferenci formátu.

<picture> <source type="image/avif" srcset="/img/hero-640.avif 640w, /img/hero-960.avif 960w, /img/hero-1280.avif 1280w" sizes="(max-width: 600px) 100vw, 600px"> <source type="image/webp" srcset="/img/hero-640.webp 640w, /img/hero-960.webp 960w, /img/hero-1280.webp 1280w" sizes="(max-width: 600px) 100vw, 600px"> <img src="/img/hero-960.jpg" srcset="/img/hero-640.jpg 640w, /img/hero-960.jpg 960w, /img/hero-1280.jpg 1280w" sizes="(max-width: 600px) 100vw, 600px" alt="Hlavní fotografie produktu" width="600" height="400" loading="lazy" decoding="async"> </picture>

Rozměry, DPR a prevence CLS

U každého <img> definujte width a height (nebo aspect-ratio v CSS), aby si prohlížeč vyhradil potřebné místo a předešel Cumulative Layout Shift. Připravte více variant pro běžné hustoty pixelů (1x, 2x, 3x) a šířky odpovídající jednotlivým breakpointům.

Prioritizace načítání: fetchpriority, preload a loading

  • Hlavní obrázek pro LCP: použijte fetchpriority="high" a <link rel="preload" as="image">.
  • Obsah mimo první obrazovku: loading="lazy" + decoding="async".
  • Správná doména: <link rel="preconnect"> k CDN zkrátí navazování spojení.
<link rel="preconnect" href="https://cdn.example.com" crossorigin> <link rel="preload" as="image" href="https://cdn.example.com/hero-1280.avif" imagesrcset="... 640w, ... 960w, ... 1280w" imagesizes="(max-width: 600px) 100vw, 600px">

Kompresní pipeline a parametry kvality

Automatizujte sestavení: generujte varianty (šířky, DPR) a formáty. Typické výchozí hodnoty kvality: AVIF ~30–45, WebP ~70–80, JPEG ~60–75; výsledek ověřujte vizuálně (SSIM/PSNR nejsou všechno). Pro ilustrace použijte bezeztrátový WebP/AVIF s technikou palette.

Odstraňování metadat, barevné profily a gamma

Odeberte EXIF a nepotřebná metadata (GPS). Pro konzistentní zobrazení zachovejte nebo převeďte barevné profily (sRGB). V HDR pipeline dbejte na kompatibilitu a záložní varianty SDR.

CDN a edge transformace

Moderní CDN (Image CDN) provádí konverze formátů, změnu rozměrů, ořez a úpravu kvality on-the-fly, nabízí smart crop, převádí obrázky do AVIF/WebP podle hlavičky Accept a nastavuje správné cache keys (šířka, DPR, formát). Pro efektivní opětovnou validaci udržujte hlavičky Cache-Control a ETag/Last-Modified.

Umístění a vykreslovací strategie v CSS

Pro pozadí používejte image-set() a dotazy media. Pokud jde o obsahový obrázek, upřednostněte object-fit pro správný ořez v kontejneru <img> před CSS pozadím (lepší přístupnost a SEO).

.hero { background-image: image-set( url("/img/hero-640.avif") type("image/avif") 1x, url("/img/hero-640.webp") type("image/webp") 1x ); } img.cover { width: 100%; height: 40vh; object-fit: cover; }

Art direction vs. prosté změnění velikosti

Art direction znamená různé ořezy či kompozice pro různé breakpointy (např. výřez obličeje pro mobil oproti širokoúhlému záběru pro desktop). Řešte jej pomocí <picture> s atributy media a různými zdroji.

<picture> <source media="(max-width: 480px)" srcset="/img/portrait-tight.avif" type="image/avif"> <img src="/img/landscape-wide.jpg" alt="Portrét v různém výřezu"> </picture>

Optimální layout a omezení pomocí contain

Vyhněte se příliš velkým obrázkům v úzkých sloupcích. Použijte max-width: 100% a omezte rozměry kontejneru; u složitých layoutů pomáhají content-visibility a contain zlepšit vykreslování v mobilních prohlížečích.

Líné načítání a odložené dekódování

loading="lazy" odkládá načítání obrázků mimo obrazovku. Přidejte decoding="async" pro neblokující dekódování a importance="low" (v některých prohlížečích). Pro postupné načítání galerií použijte v Intersection Observeru prahovou hodnotu a sentinel.

Ikony a vektorová grafika

Upřednostňujte SVG ikony. Pro rastrovou záložní variantu generujte verze @2x/@3x. Icon fonts už nejsou ideální (kvůli přístupnosti, ostrosti vykreslení a FOUT); lepší volbou jsou SVG sprite nebo <use>.

Generování posterů a technika blur-up

Pro hlavní obrázky a galerie využijte zástupný obrázek nízké kvality (low-quality image placeholder, LQIP) nebo zástupný prvek blurhash/SVG. U videí nastavte poster s optimalizovaným AVIF/WebP.

A/B testování kvality a úspory dat

Neexistuje univerzální hodnota kvality; sledujte metriky (LCP, velikost dat, bounce, konverze) a testujte různé parametry komprese. Zaměřte se na mobilní sítě (3G/4G/5G, vysoká latence) a zařízení s omezenou pamětí.

Přístupnost: alt, role a sémantika

Obsahové obrázky vyžadují smysluplný text alt; dekorativní mohou mít prázdný alt="" nebo být vloženy pomocí CSS. Nevkládejte text do obrázků (zhoršuje to čitelnost i SEO) – pokud musíte, přidejte aria-label či figcaption.

SEO a strukturovaná data

Správný text alt, popisky, width/height, líné načítání pouze mimo above-the-fold, image sitemap a structured data (např. ImageObject) pomáhají s indexací obrázků ve vyhledávačích.

Pipeline nástrojů: build, audit a automatizace

  • Sestavení: Sharp/Squoosh/Imaginary/Thumbor, CI generující varianty a formáty.
  • Lint/audit: kontrola chybějících width/height, přebytečných metadat a příliš velkých obrázků vzhledem ke kontejneru.
  • Monitoring: syntetické testy na mobilních profilech, RUM pro LCP/CLS/INP, velikost přenesených dat v rámci relace.

Specifika PWA a offline cache

Service Worker může předem ukládat klíčové obrázky do cache pro offline režim (strategie stale-while-revalidate), je však třeba hlídat limity úložiště. U galerií používejte range requests a cache-busting pomocí fingerprintů.

Dark mode, HDR a barevná věrnost

Pro tmavý režim zvažte alternativní obrázky (světlá vs. tmavá paleta) pomocí prefers-color-scheme v <picture>. Na HDR zařízeních testujte jas a barevný gamut (Display-P3) se záložní variantou sRGB.

Konkrétní vzor komponenty obrázku

<!-- Opakovaně použitelná komponenta: mobile-first, bez CLS, s preferencí AVIF --> <picture class="media"> <source type="image/avif" srcset="/cdn/p/320.avif 320w, /cdn/p/480.avif 480w, /cdn/p/640.avif 640w, /cdn/p/960.avif 960w" sizes="(max-width: 640px) 92vw, 640px"> <source type="image/webp" srcset="/cdn/p/320.webp 320w, /cdn/p/480.webp 480w, /cdn/p/640.webp 640w, /cdn/p/960.webp 960w" sizes="(max-width: 640px) 92vw, 640px"> <img src="/cdn/p/640.jpg" width="640" height="427" alt="Náhled produktu" loading="lazy" decoding="async" style="max-width:100%;height:auto"> </picture>

Metriky a cílové hodnoty

  • LCP (Largest Contentful Paint): < 2,5 s na mobilu; optimalizujte hlavní obrázek, přednačtení a prioritu.
  • CLS: < 0,1; vždy vymezte rozměry nebo poměr stran.
  • Celková velikost médií na stránku: u vstupních stránek na mobilu směřujte k hodnotě < 1 MB; u galerií použijte postupné načítání.

Kontrolní seznam pro produkční nasazení

  1. U každého obsahového obrázku jsou definovány hodnoty alt, width/height a strategie lazy/priority.
  2. Varianty pro breakpointy a DPR, preferovaný formát AVIF → záložní WebP → JPEG/PNG.
  3. CDN s vyjednáváním podle Accept, správnými cache headers a fingerprintem v URL.
  4. Sestavení generuje více šířek, kontrolují se příliš velké obrázky a odstraňují metadata.
  5. Audit LCP/CLS/INP na mobilních profilech a pomocí RUM v reálném prostředí.

Závěr

Optimalizace obrázků pro mobilní zařízení spojuje moderní formáty, responzivní dodání, prioritizaci, pevně stanovené rozměry a inteligentní cache na okraji sítě. Důsledná automatizace při sestavení a observabilita v produkci zajistí, že obsah zůstane ostrý, rychlý a přístupný na široké škále zařízení i sítí.