Kedy kontrolu použiť
Posudzujte účel obrázka na konkrétnom mieste. Fotografia opravy môže vysvetľovať postup, dekorovať sekciu alebo fungovať ako odkaz; každý prípad potrebuje inú textovú alternatívu.
Vedieť, čo kontrolujete.
SEO obrázkov prepája význam vizuálu s jeho technickým doručením. Informatívna fotografia potrebuje zodpovedajúci textový ekvivalent; čisto dekoratívny obrázok môže správne používať prázdny alt.
Praktický príklad
<img src="oprava.webp" width="960" height="640" alt="Technik mení tesnenie sparovacej jednotky" />
<img src="dekoracia.svg" alt="" />Častá chyba
Doplniť rovnaký alt na všetky fotografie síce vyplní atribút, ale nevysvetlí ich obsah. Prázdny alt dekorácie nie je automaticky chyba. Audit bez vizuálneho porozumenia nevie overiť vecnú presnosť popisu.
Rozumieť výsledku. Urobiť správnu zmenu.
Kedy obrázok potrebuje alt text a kedy prázdny alt
Rovnaká fotografia môže vysvetľovať postup alebo iba zdobiť úvod. Alt píšte podľa toho, aká informácia by na danom mieste bez obrázka chýbala.
- Informatívny obrázok opíšte stručne a vecne.
- Čisto dekoratívnemu obrázku ponechajte alt="".
- Pri zložitom grafe vysvetlite podstatné údaje aj v okolitom texte.
Ako pomenovať obrázkový odkaz alebo tlačidlo
Ak je logo jediným obsahom odkazu na homepage, jeho alternatíva tvorí názov odkazu. Pri tlačidle s ikonou nestačí opis farby alebo tvaru.
- Overte, čo čítačka oznámi pri odkaze obsahujúcom len obrázok.
- Názov nech vysvetľuje cieľ alebo vykonanú akciu.
- Ak vedľa ikony už je úplný text, nezdvojujte ho zbytočným opisom.
Ako zvoliť rozmery obrázka bez posunu obsahu
Malý náhľad nepotrebuje pôvodnú viacmegapixelovú fotografiu. Zároveň musí zostať čitateľný na displeji s vyššou hustotou; posúďte skutočnú zobrazovanú veľkosť.
- Použite vhodné responzívne varianty a správne sizes.
- Rezervujte priestor pomocou rozmerov alebo pomeru strán.
- Na mobile skontrolujte detaily aj zbytočne veľký prenos dát.
Kedy použiť lazy loading obrázkov
Dôležitý obrázok v prvom výhľade môže byť prvkom LCP. Jeho zbytočne odložené načítanie spomalí zobrazenie; obrázky hlbšie na stránke posudzujte samostatne.
- Hlavný viditeľný obrázok neodkladajte automaticky cez lazy loading.
- Pri obrázkoch pod prvým výhľadom zvážte odložené načítanie.
- Výsledok overte meraním Core Web Vitals a pohľadom na reálne vykreslenie.
Primárny zdroj: www.w3.org ↗
Časté otázky
Musí mať každý obrázok dlhý alt s kľúčovým slovom?
Alt závisí od účelu. Informačný obrázok potrebuje stručný význam, dekorácia spravidla prázdny alt a obrázkový odkaz opis cieľa alebo funkcie. Opakovanie kľúčových slov zhoršuje čítanie. Pri produktovom variante pomenujte viditeľný rozdiel, ak je dôležitý pre výber, napríklad farbu alebo prevedenie.
Kedy môžete úlohu uzavrieť
Otestujte zmysel stránky bez obrázkov. Rozmery rezervujú priestor a hlavný obrázok sa načíta primerane rýchlo; veľkosť súboru sama osebe nepotvrdzuje dobré LCP.