Optymalizacja zdjęć produktowych: WebP, lazy load, CDN

WebP tnie wagę zdjęcia zwykle o 25-35 procent względem JPG
Zdjęcie główne produktu trzymaj poniżej 100-200 KB po kompresji
srcset sprawia, że telefon nie pobiera grafiki w rozmiarze desktopowym
Lazy load dla zdjęć poniżej ekranu, nigdy dla zdjęcia głównego
CDN dokładasz przy ruchu z wielu regionów i ciężkich galeriach
Alt tekst z nazwą produktu pomaga w SEO i jest wymagany dla dostępności
[/dwb_keytakeaways]

Dlaczego zdjęcia decydują o szybkości sklepu

Na większości stron produktowych, które audytuję, zdjęcia odpowiadają za 60 do 80 procent całej wagi strony. Cała reszta, czyli kod, czcionki i skrypty, to ułamek tego, co waży galeria produktu wgrana prosto z aparatu. Dlatego optymalizacja obrazów to zwykle najtańszy i najszybszy sposób, żeby przyspieszyć sklep, bez przebudowy motywu i bez dotykania kodu.

Sprawa ma dwa wymiary i oba przekładają się na pieniądze. Pierwszy to SEO: największe zdjęcie na ekranie to najczęściej element, który Google mierzy jako LCP, jeden z Core Web Vitals. Wolne ładowanie głównej grafiki to gorsza ocena strony i niższa pozycja. Drugi wymiar to konwersja: klient, który czeka cztery sekundy na pojawienie się zdjęcia bluzy, częściej zamyka kartę, niż dodaje produkt do koszyka. Ciężkie zdjęcia kosztują podwójnie, w rankingu i w sprzedaży.

Dobra wiadomość jest taka, że to obszar z jasnymi, powtarzalnymi krokami. Nie ma tu magii ani tajnej wiedzy. Jest format, kompresja, rozmiary, sposób ładowania i opcjonalnie CDN. Po kolei.

WebP i AVIF: format, który tnie wagę o jedną trzecią

Najszybsza pojedyncza zmiana, jaką możesz wprowadzić, to porzucenie JPG na rzecz nowoczesnego formatu. WebP to format od Google, który przy tej samej jakości waży zwykle o 25 do 35 procent mniej niż JPG. AVIF idzie jeszcze dalej i potrafi zejść o kolejne 20 do 30 procent, kosztem wolniejszego kodowania i odrobinę słabszego wsparcia w starszym sprzęcie.

W praktyce nie musisz wybierać jednego. Najlepsze podejście to serwować AVIF przeglądarkom, które go przyjmą, WebP jako format zapasowy dla reszty, a stary JPG zostawić jedynie dla naprawdę archaicznych urządzeń. Brzmi skomplikowanie, ale w WordPress całą tę logikę bierze na siebie wtyczka, więc dla Ciebie to jedno zaznaczone pole w ustawieniach.

Kompresja: gdzie jest granica między wagą a jakością

Sam format to nie wszystko. Drugim dźwignią jest stopień kompresji, czyli ile danych obrazu poświęcasz w zamian za niższą wagę. Tu obowiązuje zdrowy rozsądek: dla zdjęć produktowych celuj w kompresję, która tnie wagę agresywnie, ale zostawia detale ważne dla decyzji zakupowej, jak faktura materiału czy kolor.

Konkretne progi, do których dążę przy sklepach:

• Zdjęcie główne produktu: zwykle 80-200 KB po konwersji do WebP, zależnie od wymiarów. Powyżej 300 KB warto sprawdzić, czy nie da się ścisnąć mocniej.
• Miniatury w katalogu: często poniżej 30 KB, bo wyświetlają się małe i nie potrzebują pełnej szczegółowości.
• Zdjęcia w galerii i lifestyle: do 250 KB, bo zwykle ładują się poniżej ekranu i nie wpływają na LCP.

Najczęstszy grzech, jaki widzę, to grafika produktu ważąca jeden czy dwa megabajty, bo ktoś wrzucił plik prosto z telefonu albo aparatu, w rozdzielczości 4000 pikseli szerokości. Sama zmiana wymiarów do rozsądnych 1500 pikseli plus kompresja potrafi zbić wagę dziesięciokrotnie, a oko klienta nie zauważy różnicy na ekranie.

Wymiary i srcset: telefon nie potrzebuje grafiki dla desktopa

Wyobraź sobie sytuację, w której klient wchodzi na telefonie z ekranem szerokim na 400 pikseli, a sklep każe mu pobrać zdjęcie szerokie na 2000 pikseli, bo taki jeden plik leży na serwerze. To czyste marnowanie transferu i czasu ładowania. Rozwiązaniem jest mechanizm srcset, czyli podanie kilku rozmiarów tej samej grafiki, z których przeglądarka sama wybiera najlepszy dla danego ekranu.

WordPress robi to natywnie od lat: przy wgraniu zdjęcia generuje kilka rozmiarów (miniatura, średni, duży) i wstawia je w atrybut srcset. Twoim zadaniem jest tylko upewnić się, że motyw rzeczywiście z tego korzysta i że wygenerowane rozmiary pasują do faktycznych miejsc, w których wyświetlasz grafiki. Źle dobrane rozmiary obrazów w motywie to częsta cicha przyczyna, dla której telefon wciąż pobiera za duże pliki mimo poprawnego srcset.

Lazy load: ładuj zdjęcia dopiero, gdy są potrzebne

Lazy load, czyli leniwe ładowanie, oznacza, że przeglądarka pobiera zdjęcie dopiero, gdy klient do niego doscrolluje, a nie wszystkie naraz przy wejściu. Dla strony z długą galerią albo listingiem produktów to ogromna oszczędność, bo przy pierwszym wyświetleniu pobierasz tylko to, co widać na ekranie.

Dziś nie potrzebujesz do tego osobnej wtyczki ani biblioteki JavaScript. Wystarczy natywny atrybut przeglądarki loading lazy, który WordPress dodaje automatycznie do obrazów w treści. Jest jeden warunek, którego absolutnie nie wolno złamać.

• Zdjęcie główne produktu widoczne od razu na ekranie: nigdy lazy load. Tu chcesz odwrotnie, czyli wczytanie z priorytetem (fetchpriority high lub preload), bo to ono liczy się jako LCP.
• Wszystkie zdjęcia poniżej linii zgięcia: lazy load jak najbardziej, bo i tak nikt ich nie widzi przy wejściu.
• Logo i ikony w nagłówku: bez lazy load, bo są nad linią zgięcia i potrzebne natychmiast.

Założenie lazy load na grafikę główną to najczęstszy błąd, który psuje Core Web Vitals zamiast je poprawiać. Przeglądarka opóźnia wtedy ładowanie najważniejszego elementu, a LCP rośnie. Dlatego regule lazy zawsze towarzyszy wyjątek dla pierwszego, widocznego zdjęcia.

CDN: kiedy naprawdę go potrzebujesz

CDN, czyli sieć serwerów rozsianych po świecie, serwuje Twoje zdjęcia z lokalizacji najbliższej odwiedzającemu. Klient z Berlina dostaje grafikę z węzła w Niemczech, a nie z Twojego serwera pod Warszawą. Skraca to czas pobrania i odciąża hosting. Brzmi świetnie, ale nie jest to coś, czego potrzebuje każdy sklep.

CDN ma realny sens, gdy masz odwiedzających rozsianych po różnych krajach, gdy Twoje strony mają bardzo dużo ciężkich grafik w galeriach albo gdy chcesz zdjąć obciążenie z hostingu współdzielonego. Dla lokalnego sklepu na Polskę, z porządnym hostingiem i obrazami już skonwertowanymi do WebP, zysk z CDN bywa kosmetyczny. Kolejność jest ważna: najpierw format, kompresja i rozmiary, bo to daje największą poprawę za darmo, a CDN dokładasz dopiero, gdy dane terenowe pokazują, że hosting jest wąskim gardłem.

Popularne opcje to Cloudflare (ma sensowny darmowy plan, który dla wielu sklepów wystarcza), BunnyCDN (tani, rozliczany za transfer) oraz wbudowane CDN niektórych wtyczek do obrazów, które przy okazji konwersji serwują grafiki ze swojej sieci. Dla większości sklepów, które prowadzę, darmowy Cloudflare plus dobra optymalizacja obrazów to komplet.

Alt teksty: SEO i dostępność w jednym

Atrybut alt, czyli tekst alternatywny obrazu, pełni dwie role naraz i obie warto rozumieć. Po pierwsze, to sygnał dla Google, który pomaga zdjęciu trafić do Grafiki Google i wzmacnia tematyczność strony. Po drugie, to tekst odczytywany przez czytniki ekranu dla osób niewidomych oraz pokazywany, gdy grafika się nie załaduje. Dobry alt obsługuje oba cele jednym opisem.

Zasada jest prosta: opisz naturalnym językiem to, co widać, i wpleć nazwę produktu tam, gdzie pasuje. Bez upychania słów kluczowych, bo to szkodzi i pozycjom, i dostępności.

Automatyzacja w WordPress: ustaw raz i zapomnij

Cała ta optymalizacja brzmi jak dużo pracy, ale w WordPress większość z niej da się zautomatyzować tak, żeby działała na każde nowe zdjęcie bez Twojej uwagi. Kluczowe jest dobranie ustawień raz, świadomie, a potem każda nowa grafika wgrana do sklepu przechodzi przez ten sam proces sama.

Po takiej konfiguracji nowe produkty wgrywasz normalnie, a wtyczka sama konwertuje, kompresuje i serwuje lekkie grafiki. To jest sens automatyzacji: jednorazowy wysiłek konfiguracyjny, który potem pracuje za Ciebie na każde kolejne zdjęcie.

Jeśli prowadzisz sklep i podejrzewasz, że to właśnie zdjęcia ciągną Cię w dół w Google, w DawidWeb robię taki audyt i wdrożenie regularnie: konwersja biblioteki do WebP albo AVIF, poprawne rozmiary i srcset, lazy load bez psucia LCP, w razie potrzeby CDN i porządkowanie alt tekstów pod SEO. Strony i sklepy buduję od 1800 zł, jestem Partnerem Shoper, mam za sobą ponad 120 projektów, a wycenę konkretnego wdrożenia dostajesz w 24 godziny.