Obrázky na webu: WebP, AVIF a lazy loading

Moderní formáty šetří megabajty

Formáty WebP a AVIF nabízejí výrazně menší velikost souboru než klasické JPEG a PNG při stejné kvalitě. Přechod na ně je často nejrychlejší cesta, jak zrychlit načítání.

Správné rozměry

Obrázek nemá smysl posílat ve větším rozlišení, než v jakém se zobrazí. Atribut srcset umožní prohlížeči vybrat variantu odpovídající zařízení a šetří data hlavně na mobilu.

Lazy loading a stabilita rozložení

• loading="lazy" odloží načtení obrázků mimo viditelnou oblast.
• Vždy uvádějte width a height kvůli stabilnímu rozložení (CLS).
• Klíčovému obrázku nad záhybem dejte fetchpriority="high".