Fotky a ilustrace dělají stránku přehlednější a příjemnější na pohled, jenže bez správného technického zpracování dokážou stránku i výrazně poškodit, ať už zpomalí načítání, nebo zůstanou pro vyhledávač i pro nevidomého návštěvníka prakticky neviditelné. Kontrola obrázků na webu se zaměřuje přesně na tyto vlastnosti, tedy na to, co se s obrázkem děje pod povrchem, ne jen na to, jak vypadá. Rychlou kontrolu vlastního webu nabízí automatizovaný nástroj, klikněte zde. Tento text vysvětluje, k čemu slouží alt text, proč rozměry obrázku ovlivňují stabilitu stránky, a jaké chyby se v praxi objevují nejčastěji.
Co kontrola obrázků na webu sleduje
Kontrola se soustředí na čtyři hlavní oblasti: přítomnost alt textu u každého obrázku, uvedení jeho rozměrů přímo v kódu, odložené načítání obrázků mimo první obrazovku a použití moderních obrazových formátů místo starších JPEG a PNG souborů. Každá z těchto vlastností ovlivňuje jinou část zážitku návštěvníka, od rychlosti načítání až po přístupnost pro lidi se zrakovým postižením.
Proč se alt text počítá mezi hlavní ukazatele
Alt text popisuje obsah obrázku textem, který se zobrazí, pokud se soubor nenačte, a který čtou i čtečky obrazovky pro nevidomé návštěvníky. Bez něj se obrázek stává neviditelnou částí stránky, prázdným místem bez jakéhokoli významu. Podrobný přehled toho, k čemu všemu text popisující obrázek slouží, včetně přínosu pro lidi ovládající web hlasem nebo s vypnutým zobrazováním obrázků na mobilu.
Jak alt text správně napsat podle typu obrázku
Ne každý obrázek potřebuje stejně podrobný popisek. Rozlišují se v zásadě tři základní situace:
- Obrázek nesoucí informaci, tedy fotka či ilustrace, u které alt text stručně shrne, co je na ní vidět a proč tam je.
- Čistě dekorativní obrázek, který slouží jen k vizuálnímu doplnění stránky, u něj stačí ponechat alt text prázdný.
- Obrázek s funkcí, například ikona odkazu či tlačítko, kde alt text popisuje akci, ne vzhled ikony samotné.
- Obrázek obsahující text, třeba naskenovaný ceník nebo citát vložený jako grafika, kde alt text obsahuje stejná slova, jaká jsou vidět přímo na obrázku.
Rozměry obrázku a stabilita rozvržení stránky
Pokud obrázek v kódu nemá uvedenou šířku a výšku, prohlížeč mu při načítání nedokáže dopředu vyhradit místo. Zbytek obsahu se pak v okamžiku, kdy se obrázek konečně načte, posune, a čtenář může omylem kliknout na úplně jiný odkaz, než zamýšlel. Uvedení rozměrů přímo v atributech width a height tento posun eliminuje a stránka zůstává vizuálně klidná od první vteřiny.
Odložené načítání obrázků mimo první obrazovku
Obrázky umístěné hluboko pod první viditelnou částí stránky nemusí prohlížeč stahovat hned, stačí je načíst až ve chvíli, kdy se k nim návštěvník doscrolluje. Tomuto principu se říká odložené načítání a v praxi znatelně zrychluje první zobrazení stránky, protože prohlížeč se nejdřív soustředí jen na obsah, který čtenář skutečně vidí.
Moderní formáty místo staršího JPEG a PNG
Formáty WebP a AVIF dokážou stejný obrázek uložit s výrazně menší velikostí souboru než starší JPEG či PNG, obvykle o 25 až 35 procent menší. Menší soubor znamená rychlejší přenos dat i menší zátěž pro návštěvníky s pomalejším připojením.
Obrázky jako vlastní zdroj návštěvnosti z vyhledávání
Kromě webových stránek indexuje Google i samostatné vyhledávání obrázků, kam řada webů přivádí návštěvnost úplně mimo klasické výsledky. Bez alt textu a bez smysluplného názvu souboru se ale obrázek do tohoto typu vyhledávání dostane jen těžko, protože vyhledávač nemá k dispozici žádný text, který by mu prozradil, co je na fotce vidět. Pomáhá i to, pokud text okolo obrázku na stránce téma skutečně rozvíjí, ne jen obrázek vloží bez jakékoli souvislosti s okolním obsahem.
AVIF jako novější a ještě úspornější formát
Vedle formátu WebP se čím dál častěji používá i novější AVIF, který při srovnatelné kvalitě obrázku dokáže soubor zmenšit ještě víc. Podpora v prohlížečích se v posledních letech výrazně rozšířila, přesto se vyplatí ponechat starší formát jako záložní variantu pro prohlížeče, které AVIF ještě neumí zobrazit.
Proč tato kontrola navazuje na dřívější zjištění
Pomalé obrázky patří mezi nejčastější příčiny ztracené návštěvnosti u menších webů vůbec, jak popisuje tento článek o čtyřech opakujících se chybách odhalených bezplatnou SEO analýzou. Zatímco tam šlo hlavně o velikost souboru a rychlost načítání, tahle kontrola jde o krok dál a prověřuje i to, jestli obrázek vůbec nese popisek, má definované rozměry a využívá modernější formát, tedy detaily, které se do rychlého přehledu už nevejdou.
Nejčastější chyby v praxi
V praxi se u obrázků na webu opakuje několik podobných problémů:
- Většina obrázků na stránce nemá vyplněný alt text, jen prázdný nebo obecný popisek typu obrázek.
- Obrázky chybí rozměry v kódu, takže stránka při načítání viditelně poskakuje.
- Fotky nahrané přímo z fotoaparátu bez převodu do modernějšího formátu, ačkoliv by úspora velikosti byla citelná.
- Odložené načítání chybí i u obrázků hluboko pod první obrazovkou, takže se stahují zbytečně brzy.
Co si z této kontroly odnést
Alt text, rozměry obrázku, odložené načítání a moderní formát patří mezi úpravy, které nezasahují do vzhledu stránky, přesto ovlivňují rychlost načítání i to, jestli obrázek vůbec někdo, včetně vyhledávače, dokáže správně interpretovat. Oprava těchto detailů obvykle zabere jen krátký čas na obrázek, dopad na celkový dojem ze stránky je ale znatelný.
Máte na svém webu u všech obrázků vyplněný alt text, nebo jste tuto část kontroly webu doteď spíš přehlíželi?
