Optimalizace obrázků pro mobily

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 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 (loading strategie, 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ší na enkó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; šetřete pomocí pngquant a palet.
• SVG: ideální pro loga a ikony; škáluje bez ztráty ostrosti, možnost inline 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 prohlížeči říká, jak široký bude obrázek ve viewportu. <picture> řeší art direction a formátovou preferenci.

<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č vymezil 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í 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í 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 palette 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 keys (šířka, DPR, formát). Udržujte Cache-Control a ETag/Last-Modified pro efektivní revalidate.

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. simple resize

Art direction znamená různé ořezy/kompozice pro různé breakpoints (např. mobilní výřez obličeje vs. desktopová šířka). Řešte pomocí <picture> s media atributy 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 oversized 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í renderingu v mobilních prohlížečích.

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

loading="lazy" odkládá načtení 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é nahrává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 structured data

Správné alt, popisky, width/height, lazy loading jen 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, přebývajících metadat, oversize vs. kontejner.
• Monitoring: synthetic testy na mobilních profilech, RUM pro LCP/CLS/INP, velikost přenes. dat na session.

Specifika PWA a offline cache

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

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 gamut (Display-P3) s fallbackem na sRGB.

Konkrétní vzor pro komponentu obrázku

<!-- Reusable 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, prioritu.
• CLS: < 0,1; vždy vymezte rozměry/obrazový poměr.
• Celková velikost médií na stránku: směřujte k < 1 MB na mobilu pro landingy; pro galerie použijte 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 negotiation, 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 buildu a observabilita v produkci zajistí, že obsah zůstane ostrý, rychlý a přístupný na celé škále zařízení i sítí.