Optymalizacja ofert
Jak skompresować zdjęcia produktów bez utraty jakości
· 4 min read
Zmniejsz zdjęcie produktu do wymiarów w pikselach, w jakich faktycznie się wyświetla, a potem wyeksportuj je jako WebP lub AVIF, które przy tej samej jakości wizualnej są zwykle o 25 do 50 procent mniejsze niż JPEG. Celuj w około 100 do 300KB na obraz, zależnie od jego roli na stronie. Wskaźnik Largest Contentful Paint od Google uznaje stronę za wolną powyżej 2,5 sekundy, a zbyt duże zdjęcie główne jest często jedynym zasobem odpowiedzialnym za przekroczenie tego progu.
Zrób to w RorlAIProduct: Clean studio backdrop for anything boxed or bottled.Dlaczego rozmiar pliku to problem konwersji, a nie tylko ładowania
Largest Contentful Paint mierzy, jak długo największy widoczny element strony potrzebuje na pełne wyświetlenie. Według progów samego Google wszystko poniżej 2,5 sekundy jest dobre, od 2,5 do 4 sekund wymaga poprawy, a powyżej 4 sekund jest słabe. Na stronie produktu największym widocznym elementem jest prawie zawsze zdjęcie główne. Oznacza to, że jeden zbyt duży plik obrazu może sam zdecydować, czy Twoja strona produktu przejdzie ten test, niezależnie od tego, jak szybko ładuje się reszta strony.
To nie jest abstrakcyjne ćwiczenie z punktacji. Wolno ładujące się zdjęcie główne to pierwsza rzecz, jakiej kupujący doświadcza w Twojej ofercie, zanim przeczyta choć słowo opisu albo zobaczy cenę.
Realistyczny budżet rozmiaru
| Rola obrazu | Rozsądny cel |
|---|---|
| Zdjęcie główne, z możliwością powiększenia | 150 do 300KB |
| Drugie zdjęcie w galerii lub miniatura | 60 do 120KB |
| Zdjęcie główne na telefonie, w górnej części strony | poniżej około 150 do 200KB |
To robocze cele zebrane z aktualnych wytycznych optymalizacji obrazów, a nie oficjalna specyfikacja jednej platformy, i różnią się trochę zależnie od złożoności obrazu. Prosty produkt na białym tle daje się skompresować bardziej niż wielobarwna scena, zanim utrata jakości stanie się widoczna. Traktuj więc tabelę jako górną granicę, a nie regułę do trafienia co do kilobajta.
Kolejność kroków, które naprawdę oszczędzają bajty
- 1Najpierw zmień rozmiar, potem kompresujAparat lub narzędzie do generowania zwykle eksportuje obraz o szerokości 3000 do 4000 pikseli. Jeśli zdjęcie wyświetla się w polu o szerokości 1200 pikseli, najpierw zmniejsz je mniej więcej do tej szerokości. Kompresja zbyt dużego obrazu nadal dostarcza zbyt duży obraz, tylko trochę mniejszy.
- 2Eksportuj jako WebP, jeśli Twoja platforma to obsługujeWebP jest często o 25 do 35 procent mniejszy niż JPEG przy tej samej jakości wizualnej, a AVIF może pójść jeszcze dalej. Większość obecnych platform e-commerce i przeglądarek obsługuje WebP; sprawdź, czy Twoja serwuje go automatycznie, czy plik trzeba przesłać bezpośrednio w tym formacie.
- 3Gdy WebP nie wchodzi w grę, ustaw jakość JPEG w okolicach 70 do 85Domyślne ustawienia eksportu w programach graficznych są często niepotrzebnie wysokie. Jakość w tym zakresie jest wizualnie nie do odróżnienia od oryginału w większości zdjęć produktów i znacznie mniejsza niż eksport w 100 procentach.
- 4Usuń osadzone metadaneUstawienia aparatu, profile kolorów ponad potrzeby strony i dane GPS, które osadzają niektóre telefony, dodają wagi pliku, której kupujący nigdy nie widzi. Większość narzędzi do kompresji usuwa je domyślnie; upewnij się, że Twoje też to robi.
Najważniejsze rozróżnienie:
- Kompresja bezstratna zachowuje każdy piksel dokładnie tak, jak został zarejestrowany, i prawie nie zmniejsza fotografii. Nadaje się do grafik z płaskimi kolorami i ostrymi krawędziami, nie do fotografii
- Kompresja stratna odrzuca dane, które ludzkie oko trudno zauważa, i właśnie tam leżą prawdziwe oszczędności w zdjęciu
- Nowoczesny koder ustawiony poprawnie zatrzymuje się dużo poniżej punktu, w którym kupujący zauważa różnicę, na długo przed punktem, w którym zauważyłbyś ją Ty
Gdzie pasuje zdjęcie wygenerowane lub edytowane
Zdjęcie wytworzone przez dowolne narzędzie do edycji lub generowania wymaga tego samego kroku zmiany rozmiaru i kompresji co zdjęcie prosto z aparatu. Te narzędzia często domyślnie eksportują w pełnej rozdzielczości, a eksport w pełnej rozdzielczości ma ten sam problem z wagą, niezależnie od tego, czy piksele pochodzą z matrycy, czy z modelu. Traktuj je jak surowy plik czekający na ten sam budżet, a nie jak gotowy zasób.
Common questions
- Czy kompresja zdjęć produktów sprawi, że wyglądają gorzej?
- Nie przy rozsądnych ustawieniach. Kompresja stratna w opisanych tu zakresach jest dostrojona tak, by odrzucać szczegóły, których ludzkie oko nie rejestruje, więc poprawnie skompresowane zdjęcie wygląda identycznie w normalnym rozmiarze oglądania i ładuje się w ułamku czasu.
- Używać WebP czy zostać przy JPEG?
- Używaj WebP, jeśli platforma Twojego sklepu go obsługuje, bo przy tej samej jakości jest zwykle o 25 do 35 procent mniejszy niż JPEG. Wróć do dobrze dostrojonego JPEG tylko wtedy, gdy Twoja platforma lub motyw nie serwuje WebP automatycznie.
- Czy potrzebuję osobnych rozmiarów obrazów dla telefonów i komputerów?
- Idealnie tak. Kupujący na telefonie ogląda zdjęcie w znacznie mniejszej przestrzeni niż kupujący na komputerze, więc serwowanie mniejszego pliku na telefonie oszczędza realny czas ładowania bez widocznej utraty jakości na tym ekranie.
- Czy rozmiar pliku obrazu naprawdę wpływa na sprzedaż, czy tylko na wynik szybkości?
- Szybkość strony i konwersja są ze sobą powiązane na tyle mocno, że większość platform e-commerce traktuje to dziś jako czynnik rankingowy i konwersyjny, a nie tylko wskaźnik laboratoryjny. Zdjęcie główne, które samo spycha stronę poza próg 2,5 sekundy Largest Contentful Paint, to realne, mierzalne spowolnienie odczuwane przez kupującego, a nie abstrakcyjny wynik.