Audyt obrazów w SEO: alt, formaty i Core Web Vitals

Cel audytu obrazów w SEO

Audyt obrazów w SEO ma dwa konkretne cele: zmniejszenie wagi strony (co bezpośrednio wpływa na wskaźniki Core Web Vitals) oraz poprawę dostępności i indeksowania grafik w wyszukiwarce. Bez uporządkowanego workflow łatwo pominąć krytyczne błędy, takie jak brakujące atrybuty alt na stronach docelowych lub grafiki o rozmiarze kilku megabajtów ładowane na urządzenia mobilne. Planowanie audytu wymaga podziału na inwentaryzację, analizę techniczną i kolejkę napraw.

Zakres audytu: co dokładnie podlega weryfikacji

Zanim rozpoczniesz skanowanie, zdefiniuj zakres. Optymalizacja grafik obejmuje cztery obszary:

1. Atrybuty alt i nazwy plików – dostępność i kontekst dla wyszukiwarek.
2. Formaty plików i kompresja – waga pojedynczego zasobu i formaty nowej generacji (WebP, AVIF).
3. Wymiary obrazów i responsywność – dopasowanie rozmiaru renderowanego do rzeczywistego oraz obsługa różnych ekranów.
4. Mechanizmy ładowania – opóźnione ładowanie (lazy loading) i priorytetyzacja zasobów.

Krok 1: Eksport i inwentaryzacja zasobów graficznych

Rozpocznij od zebrania danych. Użyj skanera SEO lub narzędzia do crawlowania witryny, aby wygenerować listę wszystkich URL-i obrazów wraz z przypisanymi im podstronami. Eksportuj dane do arkusza kalkulacyjnego. Przygotuj kolumny:

• URL strony docelowej
• URL obrazu (źródło src)
• Tekst atrybutu alt
• Rozmiar pliku (w kilobajtach lub megabajtach)
• Format pliku (JPEG, PNG, GIF, SVG, WebP)
• Wymiary obrazu (renderowane i rzeczywiste)

Taki podział pozwala na szybkie filtrowanie i identyfikację największych problemów – na przykład obrazów powyżej 500 KB lub pustych komórek w kolumnie alt.

Krok 2: Analiza atrybutów alt i nazw plików

Atrybut alt to tekstowa reprezentacja obrazu, używana przez czytniki ekranu i roboty wyszukiwarek. Jego brak lub błędna implementacja to najczęstszy problem w audycie treści.

Decyzyjne drzewo dla atrybutu alt

Podczas audytu stosuj poniższe zasady do każdego obrazu:

• Czy obraz niesie informację istotną dla kontekstu strony? (np. grafika produktu, wykres, instrukcja). Tak – opisz dokładnie zawartość obrazu. Jeśli to naturalne, uwzględnij słowo kluczowe, ale nie na siłę. Zamiast alt="buty biegowe tanio", użyj alt="Męskie buty biegowe na szutrowej ścieżce model X".
• Czy obraz jest czysto dekoracyjny? (np. tło, separator). Tak – pozostaw atrybut pusty: alt="". Nigdy nie usuwaj samego atrybutu, pusty alt informuje czytniki ekranu, aby zignorowały grafikę.
• Czy obraz zawiera tekst? Tak – alt musi powielać ten sam tekst.

Nazwy plików

Zwróć uwagę na ciągi znaków generowane automatycznie (np. IMG_9032.jpg lub s3.amazonaws.com/bucket/8932af). Zmień je na krótkie, opisowe nazwy z myślnikami jako separatorami (np. meskie-buty-biegowe-model-x.jpg). Wymaga to zmiany nazwy pliku na serwerze i aktualizacji ścieżki src, co wiąże się z ryzykiem błędów 404 – dlatego ten krok planuj tylko dla kluczowych grafik na najważniejszych stronach docelowych.

Krok 3: Weryfikacja formatów, rozmiarów i kompresji

Ten etap bezpośrednio wpływa na audyt szybkości ładowania strony i wskaźniki Core Web Vitals, szczególnie Largest Contentful Paint (LCP). Optymalizacja obrazów to najszybszy sposób na zmniejszenie wagi strony.

Zasada dopasowania wymiarów

Obraz nie powinien być większy niż rozmiar, w jakim jest renderowany. Jeśli obraz wyświetla się w kontenerze o szerokości 800 pikseli, plik źródłowy nie powinien mieć szerokości 2400 pikseli. W arkuszu inwentaryzacji porównaj wymiary rzeczywiste z renderowanymi. Różnica oznacza niepotrzebne zużycie danych i mocy obliczeniowej na skalowanie po stronie klienta.

Wybór formatu pliku

Stosuj poniższe reguły zastępowania formatów:

• Zastąp JPEG i PNG formatami nowej generacji. Używaj WebP lub AVIF z odpowiednimi fallbackami w tagu <picture>. AVIF oferuje lepszą kompresję, ale ma wolniejsze kodowanie i szerszą obsługę dopiero w nowszych przeglądarkach.
• Zachowaj SVG dla ikon i logo. Upewnij się, że pliki SVG są oczyszczone z niepotrzebnych metadanych i zabezpieczone przed atakami typu SVG injection (np. przez usunięcie tagów <script> wewnątrz SVG).

Kompresja

Ustal próg wagi: żadna grafika rastrowa na stronie docelowej nie powinna przekraczać 200 KB (w wyjątkowych przypadkach, jak duże banery, 400 KB). Skonfiguruj automatyczną kompresję bezstratną lub stratną (np. jako część pipeline'u wdrożeniowego), aby zredukować rozmiar plików przed ich opublikowaniem.

Krok 4: Implementacja lazy loading i responsywności

Samo zmniejszenie wagi plików to za mało, jeśli przeglądarka ładuje wszystkie zasoby graficzne przy pierwszym żądaniu.

Lazy loading

Dodaj atrybut loading="lazy" do tagów <img> dla wszystkich obrazów znajdujących się poniżej pierwszego ekranu (foldu). Nie stosuj lazy loading do obrazów LCP (największa grafika w widocznym obszarze), ponieważ opóźni to renderowanie wskaźnika LCP. Zamiast tego, dla obrazów powyżej foldu użyj atrybutu fetchpriority="high".

Obrazy responsywne

Dla urządzeń mobilnych serwuj mniejsze obrazy za pomocą atrybutów srcset i sizes lub elementu <picture>. Pozwala to przeglądarce pobrać plik dopasowany do szerokości ekranu, co jest kluczowe dla audytu mobilności strony. Na przykład, na smartfonie o szerokości 375px nie powinien być pobierany obraz o szerokości 1200px.

Workflow naprawczy i priorytetyzacja

Po zakończeniu analizy musisz przekształcić wnioski w zadania. Wprowadzanie poprawek bez priorytetyzacji prowadzi do rozproszenia wysiłku. Podziel błędy na trzy kategorie:

1. Priorytet krytyczny: Brakujące atrybuty alt na stronach docelowych i kluczowych grafikach produktowych; obrazy powyżej 1 MB; obrazy LCP ładowane bez priorytetyzacji.
2. Priorytet wysoki: Brak lazy loading na obrazach poniżej foldu; obrazy w formacie JPEG/PNG, które można zastąpić WebP; rozmiary plików powyżej 300 KB bez kompresji.
3. Priorytet średni: Nieużyteczne nazwy plików na grafikach z długiego ogona (blog); dekoracyjne obrazy z niepustym atrybutem alt.

Każde zadanie w kolejce naprawczej powinno zawierać URL strony, URL obrazu, opis problemu i zalecaną akcję (np. "Dodaj alt: [sugestia tekstu]", "Przekonwertuj na WebP", "Dodaj loading=lazy"). W środowiskach takich jak Nelavio, takie zadania trafiają do priorytetyzowanej kolejki poprawek, co pozwala na systematyczne wdrażanie zmian przez zespół lub osobę zarządzającą witryną, z możliwością publikacji bezpośrednio na platformie (np. WordPress) lub przez API.

Weryfikacja i raportowanie zmian

Po wdrożeniu poprawek (np. przez system CMS, webhook lub ręczny eksport) wykonaj ponowne skanowanie zmodyfikowanych podstron. Sprawdź:

• Czy obrazy wyświetlają się poprawnie (brak zepsutych linków, błędy 404 po zmianie nazwy pliku).
• Czy atrybuty alt są widoczne w kodzie źródłowym i odpowiadają założeniom.
• Czy waga strony uległa zmniejszeniu (porównanie rozmiaru strony przed i po w Narzędziach Deweloperskich przeglądarki).

Zmiany zapisz w logu aktywności i raporcie miesięcznym. Raportowanie powinno wykazywać, ile obrazów poddano optymalizacji i jaki był wpływ tych zmian na rozmiar całkowity przeanalizowanych podstron.

Częste błędy i ograniczenia

Podczas planowania audytu obrazów pamiętaj o pułapkach, które mogą zaszkodzić stronie:

• Keyword stuffing w atrybutach alt: Wypełnianie alt listą słów kluczowych jest traktowane przez wyszukiwarki jako spam. Alt musi opisywać obraz.
• Ignorowanie obrazów tła w CSS: Audyt powinien obejmować nie tylko tagi <img>, ale również grafiki załadowane przez właściwość background-image w CSS. One również wpływają na wagę strony i wymagają kompresji oraz lazy loading (np. przez Intersection Observer API).
• Zbyt agresywna kompresja: Redukcja wagi pliku nie może odbywać się kosztem czytelności. Znajdź próg, w którym jakość wizualna jest akceptowalna, a rozmiar pliku optymalny.
• Brak testów po wdrożeniu: Zmiana formatu na WebP bez zapewnienia fallbacku dla starszych przeglądarek spowoduje niewyświetlanie się grafik u części użytkowników.

Podsumowanie i kolejne kroki

Planowanie audytu obrazów w SEO wymaga metodycznego podejścia: od inwentaryzacji, przez analizę altów i formatów, aż po priorytetyzację zadań w kolejce naprawczej. Poprawnie przeprowadzony audyt zmniejsza wagę strony, poprawia wskaźniki Core Web Vitals i ułatwia indeksowanie zasobów wizualnych. Aby ułatwić sobie ten proces, możesz wykorzystać narzędzia do skanowania SEO, które automatycznie wykrywają braki w atrybutach alt i problemy z wagą obrazów, generując gotową listę zadań do realizacji.