Komprese obrázků online patří mezi nejefektivnější způsoby, jak snížit objem dat, která musí prohlížeč stáhnout při načítání stránky. Pokud ji zkombinujete s lazy loadingem, máte rázem dvojici technik, které společně dokážou zredukovat dobu načítání webu i o desítky procent. Pojďme si vysvětlit, jak obě metody fungují, proč se navzájem doplňují a co z jejich nasazení konkrétně získáte.
Co je lazy loading a proč na něm záleží
Lazy loading je, stručně řečeno, technika odloženého načítání obsahu. Prohlížeč při otevření stránky nenačte všechny obrázky najednou, ale stahuje jen ty, které uživatel skutečně vidí. Jakmile uživatel scrolluje níže, načítají se další obrázky průběžně. Výsledkem je kratší čas do první interakce se stránkou a nižší spotřeba dat na straně návštěvníka.
Lazy loading je dnes nativně podporován v moderních prohlížečích přes atribut loading=“lazy“ v HTML tagu obrázku. Nepotřebujete tedy žádnou externí knihovnu ani složitý JavaScript. Stačí jediný atribut a stránka se chová podstatně jinak.
Jak lazy loading ovlivňuje Core Web Vitals
Google měří rychlost webu pomocí sady metrik Core Web Vitals. Mezi ně patří LCP (Largest Contentful Paint), který sleduje, jak rychle se vykreslí největší viditelný prvek stránky. Obrázky jsou nejčastějším prvkem, který LCP ovlivňuje. Správně nastavený lazy loading pomáhá zkrátit LCP tím, že prohlížeč soustředí zdroje na viditelnou část stránky místo na obsah desítky stránek níže.
Weby s lepším skóre Core Web Vitals se umísťují výše v organickém vyhledávání Googlu. Zrychlení načítání tedy přináší přímý SEO efekt, nikoliv jen lepší uživatelský zážitek.
Proč samotný lazy loading nestačí
Lazy loading řeší, kdy se obrázky načtou. Neřeší však, jak velké tyto soubory jsou. Obrázek s rozlišením 4000 × 3000 pixelů, uložený bez komprese v desítkách megabajtů, se načte opožděně, jenže stejně pomalu. Lazy loading proto ve spojení s neoptimalizovanými soubory nedosahuje plného potenciálu.
Právě tady je třeba nasadit kompresi obrázků. Cílem je zmenšit fyzickou velikost souboru tak, aby si obrázek zachoval přijatelnou vizuální kvalitu, přičemž jeho datový objem klesne o 60 až 80 %. Kombinace obou technik pak funguje následovně: lazy loading určuje pořadí načítání, komprese zajišťuje, že každý jednotlivý soubor se stáhne co nejrychleji.
Studie zaměřené na optimalizaci výkonu webových stránek ukazují, že samotná komprese obrázků snižuje průměrnou hmotnost stránky řádově o stovky kilobajtů, přičemž kombinace s lazy loadingem tyto úspory dále zesiluje u stránek s rozsáhlými galeriemi.
Lossy a lossless komprese. Kterou vybrat
Komprese se dělí na dva základní typy. Lossy komprese (ztrátová) zmenší soubor výrazněji tím, že odstraní část dat, která lidské oko stejně nevnímá. Výsledkem bývá obrázek, který vizuálně téměř nepoznáte od originálu, ale váží pouhou třetinu. Lossless komprese (bezztrátová) zachovává veškerá data a obrázek je zcela totožný s originálem, jen efektivněji zakódovaný. Úspory jsou menší, ale kvalita je absolutní.
Pro fotografie na webu platí, že lossy komprese v rozumné míře (kvalita 75 až 85 %) je optimální volba. Pro grafické prvky s průhledností nebo přesnými barvami se více hodí lossless přístup nebo formát WebP.
Formáty obrázků a jejich vliv na rychlost
Volba formátu přímo určuje výslednou velikost souboru. JPEG zůstává spolehlivou volbou pro fotografie, PNG se hodí tam, kde potřebujete průhlednost. Moderní formát WebP nabízí ve srovnání s JPEG typicky o 25 až 35 % menší soubory při srovnatelné kvalitě. Nejnovější formát AVIF jde ještě dál, ovšem podpora v prohlížečích není tak plošná.
Pokud web stále pracuje výhradně s JPEG a PNG, přechod na WebP v kombinaci s kompresí představuje jeden z nejrychlejších způsobů, jak snížit datový objem bez nutnosti měnit design nebo obsah.
Responzivní obrázky – třetí vrstva optimalizace
Lazy loading a komprese tvoří základ, responzivní obrázky jej doplňují. Atribut srcset v HTML umožňuje prohlížeči stáhnout obrázek ve velikosti odpovídající rozlišení obrazovky. Mobilní zařízení tak nezíská fotografii o šířce 1920 pixelů, ale verzi přizpůsobenou menšímu displeji. Tento přístup dále snižuje množství přenesených dat, zvláště u uživatelů na mobilních sítích.
Praktický postup nasazení na webu
Nasazení obou technik nevyžaduje vývojářské znalosti na úrovni senior programátora. Postup lze shrnout do čtyř kroků:
- Zkomprimujte stávající obrázky nástrojem pro kompresi obrázků online a nahraďte původní soubory optimalizovanými verzemi. Zde vám pomůže komprimovat obrázky OptiBotnebo jiný relevantní nástroj.
- Přidejte atribut loading=“lazy“ ke všem obrázkům, které nejsou v oblasti viditelné při prvním načtení stránky (above the fold). Hlavní banner a první obrázky v záhlaví lazy loading nenasazujte, jinak zhoršíte LCP.
- Ověřte výsledky v Google PageSpeed Insights nebo nástrojích GTmetrix. Sledujte skóre LCP, TBT a celkovou hmotnost stránky.
- Opakujte pravidelně po každém přidání nových obrázků, protože nekomprimované soubory se na web vracejí průběžně s novým obsahem.
Co z toho plyne pro správce webu
Weby, které kombinují kompresi s lazy loadingem, jsou měřitelně rychlejší. Rychlost přitom přestala být čistě technickým parametrem: Google ji zohledňuje v organickém rankingu, uživatelé odcházejí ze stránek, které se načítají déle než tři sekundy, a mobilní sítě trestají každý zbytečný kilobajt pomalým přenosem. Web, který obě techniky nasadí najednou, tak řeší hned tři problémy zároveň.
