Optimalizace obrazových souborů pro mobilní zařízení

Dalimil

Optimalizace obrázků

Obrázky patří mezi největší příčiny zatížení webu na mobilních zařízeních. Správná optimalizace snižuje velikost 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álu; náročnější na kódování a starší zařízení mohou mít omezenou podporu.
  • WebP: dobrý poměr kvalita/velikost, široká podpora; vhodný pro většinu mobilních prohlížečů.
  • JPEG/JPG: fallback pro starší prohlížeče; použijte progresivní JPEG, případně mozjpeg.
  • PNG: bezeztrátová grafika, ostré hrany, alfa kanál; optimalizujte pomocí pngquant a palet.
  • SVG: ideální pro loga a ikony; škáluje bez ztráty ostrosti, možnost inline vložení a stylování přes CSS.

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

srcset nabízí varianty podle šířky (w) a hustoty pixelů (x), sizes informuje prohlížeč, 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="Hrdinová fotografie produktu" width="600" height="400" loading="lazy" decoding="async">
</picture>

Rozměry, DPR a prevence CLS

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

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

  • Hero LCP obrázek: použijte fetchpriority="high" a <link rel="preload" as="image">.
  • Neviditelné pod přehybem: loading="lazy" + decoding="async".
  • Správná doména: <link rel="preconnect"> ke CDN zkrátí handshaky.
<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 build: generujte varianty (šířky, DPR) a formáty. Typické výchozí kvality: AVIF ~30–45, WebP ~70–80, JPEG ~60–75; ověřujte vizuálně (SSIM/PSNR nejsou vše). Pro ilustrace použijte bezeztrátový WebP/AVIF s paletovou technikou.

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

Odeberte EXIF a nepotřebná metadata (GPS). Zachovejte nebo konvertujte barevné profily (sRGB) pro konzistentní zobrazení. U HDR pipeline dbejte na kompatibilitu a fallbacky do SDR.

CDN a edge transformace

Moderní CDN (Image CDN) provádí on-the-fly konverze formátů, změnu rozměrů, ořez, kvalitu, smart crop, konverzi do AVIF/WebP dle Accept hlavičky a nastavuje správné cache key (šířka, DPR, formát). Udržujte Cache-Control a ETag/Last-Modified pro efektivní revalidaci.

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

Pro pozadí používejte image-set() a media dotazy. Preferujte object-fit pro korektní ořez v <img> kontejneru místo CSS pozadí, pokud jde o obsahový obrázek (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. jednoduché přizpůsobení velikosti

Art direction znamená různé ořezy/kompozice pro různé breakpointy (např. mobilní výřez obličeje vs. desktopová šířka). Řešte pomocí <picture> s atributy media a odlišný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 contain mantinely

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áhá content-visibility a contain pro zlepšení vykreslování v mobilních prohlížečích.

Lazy loading a odložené dekódování

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

Ikony a vektorová grafika

Preferujte SVG ikonografii. Pro raster fallback generujte @2x/@3x varianty. Icon fonts již nejsou ideální (přístupnost, ostré vykreslování, FOUT); SVG sprite nebo <use> je lepší cesta.

Generování posterů a blur-up technika

Pro hero obrázky a galerie využijte low-quality image placeholder (LQIP) nebo blurhash/SVG placeholder. U videí nastavte poster s optimalizovaným AVIF/WebP.

A/B testování kvality a datových úspor

Neexistuje univerzální kvalita; sledujte metriky (LCP, datová velikost, 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ý alt text; dekorativní mohou mít prázdný alt="" nebo být v CSS. Nepřenášejte text do obrázků (zhoršení čitelnosti, SEO) – pokud musíte, přidejte aria-label či figcaption.

SEO a strukturovaná data

Správné alt, popisky, width/height, lazy loading pouze mimo above-the-fold, image sitemap a structured data (např. ImageObject) pomáhají indexaci obrázků ve vyhledávačích.

Pipeline nástrojů: build, audit a automatizace

  • Build: Sharp/Squoosh/Imaginary/Thumbor, CI generující varianty a formáty.
  • Lint/audit: kontrola chybějících width/height, nadbytečných metadat, oversized renderů vůči kontejneru.
  • Monitoring: syntetické testy na mobilních profilech, RUM pro LCP/CLS/INP, velikost přenesených dat na session.

Specifika PWA a offline cache

Service Worker může před-cachovat klíčové obrázky pro offline režim (strategie stale-while-revalidate), avšak hlídejte limity úložiště. U galerií používejte range requests a cache-busting přes fingerprinty.

Tmavý režim, 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>. U HDR zařízení testujte jas a gamut (Display-P3) s fallbackem na sRGB.

Konkrétní vzor pro komponentu obrázku

<!-- Znovupouž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 hero obrázek, preload a prioritu.
  • CLS: < 0,1; vždy vymezte rozměry nebo poměr stran obrázku.
  • Celková velikost médií na stránku: směřujte k < 1 MB na mobilu pro landingy; pro galerie používejte progresivní načítání.

Checklist pro produkční nasazení

  1. Pro každý obsahový obrázek definován alt, width/height a strategie lazy/priority.
  2. Varianty pro breakpointy a DPR, preferenční formát AVIF → fallback WebP → JPEG/PNG.
  3. CDN s Accept negociací, správné cache headers a fingerprint v URL.
  4. Build generuje více šířek, kontrola oversized renderů a odstranění metadat.
  5. Audit LCP/CLS/INP na mobilních profilech a reálném RUM.

Závěr

Optimalizace obrázků pro mobilní zařízení je kombinací formátů nové generace, responzivního dodání, prioritizace, pevných rozměrů a inteligentní cache na okraji sítě. Důsledná automatizace ve fázi buildu a observabilita v produkci zajistí, že obsah zůstane ostrý, rychlý a přístupný na celé škále zařízení i sítí.

Súvisiace články