Tło strzałki Strzałka
0 0
dni
0 0
godz
0 0
min
0 0
sek

Optymalizacja obrazków w sklepie internetowym

Nasz ekspert:
Artykuły autora

Wielkość tekstu:

Właściwie dobrana grafika to niezmiennie najlepszy sposób na przykucie uwagi odbiorcy do treści umieszczanych w sieci. Fotografie są szczególnie istotne w przestrzeni e-commerce. To właśnie na ich podstawie większość klientów podejmuje swoje decyzje. Jakie zdjęcia pozwolą nam poprawić wyniki sprzedażowe? Jak przebiega optymalizacja obrazków? Co zrobić, żeby używane na naszej stronie grafiki pomogły nam podbić rankingi Google? Przekonajmy się!

Dlaczego zdjęcia są tak ważne?

Spójrzmy przez moment na biznes e-commerce z perspektywy osoby odwiedzającej nasz sklep. Bez znaczenia, czy jest to nasz stały klient, czy też osoba przekraczająca po raz pierwszy nasze wirtualne progi – jednym z najistotniejszych czynników wpływających na jej decyzje będzie wrażenie wizualne, jakie wywrą na niej obecne na stronie treści. Nasz klient nie będzie miał okazji obejrzenia produktu fizycznie przed jego zakupem, dlatego fotografie które wykorzystamy mają kluczowe znaczenie dla jego decyzji.

Jak zatem powinna wyglądać dobra fotografia produktowa? Wbrew pozorom, perfekcja wcale nie jest w tym wypadku naszym najlepszym sprzymierzeńcem. Zdjęcia noszące znamiona doskonałości wzbudzają raczej wrażenie sfabrykowanych i mających niewiele wspólnego z produktem, do którego się odnoszą. Dokonując zakupu w sieci znacznie bardziej komfortowo czujemy się mając do czynienia z fotografią przedstawiającą subtelnie oświetlony produkt w jego naturalnym otoczeniu. Dzięki temu łatwiej jesteśmy w stanie uzmysłowić sobie jego przydatność w naszym życiu, a co za tym idzie, dokonać decyzji o zakupie.

Unikatowość używanych przez nas fotografii to doskonały sposób na wyróżnienie naszych produktów w wynikach wyszukiwania Google Images czy Google Shopping, z których to pochodzi znaczna część ruchu sklepów internetowych. Zadbajmy zatem o wykorzystanie zdjęć w żywych, odznaczających się kolorach, wywołujących w odbiorcy przyjemne skojarzenia, pamiętając przy tym o zachowaniu jak największej naturalności. Unikajmy zaś wykorzystywania neutralnych fotografii na białym tle, używanych zwykle przez producentów produktów. Nawet jeśli wiernie przedstawiają one sprzedawane przez nas artykuły, taka forma nie wyróżnia się na tle pozostałych fotografii ani nie pobudza w żaden sposób wyobraźni potencjalnego klienta.

optymalizacja obrazków

Jak przygotować technicznie zdjęcie produktowe?

Odpowiednia kompresja fotografii jest kluczowym czynnikiem dla wydajności naszej witryny internetowej. Badania rynku e-commerce są w tej kwestii bezlitosne. Znaczny odsetek internautów czekających dłużej niż 5 sekund na załadowanie treści opuszcza stronę w poszukiwaniu jej bardziej wydajnego odpowiednika. Naturalną koleją rzeczy odpowiednikiem tym będą zawsze sklepy należące do naszych konkurentów.

Właściwe parametry techniczne zdjęcia są też ogromnie istotne dla pozycji naszego sklepu w wynikach wyszukiwania. Core Web Vitals – wprowadzone na początku 2021 roku kryteria indeksowania stron internetowych w algorytmie Google – kładą duży nacisk na sprawność ładowania poszczególnych elementów witryny oraz cechy umieszczonych na niej multimediów. Punktacja Core Web Vitals bezpośrednio wpływa na naszą pozycję w wynikach wyszukiwania, dlatego też optymalizacja plików graficznych powinna znaleźć się wysoko na liście naszych priorytetów, jeżeli zależy nam na zdobywaniu kolejnych odbiorców.

Stosuj lekkie formaty obrazów

Zalecanym przez Google formatem optymalizującym działanie strony internetowej jest .webp. Dobrze może się również sprawdzić popularny plik JPG – o ile przed zapisaniem grafiki zadbamy o jej odpowiednią kompresję oraz upewnimy się, że rozmiary zdjęcia mieszczą się w ramkach ustalonych w kodzie naszego sklepu.

Najlepszym sposobem na zweryfikowanie limitów naszej witryny jest sprawdzenie rozmiarów poszczególnych boxów, ustawionych w naszym systemie zarządzania treścią. Dobrą praktyką jest zdecydowanie się na jeden konkretny zestaw rozmiarów grafiki dla miniatury, fotografii w pełnym wymiarze i mniejszych kafelek graficznych umieszczanych na podstronach naszego sklepu. Dzięki temu nie tylko usprawnimy wydajność strony, ale też zyskamy pewność, że wszystkie zdjęcia będą zachowywały się w podobny sposób, co dodatkowo poprawi naszą punktację w rankingu Google i sprawi, że optymalizacja obrazków przebiegnie prawidłowo.

Jak dobrać odpowiedni rozmiar grafiki?

Samo skalowanie obrazów w panelu administratora nie wpłynie jednak w żaden sposób na wydajność naszej strony. Docelowo wyświetlanym obrazem będzie zawsze ten, który umieściliśmy na serwerze – dlatego tak istotne jest dostosowanie rozmiarów zdjęcia do zdefiniowanych wcześniej boxów. Dla przykładu – zdjęcie w rozdzielczości 8500x5000px wykorzystane jako miniaturka w polu mierzącym 200x200px wciąż będzie pobierało się na dysk naszego klienta w pierwotnej rozdzielczości, co może poskutkować w tym wypadku nawet kilkunastosekundowym czasem oczekiwania. W sytuacji, w której do pobrania mielibyśmy galerię składającą się z kilkudziesięciu takich miniatur, ładowanie podstrony byłoby nie lada wyzwaniem nawet dla najszybszego łącza internetowego.

Warto w tym momencie uzmysłowić sobie realia rynku. Nie ma sensu stosowanie ogromnych grafik w rozdzielczości 4K – znaczna część ruchu stron internetowych pochodzi dziś z urządzeń mobilnych, ultrabooków i laptopów, wyposażonych w ekrany o przekątnej nieprzekraczającej 15 cali. Tymczasem jedynym zadaniem fotografii produktowej jest obiektywne zaprezentowanie przedmiotu – nikt nie będzie doszukiwał się w niej mikroskopijnych detali ani oczekiwał porywających wrażeń wizualnych po wykorzystywanych w naszym sklepie zdjęciach.

optymalizacja obrazkówUsprawnienia dla plików graficznych

Bardzo dobrym rozwiązaniem optymalizującym ładowanie stron internetowych jest zastosowanie skryptu Lazy Load. Jego skutkiem jest pobieranie w pierwszej kolejności elementów strony faktycznie widocznych na ekranie naszego gościa. Dzięki temu obrazy i filmy znajdujące się w niższych partiach witryny mogą być stopniowo pobierane, podczas gdy odbiorca swobodnie korzysta z interesującej go części strony.

Duże znaczenie dla pozycjonowania naszego sklepu mają również wykorzystane w ilustracjach metadane. Najistotniejszym spośród nich jest atrybut ALT, którego zadaniem jest słowne odwzorowanie zawartości ilustracji. Przy jego konfiguracji używajmy naturalnego języka, wykorzystując jedynie te frazy, które faktycznie odnoszą się do elementów widocznych na fotografii. Kopiowanie najpopularniejszych słów kluczowych w celu wypozycjonowania obrazu odniesie w tym wypadku skutek odwrotny do zamierzonego. Algorytmy Google wykrywają tego typu zachowania, klasyfikując je jako nadużywanie popularnych fraz kluczowych, co z kolei skutkuje obniżeniem naszej pozycji w wynikach wyszukiwania.

Tekst umieszczony w atrybucie ALT nie tylko pomaga silnikom wyszukiwarek internetowych w odszukaniu odpowiednich treści, ale także jest wyświetlany na ekranie osób odwiedzających nasz sklep podczas gdy dana grafika nie może zostać załadowana. Warto więc zadbać o to, żeby był on przejrzysty, czytelny i precyzyjny. Poszukując słów kluczowych do zastosowania w tekście ALT skoncentrujmy się na jak najdłuższych frazach, dokładnie opisujących cechy naszego produktu. Dzięki temu zyskamy wysoką pozycję w mało konkurencyjnych hasłach kluczowych, a co za tym idzie, ułatwimy dotarcie do nas klientom zdecydowanym na zakup konkretnego produktu, znajdującego się w naszej ofercie.

Przygodę z optymalizacją sklepu czas zacząć!

Choć na pozór stosowanie się do podanych reguł wydaje się skomplikowane, w rzeczywistości optymalizacja obrazków jest jedynie kwestią wypracowania korzystnych nawyków. Powyższe praktyki nie tylko uczynią nasz sklep bardziej przyjaznym dla użytkownika, ale także zwiększą naszą punktację w rankingach wyszukiwarek, co bezpośrednio przełoży się na większy ruch w naszym sklepie. Nie pozostaje nic innego, jak tylko wcielić je w życie w swoim biznesie i obserwować rosnącą sprzeda.

Artykuły
Brak wyników.
Więcej artykułów
Wzory
Brak wyników.
Więcej wzorów