Líné načítání: Jak implementovat správně

Načítejte obrázky pouze když je uživatel potřebuje. Kód, který můžete zkopírovat a ihned použít na svém webu.

9 min čtení Středně pokročilý Únor 2026

Počítač s ikonou načítání a šipkami znázorňujícími líné načítání obrázků

Co je líné načítání a proč na něm záleží

Síla není v tom, aby se všechno načítalo najednou. Když návštěvník přijde na váš web, nevidí všechny obrázky. Vidí jen ty, které jsou v jeho okně prohlížeče. Ostatní? Ty se načtou až když se uživatel dostane dolů na stránku.

Tímhle způsobem ušetříte šířku pásma, zrychilte první načtení a váš web bude létat. Není to žádná magická technologie — je to chytrá implementace. A my vám ukážeme přesně jak na to.

Diagram znázorňující rozdíl mezi klasickým načítáním a lením načítáním obrázků

Webový prohlížeč zobrazující dlouhý obsah s obrázky a ukazující, které jsou viditelné

Jak se líné načítání chová

Představte si stránku s padesáti obrázky. Bez lení načítání? Všech padesát se stáhne, ať je uživatel vidí nebo ne. Výsledek: pomalu, sviští data, skoro žádní mobilní uživatelé se vrací.

S lením načítáním je to jinak. Při prvním načtení se stáhne jen těch osm, devět obrázků co jsou v okně. Zbytek? Ten se stáhne až když se uživatel posouvá dolů. Jednoduchý přístup, obrovský rozdíl v rychlosti.

A to nejlepší — můžete to mít rozpracované během jednoho odpoledne.

Praktická implementace

Tady začíná to zábavné. Máte tři možnosti jak na to jít — každá má svoje plusy.

Metoda 1: Native loading attribute

Nejjednoduší, podporováno všemi moderními prohlížeči


                  <img src="obrazek.jpg" alt="Popis" loading="lazy">

Přidáte jen jeden atribut a hotovo. Prohlížeč sám rozhodne kdy si obrázek stáhne. Není to nejpřesnější, ale funguje to. Pro větší weby s jednoduchým layoutem je to ideální.

Metoda 2: Intersection Observer API

Maximální kontrola, nejlepší pro komplexní projekty


                  const observer = new IntersectionObserver((entries) => {
                  entries.forEach(entry => { if (entry.isIntersecting) {
                  entry.target.src = entry.target.dataset.src;
                  observer.unobserve(entry.target); } }); });

Tímhle si kontrolujete přesně kdy se obrázek načte. Potřebujete animaci? Přidáte ji. Chcete preload? Jde to. Je to flexibilnější než native atribut, ale vyžaduje to víc kódu.

Metoda 3: JavaScript knihovna

Všechno automaticky, nejméně práce


                  <img class="lazy" data-src="obrazek.jpg" alt="Popis">
                  <script src="lazyload.js"></script>

Třeba lozad.js nebo vanilla-lazyload vám to všechno vyřeší. Jenom přidáte knihovnu a změníte atribut z src na data-src. Není to tak zábavné psát vlastní kód, ale ušetříte čas.

Pokročilé techniky pro lepší výsledky

Máte základy? Teď můžete jít dál. Kombinujte líné načítání s dalšími technikami a uvidíte jak se vám web opravdu rozjede.

Placeholder obrázky — malé, rozmazané verze co se zobrazí první, pak se nahradí plnou kvalitou. Uživatel vidí něco okamžitě, není to nudné čekání. Nebo WebP formáty pro menší velikost souborů. Kombinace všeho dohromady? To je síla.

LQIP technologie (Low Quality Image Placeholder)
Responsive obrázky s srcset atributem
WebP formáty se fallbackem na JPG
Content-visibility CSS pro ještě větší zrychlení

Graf ukazující zlepšení výkonu webu po implementaci pokročilých technik líného načítání

Jak ověřit že to funguje

Implementace je hotova. Ale jak víte že to opravdu funguje? Není to těžké. Otevřete DevTools a koukejte na Network tab.

Otevřete Network tab v DevTools

F12, pak Network. Tady vidíte co se stahuje a kdy.

Načtěte stránku znova

Vidíte kolik obrázků se stáhne hned? Mělo by jich být jen pár — ty co jsou vidět. Zbytek bude čekat.

Posuňte se dolů

Vidíte jak se dynamicky stahují další obrázky? Perfektní. To je přesně co chcete vidět.

Důležitá poznámka na závěr

Líné načítání není všelék. Je to jeden z nástrojů. Aby váš web opravdu létal, kombinujte to s kompresí obrázků, mezipamětí, optimalizací CSS. Není to složité, jen to vyžaduje pořádek.

A pamatujte — měřte vždy. Než a po. Kolik MB ušetříte? O kolik procent zrychlíte? Data vám ukážou jestli se vám práce vyplatila. A věřte nám — vyplatí se.

Nejrychlejší obrázek je ten, který se vůbec nenahrál.
— Princip webové optimalizace

Poznámka k obsahu

Tento článek je čistě vzdělávacího charakteru. Cílem je poskytnout informace a pokyny o implementaci lení načítání obrázků. Každý web je jiný — váš konkrétní případ může vyžadovat specifické řešení. Doporučujeme vždy otestovat změny na vašem prostředí a měřit výsledky. Autorem přesných optimalizací by měl být vývojář, který zná strukturu vašeho projektu.