Podnikání

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

Ján Gašparík 0

Optimalizace obrázků

Obrázky patří mezi hlavní zdroje zatížení 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ů) v pravý č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 u starších zařízení může být omezená podpora.
  • 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; doporučuje se progresivní JPEG, případně mozjpeg.
  • PNG: bezeztrátová grafika, ostré hrany, alfa kanál; úsporu lze dosáhnout pomocí pngquant a palet.
  • SVG: ideální pro loga a ikony; škáluje bez ztráty ostrosti, možnost inline použití a stylování přes CSS.

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

srcset umožňuje nabídnout varianty podle šířky (w) a hustoty pixelů (x), sizes pak prohlížeči sděluje, 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

U každého elementu <img> definujte atributy width a height (nebo aspect-ratio v CSS), aby si prohlížeč vyhradilo místo a předešlo 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: aplikujte loading="lazy" spolu s decoding="async".
  • Správná doména: implementujte <link rel="preconnect"> ke CDN, čímž zkrátíte handshake.
<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í hodnoty kvality jsou: AVIF ~30–45, WebP ~70–80, JPEG ~60–75; ověřujte vizuální kvalitu (SSIM/PSNR nejsou vše). Pro ilustrace používejte bezeztrátový WebP/AVIF s technikou palette.

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

Odstraňte EXIF a nepotřebná metadata (například GPS). Zachovávejte nebo konvertujte barevné profily (sRGB) pro konzistentní zobrazování. V HDR pipeline dbejte na kompatibilitu a fallback řešení do SDR.

CDN a edge transformace

Moderní CDN (Image CDN) provádějí on-the-fly konverze formátů, změny rozměrů, ořez, nastavení kvality, smart crop a konverzi do AVIF/WebP podle hlavičky Accept. Přitom generují správné cache keys (šířka, DPR, formát). Zachovejte Cache-Control a ETag/Last-Modified pro efektivní revalidaci.

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

U pozadí použijte image-set() a media dotazy. Preferujte object-fit pro korektní ořez v kontejneru <img> místo použití CSS pozadí, pokud se jedná o obsahový obrázek (zlepšení přístupnosti 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é měřítko

Art direction znamená různé ořezy a kompozice pro různé breakpointy (například mobilní výřez obličeje versus desktopová šířka). Řešte to 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 nadměrně velkým obrázkům v úzkých sloupcích. Použijte max-width: 100% a omezte rozměry kontejneru; u složitějších layoutů pomáhá content-visibility a contain ke 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 oblast zobrazení. Přidejte decoding="async" pro neblokující dekódování a importance="low" (u některých prohlížečů). Používejte sentinel s threshold v Intersection Observeru pro postupné načítání galerií.

Ikony a vektorová grafika

Preferujte SVG ikonografii. Pro rastrový fallback generujte varianty @2x/@3x. Icon fonts již nejsou ideální z důvodů přístupnosti, ostrého vykreslování a problému FOUT; SVG sprite nebo použití <use> jsou lepší řešení.

Generování posterů a blur-up technika

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

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

Neexistuje univerzální nastavení kvality; sledujte metriky (LCP, datový objem, míra odchodů, 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 v atributu alt; dekorativní obrázky mají prázdný alt="" nebo jsou řešeny v CSS. Nepřenášejte text jako součást obrázku (zhoršení čitelnosti, SEO) – pokud to nelze jinak, přidejte aria-label nebo figcaption.

SEO a strukturovaná data

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

Pipeline nástrojů: build, audit a automatizace

  • Build: Sharp, Squoosh, Imaginary, Thumbor, CI pipeline generující varianty a formáty.
  • Lint/audit: kontrola chybějících atributů width/height, přebytečných metadat, oversize obrázků oproti kontejneru.
  • Monitoring: syntetické testy na mobilních profilech, reálné uživatelské měření (RUM) pro LCP/CLS/INP, velikost přenesených dat na session.

Specifika PWA a offline cache

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

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>. U HDR zařízení testujte jas a barevný gamut (např. Display-P3) a zajistěte fallback 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): méně než 2,5 sekundy na mobilních zařízeních; optimalizujte hero obrázek, preload a nastavení priority.
  • CLS: méně než 0,1; vždy definujte rozměry nebo poměr stran obrázků.
  • Celková velikost médií na stránku: cílově do 1 MB na mobilních zařízeních u landing page; u galerií použijte progresivní načítání.

Checklist pro produkční nasazení

  1. U každého obsahového obrázku definovaný alt, width/height a strategie lazy nebo priorita načítání.
  2. Varianty pro breakpointy a DPR, preferovaný formát AVIF → fallback na WebP → JPEG/PNG.
  3. CDN s Accept negotiation, správné cache hlavičky a fingerprint v URL.
  4. Build generuje více šířek, kontrola oversized renderů a odstranění metadat.
  5. Audit metrik LCP, CLS, INP na mobilních profilech a pomocí reálných uživatelských měření (RUM).

Závěr

Optimalizace obrázků pro mobilní zařízení je kombinací moderních formátů nové generace, responzivního dodání, prioritizace, pevně daných rozměrů a inteligentní cache na okraji sítě. Důsledná automatizace v procesu build a monitorování v produkci zaručí, že obsah zůstane ostrý, rychlý a přístupný na široké škále zařízení i sítí.

Ján Gašparík

Website:

Related Story