Fotografia produktowa w PrestaShop: zdjęcia, przygotowanie i publikacja
Zaplanuj przydatne zdjęcia, zbuduj proste stanowisko i publikuj ostre, dostępne obrazy we właściwych rozmiarach i formatach PrestaShop.
Twórz zdjęcia produktów pokazujące, co sprzedajesz, jak duży jest produkt i które szczegóły mają znaczenie. Następnie sprawdź, jak PrestaShop generuje i wyświetla te zdjęcia w rzeczywistym motywie.
Co byśmy zrobili
Przed ponownym fotografowaniem katalogu lub zakupem sprzętu przetestowalibyśmy reprezentatywną rodzinę produktów. Na podstawie pytań klientów i powodów zwrotów ustal, jakich informacji brakuje, a potem oceń, czy problem dotyczy zdjęcia, wygenerowanego pliku czy obsługi galerii. Sposób działania zależy od obecnego motywu, modułów obrazów, integracji importu i feedów, jakości źródeł, języków i rynków oraz czasu zespołu na utrzymywanie efektów.
Przy zmianach typów obrazów, formatów lub oprogramowania galerii używaj kopii testowej z tym samym motywem i modułami. Odizoluj jej feedy wychodzące i wiadomości do klientów. Zachowaj aktualne pliki obrazów i ustawienia, przećwicz generowanie oraz poniższe kontrole i potwierdź możliwość przywrócenia poprzedniego wyniku. Wprowadź przetestowaną zmianę w zaplanowanym terminie, wyznaczając osobę odpowiedzialną za późniejsze sprawdzenie sklepu i feedów.
| Czego brakuje? | Od czego zacząć | Potwierdzenie przed dalszymi wydatkami |
|---|---|---|
| Galeria nie odpowiada na powtarzające się pytanie o rozmiar lub materiał. | Dodaj brakujące zdjęcie pokazujące skalę lub szczegół. | Klient rozpoznaje istotną cechę w opublikowanej galerii. |
| Wykończenie trudno wiernie sfotografować. | Przetestuj kontrolowane oświetlenie, a w razie potrzeby porównaj pomoc specjalistów. | Próbne ujęcie zachowuje kolor, fakturę i refleksy fizycznego produktu. |
| Źródło jest wyraźne, ale obraz w sklepie nie. | Sprawdź wygenerowany plik i motyw przed ponowną sesją. | Możesz ustalić, gdzie giną szczegóły lub kadrowanie. |
| Zdjęcia są przydatne, ale klienci nie mogą ich dokładnie obejrzeć. | Przetestuj obsługę obecnej galerii przed rozważeniem zamiennika. | Proponowana zmiana umożliwia wykonanie wcześniej nieskutecznego zadania na telefonie lub klawiaturą z rzeczywistymi obrazami. |
Jeśli chcesz zainstalować i przetestować wybrany moduł galerii, PrestaShop Module Installation & Configuration Service obejmuje uzgodnioną konfigurację i odpowiednią ścieżkę klienta.
Zaplanuj galerię wokół pytań klientów
Zacznij od informacji potrzebnych klientowi do wyboru właściwego produktu. Dopasuj listę ujęć do produktu zamiast realizować stałą liczbę zdjęć. Przy każdym planowanym widoku zapisz pytanie, na które odpowiada. Jeśli obsługa stale wyjaśnia złącze, podszewkę lub zapięcie, których galeria nigdy nie pokazuje, nadaj temu priorytet podczas sesji.
| Ujęcie | Co pokazać |
|---|---|
| Okładka | Wyraźny widok pozwalający rozpoznać produkt w rozmiarze miniatury kategorii. Pokaż cały produkt i zostaw miejsce wokół krawędzi. |
| Inne kąty | Tył, boki, górę lub spód, gdy ujawniają przydatne informacje. Pokaż ubranie z przodu i z tyłu, porty elektroniki lub zapięcie akcesorium. |
| Szczegóły | Fakturę, szwy, etykiety, grawerunek, złącza, zawiasy i wykończenie. Pokaż cechę na tyle dużą, aby można ją było obejrzeć na telefonie. |
| Skala | Linijkę, dłoń, osobę noszącą produkt lub znajomy przedmiot. Dodaj też pisemne wymiary; perspektywa może mylić. |
| Kontekst | Produkt w zamierzonym otoczeniu, na przykład kubek na biurku lub lampę obok mebli. Pokaż akcesoria osobno, jeśli nie są w komplecie. |
| Opakowanie | Pudełko lub sposób prezentacji, gdy ma znaczenie dla zakupu, na przykład opakowanie prezentowe lub dostarczaną zawartość. |
Usuń niemal identyczne ujęcia, które nie wnoszą informacji. Przetestuj kolejność na komputerze i telefonie. Zacznij od wyraźnej okładki, a następnie wcześnie pokaż najbardziej przydatne ujęcia skali, kontekstu lub szczegółów. Kolejność galerii, wybór okładki i działanie powiększenia zależą od motywu.
W edytorze produktu prześlij obrazy, wybierz okładkę i uporządkuj pozycje. Osobno sprawdź listy kategorii, strony produktów, szybki podgląd i wszelkie feedy. Moduł feedu może stosować własne reguły wyboru obrazów.
Przykład: torba na ramię
Załóżmy, że kupujący pytają, czy torba mieści laptop i czy pasek jest odpinany. Zachowaj wyraźną okładkę, dodaj widok otwartej komory z rozpoznawalnym laptopem i zbliżenie karabińczyka paska. W opisie podaj też wymiary komory: pokazane urządzenie jest przykładem, a nie obietnicą, że zmieści się każdy laptop. Ujęcie odpowiadające na najczęstsze pytanie umieść na początku sekwencji.
Przy kombinacjach kolorystycznych powiąż właściwe zdjęcia z odpowiednimi kombinacjami i przetestuj każdy wybór. Niebieska okładka, po której widać brązowe detale, może sugerować klientowi zmianę wariantu. Wspólne szczegóły konstrukcji pokazuj tylko wtedy, gdy różnica koloru jest jasna, i sprawdź, czy koszyk oraz feed wybierają właściwy obraz.
Jeśli obecna galeria nie zapewnia potrzebnych możliwości dokładnego oglądania produktu, Gallery Revolution oferuje powiększenie i widok pełnoekranowy z użyciem istniejących obrazów katalogowych. Przed zastąpieniem obecnej galerii przetestuj moduł z motywem i zmianami kombinacji.
Przygotuj domowe stanowisko fotograficzne zapewniające powtarzalne warunki
Telefon lub aparat, stabilna podpora, proste tło i kontrolowane światło dają przydatny punkt wyjścia. Przetestuj obecny sprzęt przed zakupem kolejnego. Poradnik fotografii produktowej Shopify zawiera praktyczne stanowisko ze światłem okiennym.
- Wyczyść produkt i obiektyw aparatu. Usuń kurz, odciski palców i zbędne fragmenty opakowania.
- Wygnij arkusz papieru lub kartonu od ściany na stół, tworząc tło bez widocznego narożnika.
- Umieść produkt obok okna z pośrednim światłem. Spróbuj światła z jednej strony i umieść biały karton po przeciwnej, aby rozjaśnić cienie.
- Rozprosz ostre światło słoneczne i unikaj mieszania światła z okna z oświetleniem pomieszczenia o innej barwie. Sprawdzaj balans bieli po każdej zmianie światła.
- Ustal pozycję aparatu na statywie lub stabilnej podporze. Zapisz wysokość aparatu, odległość produktu, tło i pozycję blendy.
- Zrób próbne ujęcie. Przed sfotografowaniem partii sprawdź ostrość, refleksy, ekspozycję i kolor produktu. Otwórz próbne zdjęcie w pełnym rozmiarze przed sesją partii i sprawdź je ponownie po przesunięciu aparatu lub produktu; podgląd aparatu może ukryć nietrafioną ostrość. Zachowaj zatwierdzone ujęcie wzorcowe do porównywania kolejnych partii.
Gdy światło dzienne jest zbyt zmienne, wypróbuj rozproszone światło sztuczne i zachowuj stałe pozycje. Dwie lampy po bokach to jedno z ustawień do testu, a nie wymóg. Szkło, biżuteria i odblaskowe powierzchnie mogą wymagać zastawek ograniczających światło, rozproszenia światła lub pomocy specjalisty.
W telefonie zacznij od głównego aparatu i unikaj zoomu cyfrowego. Użyj obiektywu dającego potrzebny kadr bez zniekształcania produktu. W początkowym ustawieniu wyłącz wbudowaną lampę błyskową. Zablokuj ostrość i ekspozycję, jeśli aparat to obsługuje, i zachowaj dość rozdzielczości źródłowej do późniejszego kadrowania i powiększania.
Edytuj spójnie i zachowuj użyteczny oryginał
- Popraw balans bieli i ekspozycję, porównując zdjęcie z rzeczywistym produktem. Zachowaj fakturę, kolor i wykończenie.
- Wyprostuj obraz i przytnij do proporcji katalogu. Zostaw miejsce, aby po późniejszej zmianie rozmiaru produkt nie znajdował się zbyt blisko krawędzi.
- Usuń kurz i rozpraszające elementy tła. Sprawdź wyniki usuwania tła wokół przezroczystych, odblaskowych i drobnych krawędzi.
- Stosuj spójne kadrowanie, jasność i obróbkę tła w rodzinie produktów. Podobne korekty wykonuj zbiorczo, a następnie sprawdzaj każdy obraz.
- Oryginał wzorcowy zachowaj osobno. Wyeksportuj kopię internetową w wymiarach uzasadnionych największym wyświetleniem i wymaganiami powiększenia motywu.
Nie istnieje uniwersalny limit 1200 lub 2000 pikseli. Dobierz wymiary według rozmiaru renderowanego, współczynnika pikseli urządzenia, zamierzonego kadru i szczegółów powiększenia. Źródło o wysokiej rozdzielczości może przydać się do zbliżeń, nawet gdy miniatura kategorii jest mała.
Porównaj ustawienia kompresji w rozmiarze wyświetlania. Szukaj rozmycia, obwódek przy krawędziach, utraty faktury i zmian kolorów. JPEG nadaje się do wielu fotografii; PNG może zachować przezroczystość. Waga pliku i jakość wizualna zależą od treści i kodera. Wartość jakości jest punktem wyjścia do oceny, a nie gwarancją.
Używaj opisowych nazw źródłowych, takich jak blue-cotton-shirt-front.jpg, do zarządzania archiwum. Natywny PrestaShop przechowuje obrazy produktów pod generowanymi ID obrazów, więc zmiana nazwy pliku przed przesłaniem nie zmienia bezpośrednio opublikowanego URL obrazu.
Prowadź rejestr ujęć łączący każdy oryginał wzorcowy z indeksem produktu, kombinacją, widokiem i zatwierdzonym eksportem. Przekaż ten sam rejestr osobie przesyłającej obrazy. Podobne produkty i warianty kolorystyczne łatwo pomylić, a import może zastąpić starannie wybraną okładkę, jeśli jego reguły obrazów różnią się od procesu ręcznego.
Rozważ specjalistyczną fotografię trudnych odblaskowych produktów, stylizowanych scen, modeli lub wideo produktu, gdy własne stanowisko nie spełnia założeń. Porównuj wyceny według liczby ujęć, retuszu, praw użycia i dostarczanych materiałów.
Dopasuj typy obrazów do motywu
PrestaShop generuje pliki o zmienionym rozmiarze dla typów obrazów w Wygląd → Ustawienia zdjęć. Nazwy takie jak home_default, large_default i cart_default są częste, lecz to motyw określa używane typy i miejsca.
- Sprawdź element obrazu w przeglądarce. Porównaj jego wymiary renderowane z rzeczywistymi wymiarami pobieranego obrazu w pikselach.
- Dobierz rozmiary typów obrazów zapewniające wystarczająco dużo szczegółów dla zamierzonego obszaru wyświetlania i gęstości. Sprawdź pełny widok produktu i powiększenie, nie tylko siatkę.
- Zachowuj oryginały źródłowe dostatecznie duże dla tych wyników. Zmiana rozmiaru nie odtworzy szczegółów brakujących w małym źródle.
- Przed dodaniem typów lub formatów oceń przestrzeń dyskową i pracę regeneracji. Na przykład 1000 produktów po pięć zdjęć i osiem właściwych typów daje 40 000 plików dla poszczególnych typów w jednym generowanym formacie, przed innymi plikami.
- Usuwaj typ dopiero po sprawdzeniu, że nie używają go motywy, moduły, e-maile i feedy.
Marginesy i przycinanie mają różne przyczyny
Skalowanie rdzenia zachowuje proporcje źródła i może dodawać marginesy płótna. Jeśli wygenerowany plik pokazuje cały produkt, ale strona go ucina, sprawdź kontenery o stałej wysokości, CSS object-fit, szablony motywu i moduły przekształcania obrazów. Jeśli przycięty jest sam plik, sprawdź przesłane źródło i każdy proces transformacji.
Zmiana proporcji typu obrazu może pomóc kompozycji, ale nie usuwa automatycznie przycięcia narzuconego przez motyw. Sprawdzaj wygenerowany plik i renderowany element osobno.
Prześledź błąd na reprezentatywnym obrazie
Jeśli wysoka lampa traci klosz na kafelku kategorii, otwórz dokładny adres obrazu żądanego przez ten kafelek. Cała lampa w pliku wskazuje na układ strony lub przekształcenie wyświetlania; brak klosza w pliku oznacza, że trzeba prześledzić źródło i proces generowania. Jeśli kadr jest poprawny, ale lampa jest nieostra, przed zmianą rozmiaru porównaj źródło, wygenerowany plik i wymiary renderowania. Powtórz kontrolę po zastosowaniu ukierunkowanej poprawki.
Wygeneruj miniatury ponownie i sprawdź nowoczesne formaty
Po zmianie wymiarów obrazów lub formatów generowania odbuduj odpowiednie pliki w Wygląd → Ustawienia zdjęć → Regeneruj miniatury. Wybierz odpowiednią domenę obrazów i typ, gdy są dostępne. Najpierw wykonaj kopię obrazów, a duże regeneracje uruchamiaj poza szczytem. Aby zastąpić istniejące miniatury po zmianie rozmiaru, włącz Usuń poprzednie zdjęcia. Przy wznawianiu przerwanego przebiegu pozostaw tę opcję wyłączoną, aby zachować ukończone pliki.
PrestaShop 9.1 dodał natywne polecenie konsolowe miniatur. Po wykonaniu kopii obrazów uruchom z katalogu głównego sklepu poniższe polecenie, aby usunąć istniejące miniatury produktów i je odbudować:
php bin/console prestashop:thumbnails:regenerate products --delete
Domena obrazów jest wymagana. Pomiń --delete przy wznawianiu przerwanej odbudowy. Sprawdź dokumentację polecenia i pomoc zainstalowanego polecenia dla innych domen oraz wyboru typu. Wcześniejsze wydania wymagają narzędzia panelu lub zgodnego, osobno wspieranego zadania. CLI unika limitu czasu żądania przeglądarki, ale nadal podlega ustawieniom pamięci PHP, wykonania i limitom hostingu.
| Wersja | Obsługa formatów |
|---|---|
| 1.7 | Nie zakładaj istnienia natywnego przełącznika WebP. Przed zmianą dostarczania sprawdź każdy moduł konwersji i integrację motywu. |
| 8.0 | Natywny zapis WebP wprowadzono w opcjach generowania obrazów. |
| 8.1 | Generowanie wielu formatów, w tym WebP i AVIF, wprowadzono jako funkcję eksperymentalną. Wymaga wsparcia serwera i zgodnego wyjścia motywu. |
| 9 | Ustawienia zdjęć udostępniają generowane formaty. Dostępność AVIF zależy od obsługi serwera. Sprawdź opcje zainstalowanej wersji minor. |
Generowanie i dostarczanie wymagają osobnych kontroli. W narzędziach deweloperskich przeglądarki sprawdź żądany adres URL, typ zawartości odpowiedzi, wymiary i rozmiar transferu. Potwierdź, że motyw wybiera właściwy format i ma działający wariant zastępczy. Testuj reprezentatywne kolory, faktury i przezroczyste krawędzie zamiast zakładać stały procent oszczędności.
Sprawdź leniwe ładowanie na wyrenderowanej stronie. W stosownych przypadkach opóźniaj obrazy galerii poza ekranem, ale pozwól szybko załadować główny widoczny obraz produktu. Jeśli obecny motyw nie obsługuje tego niezawodnie, Automatic SEO Images Lazy Tags zapewnia ustawienia opóźnianych obrazów i indywidualne wyjątki; sprawdź, czy nie dubluje obecnego kodu ładowania. Kontrole dostarczania opisuje optymalizacja obrazów PrestaShop.
Przećwicz aktualizację katalogu
- W próbie na kopii testowej uwzględnij trudne przykłady: wysoki przedmiot, odblaskowe wykończenie, przezroczystość, jeśli występuje, i produkt z kombinacjami kolorystycznymi.
- Zapisz obecne wymiary typów, formaty, ustawienia galerii i mapowania obrazów. Przed zmianami zachowaj kopię odpowiednich plików obrazów i danych umożliwiającą przywrócenie.
- Wygeneruj zmieniane pliki i sprawdź braki, błędy serwera oraz limity zasobów. Nie usuwaj wielokrotnie istniejących wyników, aby ponownie uruchomić przerwane zadanie.
- Wykonaj poniższe kontrole sklepu i testowy eksport feedu. Ustal, kto generuje, wdraża i przywraca każdą zmienianą część.
- Zastosuj przetestowane zmiany w aktualnym działającym sklepie w uzgodnionym terminie. Nie nadpisuj bieżących zamówień ani zmian katalogu bazą z kopii testowej. Ponownie sprawdź reprezentatywne publiczne adresy i wyczyść odpowiednie pamięci podręczne obrazów, jeśli nadal serwują poprzednie pliki.
Pisz przydatne podpisy i testuj gotową galerię
Edytuj podpisy obrazów w edytorze zdjęć produktu, w tym wymagane wersje językowe. Tekst zastępczy zależy od wersji i motywu. W PrestaShop 9 prezenter obrazu produktu używa najpierw niepustego podpisu obrazu, następnie niepustego meta title produktu, a w przeciwnym razie nazwy produktu. W PrestaShop 1.7.8 szablony galerii produktów Classic podają nazwę produktu, gdy prezentowany podpis jest pusty; szablon listy może skracać tę nazwę. Sprawdź renderowany atrybut alt w każdym widoku.
Przy zdjęciu informacyjnym opisz przydatny wyróżnik: Blue leather messenger bag, rear pocket open. Unikaj list słów kluczowych. Obrazy będące linkami potrzebują tekstu wyjaśniającego ich cel. Przy obrazach czysto dekoracyjnych sprawdź, czy wyrenderowany HTML zawiera alt="". Pusty podpis może uruchomić opisane wyżej wartości zastępcze; w razie potrzeby poproś programistę o zmianę odpowiedniego szablonu zgodnie z wytycznymi W3C.
Wytyczne Google dotyczące obrazów obejmują opublikowany adres URL, tekst alternatywny i odpowiednią otaczającą treść. Google nie odczytuje lokalnej nazwy źródłowego pliku przed przesłaniem. Wzorce generowanych podpisów opisuje strona pomocy Automatic SEO Images Alt Tags; przeglądaj zmiany zbiorcze, zachowuj przydatne istniejące teksty i sprawdzaj dokładność wygenerowanych opisów dla konkretnych obrazów. Same wzorce nazw produktów nie odróżnią otwartej kieszeni od widoku z przodu, więc dodaj te różnice do odpowiednich podpisów.
- Otwórz produkt na telefonie i komputerze. Przetestuj przesuwanie, przyciski, powiększanie, nawigację klawiaturą i zmiany zdjęć wariantów.
- Sprawdź widoki kategorii, koszyka i produktu pod kątem nieostrości, przycinania, nadmiernych marginesów i przesunięć układu.
- Sprawdź, czy ważne obrazy ładują się szybko, a zawartość odpowiada fizycznemu produktowi i dołączonym akcesoriom.
- Testuj jedną zmianę galerii naraz, na przykład kąt okładki, kolejność lub liczbę przydatnych widoków. Używaj porównywalnego ruchu i uwzględniaj promocje oraz sezonowość.
- Monitoruj łącznie dodawanie do koszyka, zakupy, pytania obsługowe i przyczyny zwrotów. Dobierz liczebność próby i czas pozwalające podjąć decyzję zamiast stałego progu wizyt lub tygodni.
O co zapytać programistę lub agencję
- Jakich typów i plików obrazów żąda nasz rzeczywisty motyw na listach, w szybkim podglądzie, galerii i powiększeniu?
- Który importer lub integracja feedu może nadpisać okładki, pozycje, podpisy lub powiązania kombinacji?
- Czy możecie pokazać wyniki testów dostarczania formatów, wariantu zastępczego, obsługi mobilnej i wybranej kombinacji na kopii testowej?
- Co zostanie objęte kopią zapasową, jak wznowicie regenerację po przerwaniu i kto przywróci pliki oraz ustawienia, jeśli wdrożenie się nie powiedzie?
Przechowuj razem uzgodnioną listę ujęć, sposób eksportu, zmiany konfiguracji i wyniki odbioru. Zespół powinien móc opublikować kolejną rodzinę produktów bez zgadywania, jak przygotowano pierwszą.
Pytania właścicieli sklepów
Czy wideo może zastąpić zdjęcia?
Użyj wideo do pytania wymagającego pokazania ruchu, np. sposobu otwierania mechanizmu składania. Zachowaj nieruchome ujęcia, które kupujący mogą obejrzeć bez odtwarzania. Przed dodaniem wideo do całej rodziny produktów sprawdź odtwarzanie mobilne i koszt początkowego ładowania strony.
Jak przekazać wytyczne fotografowi, zachowując kontrolę nad wynikiem?
Uzgodnij przykładowy produkt i zatwierdź jego testową galerię przed zleceniem partii. Określ wymagane ujęcia, margines kadru, wzorzec koloru, oryginały wzorcowe, eksporty internetowe i prawa użycia, w tym kanały publikacji zdjęć.
Czy mogę używać zdjęć dostawcy?
Potwierdź zgodę na planowane użycie w sklepie i reklamach oraz sprawdź, czy zdjęcia pokazują dokładnie dostarczaną wersję, wykończenie i dołączone elementy. Zdjęcia dostawcy mogą uzupełniać własne ujęcia skali lub szczegółów; zgodę i przypisanie do produktu zachowaj przy rejestrze ujęć.
Czy po zmianie motywu trzeba ponownie zrobić zdjęcia?
Porównaj zarchiwizowane oryginały wzorcowe z wymaganiami nowego motywu dotyczącymi kadru i powiększania. Odpowiednie oryginały mogą wymagać jedynie nowego eksportu lub regeneracji plików. Zrób nowe zdjęcia, jeśli źródło nie zawiera potrzebnego szczegółu lub widoku, i przetestuj nową galerię przed zastosowaniem jej w całym katalogu.