Jak optimalizovat obrázky pro zlepšení Core Web Vitals?
Obrázky optimalizujte kompresí, používáním moderních formátů jako WebP či AVIF a implementací lazy loading. Klíčové je v HTML definovat atributy width a height, čímž zamezíte posunům obsahu (CLS), a zajistit správnou velikost vzhledem k zařízení pro zlepšení LCP.
Obrázky jsou často největší brzdou webu a negativně ovlivňují metriky Core Web Vitals (CWV), zejména Largest Contentful Paint (LCP) a Cumulative Layout Shift (CLS). Pro zlepšení LCP musíte snížit datovou velikost a čas odezvy (TTFB) u hlavních obrázků (hero images). To zahrnuje přechod na formáty WebP nebo AVIF, které nabízejí lepší kompresi než JPEG či PNG. Používejte také responzivní obrázky (přes atributy `srcset` a `sizes`), aby prohlížeč stahoval jen velikost odpovídající displeji uživatele. Pro CLS je kritické definovat `width` a `height` v HTML značkách nebo přes CSS vlastnost aspect-ratio. To prohlížeči umožní rezervovat místo dříve, než se obrázek stáhne, a zabrání „skákání“ obsahu. U obrázků pod záhybem (below-the-fold) zapněte nativní lazy loading (`loading="lazy"`). Nakonec zvažte použití CDN, aby se obrázky doručovaly z lokality blíže k uživateli, což sníží latenci a zlepší výkon.
Průvodce krok za krokem
Převod na WebP/AVIF
Nahraďte staré formáty moderními alternativami, které nabízejí vyšší kvalitu při menší velikosti souboru.
Definování rozměrů
Ke všem značkám <img> doplňte atributy šířky a výšky, abyste předešli nečekaným posunům layoutu.
Implementace Srcset
Využívejte responzivní atributy pro servírování různých rozlišení podle velikosti obrazovky.
Aktivace Lazy Loading
U nekritických obrázků zapněte odložené načítání, abyste urychlili úvodní vykreslení stránky.
Optimalizace Hero obrázků
Zajistěte, aby se hlavní obrázek nahoře nečítal prioritně (preload) a nepoužíval lazy loading.
Pro tipy
- Používejte nástroje jako TinyPNG nebo Squoosh pro kompresi bez viditelné ztráty kvality.
- Místo textu v obrázcích používejte raději CSS a webové fonty – je to lepší pro přístupnost i SEO.
- Nastavte preload pro hlavní obrázek (LCP), čímž prohlížeči řeknete, že je prioritní.
- Ujistěte se, že vaše CDN automaticky servíruje nejlepší formát podle prohlížeče uživatele.
Jak pSeoMatic pomáhá
pSeoMatic analyzuje média na vašem webu a identifikuje neoptimalizované obrázky, které brzdí vaše Core Web Vitals. Přesným určením chybějících rozměrů nebo příliš velkých souborů vám pSeoMatic poskytne jasný plán pro zlepšení LCP a CLS skóre, což vede k lepším pozicím v SERP.
Vyzkoušejte pSeoMatic zdarmaSouvisející dotazy
Škodí lazy loading mému SEO?
Ne, pokud je implementován správně pomocí nativní podpory prohlížeče nebo SEO-friendly JS knihoven.
Jaký je nejlepší formát pro webové obrázky?
V současnosti nabízí nejlepší kompresi AVIF, těsně následovaný formátem WebP.
Co způsobují 'posuny layoutu' u obrázků?
Když se obrázek načte bez definovaných rozměrů, odsunete zbytek obsahu dolů, což kazí uživatelský zážitek.
Související průvodci
Jste připraveni to uvést do praxe?
pSeoMatic generuje tisíce SEO-optimalizovaných stránek z vašich dat.