4 częste błędy w grafikach, popełniane przez sklepy na Shoper (nawet te duże), i jak je naprawić [2023]
Sprawdź czy popełniasz te błędy i zobacz jak je naprawić. Dzięki temu Twój sklep będzie szybki, miły dla oka i bezbłędny. Unikniesz problemów z pozycjonowaniem w Google i niemiłych niespodzianek w przyszłości.
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 😉