Proč PageSpeed hlásí velké obrázky, i když web vypadá dobře
Na úvodní stránce webu stavební firmy byla sekce Naše služby s kartami ve dvou šířkách. Fotky v kartách se zobrazovaly na šířku 437 nebo 660 pixelů. Prohlížeč ale stahoval originály široké kolem 1 920 pixelů, tedy tři až čtyřikrát víc dat, než bylo potřeba.
Na monitoru to nepoznáte, fotka vypadá stejně. Pozná to ale návštěvník na mobilních datech, pozná to LCP (doba načtení největšího prvku stránky) a pozná to Google, pro kterého jsou Core Web Vitals jedním ze signálů kvality stránky. PageSpeed Insights na to upozorňuje auditem „Zlepšete zobrazování obrázků' a u tohoto webu odhadoval úsporu kolem 600 KiB jen na mobilu.
Celá úvodní stránka přitom stahovala 1 493 kB fotek. Na mobil i na desktop stejně, protože web neměl jak poznat, co které zařízení skutečně potřebuje.
Proč nestačí převést fotky do AVIF
AVIF je moderní obrazový formát, který při stejné vizuální kvalitě vychází výrazně menší než JPG i WebP. Podporují ho všechny současné hlavní prohlížeče. Pro starší se jako záloha posílá WebP nebo JPG a prohlížeč si sám vybere formát, kterému rozumí. Podrobné srovnání obou formátů a jejich dopad na byznys najdete v článku WebP nebo AVIF: jak moderní formáty obrázků zrychlí web.
Formát ale řeší jen polovinu problému. Fotka široká 1 920 pixelů je i v AVIF pořád fotka široká 1 920 pixelů. Jak velký rozdíl dělá samotný rozměr, ukazuje hero fotka z úvodní stránky:
- originál: 201 kB
- AVIF v šířce 1 350 px: 92 kB
- AVIF v šířce 800 px: 41 kB
- AVIF v šířce 500 px: 19 kB
Správný formát a správný rozměr musí jít ruku v ruce. Teprve pak je úspora skutečně vidět.
Jak fungují automatické náhledy přes srcset a sizes
Princip je jednoduchý: rozměr fotky nevybírá server, ale prohlížeč, a to až ve chvíli, kdy zná skutečnou velikost místa, kam fotku vykreslí. Server mu jen nabídne seznam velikostí v atributu srcset a prohlížeč si z něj vezme nejmenší soubor, který stačí.
Stejný žebříček šířek pro každou fotku
Ke každé nahrané fotce web vygeneruje stejnou řadu šířek: 500, 650, 850, 1 350 a 1 920 px plus originál. Každá verze vzniká v AVIF, WebP i JPG. Platí přitom dvě pravidla:
- Generují se jen šířky menší než originál. Fotka se nikdy uměle nezvětšuje.
- Fotka se zmenšuje jen podle šířky a zachovává si poměr stran. Ořez dál dělá CSS, takže kompozice je na všech zařízeních stejná.
Server tedy vůbec nepotřebuje vědět, jestli fotka skončí v malé kartě, nebo přes celou šířku. Náhledy se vytvoří jednou při prvním zobrazení a pak se v ideálním případě berou z cache.
Prohlížeč počítá s hustotou displeje
Prohlížeč nevybírá podle velikosti obrazovky, ale podle toho, kolik skutečných pixelů fotka zabere. Šířku boxu vynásobí hustotou displeje (DPR). Běžný monitor má DPR 1, telefony obvykle 2 až 3.
PageSpeed pro mobil simuluje telefon široký 412 px s DPR 1,75. Karta služby na dané prezentaci měla šířku 370 px, takže na ostrou fotku potřebuje zhruba 370 × 1,75 ≈ 648 skutečných pixelů. Proto nestačí řídit velikost fotek jen podle šířky obrazovky.
sizes='auto' vyřeší dva rozměry v jednom modulu
U obrázků, které se načítají líně (loading='lazy'), stačí hodnota sizes='auto'. Prohlížeč v tu chvíli už má stránku vyskládanou, změří skutečnou šířku boxu a podle ní vybere soubor. Malá karta si tak vezme 650 px a velká 850 px, bez jakéhokoli nastavení v šabloně.
Chromium prohlížeče (Chrome, Edge, Opera, Samsung Internet) hodnotu auto podporují od roku 2024. Pro prohlížeče, které ji zatím neznají, se za ni přidává záložní odhad, například „na mobilu celá šířka, na desktopu polovina'. Fotka je pak vždy ostrá, jen někdy o stupeň větší, než by musela.
Hero fotka potřebuje rozměry podle CSS
Výjimkou jsou obrázky, které se načítají hned, typicky hero fotka s atributem fetchpriority='high'. Prohlížeč pro ně vybírá soubor už při čtení HTML, dřív než stránku vyskládá, takže velikost boxu ještě nezná. Hodnota auto tu použít nejde.
Pro tyto obrázky je potřeba hodnotu sizes spočítat podle skutečného CSS boxu na jednotlivých breakpointech. Po úpravě se hero fotka zmenšila ze 166 kB až na 76 kB.
Na co si dát pozor
Fotky s ořezem přes object-fit: cover
Většina fotek na webech je ořezaná tak, aby vyplnila celý box. Prohlížeč při výběru ze srcset ale zná jen šířku boxu, ne jeho výšku. Když má box jiný poměr stran než fotka, například box na výšku a fotka na šířku, potřebuje fotka větší šířku, než prohlížeč spočítá.
Řešili jsme to nativně, bez JavaScriptu: u ořezaných fotek se šířky v srcset uvádějí o 30 % menší, než ve skutečnosti jsou, takže prohlížeč sáhne po větším souboru. U extrémních rozdílů (panorama ve čtvercovém boxu) pomůže jen upravená fotografie ve správném poměru stran.
Žebříček je potřeba doladit podle měření
Původní řada 500 / 650 / 800 px vypadala rozumně, jenže kvůli rezervě pro ořez se soubor 800 px tvářil jako 615 px. Na PageSpeed mobilu karty potřebovaly 649 px, takže prohlížeč přeskočil až na 1 350 px. Stačilo posunout stupeň z 800 na 850 px a data karet služeb na mobilu klesla z 583 kB na 288 kB.
Tohle je přesně věc, kterou z teorie nevyčtete. Je potřeba měřit na konkrétním webu, ideálně ve stejných podmínkách, v jakých měří PageSpeed.
Malé fotky
- Je nahraná menší fotka, než je box: nic se nerozbije a nic se nezvětšuje. Fotka 200 × 200 px nabídne v srcset jen sama sebe.
- Fotky vložené přes WYSIWYG editor neprocházejí šablonou modulu, takže je potřeba je zpracovat zvlášť. Po úpravě fotka v bloku O nás klesla z 271 kB na 48 kB.
Výsledky: o kolik se fotky zmenšily
Měřili jsme celou úvodní stránku po nasazení na ostrý web, odscrollovanou až dolů, aby se načetly i líně načítané fotky. Měřili jsme na mobilu i na desktopu ve stejných podmínkách, v jakých měří PageSpeed.
- Před úpravou: 1 493 kB fotek na každém zařízení
- Po úpravě: 345 až 469 kB podle zařízení
- Úspora: 69 až 77 % dat z fotek
Podle typu fotek na stránce to vypadá takto:
- 5 fotografií služeb: z 1 029 kB na 201 až 276 kB, úspora 73 až 80 %
- hero fotka: ze 166 kB na 76 až 125 kB
- ostatní fotografie: z 298 kB na 69 kB, úspora 77 %
Každé zařízení teď dostane jen tolik dat, kolik skutečně potřebuje na ostrý obraz. Dřív dostávalo všechno stejný originál.
Co to znamená pro majitele webu
Pro administrátora se nic nemění. Nahraje fotku jako dřív a web se postará o formát, rozměry i výběr správné verze pro každé zařízení. Žádné ruční nastavování náhledů, žádné kontrolování modulů jeden po druhém a žádný JavaScript navíc, který by stránku zpomaloval.
Automatické náhledy dnes stavíme jako výchozí součást každé webové prezentace na míru. U e-shopu na míru je přínos ještě větší, protože produktové výpisy obsahují desítky fotek na jedné stránce.
Pokud PageSpeed na vašem webu hlásí velké obrázky nebo pomalé LCP, je dobré začít tím, co se skutečně stahuje. Přesně tohle odhalí SEO audit, který se dívá i na technickou stránku webu a rychlost načítání.
Shrnutí
- Samotný AVIF nestačí, stejně důležitý je správný rozměr fotky.
- Server vygeneruje řadu šířek, prohlížeč si sám vybere tu nejmenší, která stačí.
- Pro líně načítané obrázky stačí sizes='auto', hero fotky potřebují sizes podle CSS.
- Fotky ořezané přes cover potřebují rezervu nebo správný výřez v administraci.
- Žebříček šířek je potřeba doladit měřením na konkrétním webu.
- Výsledek na reálném webu: o 69 až 77 % méně dat z fotek, bez JavaScriptu.
