Jaka rozdzielczość zdjęć produktowych jest potrzebna do sprzedaży online
Nie ma jednej liczby dobrej dla wszystkich sklepów. Potrzebny wymiar zdjęcia zależy od kilku czynników, które warto sprawdzić przed sesją zdjęciową albo eksportem grafik:
Największe miejsce wyświetlania. Szerokość galerii na karcie produktu w szablonie sklepu, mierzona na dużym monitorze.
Powiększenie. Jeśli sklep lub marketplace pozwala przybliżyć zdjęcie, plik musi mieć wyraźnie więcej pikseli niż podgląd.
Gęstość pikseli ekranu. Na ekranach 2x zdjęcie potrzebuje dwukrotnie większej szerokości i wysokości niż miejsce w układzie strony.
Wymagania platform. Marketplace'y i porównywarki podają minimalne i maksymalne wymiary w pikselach (sprawdź aktualne wytyczne).
Kadrowanie. Zapas pikseli przydaje się, gdy z jednego zdjęcia trzeba wyciąć detal albo wersję kwadratową i pionową.
Poniższa tabela pokazuje, jak podejść do wymiarów w typowych miejscach, w których pojawia się zdjęcie produktu. Konkretne liczby zawsze bierz z szablonu sklepu i z aktualnych wytycznych platformy.
| Miejsce | Od czego zależy wymiar | Co sprawdzić |
|---|
| Miniatura na liście produktów | szerokość kafelka w szablonie i gęstość pikseli ekranu | czy sklep generuje miniatury automatycznie |
| Galeria na karcie produktu | maksymalna szerokość galerii na dużym monitorze | ustawienia szablonu i wymiar zdjęcia w narzędziach przeglądarki |
| Powiększenie (zoom) | szerokość podglądu po przybliżeniu | czy zoom pobiera oryginał, czy osobną wersję |
| Marketplace | minimalne i maksymalne wymiary z wytycznych platformy | aktualną pomoc dla sprzedawców danej platformy |
| Google Merchant Center | wymagania obrazów produktów w pomocy Google | czy oryginał ma wystarczający wymiar - powiększanie małego zdjęcia nie poprawia jakości |
| Druk (katalog, ulotka) | rozmiar wydruku i wymagana rozdzielczość drukarni | wymiary w pikselach = cale × DPI |
Żeby zobaczyć, jak szybko rośnie liczba pikseli przy ekranach o dużej gęstości, weźmy przykładowe zdjęcie wyświetlane w galerii w polu 800 × 800 pikseli:
[#chart:pgr60b]
Z tego wynika praktyczna zasada: zdjęcie w galerii powinno mieć zapas pikseli, ale nie ma sensu wysyłać do przeglądarki pliku z aparatu o szerokości kilku tysięcy pikseli. Web.dev podaje, że wysyłanie na telefony obrazów w rozmiarze dla komputerów może zużywać 2-4 razy więcej danych niż potrzeba, i opisuje atrybut srcset, dzięki któremu przeglądarka wybiera wersję zdjęcia odpowiednią dla ekranu. Według web.dev często stosuje się 3-5 rozmiarów jednego obrazu.
Jak sprawdzić, w jakim rozmiarze sklep wyświetla zdjęcie
Zanim ustalisz wymiary eksportu, zmierz rzeczywiste miejsce na zdjęcie w swoim szablonie. Otwórz kartę produktu na dużym monitorze, kliknij zdjęcie prawym przyciskiem i wybierz opcję zbadania elementu. Narzędzia deweloperskie przeglądarki pokażą wymiary, w jakich zdjęcie jest wyświetlane, oraz wymiary pobranego pliku. Powtórz to samo w trybie podglądu telefonu i po otwarciu powiększenia. Jeśli wyświetlany rozmiar jest kilka razy mniejszy od pliku, sklep pobiera za duże zdjęcia; jeśli plik jest mniejszy od miejsca w galerii, zdjęcie będzie rozmyte.
Raport Lighthouse w Chrome, który web.dev poleca do weryfikacji, wskazuje obrazy o zbyt dużych wymiarach w stosunku do miejsca wyświetlania. To szybki sposób, żeby znaleźć w sklepie zdjęcia wgrane prosto z aparatu albo grafiki w opisach, które nikt nie zmniejszył.
Wysoka rozdzielczość a wyniki wyszukiwania
Zapas pikseli przydaje się nie tylko w galerii. Google w dokumentacji o obrazach w wyszukiwarce zwraca uwagę, że ostre zdjęcia częściej przyciągają kliknięcia w miniaturach wyników, a przy wyborze obrazu do danych strukturalnych lub tagu og:image zaleca, by w miarę możliwości używać wysokiej rozdzielczości (sprawdź aktualne wytyczne). Jednocześnie Google przypomina, że obrazy są często największą częścią wagi strony, więc wysoka rozdzielczość musi iść w parze z optymalizacją i responsywnymi wersjami zdjęć.
Jak przygotować zdjęcia produktowe w odpowiedniej rozdzielczości
Najwięcej problemów z rozdzielczością powstaje nie przy fotografowaniu, tylko przy eksporcie i wgrywaniu plików. Proces, który stosujemy przy grafikach dla sklepów, wygląda tak:
[#chart:pgr60c]
Oryginał to podstawa. Jeśli zdjęcia robisz samodzielnie, ustaw w aparacie lub telefonie najwyższą dostępną jakość i nie kadruj zbyt ciasno - zapas tła ułatwi późniejsze przygotowanie wersji kwadratowej i pionowej. Praktyczne wskazówki dotyczące samej sesji opisujemy w tekście o tym, jak zrobić zdjęcie produktu na białym tle w domu.
[#uwaga] Nie powiększaj małych zdjęć, żeby spełnić wymagania platformy. Obraz rastrowy po powiększeniu traci ostrość, a program tylko dorabia brakujące piksele na podstawie sąsiednich. Powiększanie małego zdjęcia nie poprawia jakości - lepiej użyć większego oryginału. Jeśli zdjęcie jest za małe, lepiej zrobić je ponownie albo poprosić producenta o plik w wyższej rozdzielczości.
Wymiary to jedna strona przygotowania plików, a waga - druga. Zdjęcie o właściwej liczbie pikseli warto jeszcze zapisać w lekkim formacie i z rozsądną kompresją. Jak to zrobić, opisujemy w tekście o tym, jak przeprowadzić optymalizację zdjęć w sklepie internetowym.
DPI zdjęć produktowych w druku - kiedy ma znaczenie
DPI wraca do gry, gdy zdjęcie produktu ma trafić na papier: do katalogu, na ulotkę dołączaną do paczki, na plakat w sklepie stacjonarnym albo na opakowanie. Według artykułu Adobe 300 DPI to ogólny punkt odniesienia dla wysokiej jakości wydruków zdjęć, ulotek i dokumentów firmowych. Dla plakatów Adobe podaje co najmniej 100 DPI, zależnie od rozmiaru i odległości oglądania, a dla magazynów i wydruków wystawowych może być potrzebne 600 DPI lub więcej.
Żeby sprawdzić, czy zdjęcie wystarczy do druku, pomnóż wymiary wydruku w calach przez wymaganą rozdzielczość. Adobe podaje przykład: wydruk 4 × 6 cali przy 300 DPI wymaga 1200 × 1800 pikseli. Cal to 2,54 cm, więc strona A4 (210 × 297 mm) przy 300 DPI to ok. 2480 × 3508 pikseli. Zawsze jednak trzymaj się specyfikacji konkretnej drukarni, bo to ona określa wymaganą rozdzielczość, spady i format pliku.
W praktyce oznacza to, że zdjęcie wystarczające do sklepu nie zawsze wystarczy do druku. Grafika przygotowana w wymiarach galerii może być za mała na pełnostronicowe zdjęcie w katalogu. Dlatego tak ważne jest archiwum oryginałów w pełnej rozdzielczości - z niego przygotujesz zarówno lekkie wersje na ekran, jak i pliki do drukarni.
Jak zapisać wymiary w zleceniu dla fotografa lub grafika
Najprostszy sposób na uniknięcie nieporozumień to podanie w zleceniu trzech informacji: wymiaru oryginałów w pikselach (najlepiej najwyższego, jaki daje sprzęt), listy wersji do eksportu z wymiarami dla każdego kanału oraz informacji, czy któreś pliki trafią do druku. Wtedy fotograf wie, że ma przekazać pełne pliki z sesji, a grafik - że oprócz wersji na ekran musi przygotować plik do drukarni. Wartość DPI dopisz tylko przy materiałach drukowanych, razem ze specyfikacją drukarni.
Najczęstsze błędy przy rozdzielczości zdjęć produktowych
Zmiana samego DPI. Przestawienie 72 na 300 DPI bez zmiany liczby pikseli - plik wygląda na ekranie tak samo.
Powiększanie małych zdjęć. Rozciąganie miniatury od producenta do wymiarów wymaganych przez platformę.
Wgrywanie plików prosto z aparatu. Kilka tysięcy pikseli szerokości tam, gdzie szablon wyświetla kilkaset.
Brak zapasu na powiększenie. Zdjęcie dokładnie w rozmiarze galerii, które rozmywa się po kliknięciu lub na ekranie 2x.
Zamawianie zdjęć bez wymiarów w pikselach. Brief z informacją tylko o DPI, przez co wykonawca nie wie, jakie pliki przekazać.
Jak Vinson pomaga przygotować zdjęcia produktowe w odpowiedniej rozdzielczości
Projektujemy grafiki dla e-commerce: miniatury i galerie ofert, banery, identyfikację sklepu i materiały reklamowe. Przy każdym projekcie ustalamy wymiary w pikselach dla sklepu, marketplace'ów i reklam, a przy materiałach drukowanych przygotowujemy pliki według specyfikacji drukarni. 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.
Najczęściej zadawane pytania
Ile DPI powinny mieć zdjęcia produktów w sklepie internetowym?
Wartość DPI nie wpływa na wygląd zdjęcia w sklepie, bo ekran wyświetla piksele. Liczy się wymiar w pikselach dopasowany do miejsca wyświetlania, powiększenia i ekranów o dużej gęstości pikseli. Jeśli szablon lub platforma wymaga konkretnej wartości DPI, ustaw ją, ale zawsze sprawdzaj przede wszystkim wymiary w pikselach.
Czy 72 DPI wystarczy do internetu?
Tak, ale nie dlatego, że 72 DPI jest specjalną wartością dla internetu. W sieci DPI zapisane w pliku nie ma wpływu na wyświetlanie, a o ostrości decyduje liczba pikseli. Zdjęcie 2000 × 2000 px przy 72 DPI wygląda na ekranie tak samo jak przy 300 DPI.
Jaka rozdzielczość zdjęć jest potrzebna na marketplace?
Każda platforma podaje własne minimalne i maksymalne wymiary w pikselach w pomocy dla sprzedawców. Warto przygotowywać zdjęcia z zapasem ponad minimum, bo większy plik pozwala na powiększenie i lepiej wygląda na ekranach o dużej gęstości pikseli. Przed eksportem sprawdź aktualne wytyczne każdej platformy, na której sprzedajesz.
Czy można powiększyć zdjęcie produktu, żeby spełniało wymagania?
Technicznie tak, ale obraz rastrowy po powiększeniu traci ostrość, bo program dorabia brakujące piksele. Powiększanie małego zdjęcia nie poprawia jakości - lepiej użyć większego oryginału, czyli zrobić zdjęcie ponownie albo zdobyć plik w wyższej rozdzielczości od producenta.
Ile pikseli potrzeba do druku zdjęcia produktu?
Pomnóż wymiary wydruku w calach przez wymaganą rozdzielczość, zwykle 300 DPI dla wysokiej jakości. Według przykładu Adobe wydruk 4 × 6 cali przy 300 DPI wymaga 1200 × 1800 pikseli. Ostateczne wymagania zawsze podaje drukarnia.
Rozdzielczość i DPI zdjęć produktowych przestają być zagadką, gdy myślisz w pikselach: tyle, ile potrzebuje największe miejsce wyświetlania, z zapasem na powiększenie i ekrany 2x. Jeśli chcesz, żeby zdjęcia i grafiki Twojego sklepu były przygotowane w odpowiednich wymiarach dla każdego kanału, zajrzyj na stronę projektowania graficznego dla e-commerce.
