Jak zoptymalizować zdjęcia produktów w sklepie internetowym

Zacznij od informacji o produkcie, których potrzebują kupujący

Zdjęcie produktu ma za zadanie nie tylko wypełnić prostokąt. Powinno pomóc użytkownikowi ocenić kształt, wykończenie, kolor i cechy kupowanego produktu. Eksport, który usuwa szwy, utrudnia odczytanie napisów lub zmienia wygląd powierzchni, jest zbyt agresywnie skompresowany, nawet jeśli rozmiar pliku wygląda imponująco.

Wybierz mały zestaw przydatnych widoków przed edycją. Wyraźne zdjęcie główne, inny kąt i zbliżenie ważnego elementu zazwyczaj odpowiadają na więcej pytań niż kilka niemal identycznych zdjęć. Dodaj widok lifestylowy lub odniesienie do skali, jeśli pomaga to wyjaśnić produkt. Nie ma wymaganej liczby: zwykły kubek i techniczna obwoluta wymagają innych informacji.

Przechowuj oryginalne zdjęcia w osobnym folderze. Przygotuj kopie do publikacji z nazwami identyfikującymi produkt i widok. Jeśli oryginalne zdjęcie jest nieostre, źle oświetlone lub zbyt małe, kompresja tego nie naprawi. Wymień słabe zdjęcie przed poświęceniem czasu na ustawienia eksportu.

Zadbaj o spójność kadrowania i tła

Otwórz stronę kolekcji i obejrzyj kilka produktów jednocześnie. Różna ilość pustej przestrzeni może sprawić, że podobne produkty będą wyglądać na niepowiązane lub znacząco różnić się rozmiarem. Wybierz proporcje obrazu pasujące do motywu, a następnie zadbaj o to, aby położenie obiektu i otaczającej go przestrzeni były w miarę spójne na wszystkich głównych zdjęciach.

Kwadratowe kadrowanie może dobrze sprawdzić się w przypadku kwadratowej siatki produktów, ale nie jest to uniwersalna zasada. Wysoki element garderoby lub długi element wyposażenia może wymagać innej prezentacji. Przed zaakceptowaniem kadrowania sprawdź cały obiekt, w tym uchwyty i akcesoria. Nie rozciągaj zdjęcia, aby dopasować je do szablonu.

Do przygotowania serii zdjęć użyj narzędzia Pixilo do optymalizacji zdjęć produktów. Wybierz wspólne wymiary obszaru roboczego, minimalne odstępy i tło, a następnie przytnij i ustaw każde zdjęcie osobno. Przed pobraniem sprawdź całą serię w widoku Wszystkie obrazy. Funkcja Powiększ pozwala ocenić szczegóły i wpływ ustawionej jakości eksportu.

Minimalny odstęp jest mierzony od krawędzi przyciętego obrazu, a nie od automatycznie rozpoznanego produktu. Puste miejsce i nieprzezroczyste tło źródła pozostają, jeśli nie usuniesz ich przez przycięcie. Wspólny obszar roboczy nie sprawi więc automatycznie, że produkty będą wyglądać na jednakowo duże. Sprawdź też opublikowaną siatkę produktów, bo szablon sklepu może dodatkowo przycinać zdjęcia.

Białe lub neutralne tło może sprawić, że katalog będzie wyglądał spójnie, a przezroczystość będzie pasować do projektu, w którym produkty są umieszczane na różnych tłach. Jeśli plik PNG lub WebP ma już obszary przezroczyste, narzędzie do zmiany koloru tła może je wypełnić wybranym kolorem i utworzyć plik JPG. Nie usuwa ono istniejącego tła ze zwykłej fotografii.

Sprawdź przezroczyste krawędzie zarówno na jasnych, jak i ciemnych powierzchniach. Blady kontur, który znika na białej powierzchni, może stać się widoczny na ciemnej stronie. Jeśli ten kontur jest już częścią oryginalnego obrazu, zmiana formatu pliku go nie usunie. Zobacz przewodnik po nieoczekiwanych tłach w obrazach przezroczystych, aby zdiagnozować różnicę.

Dobierz wymiary zdjęć do listy produktów, strony produktu i widoku powiększenia

Zmierz, jak szeroki obraz jest faktycznie wyświetlany w Twoim układzie. Karta kolekcji może zajmować 360 pikseli CSS, podczas gdy główny obraz produktu — 800. Są to szerokości wyświetlania, a nie automatyczne wymagania dotyczące przesyłanego pliku.

Piksel CSS mierzy widoczny rozmiar w układzie strony. Na ekranie o wysokiej gęstości może zajmować kilka fizycznych pikseli. Ostry obraz może więc potrzebować więcej pikseli niż wynosi jego widoczna szerokość.

W przypadku ekranu o wysokiej gęstości, wersja o mniej więcej dwukrotnie większej szerokości wyświetlania jest użytecznym kandydatem do przetestowania. Karta 360-pikselowa mogłaby zatem wykorzystywać eksport 720-pikselowy, podczas gdy obraz produktu 800-pikselowy mógłby wykorzystywać eksport 1600-pikselowy. Należy również zachować mniejsze wersje. Te liczby stanowią przykłady planowania, a nie zalecenia dotyczące platformy ani gwarancje dotyczące pliku wybranego przez przeglądarkę.

Zaplanuj widok powiększenia osobno. Jeśli klienci muszą sprawdzić splot tkaniny, element mocujący lub grawerunek, zachowaj wystarczająco szczegółowy obraz oryginalny lub udostępnij osobne zbliżenie. Mała wersja zdjęcia przeznaczona do listy produktów nie powinna być jedynym plikiem używanym w widoku powiększenia. Z drugiej strony, siatka nie powinna powodować, że każdy odwiedzający pobierze obraz powiększony w pełnej rozdzielczości.

Twoja platforma może generować te warianty automatycznie. Jeśli samodzielnie kontrolujesz wyświetlanie, używaj obrazów responsywnych, aby przeglądarka mogła poprosić o odpowiednią wersję. Przewodnik po obrazach responsywnych wyjaśnia, jak wymiary, srcset i sizes do siebie pasują. Samo pomniejszenie dużego obrazu za pomocą CSS nie tworzy mniejszego pliku do pobrania.

Prawdziwy przykład: przycięcie zdjęcia do kwadratowej karty produktu

To zdjęcie ma 1920 × 1076 pikseli. Słoiczek zajmuje niewielką część szerokiego kadru. Na potrzeby kwadratowej karty produktu możemy wybrać ciaśniejszy kadr bez rozciągania produktu ani usuwania sfotografowanego tła.

1. Wybierz kadr. W narzędziu do zdjęć produktów pozostaw całe wieczko i spód słoiczka w kadrze 630 × 630 pikseli. Podest może wychodzić poza zdjęcie, ale sam produkt powinien być widoczny w całości.
2. Ustaw wynik. Wybierz obszar roboczy 600 × 600 pikseli i odstęp 0%. Nie włączaj powiększania: przycięte źródło jest nieco większe od wyniku, więc można je zmniejszyć bez dodawania pikseli.
3. Wyeksportuj i sprawdź. Pobraliśmy JPG z jakością 90 o rozmiarze 16,4 kB. Przed zatwierdzeniem obejrzyj krawędź wieczka, delikatny cień i gładką białą powierzchnię.

Kwadrat o boku 600 pikseli to przykład dla karty produktu, a nie ogólne zalecenie dotyczące przesyłania zdjęć. Większa galeria lub widok zbliżenia może wymagać większej liczby pikseli. Mniejszy plik jest wspólnym skutkiem przycięcia, zmiany rozmiaru i eksportu JPG, więc nie mierzy samej kompresji. Oryginalne tło i część podestu pozostają na zdjęciu.

Wybierz format odpowiedni dla zdjęcia i obsługiwany przez Twój system publikacji

Oddziel format, który przesyłasz, od formatu, który otrzymują odwiedzający. Twój sklep może akceptować oryginalne obrazy w formacie JPG lub PNG i automatycznie dostarczać pliki WebP lub AVIF. W takim przypadku samodzielne przygotowanie kilku plików w nowoczesnych formatach może zwiększyć nakład pracy bez poprawy rezultatu.

• JPG: praktyczny punkt wyjścia dla zdjęć z nieprzezroczystym tłem, zwłaszcza gdy Twoja platforma lub inne miejsce docelowe wymaga formatu JPEG. Sprawdź drobne napisy i delikatną teksturę po kompresji.
• PNG: przydatne, gdy potrzebujesz przezroczystości lub chcesz zachować ostre elementy graficzne bez konieczności kolejnego eksportu stratnego. Duży fotograficzny plik PNG może być znacznie cięższy niż odpowiednia alternatywa.
• WebP: warto porównać w przypadku zdjęć i przezroczystych grafik produktów, o ile obsługuje go Twoja konfiguracja publikacji. Format obsługuje różne tryby kompresji, ale konwertery PNG/JPG do WebP firmy Pixilo korzystają z ustawienia jakości, a nie dedykowanego trybu bezstratnego.
• AVIF: inny kandydat, gdy obsługuje go cały Twój proces publikacji. Przetestuj wyeksportowany obraz i opublikowaną stronę; sam mniejszy plik nie gwarantuje, że obraz wygląda odpowiednio.

Skorzystaj z przewodnika po formatach obrazów na stronie internetowej, aby uzyskać szersze porównanie. Zanim zastąpisz cały katalog, wypróbuj jedno zwykłe zdjęcie i jedno trudne zdjęcie, takie jak drobny wzór lub przezroczysty wycinek. Upewnij się, że przesyłanie, miniatury, galerie i powiększanie działają.

Ustaw użyteczny rozmiar pliku, nie rezygnując ze szczegółów

Nie ma jednego prawidłowego rozmiaru pliku dla każdego zdjęcia produktu. Prosty obiekt na jednolitym tle i szczegółowy, tkany element garderoby mogą wymagać różnych ustawień przy tych samych wymiarach. Strona kolekcji z wieloma zdjęciami ma również inne wymagania dotyczące ładowania niż galeria wyświetlająca jeden duży obraz.

W przypadku obrazu, który ma być wyświetlany bezpośrednio, możesz przetestować kandydata o rozmiarze 200 KB jako początkowy budżet, a następnie zdecydować, czy jest on użyteczny. To przykład, a nie wymóg. Jeśli etykiety lub szczegóły dotyczące materiałów staną się niejasne, wypróbuj mniej agresywne ustawienia, bardziej wydajny format lub inny rozmiar wyświetlania. Nie obniżaj jakości tylko po to, aby spełnić dowolny cel.

Porównaj rozmiar, który kupujący zazwyczaj widzą, a następnie sprawdź ważne obszary w pełnym rozmiarze lub w przeglądarce powiększenia. Zwróć uwagę na połamane krawędzie liter, bloki w cieniach, rozmazaną teksturę i nierówne przejścia na gładkich tłach. Najlepszym wyborem jest najmniejsza akceptowalna wersja dla danego miejsca, a nie najmniejszy rozmiar eksportu, jaki może wygenerować Twoje narzędzie.

W osobnym teście samej kompresji wróciliśmy do nieprzyciętego oryginału i wyeksportowaliśmy JPG z jakością 20, zachowując wszystkie 1920 × 1076 pikseli. Wynik ma 28,0 kB, czyli około 62% mniej niż oryginał. Porównaj krawędź wieczka, ścianę i miękki cień za pomocą suwaka i opcji Sprawdź szczegóły. Jakość 20 jest celowo niskim ustawieniem testowym, a nie zalecaną wartością domyślną. Obejrzyj też zdjęcie w docelowym rozmiarze wyświetlania.

Oryginalny JPGJPG · Jakość 20

Jeśli formularz ma rzeczywisty limit rozmiaru pliku, użyj narzędzia do kompresji do docelowego rozmiaru. Początkowo zachowaj niezmienione wymiary i zezwalaj na proporcjonalną zmianę rozmiaru tylko wtedy, gdy jest to odpowiednie dla roli obrazu. Ścisłe ograniczenie może wymusić widoczne kompromisy; czasami nowe wycięcie lub osobne zdjęcie detalu jest bardziej przydatne niż dalsza kompresja.

Nie eksportuj kolejnych wersji z ostatniej skompresowanej kopii. Przy testowaniu innego ustawienia jakości wróć do oryginału. Wartości jakości nie są porównywalne między formatami ani programami kodującymi: JPG i AVIF zapisane z ustawieniem jakości 80 nie muszą wyglądać tak samo.

Sprawdź, co Shopify, WordPress lub Twój sklep już obsługuje

Dokumentacja Shopify dotycząca przesyłania obrazów opisuje automatyczną optymalizację sklepu i zaleca oryginały wysokiej jakości zamiast obowiązkowej ręcznej kompresji wstępnej. Format dostarczany odbiorcy może różnić się od przesłanego. Sprawdź wymagania dotyczące materiałów produktowych i motywu. Mały docelowy rozmiar pliku dla odwiedzających nie powinien być ogólną zasadą dla wszystkich przesyłanych oryginałów.

W przypadku sklepu WordPress sprawdź rozmiary obrazów generowanych przez motyw oraz wszelkie używane wtyczki optymalizacyjne lub usługi graficzne. Sprawdź, czy karta kolekcji, galeria produktów i powiększenie otrzymują odpowiednie wersje. Poradnik optymalizacji obrazów w WordPressie opisuje podstawowy przepływ pracy.

Jeśli zamieniasz obraz, otwórz nową stronę i sprawdź, czy nowa wersja jest wyświetlana. Miniatury z pamięci podręcznej lub wygenerowane warianty mogą sprawić, że stary eksport będzie wyglądał jak nowy wynik. Dodanie kolejnej wtyczki kompresującej przed sprawdzeniem bieżącego procesu może spowodować więcej zamieszania niż rozwiązać problem.

Pixilo przygotowuje pliki lokalnie w przeglądarce. Nie łączy się ze sklepem, nie aktualizuje katalogu ani nie konfiguruje dostarczania obrazów. Narzędzia JPG na WebP, PNG na WebP, WebP na JPG i PNG na JPG zmniejszają obrazy, których szerokość lub wysokość przekracza 4000 pikseli, z zachowaniem proporcji. Narzędzie zmiany rozmiaru obsługuje do 8000 pikseli na bok i łącznie do 32 milionów pikseli. Sprawdź wymiary pobranego pliku, gdy przygotowujesz duży obraz do powiększenia.

Pomóż wyszukiwarkom zrozumieć zdjęcia produktów

Dokładnie opisz widok. Nazwa pliku taka jak blue-ceramic-mug-side-view.jpg jest łatwiejsza w zarządzaniu niż IMG_4837.jpg. W przypadku tekstu alternatywnego napisz przydatny opis tego, co przedstawia obraz, na przykład: „Niebieski ceramiczny kubek z zakrzywionym uchwytem, widok z boku”. Inne zdjęcie powinno opisywać własny widok, a nie powtarzać tego samego tekstu.

Umieść obraz w pobliżu istotnych informacji o produkcie i unikaj wypełniania nazw plików lub tekstu alternatywnego powtarzającymi się frazami wyszukiwania. Wytyczne Google dotyczące SEO dla obrazów wyjaśniają znaczenie tekstu opisowego i wyszukiwania obrazów. Praktyki te pomagają przekazać, co przedstawia obraz, ale nie gwarantują pozycji w rankingu.

Sprawdź również stronę produktu. Prawidłowy obraz wybranego koloru lub wariantu jest bardziej przydatny niż idealnie zoptymalizowany plik pokazujący niewłaściwy produkt. Optymalizacja obrazu powinna wspierać poprawność oferty, a nie rekompensować brakujące informacje o produkcie.

Sprawdź opublikowany wynik przed zmianą całego katalogu

• Widok kolekcji: produkt jest widoczny, kadrowanie jest spójne, a siatka nie pobiera niepotrzebnie dużych plików.
• Galeria produktów: główny obraz jest wyraźny, dodatkowe kąty dodają informacji, a pokazany jest odpowiedni wariant.
• Powiększenie: ważne etykiety, faktury i elementy wyposażenia pozostają czytelne przy zamierzonym powiększeniu.
• Układ telefonu: wąski ekran nie przycina obiektu ani nie wtłacza dużego obrazu wyświetlanego tylko na komputerze w mały obszar wyświetlania.
• Tła: przezroczyste krawędzie i jednolite wypełnienia wyglądają poprawnie w zestawieniu z rzeczywistymi kolorami strony.
• Ładowanie: sprawdź żądania plików podczas nowej wizyty. Unikaj opóźniania wyświetlania głównego, widocznego obrazu produktu tylko dlatego, że inne obrazy z galerii mogą załadować się później.
• Układ: zachowaj prawidłowe proporcje obrazu, aby tekst i przyciski nie przeskakiwały po wyświetleniu zdjęć.
• Pliki źródłowe: zachowaj oryginały i krótki zapis ustawień użytych do publikacji.

Zacznij od kilku reprezentatywnych produktów, w tym zdjęcia z drobnymi szczegółami. Porównaj stan przed i po w podobnych warunkach. Gdy zarówno wygląd, jak i sposób wyświetlania będą działać, zastosuj ten proces do reszty katalogu. Aby uzyskać głębszą diagnozę problemów z ładowaniem, przeczytaj artykuł Dlaczego obrazy na stronie ładują się wolno.

Często zadawane pytania

Jaki jest najlepszy rozmiar obrazu dla sklepu internetowego?

Zależy to od rozmiarów wyświetlania motywu i funkcji zoom. Zmierz siatkę i galerię, zachowaj wystarczającą ilość szczegółów oryginalnego obrazu do powiększenia i sprawdź wygenerowane pliki. Nie ma uniwersalnego wymiaru kwadratu, który pasowałby do każdego produktu lub platformy.

Czy każde zdjęcie produktu powinno mieć rozmiar mniejszy niż 200 KB?

Nie. Może to być budżet testowy dla niektórych obrazów bezpośrednio serwowanych, ale nie jest to uniwersalna zasada przesyłania. Oryginalne zdjęcie przeznaczone do widoku powiększenia może wymagać większej liczby szczegółów, a platforma z automatyczną optymalizacją może działać lepiej z wysokiej jakości przesłaniem.

Czy format JPG czy PNG jest lepszy w przypadku zdjęć produktów?

JPG to przydatny punkt wyjścia dla zwykłych zdjęć z nieprzezroczystym tłem. PNG jest przydatny do uzyskania przezroczystości i ostrej grafiki, ale może być za duży w przypadku zdjęć. Przed wyborem sprawdź proces przesyłania i dostarczania na swojej platformie; format, który otrzymają kupujący, może się różnić.

Dlaczego moje zdjęcie produktu jest rozmazane po przesłaniu?

Porównaj oryginał, wyeksportowany plik i zdjęcie dostarczone przez sklep. Typowe przyczyny to zbyt mały rozmiar oryginalnego zdjęcia, agresywna kompresja, mała wygenerowana miniatura użyta w dużej galerii lub powiększenie, które powiększa ten sam mały plik. Określ, który krok spowodował rozmycie, zanim zmienisz ustawienia.

Czy Pixilo może usunąć tło zdjęcia produktu?

Nie. Narzędzie do zdjęć produktów wypełnia dodany obszar i miejsca już przezroczyste wybranym kolorem tła. Nie rozpoznaje produktu ani nie usuwa nieprzezroczystego tła fotografii. Osobne narzędzie do zmiany koloru tła również wymaga obrazu z już przezroczystym tłem, jeśli chcesz zmienić kolor za produktem.