Optymalizacja obrazów pod SEO – szybsza strona

Wrzucasz na stronę ładne, ostre zdjęcie prosto z aparatu – i nie myślisz o tym więcej. A potem dziwisz się, że strona ładuje się sekundę za długo, a w Grafice Google nie ma po Tobie śladu. W większości audytów, które robimy, to właśnie obrazy są pierwszym hamulcem szybkości i jednocześnie zmarnowanym źródłem ruchu. Dobra wiadomość: optymalizacja obrazów SEO to jedna z najprostszych rzeczy, jakie możesz poprawić w jeden wieczór.

Obraz pracuje na dwóch frontach naraz. Lekki plik poprawia Core Web Vitals. Opisowa nazwa i sensowny alt dają Ci dodatkowy kanał – ruch z Grafiki Google, o którym wiele firm w ogóle nie pamięta.

Poniżej rozkładam temat na części, które realnie wdrażamy u klientów: jaki format wybrać, ile powinno ważyć zdjęcie, jak je nazwać, co wpisać w alt i jak ustawić ładowanie. Bez teorii – same rzeczy do zrobienia.

Spis treści

• Dwie korzyści naraz: szybkość i ruch z Grafiki
• Format WebP i AVIF – czym zastąpić ciężkie JPG i PNG
• Kompresja i wymiary – ile naprawdę powinno ważyć zdjęcie
• Jak nazywać pliki graficzne pod SEO
• Atrybut alt – opis, który czyta Google i czytnik ekranu
• Lazy loading obrazów – ładuj wtedy, gdy są potrzebne
• Grafika Google jako osobne źródło ruchu
• Wdrożenie krok po kroku dla sklepu i bloga
• Podsumowanie – optymalizacja obrazów SEO w praktyce
• Najczęściej zadawane pytania

Dwie korzyści naraz: szybkość i ruch z Grafiki

Obraz to zwykle najcięższy element na stronie – grafiki potrafią odpowiadać za 60-70% wagi całej podstrony. Każdy zaoszczędzony kilobajt to ułamek sekundy szybszego ładowania.

Ta szybkość przekłada się na Core Web Vitals, czyli wskaźniki, którymi Google ocenia komfort korzystania ze strony. Największy obrazek w widocznym obszarze (LCP) to najczęściej zdjęcie hero albo główne zdjęcie produktu – jeśli waży 3 MB, użytkownik patrzy na pustkę przez kilka sekund.

Drugi front to widoczność. Dobrze opisany obraz pojawia się w zakładce Grafika Google, a zdjęcia wyświetlają się też bezpośrednio w wynikach mobilnych. Dla branż wizualnych – mebli, mody, gastronomii, wnętrz, motoryzacji – to realne dodatkowe wejścia, których nie kupujesz za złotówkę.

Pro-tip: zanim cokolwiek zoptymalizujesz, zmierz punkt wyjścia. Wrzuć adres swojej najcięższej podstrony do PageSpeed Insights i zapisz wynik LCP oraz wagę strony. Po wymianie obrazów na lekkie zrobisz to samo – i zobaczysz różnicę czarno na białym, zamiast wierzyć „na czuja”.

Format WebP i AVIF – czym zastąpić ciężkie JPG i PNG

Pierwsza decyzja to format pliku, bo on sam z siebie potrafi zbić wagę o połowę bez widocznej utraty jakości. Tu nie ma o czym dyskutować: format WebP SEO to dziś standard, który rozumieją wszystkie liczące się przeglądarki.

WebP daje zwykle 25-35% mniejszy plik niż JPG przy tej samej ostrości i nawet więcej przy grafikach, które wcześniej trzymałeś w PNG. AVIF bywa o kolejne 20-30% lżejszy, ale jest bardziej kapryśny w generowaniu – traktuj go jako opcję dla zaawansowanych. Dla większości firm WebP wystarczy.

Zasada doboru formatu, której trzymamy się na stronach klientów:

• Zdjęcia (produkty, realizacje, hero) – WebP, ewentualnie z fallbackiem do JPG.
• Logo, ikony, grafiki z płaskim kolorem – WebP lub SVG; SVG dla wektorów skaluje się bez utraty jakości.
• Animacje – zamiast ciężkiego GIF-a WebP lub krótkie wideo MP4, które potrafi ważyć dziesięć razy mniej.

Jeśli stronę masz na WordPressie, konwersję do WebP załatwia wtyczka do optymalizacji obrazów – generuje lekką wersję i serwuje ją automatycznie, zostawiając Ci oryginał w bibliotece mediów. Na sklepie czy stronie pisanej „z palca” warto, żeby robił to serwer albo CDN. Tym, jak ustawić to porządnie od fundamentów, zajmujemy się przy tworzeniu stron WWW.

Kompresja i wymiary – ile naprawdę powinno ważyć zdjęcie

Sam format to połowa sukcesu. Druga połowa to kompresja zdjęć na stronę i rozsądne wymiary. Najczęstszy błąd, jaki widzimy: zdjęcie 5000 px wrzucone w kontener o szerokości 600 px. Przeglądarka pobiera gigantyczny plik i go zmniejsza – płacisz transferem za piksele, których nikt nie zobaczy.

Najpierw przeskaluj, potem kompresuj. Poniżej orientacyjne wartości, od których zwykle zaczynamy – to uśrednione stawki rynkowe i średnie z kont naszych klientów, u Ciebie może być inaczej, zależnie od layoutu i jakości zdjęć:

Do samej kompresji nie potrzebujesz drogich narzędzi. Squoosh od Google w przeglądarce, TinyPNG albo wtyczka na WordPressie zbijają wagę o kilkadziesiąt procent przy ustawieniu jakości na 75-85%. Poniżej tej granicy zaczynają się widoczne artefakty, więc nie schodź na siłę do skrajności tylko po to, żeby liczba była ładniejsza.

Pro-tip: w sklepie zdefiniuj wymaganą wielkość zdjęć w instrukcji dla osoby dodającej produkty. Jedna prosta reguła – „wgrywamy WebP, maks. 1500 px, do 150 KB” – oszczędza więcej transferu niż najlepsza wtyczka uruchomiona po fakcie na tysiącu zaniedbanych grafik.

Jak nazywać pliki graficzne pod SEO

Tu zaczyna się część, którą prawie wszyscy pomijają, a która kosztuje zero złotych. Nazwa pliku to dla Google podpowiedź, co jest na obrazie. Plik IMG_20260607_4471.jpg nie mówi mu nic. Plik fotel-uszak-welurowy-szary.webp mówi wszystko.

Trzymaj się kilku prostych reguł, identycznych jak przy tworzeniu treści produktowych:

• Słowa rozdzielaj myślnikami, nigdy podkreślnikami ani spacjami (spacja zamienia się w brzydkie %20 w adresie).
• Używaj małych liter i bez polskich znaków w samej nazwie pliku – „lozko” zamiast „łóżko”, żeby uniknąć problemów z kodowaniem na serwerze.
• Wpleć frazę, ale naturalnie – opisz to, co faktycznie widać. Nie upychaj pięciu słów kluczowych w jednej nazwie.
• Trzymaj jeden schemat dla całej kategorii, np. nazwa-produktu-kolor-wariant.webp.

Na blogu działa to tak samo. Zamiast wykres-2.png nazwij plik koszt-leada-meta-ads-2026.webp – opisuje treść i zawiera frazę, pod którą artykuł chce się wyświetlać. To drobiazg, ale skala robi różnicę: sklep z tysiącem produktów to tysiąc opisowych nazw, które razem budują tematyczność strony.

Atrybut alt – opis, który czyta Google i czytnik ekranu

Jeśli nazwa pliku to podpowiedź, to atrybut alt zdjęcia jest pełnym opisem. To tekst alternatywny, który wyświetla się, gdy obraz się nie załaduje, który czyta na głos czytnik ekranu osobie niewidomej i który Google traktuje jako jeden z najważniejszych sygnałów o zawartości grafiki.

Dobry alt opisuje obraz tak, jakbyś tłumaczył go komuś przez telefon. Krótko, konkretnie, z naturalnie wplecioną frazą – bez listy słów kluczowych oddzielonych przecinkami, bo to wygląda na spam i nic nie wnosi.

• Źle: alt=”fotel, fotel tanio, fotel sklep, meble Radom, kup fotel”
• Dobrze: alt=”Szary welurowy fotel uszak w salonie z drewnianą podłogą”

Dwie rzeczy warto zapamiętać. Po pierwsze, obrazy czysto dekoracyjne (tła, ozdobniki, separatory) powinny mieć pusty alt (alt=""), żeby czytnik ekranu je pominął – nie każdy piksel musi być opisany. Po drugie, alt to nie miejsce na frazę „na siłę”; jeśli na zdjęciu nie ma fotela, nie pisz w alt „fotel” tylko dlatego, że chcesz się pod to wypozycjonować.

Pro-tip: na sklepie nie zostawiaj generowania altów wyłącznie automatowi. Wtyczka, która wstawia w alt nazwę produktu, jest lepsza niż nic, ale zdjęcie pokazujące detal czy zastosowanie zasługuje na własny, ręczny opis. To te zdjęcia najczęściej łapią ruch z Grafiki.

Lazy loading obrazów – ładuj wtedy, gdy są potrzebne

Możesz mieć idealnie skompresowane WebP i wciąż mieć wolną stronę, jeśli przeglądarka ładuje wszystkie trzydzieści zdjęć naraz, zanim użytkownik przewinie w dół. Od tego jest lazy loading obrazów – ładowanie zdjęcia dopiero wtedy, gdy zbliża się do widocznego obszaru ekranu.

Wystarczy atrybut loading="lazy" w znaczniku obrazu – nowoczesne przeglądarki ogarniają resztę bez żadnej wtyczki. WordPress dodaje go domyślnie do obrazów w treści.

Zdjęcia widoczne od razu po wejściu – hero, pierwsze zdjęcie produktu – nie powinny mieć lazy loadingu, bo to opóźnia załadowanie najważniejszego elementu i psuje LCP. Im daj loading="eager", a leniwie wczytuj wszystko „pod linią zgięcia”.

Zawsze podawaj atrybuty width i height – jeśli przeglądarka nie zna wymiarów zdjęcia, treść „skacze” w trakcie ładowania, co pogarsza wskaźnik CLS. Temat szybkości szerzej omawiamy w artykule o Core Web Vitals i szybkości strony.

Grafika Google jako osobne źródło ruchu

Zakładka Grafika to osobna wyszukiwarka z własnym ruchem – dla wielu branż wizualnych potrafi przyprowadzić klientów, którzy najpierw szukają inspiracji, a dopiero potem konkretnego sprzedawcy.

Żeby Twoje zdjęcia tam trafiły, Google musi je znaleźć i zrozumieć. Składają się na to elementy, o których była mowa wyżej: opisowa nazwa pliku, trafny alt, kontekst tekstowy wokół obrazu i obecność zdjęć w mapie witryny. Im spójniej te sygnały opisują to samo, tym pewniej obraz pokaże się na właściwą frazę.

Z naszej praktyki: u jednego z klientów z branży wnętrzarskiej samo uporządkowanie nazw plików i altów na kartach produktów zauważalnie podbiło liczbę wejść z Grafiki w ciągu kilku tygodni – bez dotykania reklam i bez nowych treści. To nie jest kanał, który zastąpi optymalizację SEO on-page, ale dokłada się do niej za darmo, jeśli już i tak dodajesz zdjęcia.

Jeśli sprzedajesz online, warto połączyć to z szerszą układanką – opisy, struktura kategorii, dane strukturalne. Pokazujemy to na przykładach w tekście o pozycjonowaniu sklepu internetowego.

Wdrożenie krok po kroku dla sklepu i bloga

Zbierzmy to w prostą listę do odhaczenia. Kolejność nie jest przypadkowa – od rzeczy o największym wpływie do detali.

1. Przeskaluj przed wgraniem. Ustal maksymalną szerokość dla każdego typu obrazu i trzymaj się jej. To jedyny krok robiony „ręcznie” – reszta da się zautomatyzować.
2. Konwertuj do WebP. Na WordPressie wtyczka, na sklepie konfiguracja serwera lub CDN. Zostaw oryginały na wszelki wypadek.
3. Kompresuj do rozsądnej wagi. Jakość 75-85%, cel zgodny z tabelą. Sprawdź na oko, czy nie widać artefaktów.
4. Nadaj opisowe nazwy plików. Myślniki, małe litery, bez polskich znaków, jeden schemat na kategorię.
5. Uzupełnij atrybuty alt. Krótki, konkretny opis z naturalną frazą. Dekoracje – alt pusty.
6. Włącz lazy loading dla obrazów poniżej linii zgięcia, wyłącz dla hero. Dodaj width i height.
7. Zmierz efekt. PageSpeed Insights przed i po. Sprawdź w Search Console, czy zdjęcia łapią wyświetlenia w Grafice.

Dla sklepu kluczowe są punkty drugi i trzeci – przy setkach produktów to one robią największą różnicę w transferze i szybkości. Dla bloga najwięcej daje punkt czwarty i piąty, bo dobrze opisane grafiki w artykułach budują tematyczność całej domeny.

Podsumowanie – optymalizacja obrazów SEO w praktyce

Prawidłowa optymalizacja obrazów SEO nie wymaga ani drogich narzędzi, ani godzin pracy. WebP zamiast JPG, rozsądne wymiary, opisowa nazwa pliku, trafny alt i lazy loading to zestaw, który poprawia Core Web Vitals i otwiera dodatkowy kanał ruchu z Grafiki Google – bez złotówki wydanej na reklamy.

Nie wiesz, gdzie konkretnie Twoja strona traci na obrazach? Od tego jest audyt strony WWW – sprawdzamy wagę plików, formaty, alty i wskaźniki Core Web Vitals, a potem pokazujemy listę poprawek uszeregowaną według wpływu. Jeśli chcesz mieć szybszą stronę i więcej ruchu organicznego, napisz do nas – przejrzymy obrazy na Twojej stronie i powiemy, co poprawić.

Najczęściej zadawane pytania

Czy WebP jest lepszy od JPG do SEO?
Tak, w zdecydowanej większości przypadków. WebP daje przy tej samej jakości plik o 25-35% lżejszy od JPG, a lżejszy obraz to szybsze ładowanie i lepsze Core Web Vitals. Sam format nie podnosi pozycji bezpośrednio, ale szybkość strony jest czynnikiem rankingowym, więc efekt jest realny.

Ile powinno ważyć zdjęcie na stronie?
Zależy od roli. Zdjęcie hero – do 200-300 KB, produkt 80-150 KB, miniatura poniżej 50 KB. Najpierw przeskaluj do faktycznych wymiarów wyświetlania, potem kompresuj przy jakości 75-85%.

Czy każdy obraz musi mieć atrybut alt?
Każdy obraz niosący treść – tak. Obrazy czysto dekoracyjne (tła, ozdobniki) powinny mieć alt pusty (alt=""), żeby czytnik je pominął. Alt opisuje to, co widać, bez upychania słów kluczowych.

Czy lazy loading może zaszkodzić SEO?
Tylko jeśli zastosujesz go do zdjęcia hero. Wtedy opóźnia załadowanie najważniejszego elementu i psuje LCP. Obrazy pod linią zgięcia ładuj leniwie, hero i pierwsze zdjęcie produktu ładuj z priorytetem.

Jak nazwać plik graficzny pod SEO?
Opisowo: małe litery, słowa rozdzielone myślnikami, bez polskich znaków i spacji, z naturalnie wplecioną frazą opisującą zawartość. Zamiast IMG_4471.jpg użyj fotel-uszak-welurowy-szary.webp. Jeden schemat w obrębie kategorii.