Zdjęcia produktowe w sklepie internetowym — standard, formaty i optymalizacja
Klient sklepu internetowego nie może produktu dotknąć, przymierzyć ani obejrzeć z bliska. Zdjęcia to jego jedyne oczy. Jednocześnie są zwykle najcięższym elementem strony i główną przyczyną wolnego ładowania kart produktów. Sklep, w którym każde zdjęcie ma inne tło, proporcje i jakość, wygląda niechlujnie, a sklep z pięknymi, ale nieoptymalizowanymi plikami — traci klientów na telefonach. Spisany standard zdjęć rozwiązuje oba problemy i przyspiesza dodawanie nowych produktów.
Krótka odpowiedź: standard zdjęć produktowych określa zestaw obowiązkowych ujęć dla każdej kategorii, tło, proporcje i kadrowanie, minimalną rozdzielczość źródłową oraz sposób przetwarzania do publikacji: nowoczesne formaty, kilka rozmiarów dopasowanych do ekranu, leniwe ładowanie i opisowe teksty alternatywne.
Zasada: zdjęcie źródłowe przechowuj w najwyższej jakości, a wersje dla przeglądarki generuj automatycznie. Nigdy odwrotnie.
Dlaczego zdjęcia są tak ważne
| Obszar | Wpływ zdjęć |
|---|---|
| Decyzja zakupowa | Klient ocenia jakość, rozmiar i szczegóły wyłącznie na podstawie obrazu |
| Zwroty | Niezgodność koloru lub wyglądu ze zdjęciem to jeden z częstych powodów zwrotów |
| Wydajność strony | Zdjęcia stanowią zwykle największą część wagi karty produktu i listy |
| Widoczność w wyszukiwarce | Wyszukiwanie grafiką, karty produktowe w wynikach, porównywarki |
| Wizerunek marki | Spójne zdjęcia budują wrażenie profesjonalizmu |
| Kanały sprzedaży | Marketplace'y i porównywarki mają własne wymagania co do zdjęć |
Zestaw ujęć
Standard powinien określać, jakie zdjęcia musi mieć każdy produkt. Zestaw różni się w zależności od kategorii, ale logika jest podobna: od ogólnego widoku do szczegółów, które klient sprawdziłby w sklepie stacjonarnym.
| Ujęcie | Cel | Przykład |
|---|---|---|
| Główne | Rozpoznanie produktu na liście i w wynikach wyszukiwania | Produkt na jednolitym tle, widok z przodu |
| Widoki z innych stron | Pełny obraz kształtu | Tył, bok, spód |
| Detale | Ocena jakości wykonania | Materiał, szwy, zapięcia, złącza, fakturę |
| Skala | Wyobrażenie wielkości | Produkt w dłoni, obok przedmiotu codziennego użytku, na modelu |
| Użycie | Kontekst i inspiracja | Produkt we wnętrzu, w trakcie używania |
| Warianty | Wierne odwzorowanie każdego koloru | Osobne zdjęcia dla każdej wersji kolorystycznej |
| Zawartość opakowania | Jasność, co klient otrzyma | Wszystkie elementy zestawu |
Uwaga praktyczna: najczęściej brakuje zdjęć dla wariantów kolorystycznych. Klient wybierający kolor „butelkowa zieleń" widzi zdjęcie produktu w kolorze granatowym i musi zgadywać. Każdy wariant, który różni się wyglądem, powinien mieć przynajmniej zdjęcie główne, a zmiana wariantu na karcie produktu — zmieniać galerię.
Tło, proporcje i kadrowanie
- Jednolite tło dla zdjęcia głównego — zwykle białe lub jasnoszare. Wiele marketplace'ów wymaga białego.
- Stałe proporcje w całym sklepie, na przykład kwadrat lub pion 4:5. Mieszanie proporcji rozbija układ listy produktów.
- Produkt zajmuje większość kadru, z podobnym marginesem na wszystkich zdjęciach.
- Wyśrodkowanie i ta sama wysokość — produkty z tej samej kategorii ustawione w podobny sposób.
- Spójne oświetlenie — bez ostrych cieni i prześwietleń, z wiernym kolorem.
- Kalibracja kolorów — monitor osoby obrabiającej zdjęcia skalibrowany, a zdjęcia zapisywane w standardowej przestrzeni barw sRGB.
- Brak tekstów i znaków na zdjęciu głównym — promocje i oznaczenia lepiej nakładać w kodzie strony.
Pliki źródłowe
Pliki źródłowe to archiwum, z którego generuje się wszystkie wersje do publikacji. Ich jakość decyduje o tym, co da się zrobić w przyszłości — powiększenie, nowy układ strony, eksport do kanału o innych wymaganiach.
- Wysoka rozdzielczość — przynajmniej dwa tysiące pikseli na dłuższym boku, więcej dla produktów, przy których ważne jest powiększenie.
- Minimalna kompresja albo format bezstratny.
- Przechowywanie poza serwerem sklepu, z kopią zapasową.
- Spójne nazewnictwo — kod produktu, wariant i numer ujęcia, na przykład „KRT-1024-zielony-01".
- Informacja o prawach — zdjęcia własne, od producenta, z licencją.
Formaty do publikacji
| Format | Zastosowanie | Uwagi |
|---|---|---|
| AVIF | Zdjęcia produktów | Najmniejsze pliki przy dobrej jakości, obsługiwany przez współczesne przeglądarki |
| WebP | Zdjęcia produktów, format zapasowy | Bardzo dobra kompresja, szeroka obsługa |
| JPEG | Awaryjny, kanały zewnętrzne | Uniwersalny, większe pliki |
| PNG | Grafiki z przezroczystością, zrzuty ekranu | Duże pliki przy zdjęciach — unikać |
| SVG | Ikony, logotypy, proste grafiki | Nie nadaje się do zdjęć |
Najlepiej, gdy sklep automatycznie serwuje najnowocześniejszy format obsługiwany przez przeglądarkę klienta, z JPEG jako ostatecznym zabezpieczeniem. Wiele platform i usług obróbki obrazów robi to bez dodatkowej konfiguracji.
Rozmiary i ładowanie
Zdjęcie o szerokości dwóch tysięcy pikseli wyświetlane jako miniatura na liście produktów w telefonie to marnowanie transferu i czasu klienta. Dla każdego miejsca w sklepie potrzebny jest odpowiedni rozmiar.
- Kilka wersji każdego zdjęcia — miniatura, lista, karta produktu, powiększenie.
- Atrybuty wskazujące rozmiary, dzięki którym przeglądarka sama wybiera wersję dopasowaną do ekranu.
- Wymiary zdjęcia w kodzie — zapobiegają przeskakiwaniu układu strony podczas ładowania.
- Leniwe ładowanie zdjęć poza pierwszym ekranem.
- Priorytet dla zdjęcia głównego na karcie produktu — to ono decyduje o odczuciu szybkości.
- Powiększenie ładowane na żądanie, dopiero gdy klient z niego skorzysta.
- Sieć dostarczania treści dla sklepów z dużą liczbą zdjęć i klientami w wielu regionach.
Zdjęcia mają bezpośredni wpływ na wskaźniki szybkości strony, które opisujemy w tekście o Core Web Vitals.
Teksty alternatywne i nazwy plików
Tekst alternatywny służy osobom korzystającym z czytników ekranu i pomaga wyszukiwarkom zrozumieć, co przedstawia zdjęcie. W sklepie z tysiącami produktów trudno pisać go ręcznie, ale da się go generować z danych.
- Opis tego, co widać — nazwa produktu, wariant, rodzaj ujęcia: „Plecak miejski 20 l, grafitowy, widok z boku z kieszenią na butelkę".
- Różne teksty dla różnych ujęć — nie ten sam opis na wszystkich zdjęciach w galerii.
- Bez upychania słów kluczowych.
- Nazwy plików opisowe w adresie publikowanym, zamiast ciągów cyfr z aparatu.
- Generowanie szablonem z danych produktu, z możliwością ręcznej poprawki dla ważnych produktów.
Szerzej o dostępności sklepu piszemy w tekście o dostępności w sklepie internetowym, a o pozostałych elementach karty — w materiale o karcie produktu.
Proces dodawania zdjęć
Standard działa tylko wtedy, gdy jest wpisany w proces, a nie spoczywa w dokumencie. Warto zautomatyzować wszystko, co da się zautomatyzować.
| Etap | Automatyzacja |
|---|---|
| Przesłanie pliku źródłowego | Sprawdzenie rozdzielczości, proporcji i przestrzeni barw, odrzucenie plików niezgodnych ze standardem |
| Przypisanie do produktu | Na podstawie nazwy pliku z kodem produktu i wariantem |
| Przetworzenie | Generowanie formatów i rozmiarów, usuwanie metadanych z aparatu |
| Opis | Tekst alternatywny z szablonu |
| Kontrola | Raport produktów bez wymaganego zestawu ujęć |
| Eksport | Wersje zgodne z wymaganiami marketplace'ów i porównywarek |
Raport produktów z brakującymi zdjęciami to prosty sposób, żeby standard był przestrzegany. Wymagania kanałów zewnętrznych opisujemy w tekście o porównywarkach i kanałach produktowych.
Zdjęcia własne czy od producenta
- Zdjęcia producenta — szybkie i bez nakładów, ale identyczne jak u konkurencji, często w różnych stylach i jakości.
- Zdjęcia własne — spójne, wyróżniające sklep, możliwe do dopasowania do standardu, wymagają studia lub fotografa.
- Podejście mieszane — zdjęcia własne dla najważniejszych produktów i kategorii, producenta dla długiego ogona asortymentu, przetworzone do wspólnego standardu tła i proporcji.
Jak spisać standard
Standard zdjęć powinien być krótkim, praktycznym dokumentem, z którego korzysta fotograf, osoba dodająca produkty i agencja przygotowująca materiały. Najlepiej sprawdza się forma kilku stron z przykładami zamiast długiego opisu.
- Lista ujęć dla każdej kategorii z przykładowymi zdjęciami wzorcowymi.
- Parametry techniczne — proporcje, minimalna rozdzielczość, przestrzeń barw, format pliku źródłowego.
- Zasady kadrowania — margines, położenie produktu, wysokość ujęcia.
- Tło i oświetlenie — kolor tła, dopuszczalne cienie, sposób fotografowania produktów błyszczących i przezroczystych.
- Nazewnictwo plików z przykładami.
- Przykłady błędów — zdjęcia, które nie spełniają standardu, z wyjaśnieniem dlaczego.
- Wymagania kanałów zewnętrznych, jeśli sklep sprzedaje w marketplace'ach.
Dokument warto aktualizować przy każdej zmianie wyglądu sklepu lub dodaniu nowego kanału sprzedaży. Przykłady zdjęć wzorcowych działają lepiej niż najdokładniejszy opis słowny.
Najczęstsze błędy
- Publikowanie plików prosto z aparatu — ogromne pliki spowalniające stronę, często z danymi o lokalizacji w metadanych.
- Brak zdjęć wariantów — klient nie wie, jak naprawdę wygląda wybrany kolor.
- Mieszane proporcje na liście produktów, rozbijające układ strony.
- Kompresja zbyt agresywna — widoczne artefakty na detalach, które miały przekonać do zakupu.
- Tekst na zdjęciu głównym — niezgodny z wymaganiami wielu kanałów sprzedaży i nieczytelny na telefonie.
- Brak plików źródłowych — przy zmianie wyglądu sklepu nie da się wygenerować nowych rozmiarów w dobrej jakości.
Podsumowanie
Standard zdjęć produktowych porządkuje dwie rzeczy jednocześnie: wygląd sklepu i jego wydajność. Określa zestaw ujęć, tło, proporcje i jakość plików źródłowych, a po stronie technicznej — nowoczesne formaty, wiele rozmiarów, leniwe ładowanie i opisowe teksty alternatywne. Najlepiej działa, gdy jest wpisany w automatyczny proces dodawania zdjęć z kontrolą zgodności.
Zacznij od przejrzenia listy produktów w jednej kategorii na telefonie i sprawdzenia wagi zdjęć na karcie produktu. Niespójne proporcje i zbyt duże pliki są zwykle widoczne od razu, a ich poprawa przynosi szybki efekt. Więcej o przyspieszaniu sklepu przeczytasz w tekście o SEO sklepu.
Najczęstsze pytania
Zdjęcie główne na jednolitym tle, widoki z innych stron, detale pokazujące jakość wykonania, ujęcie pokazujące skalę, zdjęcie w użyciu oraz osobne zdjęcia dla każdego wariantu kolorystycznego. Przy zestawach warto pokazać także zawartość opakowania.
Do publikacji najlepiej sprawdzają się AVIF i WebP, które dają małe pliki przy dobrej jakości, z JPEG jako formatem zapasowym. PNG warto stosować tylko do grafik z przezroczystością, a SVG do ikon i logotypów. Pliki źródłowe należy przechowywać w wysokiej jakości.
Generować kilka rozmiarów każdego zdjęcia i pozwolić przeglądarce wybrać właściwy, stosować nowoczesne formaty, podawać wymiary w kodzie, ładować leniwie zdjęcia poza pierwszym ekranem, nadać priorytet zdjęciu głównemu i wczytywać powiększenia dopiero na żądanie.
Opisywać to, co widać: nazwę produktu, wariant i rodzaj ujęcia, z różnymi opisami dla kolejnych zdjęć w galerii i bez upychania słów kluczowych. W dużych sklepach teksty można generować szablonem z danych produktu i ręcznie poprawiać dla najważniejszych pozycji.
Można, ale są one takie same jak u konkurencji i często niespójne stylistycznie. Dobrym rozwiązaniem jest podejście mieszane: własne zdjęcia dla kluczowych produktów i kategorii oraz zdjęcia producenta dla reszty asortymentu, przetworzone do wspólnego standardu tła i proporcji.
Bezpłatna wycena Twojego projektu
Opisz w kilku zdaniach, co chcesz zbudować — stronę, aplikację czy sklep. Odpowiadamy w ciągu 24 godzin roboczych konkretną propozycją zakresu i harmonogramu. Konsultacja i wycena są bezpłatne, bez zobowiązań.