# Optimalizácia obrázkov

> Optimalizácia obrázkov znamená posielať obrázky v správnej veľkosti a formáte a tie, ktoré sú pod okrajom obrazovky, načítať až vtedy, keď sú potrebné.

- **Číslo kontroly:** P6
- **Oblasť:** [Výkon](https://be1st.ai/sk/glossary/performance)
- **Nástroj:** [SEO + Bezpečnosť + Výkon](https://be1st.ai/sk/tools/ssp-audit)
- **Stránka:** https://be1st.ai/sk/glossary/performance/image-optimization

## Prečo na tom záleží

Obrázky sú typicky najväčšia časť stránky (50–70 % dát). Bez lazy loadingu sa načítavajú všetky obrázky naraz, aj tie, ktoré používateľ nikdy neuvidí. Bez srcset mobilné zariadenia stiahnu desktopové obrázky zbytočne veľké. Moderné formáty ako WebP sú o 25–35 % menšie ako JPEG.

## V praxi

Medium používa lazy loading a srcset pre všetky obrázky v článkoch: načítava len obrázky viditeľné vo viewport a pre mobil posiela menšie verzie. Ak váš blog má 20 obrázkov po 500 KB bez lazy loadingu, používateľ stiahne 10 MB dát hneď pri načítaní stránky.

## Ako to be1st kontroluje

Kontroluje, či obrázky používajú lazy loading (loading='lazy') a responzívne veľkosti cez atribút srcset. Obrázky nad zlomom (prvé dva, fetchpriority='high', logo v hlavičke) lazy loading mať nemajú, preto sa im to nezapočíta. Moderné formáty (WebP, AVIF) sú odporúčanie, kontrola ich nehodnotí. Lazy loading odkladá načítanie obrázkov mimo viewportu, srcset umožňuje prehliadaču vybrať správnu veľkosť obrázka pre dané zariadenie.

[SEO + Bezpečnosť + Výkon](https://be1st.ai/sk/tools/ssp-audit), záložka Výkon.

Každá kontrola skončí ako: V poriadku, Varovanie, Chyba.

## Zdroje

- [Browser-level image lazy loading for the web](https://web.dev/articles/browser-level-image-lazy-loading) (web.dev)
- [Serve responsive images](https://web.dev/articles/serve-responsive-images) (web.dev)
- [The Image Embed element - img](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img) (MDN Web Docs)

## Súvisiace pojmy

- [Celková váha stránky](https://be1st.ai/sk/glossary/performance/total-page-weight): Celková váha stránky je súčet veľkostí všetkého, čo stránka stiahne: HTML, CSS, JavaScript, obrázky a fonty.
- [Počet HTTP požiadaviek](https://be1st.ai/sk/glossary/performance/request-count): Počet požiadaviek je počet HTTP požiadaviek, ktoré prehliadač pošle pri načítaní stránky. Každý súbor, od skriptu po ikonu, je jedna požiadavka.
- [Nevyužité CSS (CSS coverage)](https://be1st.ai/sk/glossary/performance/css-coverage): CSS coverage je podiel stiahnutého CSS, ktorý stránka naozaj použije. Zvyšok je nevyužitý kód, ktorý musí prehliadač aj tak spracovať.
- [Nevyužitý JavaScript (JS coverage)](https://be1st.ai/sk/glossary/performance/js-coverage): JS coverage je podiel stiahnutého JavaScriptu, ktorý sa na stránke naozaj spustí. Nevyužitý kód aj tak stojí čas na stiahnutie a spracovanie.
- [Čas odozvy servera (TTFB)](https://be1st.ai/sk/glossary/performance/response-time-ttfb): Time to First Byte (TTFB) je čas od odoslania požiadavky po prijatie prvého bajtu odpovede servera. Ukazuje, ako rýchlo odpovedá server a sieť.
- [Veľkosť HTML (výkon)](https://be1st.ai/sk/glossary/performance/html-size): Veľkosť HTML je váha HTML dokumentu stránky v kilobajtoch. Prehliadač ho musí celý stiahnuť a spracovať, kým stránku ukáže.