Návod · Obrázky a média
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.
Oblast kontroly
Obrázky a média
Nejtěžší část stránky
Obrázky dělají na běžném webu většinu přenesených dat. Špatný formát, chybějící rozměry a prázdné popisky stojí rychlost, přístupnost i návštěvy z vyhledávání obrázků.
10
kontrol v této oblasti
7 %
váha v celkovém skóre
2
jen pro členy
Návody v této oblasti
Návod · Obrázky a média
Jak vypadá vaše značka ve výsledcích hledání a co s tím jde dělat
Název webu, ikona a drobečky se dají ovlivnit. Rozhoduje o nich shoda mezi strukturovanými daty a tím, co je na stránce vidět.
Návod · Obrázky a média
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.
Co nástroj v této oblasti kontroluje
Úplný seznam. Váha je počet bodů, o které se při chybě přijde, seřazeno od nejtěžší kontroly.
| Kontrola | Proč na ní záleží | Váha |
|---|---|---|
| Obrázky mají popisek alt | Popisek alt je text, který uslyší nevidomý návštěvník a přečte vyhledávač. Bez něj je obrázek pro obojí prázdné místo. | 9 |
| Velikost obrázků jen pro členy | Fotka přímo z fotoaparátu má klidně čtyři megabajty. Na mobilním připojení kvůli ní stránka stojí několik sekund. | 7 |
| Obrázky mají uvedené rozměry | Bez atributů width a height prohlížeč neví, kolik místa obrázku nechat. Text pak při načtení poskočí a zhorší se metrika CLS. | 6 |
| Obrázky v moderním formátu | Formáty WebP a AVIF váží při stejné kvalitě zhruba o třetinu až polovinu méně než JPEG. Je to nejlevnější zrychlení webu. | 6 |
| Popisky alt dávají smysl | Popisek typu obrazek1 nebo IMG_2043 je stejně k ničemu jako žádný. Roboti i čtečky z něj nic nevytěží. | 4 |
| Obrázky pod okrajem se načítají odloženě | Odložené načítání šetří data u obrázků, které návštěvník možná nikdy neuvidí. U prvního obrázku na stránce ho ale zapínat nemá. | 4 |
| Obrázky mají varianty pro různé displeje | Bez atributu srcset stahuje telefon stejně velký soubor jako velký monitor. Zbytečně platí daty i časem. | 4 |
| Názvy souborů obrázků | Název souboru je jeden z mála signálů, podle kterých vyhledávač obrázků pozná, co na fotce je. | 3 |
| Vložená videa nebrzdí načtení jen pro členy | Klasické vložení YouTube stáhne skoro megabajt skriptů, i když video nikdo nespustí. | 3 |
| Web má ikonu favicon | Ikona se ukazuje na panelu prohlížeče a u mobilních výsledků hledání. Bez ní působí značka nedodělaně. | 2 |
Chcete vědět, jak je na tom váš web?
Kontrola projde web, najde konkrétní chyby z této oblasti a u každé řekne, co s ní.