Optimalizace obrázků
Také známo jako Image optimization, Responzivní obrázky
Stručně
Moderní formáty, správná velikost pro každou obrazovku a pevné rozměry — obvykle nejrychlejší výhra na obsahu.
Optimalizace obrázků znamená poslat nejmenší soubor, který ještě vypadá dobře: AVIF nebo WebP místo JPEG, šířku blízkou tomu, co obrazovka potřebuje, místo 4 000 px, a `srcset`/`sizes`, aby si prohlížeč vybral. Obrázky jsou často největší částí váhy stránky, a proto se hledá nejdřív u nich.
Klasika: 8 MB z foťáku
Klient pošle fotky produktů rovnou z foťáku: 6000 × 4000 px, 8 MB JPEG, čtyřicet kusů v galerii. Stejná fotka jako WebP o šířce 1200 px má kolem 120 kB a na telefonu, na kterém se bude prohlížet, vypadá stejně. Z 320 MB se stane necelých 5 MB a galerie je použitelná i ve vlaku.
Inženýrská odpověď není hrdinně optimalizovaný frontend, ale pipeline při nahrání: zmenšit při uploadu nebo při doručení (`next/image`, CDN s transformacemi, `sharp` ve workeru), originál držet jako zdroj pravdy, servírovat AVIF/WebP s fallbackem na JPEG a v nahrávacím formuláři mít limit velikosti s jasnou chybou.
Nejdřív místo, pak bajty
Obrázek bez `width` a `height` má do načtení nulovou výšku — a pak posune cenu a tlačítko dolů po stránce. To je jedna z nejčastějších příčin CLS a oprava nic nestojí: nastavte oba atributy (nebo použijte `aspect-ratio` v CSS) a prohlížeč si místo rezervuje hned. Poměr stran 16:9 se změní na pevný box ještě před prvním bajtem obrázku.
Buďte poctiví i u formátu. AVIF komprimuje nejvíc, ale kóduje se déle; u produktu s tisíci obrázků se náklad na kódování projeví v čase buildu nebo na faktuře za CDN. AVIF použijte tam, kde záleží na ušetřených datech, JPEG jako univerzální fallback — a nikdy neposílejte přes velké SVG nebo animovaný GIF tam, kde by stačilo video nebo animovaný WebP.
Zdroje
Související pojmy
Lazy načítání
Načtěte obrázek, stránku nebo těžkou komponentu až ve chvíli, kdy ji bude potřeba — ne při načtení stránky.
Core Web Vitals
Tři metriky z reálného provozu: LCP pro načtení, INP pro odezvu a CLS pro vizuální stabilitu.
Responzivní design
Jeden layout, který se přizpůsobí obrazovce, místo tří samostatných webů — a musí přežít 320 px i 4K monitor.