Obrazy w sklepach internetowych pełnią ogromną rolę. W przeciwieństwie do tradycyjnych stron internetowych, blogów, portali informacyjnych, dla sklepów internetowych obraz to główna treść
niosąca informację o tym na przykład jak wygląda przedmiot, który moglibyśmy kupić. Jakość obrazów może zadecydować czy produkt zostanie sprzedany czy też nie. Wielkość obrazów może przesądzić o tym, że sklep internetowy się nie wczyta, a nasz potencjalny, niedoszły klient ucieknie nam do konkurencji. Dzisiejszy artykuł będzie poświęcony tylko obrazom i ich odpowiedniej optymalizacji.
Banery, w sklepie internetowym
Zacznijmy od tego co w pierwszej kolejności widać gdy wchodzimy na jakikolwiek sklep internetowy. Jest to baner i najprawdopodobniej jest to najważniejsza grafika w sklepie internetowy. Obraz ten nie decyduje o tym czy klient dokona zakupu czy też nie. Obraz w banerze informuje klienta czy dobrze trafił, ma moc zachęcenia użytkownika do dalszego przeglądania sklepu lub jego opuszczenia.
Jaki baner powinien być w sklepie internetowym? Jest kilka wytycznych, których stosowanie pomoże Ci przyciągnąć użytkownika do kart produktu i być może dokona zakupu. Banery na sklepie internetowym po pierwsze powinny nawiązywać do produktów, które sprzedajesz. Powinny być wysokiej jakości ale same obrazy powinny być również zoptymalizowane, tak by szybko się wczytywały.
Obrazy w banerze powinny razem z szata graficzną tworzyć spójną całość, czyli kolorystycznie stylowo obrazy w banerze powinny być w jakiś sposób z sobą powiązane, powiązane ze zdjęciami produktowymi oraz kolorystyką szaty graficznej. W takim przypadku tworzą świetną kompozycję, czytelną i przyjazną dla oka.
Zdjęcia w banerze na sklepie internetowym powinny mieć wydźwięk artystyczny. Baner nie może zawierać zdjęcia wykonanego byle jak. Sam kadr oraz to co na zdjęciu widzimy powinno mieć formę, kompozycję idealną.
Pamiętaj | Nie rób |
|
|
Obrazy produktów i ich jakość
Obok banerów, kluczową rolę, w sklepie internetowym odgrywają obrazy produktów. Zdjęcie przedstawiające produkt dla większości rodzajów branż jest ważniejsze niż opis produkt. W branżach takich jak odzieżowa, jubilerska, artystyczna, dekoratorska użytkownik patrzy głównie na obraz produktu i to ten decyduje o zakupie. Dlatego obrazy produktu powinny być najwyższej, zoptymalizowanej jakości, przedstawiać produkt, w jak najlepszym świetle oraz jego szczegóły. Zdjęcia produktowe nie mogą kłamać, tyczy się to zwłaszcza kolorystyki, tekstury, kształtu, wielkości. Prezentując użytkownikowi prawdziwe obrazy unikniemy nie potrzebnych problemów związanych z dużą ilością zwrotów, złymi opiniami w sieci.
Dodając zdjęcia do galerii prezentującej produkt, zaczynamy od zdjęcia prezentującego całość z najlepszej, najciekawszej strony. Kolejne zdjęcia powinny pokazywać kolejne profile oraz zbliżenia na ważne szczegóły produktu.
Dokonując zakupów w stacjonarnym sklepie korzystamy z dodatkowych zmysłów, np. w branży odzieżowej takim zmysłem jest dotyk. Badamy wzrokiem i dotykiem jakość materiału. W sklepie internetowym powinniśmy prezentować takie zdjęcia by użytkownik otrzymał odpowiednie informacje opisujące produkt, bez wykorzystywania innych zmysłów. Dobrym pomysłem są np. zdjęcia prezentujące gramaturę materiału oraz jego teksturę. Jeżeli działasz w branży odzieżowej warto być przeczytał jeszcze: wszystko o sklepach internetowych odzieżowych.
Zdjęcia wysyłane na serwer powinny być wstępnie zoptymalizowane przez administratora. Co to oznacza? Większość systemów e-commerce optymalizuje zdjęcia samodzielnie, jednak warto im to ułatwić i wysyłać obrazy już wstępnie pomniejszone. Obrazy wysyłane na serwer powinny mieć maksymalnie 1900 pikseli szerokości oraz maksymalnie 1200 pikseli. Dostarczenie takich obrazów na serwer ustrzeże nas przed sytuacją gdzie na serwerze zabraknie pamięci do jego systemowej obróbki.
Pamiętaj | Nie rób |
|
|
Formaty obrazów dla sklepu internetowego
Istnieje wiele formatów obrazów. Różnią się jakością z jaką można prezentować za pomocą nich zdjęcia, kompresją. Do jeszcze nie dawana najlepszym sposobem prezentacji zdjęcia było użycie formatu jpg. Format ten umożliwia zadowalającą kompresję bezstratną. Oprócz jpg często sięgamy dodatkowo po format png. Format ten nie kompresuje w żaden sposób obrazów co przekłada się na ich większy ciężar (więcej miejsca na dysku zajmują). Format png obsługuje jednak przezroczystość i za to jest ceniony.
Oba formaty są bardzo stare i istnieją bardziej wydajne. Format webp pozwala uzyskać niesamowitą kompresję bez stratną przy jednoczesnym obsługiwaniu przezroczystości. W przypadku plików png w banerze daje to nawet 1000kb oszczędności. Niestety nie wszystkie serwery obsługą funkcje php związane z obróbką obrazów, w tym formacie. Nasza firma udostępnia darmowe rozszerzenie dla Opencart, które modyfikuje systemowy generator miniatur tak by tworzył je właśnie w formacie webp. Rozszerzenie możecie pobrać tutaj: Opencart webp Images.
Programy do obróbki obrazów
Jest wiele programów do obróbki zdjęć. W tym artykule skupię się jedynie na tych, które są niezwykle przydatne podczas zarządzania sklepem internetowym. Dodając zdjęcie do artykułu mamy do czynienia maksymalnie z kilkoma zdjęciami. Gdy dodajemy zdjęcia do produktów lub mamy obrobić wstępnie tysiące zdjęć dla importowanych produktów robi się spory problem.
XnResize
Prowadząc sklep internetowy możesz spotkać się z sytuacją gdzie w jak najkrótszym czasie będziesz musiał dodać sporą ilość produktów, a co za tym idzie również zdjęć do nich. Jak wcześniej już wspominałem zdjęcia wysyłane na serwer powinny być wstępnie zoptymalizowane, przynajmniej na potrzeby stabilnego działania serwera. Z pomocą przychodzi nam program XnResizer. Program ten pozwala na masową zmianę rozmiarów obrazów.
Wystarczy ustawić maksymalną szerokość i wysokość dla wszystkich obrazów, a program zmieni każdy obraz zachowując przy tym proporcje.
XnConverter
Jest to program pozwalający na konwersję obrazów z jednego formatu do drugiego. Konwertować obraz jpg to png możemy praktycznie w każdym programie graficznym wykonać. Nas interesuje jednak użyteczność webowa tego programu i trzeba przyznać, że jeżeli chodzi o mnogość formatów to XnConverter wyprzedza nawet taki kombajn jak Photoshop. Nas powinien zainteresować jeden – format webp. W artykule już o nim pisałem jest to wyjątkowy format zapewniający jedną z najlepszych kompresji bezstratnych z obsługą przezroczystości. Program kosztuje jedyne 15€ i trzeba przyznać że nie jest to cena wysoka jak na możliwość masowej zmiany formatu obrazu oraz jego rozmiarów.
AntRenamer
Jest to program do zarządzania masą plików od strony ich nazewnictwa. Niezwykle przydatny program gdy posiadamy tysiące obrazów z błędną nazwą, nienadającą się do wysłania na serwer. Dzięki temu programowi możemy w parę sekund zmienić wszystkie nazwy plików w danym folderze usuwając z ich nazwy spacje, znaki specjalne, litery polskiego alfabetu.
Podsumowanie
Obrazy w sklepach internetowych to często najważniejsza treść, więc warto zadbać by ta treść była najwyższej jakości przekazywała dokładnie to co chcemy przekazać naszym klientom, aby zawsze ładowały się szybko i poprawnie. Stosując się do zagadnień z naszego artykuł na pewno przyśpieszysz swój sklep internetowy oraz sprawisz że będzie wizualnie bardziej atrakcyjny dla Twoich klientów.
Używając proponowanych programów możesz zaoszczędzić całe godziny. Za miast edytować kilkaset obrazów jeden po drugim program zrobi to za Ciebie w kilka sekund.