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í
- Pro každý obsahový obrázek definován alt, width/height a strategie lazy/priority.
- Varianty pro breakpointy a DPR, preferenční formát AVIF → fallback WebP → JPEG/PNG.
- CDN s Accept negotiation, správné cache headers a fingerprint v URL.
- Build generuje více šířek, kontrola oversized renderů a odstranění metadat.
- 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í.
