Optymalizacja zdjęć w sklepie internetowym - WebP, kompresja i szybkość ładowania

Jak przeprowadzić optymalizację zdjęć w sklepie krok po kroku

Optymalizację najlepiej zaplanować jako proces, a nie jednorazową akcję. Nowe zdjęcia trafiają do sklepu co tydzień, więc zasady muszą być wpisane w sposób pracy grafika lub osoby, która dodaje produkty. Tak wygląda kolejność, którą stosujemy:

[#chart:pgr52b]

Jakie wymiary zdjęć produktów ustawić

Zacznij od sprawdzenia, w jakiej maksymalnej szerokości szablon wyświetla zdjęcie na karcie produktu i w powiększeniu. Jeśli galeria pokazuje zdjęcie w szerokości 800 px, a funkcja powiększenia w 1600 px, nie ma sensu wgrywać plików 6000 px prosto z aparatu. Platforma i tak je przeskaluje, ale oryginał może być pobierany przy powiększeniu albo zajmować miejsce na serwerze.

Pamiętaj też o marketplace'ach. Ten sam zestaw zdjęć często trafia na Allegro, Amazon czy Empik, a każda z tych platform ma własne minimalne wymiary i zasady tła. Dlatego dobrze jest trzymać archiwum oryginałów w wysokiej rozdzielczości i z niego eksportować wersje do sklepu i na marketplace'y. Jak przygotować same oryginały, opisujemy w tekście o tym, jak zrobić zdjęcie produktu na białym tle w domu.

Jak ustawić poziom kompresji

Nie ma jednego ustawienia jakości, które pasuje do wszystkich zdjęć. Zdjęcie gładkiego produktu na białym tle zniesie mocną kompresję, a zdjęcie tkaniny, futra czy drobnego wzoru szybciej pokaże artefakty. Najbezpieczniej jest przygotować kilka wersji tego samego zdjęcia z różnym poziomem jakości i porównać je w powiększeniu 100% na ekranie komputera i na telefonie. Wybrany poziom zapisz jako ustawienie eksportu i stosuj dla całej kategorii.

[#tip] Przed zmianą ustawień zrób próbkę: wybierz 10 typowych zdjęć z różnych kategorii, wyeksportuj je w nowych ustawieniach i porównaj wagę oraz wygląd z obecnymi plikami. Zysk policzysz jednym wzorem, a decyzję podejmiesz na podstawie rzeczywistych zdjęć z Twojego katalogu, a nie ogólnych porad.

Oszczędność na wadze najłatwiej wyrazić procentowo. Pozwala to porównać różne ustawienia eksportu i formaty na tych samych zdjęciach:

[#chart:pgr52c]

Jak optymalizacja zdjęć wpływa na szybkość ładowania sklepu

Szybkość strony Google mierzy wskaźnikami Core Web Vitals. Dla zdjęć najważniejsze są dwa. LCP mierzy, jak szybko pojawia się największy element pierwszego ekranu - na karcie produktu zwykle główne zdjęcie, na stronie głównej baner. Według web.dev dobry LCP to 2,5 sekundy lub mniej dla 75% odsłon. CLS mierzy przesunięcia układu, na przykład gdy zdjęcie bez podanych wymiarów wczytuje się później i przesuwa tekst w dół - web.dev zaleca wynik 0,1 lub mniej (sprawdź aktualne wytyczne).

Lżejsze zdjęcie samo w sobie nie wystarczy, jeśli przeglądarka zaczyna je pobierać za późno. Dlatego optymalizację plików warto połączyć z kilkoma zasadami wdrożenia, które opisaliśmy szerzej przy okazji tekstu o tym, jak przygotować baner na stronę główną sklepu:

• Leniwe ładowanie tylko poniżej pierwszego ekranu. Atrybut loading="lazy" jest obsługiwany przez główne przeglądarki, ale web.dev zaleca, by nie stosować go do obrazów widocznych od razu, zwłaszcza do elementu LCP.

• Wymiary w kodzie. Atrybuty width i height przy każdym zdjęciu pozwalają przeglądarce zarezerwować miejsce i ograniczają przesunięcia układu.

• Kilka rozmiarów jednego zdjęcia. Atrybut srcset pozwala wysłać na telefon mniejszy plik niż na monitor; Google zaleca, by zawsze zostawić też zwykły adres w atrybucie src.

• Zdjęcia w HTML, nie w CSS. Google nie indeksuje obrazów dodanych jako tło w CSS, a przeglądarka wykrywa je później niż obrazy w kodzie strony.

Efekt zmian najprościej sprawdzić w PageSpeed Insights, porównując wynik karty produktu przed optymalizacją i po niej. Raport wskazuje element LCP i podpowiada, które obrazy mają zbyt duże wymiary lub nieoptymalny format.

Jak sprawdzić, które zdjęcia spowalniają sklep

Zanim zaczniesz konwertować cały katalog, sprawdź, gdzie problem jest największy. Wybierz kilka typowych adresów: stronę główną, popularną kategorię i dwie lub trzy karty produktów z dużą galerią. W narzędziach deweloperskich przeglądarki, w zakładce sieci, posortuj pobierane pliki według rozmiaru i zobacz, które obrazy ważą najwięcej. Często okazuje się, że kłopot robi kilka konkretnych grafik - baner, zdjęcie w opisie wgrane w rozdzielczości aparatu albo ikony zapisane jako duże pliki PNG - a nie wszystkie zdjęcia produktów.

Warto też porównać wyniki na telefonie i komputerze. Wskaźniki Core Web Vitals mierzy się osobno dla obu typów urządzeń, a na telefonie z wolniejszym połączeniem każdy zbędny kilobajt jest bardziej odczuwalny. Jeśli sklep ma wystarczająco dużo ruchu, PageSpeed Insights pokaże też dane od rzeczywistych użytkowników, a nie tylko wynik pojedynczego testu.

Zdjęcia w opisach produktów i na listingach kategorii

Optymalizacja często kończy się na galerii, a pomija grafiki w opisie produktu. Tymczasem to tam trafiają infografiki, zdjęcia lifestyle i grafiki z tabelami rozmiarów, wgrywane ręcznie przez edytor opisu, często bez zmniejszenia. Te same zasady dotyczą listingów kategorii: miniatura w siatce produktów wyświetla się w niewielkim rozmiarze, więc sklep powinien wysyłać do niej osobny, mały plik, a nie pełne zdjęcie z karty produktu. Większość platform tworzy takie miniatury automatycznie - sprawdź, czy ta funkcja jest u Ciebie włączona.

[#przyklad] Przykład z umownymi wartościami: karta produktu ma galerię z ośmioma zdjęciami JPG po ok. 1,5 MB, wgranymi prosto z aparatu. Po zmniejszeniu do szerokości powiększenia w szablonie i zapisie w WebP każde zdjęcie waży kilkaset kilobajtów, a pierwsze z nich wyświetla się wyraźnie szybciej. Klient nie widzi różnicy w jakości, a telefon pobiera wielokrotnie mniej danych przy każdym wejściu na kartę.

Optymalizacja zdjęć a SEO sklepu internetowego

Szybkość to tylko jedna strona SEO zdjęć. Druga to to, czy Google rozumie, co przedstawia obraz. Pomagają w tym opisowe nazwy plików, teksty alternatywne i umieszczenie zdjęcia blisko tekstu, którego dotyczy. Optymalizacja techniczna i opis zdjęć powinny iść w parze - lekki plik o nazwie IMG_4482.webp bez atrybutu alt nadal niewiele mówi wyszukiwarce.

Przy masowej konwersji zdjęć łatwo przy okazji zgubić dobre nazwy plików albo nadpisać teksty alternatywne. Zanim uruchomisz wtyczkę lub skrypt, sprawdź, czy zachowuje nazwy i nie zmienia adresów zdjęć, które są już zaindeksowane. Jeśli adresy się zmieniają, upewnij się, że karty produktów od razu wskazują nowe pliki.

Najczęstsze błędy przy optymalizacji zdjęć w sklepie

• Zdjęcia prosto z aparatu. Pliki o szerokości kilku tysięcy pikseli wgrane bez zmniejszenia.

• PNG dla zdjęć. Format bezstratny użyty do fotografii, często tylko dlatego, że produkt ma usunięte tło.

• Wielokrotna kompresja. Zapisywanie JPG z JPG kilka razy pod rząd, co kumuluje artefakty; eksportuj zawsze z oryginału.

• Leniwe ładowanie wszystkiego. Włączone także dla głównego zdjęcia produktu, co opóźnia LCP.

• Brak archiwum oryginałów. Po mocnej kompresji nie ma już z czego przygotować wersji na marketplace lub do druku.

Jak Vinson pomaga z optymalizacją zdjęć w sklepie

Projektujemy grafiki dla e-commerce: miniatury i galerie ofert, banery, identyfikację sklepu i materiały reklamowe. Przy projektach dla sklepów przygotowujemy pliki w wymiarach i formatach dopasowanych do szablonu oraz osobne eksporty na marketplace'y, a w razie potrzeby ustalamy z zespołem klienta zasady eksportu dla nowych zdjęć. Szczegóły znajdziesz na stronie projektowanie graficzne dla e-commerce.

Vinson to agencja e-commerce z Bochni, działająca od 2021 roku. Jesteśmy Allegro Ads Partner+, Google Partner, Meta Business Partner, certyfikowanym partnerem Base, partnerem Empik Place i autoryzowanym partnerem Shoper. Klienci oceniają nas na 4,9/5 ze 171 opinii, a współpracowaliśmy z ponad 500 firmami. Jeśli zastanawiasz się, czy zlecić sesję produktową, przeczytaj tekst o tym, czym jest packshot produktowy.

Najczęściej zadawane pytania

Czy warto zamienić zdjęcia w sklepie na WebP?

Zwykle tak. Według dokumentacji Google stratny WebP jest o 25-34% mniejszy od porównywalnego JPEG, a bezstratny o 26% mniejszy od PNG. Google Search obsługuje WebP w wynikach wyszukiwania, a format obsługuje też przezroczystość. Przed zmianą sprawdź, czy Twoja platforma sklepowa i marketplace'y przyjmują ten format.

Jakie wymiary powinny mieć zdjęcia produktów w sklepie?

Takie, jakie są potrzebne do wyświetlenia zdjęcia na karcie produktu i w powiększeniu, a nie pełna rozdzielczość aparatu. Sprawdź maksymalną szerokość galerii i powiększenia w swoim szablonie i eksportuj pliki w tej wielkości. Oryginały w wysokiej rozdzielczości trzymaj w archiwum.

Czy kompresja zdjęć pogarsza jakość?

Kompresja stratna usuwa część informacji, ale na rozsądnym poziomie różnica jest niewidoczna dla klienta. Ustaw poziom jakości na podstawie porównania kilku wersji tego samego zdjęcia w powiększeniu 100%. Zdjęcia z drobną fakturą wymagają łagodniejszej kompresji niż gładkie produkty na białym tle.

Czy optymalizacja zdjęć poprawia pozycję sklepu w Google?

Optymalizacja zdjęć skraca czas ładowania i poprawia wskaźniki Core Web Vitals, takie jak LCP, które są częścią oceny doświadczeń na stronie. Na widoczność zdjęć w wyszukiwarce wpływają też opisowe nazwy plików i teksty alternatywne. Najlepsze efekty daje połączenie obu działań.

Czy włączyć leniwe ładowanie wszystkich zdjęć w sklepie?

Nie. Leniwe ładowanie warto stosować dla zdjęć poniżej pierwszego ekranu, na przykład w listingu kategorii czy w opisie produktu. Web.dev zaleca, by nie włączać go dla obrazów widocznych od razu, zwłaszcza dla głównego zdjęcia produktu lub banera, bo opóźnia to LCP.

Optymalizacja zdjęć w sklepie internetowym to jeden z najprostszych sposobów na szybszą stronę, bez zmiany platformy i bez utraty jakości. Jeśli chcesz, żeby grafiki sklepu od początku powstawały w odpowiednich formatach i wymiarach, zajrzyj na stronę projektowania graficznego dla e-commerce.