SEO obrazów: teksty alternatywne, rozmiar plików i formaty

Obrazy stanowią największą część objętości danych na większości stron internetowych. Właśnie dlatego często decydują o tym, czy strona ładuje się szybko, czy sprawia wrażenie ociężałej - oraz o tym, czy Google uzna ją za wartościową. Dobra wiadomość: SEO obrazów opiera się na kilku prostych zasadach, które wystarczy raz zrozumieć, a potem konsekwentnie stosować. Budujemy strony internetowe w stałej cenie i prowadzimy siedem własnych marek w środowisku produkcyjnym - poniższe punkty to dokładnie to, na co sami zwracamy uwagę w każdym projekcie.

Dlaczego SEO obrazów to coś więcej niż ładne zdjęcia

W optymalizacji obrazów zazębiają się trzy rzeczy: czas ładowania, dostępność i wykrywalność. Szybkie obrazy poprawiają Twoje Core Web Vitals, zwłaszcza wskaźnik LCP (największy widoczny element, często właśnie obraz). Dobre teksty alternatywne pomagają czytnikom ekranu, a tym samym osobom niewidomym - i przy okazji wyszukiwarce grafiki Google. Sensowne nazwy plików i formaty dopełniają całości. Nigdy więc nie optymalizujesz wyłącznie pod wyszukiwarkę, lecz zawsze także pod realnych użytkowników. To uczciwa istota rzeczy: kiedy strona staje się lepsza dla ludzi, ranking zwykle podąża za tym sam.

Teksty alternatywne: krótkie, konkretne, opisowe

Tekst alternatywny (atrybut alt) opisuje, co widać na obrazie. Jest odczytywany, gdy ktoś korzysta z czytnika ekranu, oraz wyświetlany, gdy obraz się nie wczyta. Pisz go tak, jakbyś krótko opisywał komuś zdjęcie przez telefon.

• Opisuj treść, a nie to, co oczywiste: Nie obraz czy zdjęcie przedstawiające, lecz od razu sam motyw.
• Pisz zwięźle: Zazwyczaj wystarczy jedno krótkie zdanie. Nikt nie potrzebuje powieści.
• Unikaj upychania słów kluczowych: Jedno pasujące słowo wyszukiwania jest w porządku, jeśli naturalnie odnosi się do obrazu. Ciąg nagromadzonych haseł szkodzi.
• Obrazy czysto dekoracyjne dostają pusty tekst alternatywny (alt=""). Dzięki temu czytnik ekranu je pomija - i o to właśnie chodzi przy liniach oddzielających, wzorach czy grafikach ozdobnych.

Przykład: zamiast foto1 albo ladne-zdjecie-seo-agencja-marketingowa piszesz coś w stylu: Fachowiec sprawdza instalację solarną na dachu domu. To uczciwe, pomocne i przy okazji przyjazne wyszukiwarkom.

Rozmiar pliku: największy potencjał oszczędności

Większość stron wysyła obrazy, które są o wiele za duże - często kilka megabajtów na zdjęcie, które na ekranie ma zaledwie kilkaset pikseli szerokości. Tu tkwi największa dźwignia dla szybkości.

• Dostarczaj właściwą rozdzielczość: Obraz wyświetlany maksymalnie na szerokość 800 pikseli nie musi być przesyłany w 4000 pikseli. Przeskaluj go w dół przed wgraniem.
• Kompresuj świadomie: Poziom jakości około 75 do 85 procent jest w przypadku zdjęć niemal nie do odróżnienia od oryginału, a oszczędza ogromną ilość danych.
• Wartości docelowe jako reguła kciuka: Obrazy treściowe poniżej ~150 KB, duże obrazy hero w miarę możliwości poniżej ~300 KB. To wartości orientacyjne, a nie dogmaty - ale pomagają wyrobić sobie wyczucie.
• Korzystaj z obrazów responsywnych: Dzięki atrybutowi srcset smartfon wczytuje mniejszy plik niż komputer stacjonarny. W ten sposób każde urządzenie dostaje tylko to, czego naprawdę potrzebuje.

Wybór właściwego formatu

Format decyduje o stosunku jakości do rozmiaru pliku. Proste wskazówki:

• WebP: Dziś standardowy wybór do niemal wszystkich zdjęć i grafik. Wyraźnie mniejszy niż JPG przy tej samej jakości i obsługiwany przez wszystkie aktualne przeglądarki.
• AVIF: Jeszcze mniejszy niż WebP, ale nieco wolniejszy w generowaniu. Sensowny, gdy zależy Ci na ostatnich procentach szybkości i zapewnisz wariant zapasowy.
• JPG: Solidny klasyk do zdjęć, gdy WebP z jakiegoś powodu nie pasuje.
• PNG: Tylko do obrazów wymagających przezroczystego tła lub ostrych krawędzi (logotypy, zrzuty ekranu). Do zdjęć PNG jest niemal zawsze za duży.
• SVG: Najlepszy wybór do logotypów, ikon i prostych grafik. Oparty na wektorach, więc przy każdym rozmiarze idealnie ostry i nikły pod względem rozmiaru pliku.

Szczegóły techniczne, o których często się zapomina

• Mówiące nazwy plików: instalacja-solarna-montaz-na-dachu.webp mówi więcej niż IMG_4821.webp - również dla Google.
• Lazy loading: Dzięki loading="lazy" przeglądarka wczytuje obrazy dopiero, gdy pojawiają się w polu widzenia. Obraz hero na samej górze nie powinien jednak być ładowany leniwie, w przeciwnym razie ucierpi LCP.
• Stałe wymiary obrazów: Podawaj szerokość i wysokość, aby układ strony nie przeskakiwał podczas ładowania. To zauważalnie poprawia wskaźnik CLS.
• Mapa witryny dla obrazów: Przy stronach bardzo bogatych w obrazy może pomóc wyszukiwarce grafiki - przy mniejszych witrynach zwykle nie jest potrzebna.

Czego naprawdę potrzebujesz - a czego nie

Szczerze mówiąc: nie musisz optymalizować każdego obrazu ręcznie. Dobry CMS lub proces budowania (build) załatwia skalowanie, kompresję i dobór formatu automatycznie - wtedy pozostaje Ci jedynie tekst alternatywny jako zadanie do wykonania ręcznie. Jeśli Twoja strona zmaga się dziś z ogromnymi obrazami, jest to niemal zawsze najbardziej opłacalny pierwszy krok ku lepszym czasom ładowania i stabilniejszemu rankingowi. AVIF, mapy witryny dla obrazów czy dopracowane konfiguracje srcset to sensowny program dodatkowy, ale nie warunek konieczny na start. Zacznij od rozmiaru i formatu - reszta przyjdzie sama.