Obrázky a rychlost stránky: formáty, velikosti, lazy loading

Proč obrázky rozhodují o době načítání

Google píše, že obrázky často nejvíce přispívají k celkové velikosti stránky, a stránky se tak mohou načítat pomalu a draze. Dvě z metrik Core Web Vitals závisejí přímo na obrázcích. Largest Contentful Paint (LCP) měří načítání: Google doporučuje, aby se největší prvek objevil během prvních 2,5 sekundy od začátku načítání stránky. Na mnoha stránkách je tímto prvkem obrázek, například velká fotka nahoře. Cumulative Layout Shift (CLS) měří vizuální stabilitu a měl by zůstat pod 0,1. Obrázky, které dorazí bez rezervovaného místa, posunou text dolů a tuto hodnotu zvýší.

Správný formát

• Fotky: JPEG funguje všude. WebP a AVIF bývají při podobné kvalitě výrazně menší.
• Grafika s ostrými hranami nebo průhledností: PNG, nebo WebP a AVIF, které také umějí průhlednost.
• Loga a ikony: SVG, protože zůstává ostré v každé velikosti a bývá velmi malé.
• Vyhledávání Google podporuje obrázky v atributu src ve formátech BMP, GIF, JPEG, PNG, WebP, SVG a AVIF.

Pokud nabízíš WebP nebo AVIF, můžeš si v elementu picture ponechat JPEG jako záložní variantu. Prohlížeč vybere první zdroj, kterému rozumí.

Správná velikost

Obrázek široký 2 400 pixelů, který se zobrazuje na 600 pixelech, plýtvá většinou svých bajtů. Exportuj obrázky zhruba v šířce, v jaké se zobrazují, a pro ostré displeje zhruba v dvojnásobné šířce. Pak je zkomprimuj. V mnoha programech na obrázky stačí pro fotky na webu nastavení kvality kolem středu stupnice. Než nahradíš originál, zkontroluj výsledek v plné velikosti.

srcset a sizes

Jeden soubor se nikdy nehodí pro všechny obrazovky. Pomocí srcset nabídneš několik souborů téhož obrázku a uvedeš šířku každého souboru. Pomocí sizes prohlížeči řekneš, jak široký bude obrázek zobrazen. Prohlížeč pak vybere nejmenší soubor, který je dost 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 příkladu obrázek na úzkých obrazovkách vyplní celou šířku a na širších je široký 700 pixelů. Google doporučuje vždy ponechat záložní variantu v atributu src. Místo tří teček napiš skutečný alt text.

Width a height proti posunům rozvržení

Bez width a height prohlížeč neví, kolik místa obrázek potřebuje, dokud soubor nedorazí. Text pod ním pak poskočí dolů. Průvodce web.dev k posunům rozvržení radí: u obrázků a videí vždy uvádějte atributy width a height, s pixelovou velikostí souboru nebo alespoň se správným poměrem stran. Moderní prohlížeče z těchto hodnot nastaví výchozí poměr stran obrázku a místo si rezervují. V CSS udrží width: 100% a height: auto obrázek pružný. Pokud atributy nastavit nemůžeš, průvodce uvádí jako alternativu vlastnost CSS aspect-ratio.

Lazy loading

S loading="lazy" prohlížeč načte obrázek až tehdy, když se přiblíží k viditelné oblasti. U obrázků níže na stránce to šetří data. Google o lazy loadingu říká: nepřidávejte ho k obsahu, který bude pravděpodobně vidět hned, jak uživatel stránku otevře. Vestavěný lazy loading prohlížeče je k dispozici pro obrázky a iframy.

Obrázek LCP

Největší obrázek nahoře, často úvodní obrázek (hero) nebo hlavní fotka produktu, je nejdůležitějším souborem stránky. Průvodce web.dev k LCP říká: obrázek LCP nikdy nenačítejte líně. fetchpriority="high" je pro prohlížeč nápověda, aby ho načetl brzy. Podle průvodce už vysoká priorita u více než jednoho nebo dvou obrázků nepomáhá. Obrázky, jejichž adresu skriptová knihovna schovává v data-src, nebo které jsou jen pozadím v CSS, prohlížeč najde pozdě. Pro obrázek na pozadí průvodce uvádí přednačtení pomocí link rel="preload" v HTML. Dobu načítání zkrátí také AVIF nebo WebP a menší soubor.

Abys viděl, jak si tvé stránky vedou, Google odkazuje na přehled Core Web Vitals v Search Console. U jednotlivé stránky ukážou výkonnostní nástroje tvého prohlížeče, který prvek je prvkem LCP a které prvky posouvají rozvržení. Měř před změnou a po ní, abys věděl, zda pomohla.

Krátký kontrolní seznam

• Načítá se největší obrázek nahoře normálně, ne líně?
• Má každý img width a height, nebo je místo rezervováno pomocí aspect-ratio?
• Je každý soubor zhruba tak široký, jak se zobrazuje, a je zkomprimovaný?
• Jsou velké fotky k dispozici v několika šířkách pomocí srcset a sizes?
• Jsou tu soubory JPEG nebo PNG, které by mohly být WebP nebo AVIF?

Práce s Do4U

Kontrola obrázků přečte jednu stránku a každý obrázek na ní. U každého souboru uvede formát, velikost souboru a pixely a z HTML width a height, loading, fetchpriority, srcset a sizes, zdroje v picture a obrázky na pozadí v atributech style. Do4U z HTML odhadne pravděpodobný obrázek LCP. Neměří ho, protože skutečný prvek LCP určuje prohlížeč. Dostaneš tabulku obrázků se zjištěními, celkovou velikost a krátké shrnutí. Obrázky, které vkládá JavaScript, a obrázky na pozadí z externích souborů CSS zahrnuty nejsou. AI se nepoužívá a kontrola je zdarma, s denním limitem.

Do4U najde upozornění, ty zkontroluješ a rozhodneš. Než stránku změníš, ověř prvek LCP ve výkonnostních nástrojích svého prohlížeče.