4 częste błędy w grafikach, popełniane przez sklepy na Shoper (nawet te duże), i jak je naprawić [2023]

Na co zwrócić uwagę, przygotowując grafiki do szablonu Shoper?

Moi znajomi żartują czasem, że każdy chciałby mieć taką pracę jak ja: całe dnie siedzieć sobie i robić zakupy przez internet. I rzeczywiście – od lat, spędzam całe dnie na pracy ze sklepami. I od lat, natykam się na te same błędy w grafikach, nawet w dużych sklepach. Dlatego zebrałam poniżej najczęstsze błędy i mam nadzieję, że pozwoli Ci to ich uniknąć 🙂 Wystarczy zwrócić uwagę na 4 elementy.

Warto, żebyś zwrócił uwagę na te 4 rzeczy, dzięki którym Twój sklep internetowy Shoper będzie się pięknie prezentował:
– niezależnie od Twojej branży;
– niezależnie od tego jaki szablon Shoper wybierzesz;
– niezależnie od tego na jakim urządzeniu klient odwiedza Twój sklep.

Jakie błędy znajduję w grafikach sklepów na Shoper?

#1 za ciężkie grafiki

Ciężkie grafiki długo się ładują (dramat na wersji mobilnej, bo Klient nie lubi czekać). Czas ładowania strony jest czynnikiem branym pod uwagę w pozycjonowaniu w wyszukiwarce. Dlatego do sklepu wrzucaj jak najlżejsze grafiki.

Zalecana przez nas w Shopcademy waga zdjęcia produktu i dużego baneru, to 150-250 KB (0,15-0,25 MB).

Więcej o optymalizacji zdjęć w Shoper, pisałam w tym artykule: „Które zdjęcia w sklepie musisz zoptymalizować, bo nie robi tego Twój Shoper?”

#2 złe wymiary

Wymiary grafik muszą być dostosowane do dostępnego w Twoim szablonie miejsca. Inaczej tracisz spójny wygląd i przemyślany UX szablonu, a responsywność zaczyna wariować. 

Dla responsywności najważniejsza jest szerokość (a nie wysokość) Twoich grafik. Dlatego w wytycznych do szablonów najczęściej znajdziesz same szerokości grafik, a ich wysokość dostosuj proporcjonalnie (tak żeby zdjęcie zachowało proporcje, nie rozciągnęło się).

Zalecane wymiary grafik dla sklepów internetowych Shoper:

– w galerii produktu – grafiki powinny mieć maksymalną szerokości 1920px (zalecamy 1080px – tak aby waga była jak najmniejsza, taki wymiar jest też optymalny pod kątem urządzeń mobilnych);

– w opisie produktu i w sliderze na całą dostępną szerokość szablonu – 1180px (jeśli szablon obsługuje pełną szerokość ekranu, to zalecamy 1920px);

– grafika w opisie kategorii – 880px (jeśli na liście produktów nie ma włączonej lewej kolumny, to 1180px);

– logo sklepu i logo producenta – zalecamy maksymalnie 250px (jeśli logo zawiera dużo tekstu, to 350px);

– miniatura wpisu blogowego – 880px (jeśli na stronie wpisów nie ma włączonej lewej kolumny, to 1180px);

– bannery w lewej i prawej kolumnie – 280px.

Powyższe wytyczne są w miarę uniwersalne, powinny się sprawdzić w każdym szablonie. Pamiętaj, jednak żeby sprawdzić wymiary w Twoim szablonie, zwłaszcza jeśli był już wcześniej mocno edytowany.

Jeśli korzystasz z naszego szablonu Shoper Dealer, to po zakupie prześlemy Ci zalecane wymiary grafik szablonu, dzięki którym łatwo i masowo podmienisz przykładowe bannery na swoje.
A tutaj obejrzysz wszystkie nasze szablony Shoper jeśli dopiero się rozglądasz za grafiką.

Niektóre wymiary grafik w szablonie, możesz sprawdzić samodzielnie – pisałam o tym w artykule o optymalizacji zdjęć w Shoper.

#3 różne proporcje

Poza wagą i wymiarami, ważne jest także zachowanie takich samych proporcji zdjęć. Unikniemy wtedy krzywego wyświetlania, nierównych marginesów i ogólnego chaosu. Za to stworzymy harmoniczny, spójny, estetyczny sposób prezentacji naszych produktów.  

Jakie powinny być proporcje zdjęć produktów i slajdów?

O proporcjach zdjęć możesz zdecydować w zależności od produktów jakie oferujesz. Możesz zdecydować, czy zdjęcia będą kwadratowe czy prostokątne, w pionie czy w poziomie.

Np. jeśli sprzedajesz ubrania, to dla zdjęć modelek możesz wybrać proporcje 2:3 (prostokąt, pionowy), a z kolei jeśli sprzedajesz książki, to zdjęcia okładek będą dobrze wyglądać w proporcjach 1:1 (kwadratowe). Może się też zdarzyć, że masz zdjęcia np. aranżacji wnętrz w proporcjach 3:2 (prostokąt, poziomy) – tutaj byłabym ostrożna, bo trzeba dokładnie obejrzeć jak to wygląda na mobilu.

Bardziej niż to jakie konkretnie proporcje zdjęć wybierzesz, liczy się to, żeby się ich trzymać 🙂 Czyli:

– główne zdjęcie w galerii produktu – powinno być takich samych wymiarów dla wszystkich produktów, żeby tworzyć piękne listy produktów.

– zdjęcia w galerii produktu – powinny być wszystkie co najmniej o takich samych proporcjach, a najlepiej o identycznych wymiarach, żeby pięknie się układały miniaturki pod galerią.  

– wszystkie slajdy  w sliderze – powinny mieć takie same wymiary, bo inaczej pojawiają się białe pasy, które wyglądają jak błąd. Więcej o tym błędzie w slajderze pisałam tutaj: https://shopcademy.pl/shoper-edycja-szablonu/

#4 zły format

Grafiki używaj w odpowiednim formacie (jpg, png, svg, webp). Każdy z formatów ma inne właściwości, którymi nie będę Cie tutaj zanudzać. Dzięki umiejętnemu użyciu formatów, osiągniesz lepsze wyniki prędkości, a Twój sklep łatwo dogada się z każdą przeglądarką 🙂

Zalecane formaty grafik w szablonach Shoper:

– banery, zdjęcia produktów – jpg, webp;

– Twoje logo, dodatkowe ikony, logotypy – svg lub ewentualnie png. 

Jedna uwaga na temat formatu webp – nie każda stara przeglądarka go obsługuje, bo to dość nowy format promowany przez Google. Dlatego, chociaż jest lżejszy, to czasem warto rozważyć pozostanie przy jpg – wszystko zależy od tego, kogo ściągasz do swojego sklepu. Jeśli w swoim Analytics widzisz duży udział starych urządzeń i starych przeglądarek, to warto się zastanowić.

Tutaj łatwo i za darmo skompresujesz grafiki : 

– dla jpg, png: Tinyjpg.com

– dla svg: JakeArchibald.github.io/svgomg

A tutaj łatwo i za darmo zmienisz wymiary i format grafik:

Jeśli nie jesteś szczęśliwym posiadaczem Photoshopa, to możesz skorzystać z bezpłatnych wersji programów do edycji zdjęć: np. Canva, Adobe Express, Photopea 

Warto opanować obsługę co najmniej jednego z nich – szybkie docinanie grafik to umiejętność, która na pewno Ci się przyda w sklepie internetowym 😉