Jak zoptymalizować zdjęcia produktów pod SEO?

Ciężkie zdjęcia produktów spowalniają sklep, pogarszają wygodę zakupów i mogą obniżać wyniki w wyszukiwarce. Optymalizacja zdjęć pod SEO polega na połączeniu dobrej jakości z małą wagą pliku: wybierz WebP, dopasuj rozdzielczość do miejsca wyświetlania, skompresuj obraz, nadaj mu opisową nazwę i uzupełnij atrybut ALT.

Dlaczego zdjęcia wpływają na SEO sklepu?

Zdjęcia produktów są często największymi plikami pobieranymi podczas otwierania karty produktu lub listy kategorii. Jeżeli sklep wysyła do przeglądarki fotografię o wymiarach 4000 × 4000 px, choć na ekranie zajmuje ona 400 × 400 px, użytkownik pobiera dane, których nie potrzebuje.

Większa waga oznacza dłuższe ładowanie strony, szczególnie na urządzeniach mobilnych i wolniejszych połączeniach. To pogarsza doświadczenie użytkownika, zwiększa ryzyko opuszczenia strony i może obniżać wyniki testów wydajności, takich jak PageSpeed. Szybkość nie jest jedynym elementem oceny strony, ale zdjęcia mają na nią bezpośredni wpływ.

Dobrze przygotowane obrazy mogą też pojawić się w Google Grafika. Wyszukiwarka korzysta między innymi z nazwy pliku, tekstu alternatywnego, kontekstu strony oraz danych technicznych obrazu.

Sklep internetowy z dobrze zoptymalizowanymi zdjęciami produktów na komputerze i telefonie

Jaki format zdjęcia produktu wybrać?

Format należy dopasować do rodzaju grafiki. Dla fotografii produktowych najczęściej najlepszym punktem wyjścia jest WebP, natomiast logotypy i proste ikony mogą lepiej działać jako SVG.

Format	Zastosowanie	Zalety	Wady
WebP	Zdjęcia produktów, grafiki z przezroczystością	Dobra jakość przy małej wadze, kompresja stratna i bezstratna, obsługa przezroczystości	W starszych środowiskach może wymagać formatu zastępczego
JPEG	Fotografie i obrazy z dużą liczbą kolorów	Mała waga, szeroka kompatybilność, prosta kompresja	Kompresja stratna, brak przezroczystości
PNG	Grafiki z przezroczystością, zrzuty ekranu, proste ilustracje	Dobra jakość, obsługa przezroczystości, kompresja bezstratna	Często większa waga niż JPEG lub WebP
SVG	Logotypy, ikony, proste ilustracje wektorowe	Skalowanie bez utraty jakości, niewielka waga w przypadku prostych grafik	Nie jest przeznaczony do typowych fotografii

WebP łączy cechy przydatne w e-commerce. Może przechowywać zdjęcia z kompresją stratną lub bezstratną, a przy porównywalnej jakości zwykle zajmuje mniej miejsca niż tradycyjny JPEG lub PNG. Dokładna oszczędność zależy od zdjęcia, wymiarów i ustawień kompresji, dlatego rezultat trzeba sprawdzić na konkretnych plikach.

Jeżeli sklep obsługuje starsze przeglądarki, wdrożenie powinno przewidywać fallback, czyli alternatywny plik JPEG lub PNG. Współczesne CMS-y i usługi obrazów często generują odpowiednią wersję automatycznie.

Jak przygotować zdjęcie przed wgraniem?

Przed publikacją przeprowadź cały proces w stałej kolejności. Dzięki temu każdy produkt otrzyma plik o podobnej jakości, wymiarach i strukturze nazwy:

Dopasuj kadrowanie i wymiary – sprawdź, w jakim rozmiarze zdjęcie jest wyświetlane na karcie produktu, liście kategorii i w powiększeniu. Nie wgrywaj bez potrzeby fotografii prosto z aparatu.
Zapisz obraz w odpowiednim formacie – dla zdjęcia produktowego wybierz WebP, a JPEG zachowaj jako wersję zapasową, jeśli wymaga tego konfiguracja sklepu.
Skompresuj plik – zmniejszaj wagę do momentu, w którym różnica jakości nie jest widoczna dla klienta.
Zmień nazwę pliku – użyj krótkiego, opisowego określenia produktu i elementu widocznego na fotografii.
Sprawdź obraz na telefonie i komputerze – fotografia powinna pozostać czytelna, a jej ładowanie nie powinno opóźniać korzystania ze strony.

Rozdzielczość a waga pliku

Rozdzielczość to liczba pikseli, na przykład 1200 × 1200 px. Waga pliku zależy między innymi od rozdzielczości, formatu, stopnia kompresji i zawartości zdjęcia. Nie są to pojęcia tożsame. Dwa obrazy o identycznych wymiarach mogą mieć zupełnie różną wagę.

Ustal osobne rozmiary dla miniatur, zdjęć na listach produktów i głównej fotografii na karcie produktu. Miniatura nie powinna być tylko dużym obrazem zmniejszonym przez przeglądarkę. Wygeneruj mniejszy wariant, aby użytkownik pobierał plik zbliżony do rzeczywistego rozmiaru wyświetlania.

Kompresja zdjęć

Do ręcznej kompresji możesz wykorzystać między innymi TinyPNG, ImageOptim lub funkcje eksportu w programie graficznym. W WordPressie podobny proces mogą automatyzować wtyczki Smush, ShortPixel, Imagify i EWWW Image Optimizer. Przed wyborem narzędzia sprawdź, czy obsługuje WebP, tworzy kopie zapasowe i pozwala ustawić jakość.

Dla wielu sklepów rozsądnym celem jest utrzymanie zdjęcia produktowego w granicach 150–200 KB, ale nie jest to sztywna reguła. Duże zdjęcie przeznaczone do powiększenia może wymagać większego pliku, natomiast miniatura powinna być znacznie lżejsza.

Nazwy plików

Nazwa pliku powinna informować, co znajduje się na zdjęciu. Stosuj małe litery, cyfry i myślniki. Nie używaj spacji, polskich znaków ani przypadkowych oznaczeń z aparatu.

Przydatne zasady nazewnictwa obejmują:

Opis produktu – nazwij plik zgodnie z tym, co przedstawia fotografia.
Myślniki zamiast spacji – zapisuj na przykład czerwona-sukienka-letnia.webp.
Bez polskich znaków – wybierz drewniane-lozko-dzieciece.webp zamiast nazwy z literami ą, ć lub ę.
Bez zbędnych słów – nie dodawaj ciągu fraz, numerów i powtórzeń słów kluczowych.

Nazwa czerwona-sukienka-letnia.jpg jest użyteczna, natomiast DSC_001.jpg, obraz1.jpg lub produkt-najlepszy-tani-sklep.jpg nie opisują wiarygodnie zawartości obrazu.

Jak opisać zdjęcie dla Google i użytkownika?

Atrybut ALT

ALT to tekst alternatywny. Pomaga osobom korzystającym z czytników ekranu zrozumieć zawartość zdjęcia, a wyszukiwarkom dostarcza informacji o tym, co przedstawia grafika. Powinien być krótki, konkretny i zgodny z obrazem. Nie twórz z niego listy fraz.

Dobre opisy ALT mogą wyglądać tak:

Zdjęcie główne – czerwona sukienka letnia z krótkim rękawem.
Detal produktu – zbliżenie na metalowy zamek czerwonej sukienki.
Wariant kolorystyczny – czarna skórzana torba na ramię.
Produkt na białym tle – drewniane krzesło dziecięce z podłokietnikami.

Zły ALT to na przykład „sukienka sukienki sklep sukienki tania sukienka”, ponieważ nie opisuje naturalnie obrazu. Jeżeli zdjęcie jest wyłącznie dekoracyjne i nie wnosi informacji, w kodzie można zastosować pusty ALT. W przypadku zdjęć produktów nie należy jednak pomijać opisu.

Title a ALT – jaka jest różnica?

ALT opisuje zawartość obrazu i pełni funkcję dostępnościową. Atrybut title może wyświetlić podpowiedź po najechaniu kursorem, ale nie zastępuje tekstu alternatywnego. Nie kopiuj automatycznie tego samego zdania do obu pól. Title jest opcjonalnym dodatkiem, natomiast ALT powinien opisywać istotną grafikę.

W opisie nie musisz powtarzać nazwy produktu identycznie przy każdej fotografii. Przy zdjęciach galerii opisz różnicę między ujęciami, na przykład kolor, detal, tył produktu lub sposób użycia.

Dane strukturalne i kontekst strony

Zdjęcie powinno znajdować się blisko nazwy i opisu produktu. Dane strukturalne Product mogą ułatwić wyszukiwarce interpretację karty produktu, zwłaszcza gdy obejmują nazwę, cenę, dostępność i adresy obrazów. Nie zastępują one kompresji ani ALT, ale porządkują informacje o ofercie.

Jak zautomatyzować optymalizację w sklepie?

Przy większym katalogu ręczna obróbka każdego zdjęcia szybko staje się wąskim gardłem. CMS może automatycznie tworzyć kilka rozmiarów obrazu, konwertować pliki do WebP, kompresować je podczas wysyłania i dostarczać wersję dopasowaną do urządzenia.

Warto sprawdzić, czy system generuje osobno zdjęcia dla miniatur, list produktów, karty produktu i powiększenia. Sama zmiana wymiaru obrazu w CSS nie zmniejsza pliku pobieranego przez przeglądarkę.

Responsywne obrazy i srcset

Atrybut srcset pozwala wskazać kilka wersji tego samego zdjęcia. Przeglądarka wybiera plik odpowiedni dla szerokości ekranu i gęstości pikseli. Dzięki temu telefon nie musi pobierać dużego obrazu przygotowanego dla monitora.

Wdrożenie powinno obejmować także właściwe wymiary obrazu w HTML lub CSS. Pozwala to przeglądarce wcześniej zarezerwować miejsce i ograniczyć przesuwanie treści podczas ładowania.

Lazy Loading i CDN

Lazy Loading opóźnia pobieranie obrazów, które znajdują się poza bieżącym widokiem. Przydaje się na długich listach produktów, ale nie powinien obejmować głównego zdjęcia widocznego od razu po wejściu na kartę produktu.

CDN może dostarczać obrazy z serwera znajdującego się bliżej użytkownika oraz dynamicznie tworzyć warianty o określonej szerokości i jakości. W dużym sklepie warto połączyć CDN z automatyczną konwersją WebP lub AVIF, pamiętając o wersji zapasowej i kontroli jakości.

Lista kontrolna przed publikacją zdjęcia

Przed wgraniem nowej fotografii sprawdź cztery podstawowe obszary:

Format – zdjęcie jest zapisane jako WebP albo jako JPEG, jeśli sklep wymaga tego formatu zastępczego.
Nazwa pliku – opisuje produkt, używa myślników i nie zawiera polskich znaków.
Waga – plik jest skompresowany, a dla typowego zdjęcia produktowego mieści się w rozsądnym zakresie, najlepiej około 150–200 KB, gdy pozwala na to jakość.
ALT – opisuje konkretną fotografię i nie zawiera sztucznie powtórzonych fraz.

Największy efekt daje połączenie kilku działań, a nie samo dodanie słowa kluczowego do nazwy pliku. Dopasuj wymiary do miejsca wyświetlania, kompresuj zdjęcia, serwuj WebP, stosuj responsywne warianty i opisuj obrazy zgodnie z ich zawartością. Tak przygotowane grafiki wspierają szybkość sklepu, dostępność i widoczność produktów w Google Grafika.