Obrázky a rýchlosť stránky: formáty, veľkosti, lazy loading

Prečo obrázky rozhodujú o čase načítania

Google píše, že obrázky často najviac prispievajú k celkovej veľkosti stránky, a stránky sa tak môžu načítavať pomaly a draho. Dve z metrík Core Web Vitals závisia priamo od obrázkov. Largest Contentful Paint (LCP) meria načítanie: Google odporúča, aby sa najväčší prvok objavil počas prvých 2,5 sekundy od začiatku načítania stránky. Na mnohých stránkach je týmto prvkom obrázok, napríklad veľká fotka navrchu. Cumulative Layout Shift (CLS) meria vizuálnu stabilitu a mal by zostať pod 0,1. Obrázky, ktoré prídu bez rezervovaného miesta, posunú text nadol a túto hodnotu zvýšia.

Správny formát

• Fotky: JPEG funguje všade. WebP a AVIF bývajú pri podobnej kvalite výrazne menšie.
• Grafika s ostrými hranami alebo priehľadnosťou: PNG, alebo WebP a AVIF, ktoré tiež podporujú priehľadnosť.
• Logá a ikony: SVG, pretože zostáva ostré v každej veľkosti a býva veľmi malé.
• Vyhľadávanie Google podporuje obrázky v atribúte src vo formátoch BMP, GIF, JPEG, PNG, WebP, SVG a AVIF.

Ak ponúkaš WebP alebo AVIF, môžeš si v elemente picture ponechať JPEG ako záložnú variantu. Prehliadač vyberie prvý zdroj, ktorému rozumie.

Správna veľkosť

Obrázok široký 2 400 pixelov, ktorý sa zobrazuje na 600 pixeloch, plytvá väčšinou svojich bajtov. Exportuj obrázky približne v šírke, v akej sa zobrazujú, a pre ostré displeje približne v dvojnásobnej šírke. Potom ich skomprimuj. V mnohých programoch na obrázky stačí pre fotky na webe nastavenie kvality okolo stredu stupnice. Skôr ako nahradíš originál, skontroluj výsledok v plnej veľkosti.

srcset a sizes

Jeden súbor sa nikdy nehodí na všetky obrazovky. Pomocou srcset ponúkneš niekoľko súborov toho istého obrázka a uvedieš šírku každého súboru. Pomocou sizes prehliadaču povieš, aký široký bude obrázok zobrazený. Prehliadač potom vyberie najmenší súbor, ktorý je dosť ostrý.

<img src="/img/sofa-800.jpg"
     srcset="/img/sofa-400.jpg 400w, /img/sofa-800.jpg 800w, /img/sofa-1600.jpg 1600w"
     sizes="(max-width: 700px) 100vw, 700px"
     width="800" height="533"
     alt="…">

V tomto príklade obrázok na úzkych obrazovkách vyplní celú šírku a na širších je široký 700 pixelov. Google odporúča vždy ponechať záložnú variantu v atribúte src. Namiesto troch bodiek napíš skutočný alt text.

Width a height proti posunom rozloženia

Bez width a height prehliadač nevie, koľko miesta obrázok potrebuje, kým súbor nepríde. Text pod ním potom poskočí nadol. Sprievodca web.dev k posunom rozloženia radí: pri obrázkoch a videách vždy uvádzajte atribúty width a height, s pixelovou veľkosťou súboru alebo aspoň so správnym pomerom strán. Moderné prehliadače z týchto hodnôt nastavia predvolený pomer strán obrázka a miesto si rezervujú. V CSS udržia width: 100% a height: auto obrázok pružný. Ak atribúty nastaviť nemôžeš, sprievodca uvádza ako alternatívu vlastnosť CSS aspect-ratio.

Lazy loading

S loading="lazy" prehliadač načíta obrázok až vtedy, keď sa priblíži k viditeľnej oblasti. Pri obrázkoch nižšie na stránke to šetrí dáta. Google o lazy loadingu hovorí: nepridávajte ho k obsahu, ktorý bude pravdepodobne viditeľný hneď, ako používateľ stránku otvorí. Vstavaný lazy loading prehliadača je k dispozícii pre obrázky a iframy.

Obrázok LCP

Najväčší obrázok navrchu, často úvodný obrázok (hero) alebo hlavná fotka produktu, je najdôležitejším súborom stránky. Sprievodca web.dev k LCP hovorí: obrázok LCP nikdy nenačítavajte lenivo. fetchpriority="high" je pre prehliadač nápoveda, aby ho načítal skoro. Podľa sprievodcu už vysoká priorita pri viac ako jednom alebo dvoch obrázkoch nepomáha. Obrázky, ktorých adresu skriptová knižnica schováva v data-src, alebo ktoré sú len pozadím v CSS, prehliadač nájde neskoro. Pre obrázok na pozadí sprievodca uvádza prednačítanie pomocou link rel="preload" v HTML. Čas načítania skrátia aj AVIF alebo WebP a menší súbor.

Aby si videl, ako sa tvojim stránkam darí, Google odkazuje na prehľad Core Web Vitals v Search Console. Pri jednotlivej stránke ukážu výkonnostné nástroje tvojho prehliadača, ktorý prvok je prvkom LCP a ktoré prvky posúvajú rozloženie. Meraj pred zmenou a po nej, aby si vedel, či pomohla.

Krátky kontrolný zoznam

• Načítava sa najväčší obrázok navrchu normálne, nie lenivo?
• Má každý img width a height, alebo je miesto rezervované pomocou aspect-ratio?
• Je každý súbor približne taký široký, ako sa zobrazuje, a je skomprimovaný?
• Sú veľké fotky k dispozícii v niekoľkých šírkach pomocou srcset a sizes?
• Sú tu súbory JPEG alebo PNG, ktoré by mohli byť WebP alebo AVIF?

Práca s Do4U

Kontrola obrázkov prečíta jednu stránku a každý obrázok na nej. Pri každom súbore uvedie formát, veľkosť súboru a pixely a z HTML width a height, loading, fetchpriority, srcset a sizes, zdroje v picture a obrázky na pozadí v atribútoch style. Do4U z HTML odhadne pravdepodobný obrázok LCP. Nemeria ho, pretože skutočný prvok LCP určuje prehliadač. Dostaneš tabuľku obrázkov so zisteniami, celkovú veľkosť a krátke zhrnutie. Obrázky, ktoré vkladá JavaScript, a obrázky na pozadí z externých súborov CSS zahrnuté nie sú. AI sa nepoužíva a kontrola je zadarmo, s denným limitom.

Do4U nájde upozornenia, ty skontroluješ a rozhodneš. Skôr ako stránku zmeníš, over prvok LCP vo výkonnostných nástrojoch svojho prehliadača.