Obrazy są nieodłącznym elementem stron internetowych. Przyciągają uwagę, budują kontekst i poprawiają estetykę. Jednak z punktu widzenia wyszukiwarek i osób z niepełnosprawnościami są „niewidoczne” bez odpowiedniego opisu. Dlatego tak ważny jest atrybut alt.
W tym artykule dowiesz się:
- czym jest atrybut
alti jak działa, - jak go poprawnie stosować,
- jak wpływa na dostępność i SEO,
- oraz jak uniknąć najczęstszych błędów.
Czym jest atrybut alt?
Atrybut alt (alternative text) to opis alternatywny obrazu dodawany do kodu HTML. Jego głównym celem jest:
- umożliwienie zrozumienia treści obrazu przez osoby korzystające z czytników ekranu,
- informowanie użytkownika o zawartości obrazu, gdy ten nie może się załadować,
- wspomaganie indeksowania obrazów przez roboty wyszukiwarek.
📌 Przykład kodu: <imgsrc="rower-gorski.jpg"alt="Czarny rower górski na tle górskiego szlaku">
Dlaczego atrybut alt jest ważny?
Dostępność (accessibility)
Dla użytkowników niewidomych lub słabowidzących alt tekst jest jedynym sposobem „zobaczenia” grafiki. Czytniki ekranu odczytują zawartość atrybutu, co pozwala zrozumieć kontekst obrazu.
Brak tekstu alternatywnego oznacza, że część treści witryny staje się dla takich osób niedostępna.
Wpływ na SEO
Roboty Google nie „widzą” obrazów — analizują ich otoczenie i atrybuty. Tekst alternatywny to jedna z najważniejszych wskazówek, która mówi wyszukiwarce, o czym jest dana grafika.
Dobrze opisane obrazy:
- zwiększają szanse na pojawienie się w Google Grafika,
- poprawiają semantykę strony,
- wpływają na ocenę jakości treści.
Jak pisać skuteczne atrybuty alt?
Zwięzłość i konkret
Opisuj dokładnie to, co znajduje się na obrazie — ani za dużo, ani za mało. Nie stosuj opisów ogólnych ani zbyt szczegółowych.
✅ Dobry przykład:
alt="Zielona torba sportowa leżąca na ławce"
❌ Zły przykład:
alt="Zdjęcie"
alt="Kliknij tutaj"
Naturalny język i frazy kluczowe
Alt tekst powinien być napisany naturalnie, jak dla człowieka. Jeśli to możliwe, warto wpleść słowo kluczowe, ale nigdy nie kosztem sensu.
✅ Lepszy opis:
alt="Buty trekkingowe męskie z wysoką cholewką Columbia"
❌ Przeoptymalizowany opis:
alt="buty trekkingowe buty męskie buty Columbia tanio outdoor hiking"
Obrazy dekoracyjne – bez alt lub z pustym alt
Jeśli obraz pełni wyłącznie funkcję wizualną (np. tło, linia dekoracyjna), nie powinien mieć opisu. Zamiast tego użyj pustego atrybutu:
<imgsrc="ozdobna-linia.png"alt="">Dzięki temu czytnik ekranu pominie ten element i nie zakłóci odbioru treści.
Czego unikać w altach?
🚫 Nie używaj słów „obrazek”, „grafika”, „zdjęcie” – czytniki i tak wiedzą, że to obraz.
🚫 Nie powtarzaj tekstu, który znajduje się obok obrazu – to tylko zduplikowana informacja.
🚫 Nie zostawiaj pustego alt, jeśli obraz niesie treść – np. infografiki, zdjęcia produktów.
Checklista: Poprawne stosowanie atrybutu alt
✅ Każdy obraz mający znaczenie dla treści ma opis
✅ Alt tekst jest zwięzły (do 125 znaków) i konkretny
✅ Alt oddaje sens obrazu — bez zbędnych słów
✅ Frazy kluczowe użyte tylko wtedy, gdy są naturalne
✅ Obrazy dekoracyjne mają pusty alt
✅ Nie ma nadużycia słów typu „zdjęcie”, „kliknij tutaj”
✅ Opisy nie są skopiowane z tytułu strony ani nagłówków
Optymalizacja obrazów — więcej niż tylko alt
Choć atrybut alt jest kluczowy, pełna optymalizacja obrazów wymaga jeszcze kilku dodatkowych kroków. To wszystko razem wpływa na szybkość strony, UX i pozycjonowanie.
Nazwy plików
Zamiast:
IMG_0483.jpg
Użyj:
czarna-kurtka-damska-softshell.jpg
Dlaczego? Nazwa pliku to kolejny sygnał dla wyszukiwarki o zawartości obrazu. Powinna być krótka, opisowa i zawierać słowo kluczowe — bez polskich znaków i spacji (zamiast nich myślniki).
Format i rozmiar obrazu
- Używaj formatów nowej generacji (np. WebP, AVIF) – są lżejsze i szybciej się ładują.
- Kompresuj obrazy przed wrzuceniem na stronę – np. za pomocą TinyPNG, Squoosh, ShortPixel.
- Skaluj obrazy do rozmiaru rzeczywistego wyświetlania – nie ładuj grafik większych niż potrzeba.
📌 Szybsza strona to lepsze doświadczenie użytkownika i lepsze oceny w Google.
Lazy loading
Nie ładuj wszystkich obrazów od razu.
Zastosuj atrybut loading="lazy" — przeglądarka załaduje obraz dopiero wtedy, gdy będzie widoczny dla użytkownika.
📌 Przykład: <imgsrc="produkt.webp"alt="Szary plecak turystyczny 35l"loading="lazy">
Podsumowanie
Atrybut alt to mały szczegół, który ma ogromne znaczenie.
Wpływa na dostępność strony, jej przyjazność dla użytkowników i pozycjonowanie w wyszukiwarkach. Jego poprawne stosowanie nie wymaga zaawansowanej wiedzy, a efekty mogą być odczuwalne zarówno w Google, jak i w realnym odbiorze treści.
