Optymalizacja obrazów w dużym katalogu produktowym krok po kroku

Zdjęcia to zwykle największa część wagi strony produktowej i listingu kategorii. W sklepie z kilkuset produktami można je poprawić ręcznie. Przy dziesięciu tysiącach SKU, kilku zdjęciach na produkt i wariantach w różnych kolorach ręczna praca przestaje być możliwa, a każdy błąd w procesie powtarza się tysiące razy.

W takim katalogu nie wystarczy jednorazowa kompresja. Potrzebny jest proces: od zdjęcia w studiu, przez zapis oryginału, po format i rozmiar dopasowany do urządzenia klienta. W artykule opisujemy, jak ustawić ten proces tak, żeby strona ładowała się szybciej, a zdjęcia nie traciły jakości, która sprzedaje produkt.

Dlaczego obrazy spowalniają duże sklepy

Na stronie kategorii przeglądarka pobiera kilkadziesiąt miniatur, a na karcie produktu galerię zdjęć w wysokiej rozdzielczości. Jeśli sklep wysyła ten sam plik o szerokości 2000 pikseli na telefon i na monitor, użytkownik mobilny pobiera kilka razy więcej danych, niż jest w stanie wyświetlić. W dużym katalogu ten problem dotyczy każdej podstrony jednocześnie.

Szybkość wpływa na sprzedaż i widoczność. Google mierzy doświadczenie użytkownika wskaźnikami Core Web Vitals, a jednym z nich jest Largest Contentful Paint, czyli czas wyświetlenia największego elementu na ekranie. Na karcie produktu tym elementem jest zwykle główne zdjęcie. Google uznaje LCP do 2,5 sekundy za dobry wynik.

Źródłem problemu rzadko jest jeden duży plik. Częściej to brak zasad: dostawcy przesyłają zdjęcia w różnych formatach i rozmiarach, platforma generuje kilkanaście miniatur, z których część nie jest używana, a zdjęcia wgrane przed laty nigdy nie zostały przetworzone ponownie. Każdy z tych elementów trzeba uporządkować osobno.

Formaty i kompresja bez utraty jakości

Optymalizacja obrazów zaczyna się od wyboru formatu. Według Google pliki WebP są o 25-34% mniejsze od porównywalnych plików JPEG. AVIF zwykle daje jeszcze mniejsze pliki przy tej samej jakości, ale jego kodowanie trwa dłużej, co ma znaczenie przy przetwarzaniu tysięcy zdjęć. JPEG pozostaje formatem zapasowym dla starszych przeglądarek.

Kompresja stratna jest bezpieczna, jeśli poziom jakości ustawisz na podstawie testu, a nie domyślnej wartości narzędzia. Wybierz kilkanaście reprezentatywnych zdjęć: produkt z drobną fakturą, jasny produkt na białym tle, ciemny produkt, zdjęcie aranżacyjne. Porównaj je w kilku ustawieniach przy powiększeniu, z którego korzystają klienci. Najniższe ustawienie bez widocznych artefaktów staje się standardem.

Osobno traktuj obrazy, w których liczy się każdy szczegół: tkaniny, biżuterię, wykończenia powierzchni. Do zoomu na karcie produktu może być potrzebny większy plik w wyższej jakości, ładowany dopiero wtedy, gdy użytkownik go uruchomi. Logo, ikony i proste grafiki zapisuj jako SVG, które skalują się bez utraty ostrości.

Rozmiary responsywne i kolejność ładowania

Atrybuty srcset i sizes pozwalają przeglądarce wybrać plik dopasowany do szerokości ekranu i gęstości pikseli. Sklep przygotowuje kilka wersji każdego zdjęcia, na przykład dla miniatury na listingu, galerii na telefonie i galerii na komputerze. Liczbę wariantów ogranicz do tych, które szablon naprawdę wykorzystuje, bo każdy dodatkowy rozmiar to więcej plików na serwerze.

Leniwe ładowanie, czyli atrybut loading=lazy, opóźnia pobieranie zdjęć poza pierwszym ekranem. Na listingu kategorii z kilkudziesięcioma produktami to duża oszczędność transferu. Wyjątkiem jest główne zdjęcie produktu i pierwsze miniatury: tych nie ładuj leniwie, a głównemu zdjęciu nadaj atrybut fetchpriority=high, żeby przeglądarka pobrała je w pierwszej kolejności.

Podawaj wymiary obrazu w kodzie albo rezerwuj dla niego miejsce w CSS. Bez tego treść przesuwa się podczas ładowania zdjęć, co pogarsza wskaźnik Cumulative Layout Shift i utrudnia klientowi kliknięcie w przycisk dodania do koszyka. W dużych katalogach najprościej zapewnić stałe proporcje zdjęć produktowych już na etapie sesji.

CDN i automatyzacja dla tysięcy produktów

Przy dużym katalogu przetwarzanie obrazów warto przenieść poza serwer sklepu. Usługi CDN z transformacją obrazów, takie jak Cloudflare Images, Cloudinary, imgix czy Bunny Optimizer, generują warianty w locie: zmieniają rozmiar, format i jakość na podstawie parametrów w adresie. Sklep przechowuje jeden oryginał, a CDN serwuje plik dopasowany do przeglądarki z serwera najbliższego klientowi.

To rozwiązanie ma koszty i ograniczenia. Opłaty zależą zwykle od liczby transformacji, przechowywanych plików albo transferu, więc przy dużym ruchu trzeba je policzyć przed wdrożeniem. Sklep staje się też zależny od zewnętrznej usługi, dlatego zachowaj możliwość powrotu do lokalnych plików i sprawdź, jak CDN odświeża pamięć podręczną po podmianie zdjęcia.

Druga część automatyzacji to import. Zdjęcia od dostawców i z sesji powinny przechodzić przez ten sam proces: kontrolę minimalnej rozdzielczości, przycięcie do ustalonych proporcji, nazwę pliku zgodną z produktem i uzupełnienie tekstu alternatywnego. W sklepach na WooCommerce można to zrobić skryptem przy imporcie produktów albo w systemie PIM, z którego sklep pobiera dane.

Kontrola jakości i SEO zdjęć

Po wdrożeniu mierz efekty na danych od realnych użytkowników, uzupełniając nimi testy laboratoryjne. Raport Core Web Vitals w Google Search Console grupuje podobne adresy, więc szybko pokazuje, czy problem dotyczy kart produktu, listingów czy strony głównej. PageSpeed Insights wskazuje konkretne obrazy, które można zmniejszyć albo zapisać w nowszym formacie.

Zdjęcia są też źródłem ruchu z wyszukiwarki grafik i z Google Shopping. Opisowe nazwy plików, teksty alternatywne opisujące produkt i jego wariant oraz stałe adresy obrazów pomagają w indeksacji. Przy przejściu na CDN zadbaj o to, żeby adresy obrazów w pliku produktowym dla Merchant Center pozostały dostępne, inaczej produkty mogą zostać odrzucone.

Kontrolę jakości wizualnej zostaw człowiekowi. Raz w miesiącu przejrzyj losową próbkę kart produktu na telefonie i komputerze, zwłaszcza produktów z drobnymi detalami. Automatyczny proces, który oszczędza transfer kosztem wyglądu produktu, może kosztować więcej sprzedaży, niż daje szybsze ładowanie strony.

Jak przeprowadzić optymalizację zdjęć w istniejącym katalogu?

W sklepie, który działa od kilku lat, zmiana procesu dotyczy zarówno nowych, jak i tysięcy już opublikowanych zdjęć. Poniższa kolejność ogranicza ryzyko i pozwala mierzyć efekt każdego etapu.

1. Zmierz stan wyjściowy: LCP dla kart produktu i listingów w Search Console oraz łączną wagę obrazów na kilku typowych podstronach.
2. Zabezpiecz oryginały w pełnej rozdzielczości poza katalogiem publicznym. Każda kolejna konwersja ma powstawać z oryginału, nie z wcześniej skompresowanego pliku.
3. Ustal standard: proporcje, minimalną rozdzielczość, formaty, poziom jakości i listę rozmiarów potrzebnych w szablonie.
4. Przetwórz istniejący katalog partiami, zaczynając od kategorii z największym ruchem, i porównaj wyniki z pomiarem wyjściowym.
5. Wbuduj ten sam standard w import produktów, żeby nowe zdjęcia od razu trafiały do sklepu w docelowej formie.

Podsumowanie

Optymalizacja obrazów w dużym sklepie działa, gdy jest procesem, a nie jednorazową akcją. Nowoczesne formaty i kompresja dobrana na podstawie testów zmniejszają pliki, rozmiary responsywne i właściwa kolejność ładowania przyspieszają wyświetlanie, a CDN i automatyzacja importu utrzymują standard przy tysiącach produktów. Pomiar przed i po każdym etapie pokazuje, które zmiany realnie poprawiły wyniki.

Jeśli Twój sklep ma problem z czasem ładowania kart produktu albo planujesz migrację katalogu, zacznij od pomiaru i przeglądu obecnego procesu zdjęć. Umów bezpłatną konsultację z IVN, a wskażemy, od których zmian zacząć.