Návod
Ako pripraviť obrázky na rýchly web
Obrázky bývajú najťažšou časťou stránky. Správny formát, rozmer a kvalita často zmenšia web o viac ako polovicu a návštevník rozdiel nespozná.
Ktorý formát kedy
- WebP na väčšinu fotiek a grafiky. Podporujú ho všetky moderné prehliadače.
- AVIF je ešte menší, kódovanie však trvá dlhšie.
- JPEG tam, kde potrebujete maximálnu kompatibilitu, napríklad v e-maile.
- PNG len na snímky obrazovky a grafiku s ostrými hranami.
Rozmer podľa miesta na stránke
Obrázok nemá byť väčší ako miesto, kde sa zobrazí. Fotke na celú šírku stačí 1920 px, obrázku v texte 1280 px, náhľadu v karte 800 px. Fotka z mobilu má bežne viac ako 4000 px a niekoľko MB.
Kvalita 75 až 85 %
Nad 85 % súbor rastie rýchlejšie, ako pribúda viditeľná kvalita. Pod 70 % sa začnú objavovať artefakty okolo ostrých hrán a textu. Rozdiel si skontrolujte tlačidlom Porovnať.
Na webe nezabudnite
Tlačidlo „Kód <img>“ vám pripraví značku so správnymi rozmermi.
- Uvádzať šírku a výšku, inak obsah pri načítaní poskakuje.
- Obrázky pod prvou obrazovkou načítavať oneskorene (loading="lazy").
- Písať popisný alt text kvôli prístupnosti a SEO.