Obrázky vo formáte WebP a AVIF: rýchlejší web bez straty kvality
Obrázky tvoria na väčšine webov najväčšiu časť dát, ktoré sa sťahujú. Správne pripravené obrázky dokážu web výrazne zrýchliť bez toho, aby návštevník spozoroval rozdiel v kvalite.
Správna veľkosť
Najčastejšia chyba je nahrať fotku s rozmermi niekoľko tisíc pixelov a zobraziť ju na mobile v šírke niekoľkých stoviek. Prehliadač sťahuje oveľa viac dát, ako potrebuje. Obrázok má mať rozmery zodpovedajúce tomu, ako veľký sa zobrazí.
Moderné formáty
- WebP: pri rovnakej kvalite býva výrazne menší ako JPEG a PNG. Podporujú ho všetky moderné prehliadače.
- AVIF: často ešte menší ako WebP, najmä pri fotkách. Podporujú ho súčasné verzie hlavných prehliadačov.
- SVG: pre logá a ikony, ostré pri akejkoľvek veľkosti.
Pre istotu sa dá ponúknuť viac formátov naraz a prehliadač si vyberie ten, ktorý podporuje.
Responzívne obrázky
Pomocou atribútov srcset a sizes alebo prvku picture môže web ponúknuť viac veľkostí toho istého obrázka. Telefón si stiahne menší, veľký monitor väčší. Pri banneroch sa dá na mobile použiť aj iný výrez obrázka.
Načítanie v správnom čase
Obrázky mimo prvej obrazovky sa majú načítavať až vtedy, keď k nim návštevník príde. Hlavný obrázok na vrchu stránky však oneskorene načítavať nesmiete, inak sa zhorší LCP. Viac v článku Lazy loading.
Rozmery a alternatívny text
- uvádzajte šírku a výšku obrázka, aby obsah pri načítaní neposkakoval,
- alternatívny text (alt) má stručne popisovať, čo je na obrázku. Pomáha nevidiacim aj vyhľadávaniu obrázkov,
- názov súboru má byť zrozumiteľný, napríklad bezecke-topanky-modre.webp.
Automatizácia
Ručne konvertovať stovky obrázkov nie je potrebné. Web alebo server môže obrázky automaticky zmenšiť a skonvertovať pri nahratí. Pri zrýchlení webu optimalizujeme existujúce obrázky aj nastavíme, aby nové boli optimalizované automaticky.
