Návod
Jak připravit obrázky pro rychlý web
Obrázky bývají nejtěžší částí stránky. Správný formát, rozměr a kvalita často zmenší web o víc než polovinu, aniž by návštěvník poznal rozdíl.
Který formát kdy
- WebP na většinu fotek a grafiky. Podporují ho všechny moderní prohlížeče.
- AVIF je ještě menší, kódování ale trvá déle.
- JPEG tam, kde potřebujete maximální kompatibilitu, třeba v e-mailu.
- PNG jen na snímky obrazovky a grafiku s ostrými hranami.
Rozměr podle místa na stránce
Obrázek nemá být větší, než kde se zobrazí. Fotka přes celou šířku stačí do 1920 px, obrázek v textu do 1280 px, náhled v kartě do 800 px. Fotka z mobilu má běžně přes 4000 px a několik MB.
Kvalita 75 až 85 %
Nad 85 % soubor roste rychleji, než přibývá viditelné kvality. Pod 70 % se začnou objevovat artefakty kolem ostrých hran a textu. Rozdíl si zkontrolujte tlačítkem Porovnat.
Na webu nezapomeňte
Tlačítko „Kód <img>“ vám připraví značku se správnými rozměry.
- Uvádět šířku a výšku, jinak obsah při načítání poskakuje.
- Obrázky pod prvním zobrazením načítat líně (loading="lazy").
- Psát popisný alt text kvůli přístupnosti a SEO.