Jak zoptymalizować obrazy w sklepie internetowym?

Jednym z najczęstszych błędów, jakie pojawiają się w sklepach internetowych na PrestaShop jest nieprawidłowa konfiguracja obrazów oraz szablonu. Z reguły umykają nam takie szczegóły jak np. zbyt duży rozmiar obrazu,  a to właśnie detale mają największy wpływ na cały sklep i mogą powodować liczne problemy. Najczęstszymi błędami na stronie spowodowanymi błędnie skonfigurowanymi obrazami są:

• bardzo długi czas wczytywania strony, co powoduje wolne działanie sklepu, a w konsekwencji opuszczenie go przez potencjalnego Klienta
• ogromne zużycie miejsca na serwerze, co prowadzi do konieczności zakupu dodatkowego przestrzeni hostingowej i generuje koszty 

Co zrobić, aby poprawnie skonfigurować obrazy?

Pierwszym krokiem do poprawnej konfiguracji obrazów w sklepie internetowym na PrestaShop jest sprawdzenie rozmiarów zdjęć. W tym celu należy wybrać sekcję Wygląd, a następnie Zdjęcia.

W tej zakładce znajdziemy nie tylko rozmiary zdjęć, ale także miejsca, w których się znajdują. Informacja ta jest niezbędna do dalszej konfiguracji, ponieważ pozwoli na wskazanie miejsc, które należy zoptymalizować. 

Optymalizacja stron, na których znajdują się obrazy

Pierwszą rzeczą, jaką należy zrobić, jest zdefiniowanie i określenie rozmiarów zdjęć. Będą one różne w zależności od miejsc, w których się znajdują. 

• zdjęcia produktowe – 3-4 rozmiary obrazów
• zdjęcia do kategorii – 1-2 rozmiary obrazów
• marki, dostawy, sklepy – 1 rozmiar obrazu

Częstym błędem popełnianym w sklepach internetowych na PrestaShop, jest nieodpowiednia konfiguracja ustawień. Ważne jest, aby ograniczyć możliwość wgrania obrazów o dowolnym rozmiarze tj. domyślny rozmiar rekomendowany przez platformę PrestaShop, rozmiar wymagany przez szablon oraz wszystkie inne stworzone przez użytkownika i skupić się na jednym właściwym. Co to oznacza? 

Oznacza to, że dla każdego przesłanego obrazu tworzone są dodatkowe miniatury w różnych rozmiarach. Powoduje to zużycie dodatkowej ilości miejsca na serwerze. Warto więc ograniczyć niepotrzebne powielanie obrazów. Jeśli wartości dwóch typów miniatur różnią się jakąś niewielką ilością pikseli warto zdecydować się na jeden typ i ten drugi wyłączyć. 

W przypadku gdy na stronie sklepu znajduje się 10 000 produktów i pięć dostępnych rozmiarów obrazów, wygenerowanych zostanie kolejnych 50 000. Jeśli dezaktywujemy wskazany rozmiar to jedna prosta czynność pozwoli zaoszczędzić 10 000 dodatkowych obrazków, to jest aż 20% miejsca na serwerze.

Dostosowanie rozmiarów obrazów do szablonu 

Po usunięciu wybranego rodzaju miniatur, ważne jest, aby sprawdzić, czy wybrany rozmiar nie jest wywoływany niepotrzebnie w szablonie. W tym celu należy zweryfikować strony i szablony stron do których był przypisany.

Po znalezieniu miejsc, w których użyty został rozmiar nasz rodzaj miniatury, należy wpisać w szablonie nową wartość, której chcemy użyć. 

Warto także sprawdzić wymiary obrazów, które są faktycznie używane na stronie. Nie ma konieczności ładowania obrazu w rozmiarze 2000 x 2000 w kartach produktu, jeśli box, w którym znajduje się obraz, ma wymiary 800 x 800. Powoduje to utratę transferu, wczytanie strony produktu zajmie dużo więcej czasu a efekt skalowania w dół zbyt dużego zdjęcia może być gorszy dla oka, niż w przypadku dodania tylko poprawnego wymiaru zdjęcia. W tym przypadku to przeglądarka skaluje obraz załadowany z serwera.

Należy również zwrócić uwagę na typowy błąd pojawiający się w sklepach internetowych. Listy produktów wyświetlają zwykle zdjęcia w rozmiarach około 200x300px. Tymczasem ładowane są obrazy dużo większe, które są skalowane w dół aby dopasować się do przestrzeni kafelka z produktem. To często zużywa nawet 2-3 razy więcej miejsca na serwerze i spowalnia prędkość ładowania strony. Zupełnie niepotrzebnie!

Wdrożenie 35 dedykowanych funkcji

na PrestaShop

w sklepie 7mil.pl

Zobacz case study

Ustawienie rozdzielczości i typu obrazu

Kolejnym krokiem jest konfiguracja rozdzielczości obrazów. Po przesłaniu zdjęć do PrestaShop zostaną automatycznie wygenerowane różne rozmiary zdjęć (w tym także pliki poglądowe oraz zdjęcia do wersji mobilnej sklepu). Należy więc przesłać główną wersję zdjęcia, która będzie mogła zostać przeskalowana na inne rozmiary. Aby upewnić się, że przesłane zdjęcie ma odpowiedni rozmiar, należy zadbać o jego proporcje.

 Oto kilka najważniejszych punktów, które należy wziąć pod uwagę optymalizując zdjęcia na stronie. 

• format obrazu – najpopularniejszymi formatami obrazu są formaty jpg oraz png. Ze względu na lepszą umiejętność kompresowania zaleca się, aby zdjęcia w sklepie na PrestaShop posiadały format jpg. 
• kompresja jpeg – zaleca się kompresowanie zdjęcia w formacie jpg do poziomu 60-70%. Jeśli zdjęcie będzie posiadało widoczne gołym okiem skazy, należy wybrać wartość, która pozwoli zachować dobry wygląd obrazu;
• kompresja png – w formacie png zaleca się kompresowanie zdjęć na poziomie 6-7;
• generowanie obrazu na podstawie jednej z krawędzi obrazu źródłowego – dzięki tej funkcji możliwe jest określenie położenia obrazu w określonym miejscu. Możliwe jest dostosowanie obrazu do wysokości ramki, szerokości ramki lub automatycznie, tak, by obraz zajął jak najwięcej miejsca w ramce;
• maksymalny rozmiar plików dla produktów – domyślnie platforma PrestaShop przyjmuje pliki o rozmiarze 8MB. Jeśli istnieje taka potrzeba, możliwe jest zwiększenie maksymalnego rozmiaru plików. Należy je jednak odpowiednio dostosować;
• szerokość zdjęcia produktu
• wysokość zdjęcia produktu

Właściwa optymalizacja zdjęć w sklepie internetowym to bardzo ważna i często bagatelizowana kwestia ustawień strony www. Prawidłowa konfiguracja obrazów pozytywnie wpłynie na prędkość ładowania się strony, pozycjonowanie w wyszukiwarce Google, a także sukces sklepu.

Zobacz także:

Google PageSpeed Insights dla Sote Shop i PrestaShop – dlaczego warto poprawiać wyniki i jak się do tego zabrać?

5 najczęstszych powodów, dla których upadają sklepy internetowe

15 powodów, przez które Twój sklep na PrestaShop nie sprzedaje