Slovníček
WebP a AVIF
Stručně
Moderní formáty obrázků. Při stejné kvalitě mají menší velikost než JPEG, u fotografií běžně o čtvrtinu až polovinu.
Jak je nasadit
Značka picture s několika zdroji umožní nabídnout AVIF, pak WebP a nakonec JPEG. Prohlížeč si vybere první formát, kterému rozumí. Většina redakčních systémů to řeší doplňkem, který převod i zápis obstará.
Na co nezapomenout
- Servírovat velikost odpovídající zobrazení, ne fotografii z fotoaparátu.
- Uvádět rozměry, aby se stránka neposouvala.
- Kvalitu nastavit kolem 75 až 80 procent. Vyšší hodnoty přidají velikost bez viditelného rozdílu.
Časté dotazy
Který z nich zvolit?
WebP jako výchozí, protože ho podporují úplně všechny prohlížeče a převod je rychlý. AVIF má lepší kompresi, ale kódování trvá déle a u velkých knihoven obrázků to znamená znatelně vyšší zátěž. Obvykle se nabízí AVIF s WebP jako záložní variantou.
Musím převádět staré obrázky?
U webu s tisíci obrázků stačí převádět nově nahrávané a hromadně převést ty na nejnavštěvovanějších stránkách. Plošný převod celé knihovny se obvykle nevyplatí, protože většinu obrázků nikdo nevidí.
Návody k tomuhle tématu
Skripty třetích stran: kolik stojí měření, chaty a widgety
Cizí skripty jsou nejčastější příčina pomalého webu, na kterou nikdo nesahá. Nejde je zrychlit, jde je jen odložit nebo zrušit.
Core Web Vitals srozumitelně: LCP, INP a CLS
LCP, INP a CLS bez omáčky: kde přesně jsou hranice, proč vám Search Console mlčí a co na WordPressu opravdu zabere. S čísly a pořadím oprav.
Obrázky a rychlost webu: kde se dá ušetřit nejvíc
Fotka z mobilu váží 3 MB, na webu má stačit 100 KB. Kde se u obrázků dá ubrat nejvíc a jak na to na e-shopu, kde jich máte tisíce.
Alt popisky obrázků: k čemu jsou a jak je psát
Alt popisky rozhodují o tom, jestli váš obrázek někdo najde a jestli mu rozumí čtečka obrazovky. Návod na psaní i co na ně říká zákon.
Týká se to vašeho webu?
Kontrola projde web a řekne, jestli tenhle problém máte. Trvá to necelou minutu.