← Images / images / tutorials

Optimalizace zobrazení na mobilních zařízeních

Pro optimalizaci zobrazování obrázků na mobilních zařízeních můžete použít lazy loading. Pomáhá řešit běžné problémy mobilního prohlížení, jako je pomalé síťové připojení nebo omezený výkon zařízení.

Lazy loading má dvě hlavní výhody:

• Rychlejší načítání stránek : Obrázky se načítají postupně, jak uživatel posouvá stránku, místo aby se všechny načetly najednou při jejím otevření.
• Nižší náklady na doručování obrázků : Při používání Cloudflare Images platíte pouze za načtení obrázků, které uživatel skutečně vidí. Díky lazy loadingu se obrázky, ke kterým se uživatel nedostane, nezapočítávají do zpoplatněných požadavků Images.

Lazy loading je nativně podporováno ve všech hlavních prohlížečích, včetně Chrome, Safari, Firefox, Opera a Edge.

Pokud atribut loading neupravíte, většina prohlížečů standardně načte všechny obrázky na stránce a upřednostní ty, které jsou nejblíže viditelné oblasti. Toto chování můžete změnit úpravou loading atribut.

Existují dvě možné loading atributy pro <img> značky: lazy a eager.

Lazy loading se doporučuje pro většinu obrázků. Díky němu se načítání zdrojů, jako jsou obrázky, odloží, dokud se nedostanou do určité vzdálenosti od viewportu. Pokud obrázek tuto hranici nedosáhne, nenačte se vůbec.

Příklad úpravy loading atribut vašeho <img> značky tak, aby byly "lazy":

<img src="example.com/cdn-cgi/width=300/image.png" loading="lazy" />

Pokud máte obrázky, které se nacházejí v zobrazitelné části stránky, doporučuje se pro ně použít eager loading místo lazy loading. Eager loading načte prvek hned při počátečním načtení stránky bez ohledu na jeho umístění na stránce.

Příklad úpravy loading atribut vašeho <img> značky tak, aby byly "eager":

<img src="example.com/cdn-cgi/width=300/image.png" loading="eager" />