Optymalizacja zdjęć w sklepie internetowym jest jedną z istotniejszych spraw, na którą musisz zwrócić szczególną uwagę. Dlaczego? Dzięki temu Twój sklep szybko będzie się ładował w przeglądarkach a to przełoży się na pozytywne doświadczenia związane z dokonywaniem zakupów. Ponadto klienci nie uciekną do konkurencji zniechęceni długim oczekiwaniem na pojawienie się witryny. Te dwa powody są wystarczająco istotne, aby poświęcić chwilę na zgłębienie tego tematu.
Krok 1 – Narzędzia do analizy sklepu internetowego
Zaczniemy od tego aby określić jaka jest aktualna sytuacja Twojego sklepu – jak szybko ładuje się on w przeglądarkach internetowych? Czy problemy związane z szybkością ładowania się wynikają z braku optymalizacji zdjęć i grafik? Mając tę wiedzę będziesz mógł/mogła podjąć działania i potem ocenić ich wynik. Oto narzędzia, które pomogą Ci określić, czy w Twoim sklepie internetowym występuje problem niezoptymalizowanych obrazów.
Kontrowersyjny Page Speed Insights
Jest to narzędzie firmy Google, które mierzy wydajność stron w kontekście przeglądania ich na komputerach lub urządzeniach mobilnych.
Nazwałam je kontrwersyjnym gdyż jest różnie odbierane – jedni uważają, że warto z niego korzystać, inni uczulają, że nie działa dokładnie tak jak byśmy się tego spodziewali. Mimo nazwy sugerującej, że analizie poddana jest przede wszystkim szybkość ładowania się strony, okazuje się, że Page Speed Insights nie bada szybkości ładowania się strony. Dobrze zobrazował ten problem artykuł zamieszczony przez portal WP ROCKET.
Co zatem bada? To narzędzie ma swoje algorytmy służące do oceny witryn i biorą one pod uwagę szybkość ładowania, ale nie jest to jedyny czynnik, który skutkuje oceną w postaci punktów przyznanych stronie. Możesz zatem uznać, że jest to swego rodzaju papierek lakmusowy, który może Cię ostrzec, że obrazy jakie masz na stronie nie są odpowiednio zoptymalizowane. W swoich działaniach nie skupiaj się zatem na osiągnięciu najlepszego wyniku punktowego, a wykorzystaj fakt, że narzędzie to generuje listę obrazów z informacją, jak bardzo można zredukować ich rozmiar bez uszczerbku dla jakości. Jest to ważne, ponieważ skompresowane obrazy szybciej załadują się na witrynie (im słabsze łącze ma Twój klient tym większe ma to znaczenie) oraz zaoszczędzą transfer użytkownikom np. którzy przeglądają sklep z urządzeń mobilnych.
Pingdom Website Speed Test
Pod adresem tools.pingdom.com znajdziesz kolejne narzędzie, które analizuje prędkość ładowania strony oraz wskazuje na kilka dodatkowych informacji, które pomogą Ci ocenić swój sklep (np. jaki procent testowanych witryn jest szybszych/wolniejszych niż Twoja). Mamy też podgląd na to jak duże znaczenie wśród wszystkich ocenianych czynników mają zdjęcia w kontekście szybkości ładowania strony.
Google Analytics
Google Analytics daje wgląd m.in. w dane na temat szybkości wczytywania się witryny. Istnieje kilka raportów, które pozwolą Ci określić jakie strony wpływają najbardziej na wydłużenie czasu ładowania się witryny.
Zidentyfikuj gdzie pojawia się problem.
Wybierz kartę Raportowanie>Wybierz kolejno Zachowanie > Szybkość witryny.
Webspeed Intensys Tool
Kolejne, darmowe narzędzie znajduje się pod adresem webspeed.intensys.pl. Pozwoli Ci ocenić szybkość witryny. Można tu m.in. zobaczyć jak w zależności od szybkości łącza zmienia się czas wczytywania strony i uzyskać informację o tym ile łącznie zajmują grafiki i multimedia na witrynie. Po przeprowadzeniu optymalizacji wskaźnik ten powinien być niższy, co wpłynie również na wynik szybkości ładowania e-sklepu.
Krok 2: Optymalizacja obrazów
Zbadałeś aktualną sytuację sklepu internetowego i wiesz, że masz problem z niezoptymalizowanymi grafikami i zdjęciami? Czas wziąć się do pracy i to zmienić. Zanim zamieścisz w sklepie internetowym lub na stronie jakiekolwiek zdjęcie musisz wykonać 4 operacje: wybrać odpowiedni format pliku, odpowiednio go zapisać, zmniejszyć jego rozmiar (resize) i go skompresować (compress).
Wybór formatu zapisywanego pliku
Optymalizacja obrazów zaczyna się od odpowiedniego określenia jaki format pliku będzie najlepszy do zapisu grafiki, którą chcesz umieścić w internecie:
- Pliki w stylu fotograficznym powinny być zapisywane w formacje JPEG. Zapewnia on dobrą jakość w stosunku do wielkości zdjęcia. Sprawdza się w przypadku witryn e-commerce. JPEG sprawdzą się też do zrzutów ekranu.
- Warto wybierać format PNG jeśli zdjęcie ma małą paletę barw i zamiennie stosować z JPEG. Zaletą tego formatu jest mniejsza utrata jakości w stosunku do JPEG, ale wielkość pliku niestety na tym traci. Są one zatem cięższe i może się okazać, że nie opłaca się ich używać, lepiej pozostać przy formacie JPEG.
- Jeśli obraz zawiera grafikę składającą się z kształtów geometrycznych, rozważ jego konwersję do formatu wektorowego (SVG).
- Pliki GIF można używać do małych grafik (10 x 10 pikseli) lub o palecie kolorów ograniczonej do 3 barw, ikon a także dla obrazów z animacją.
Nie powinno się używać formatów BMP czy TIFF.
Poniższy schemat obrazuje algorytm wyboru odpowiedniego formatu dla zapisywanego pliku.
Wybór opcji “Save for Web”
Programy graficzne mają opcje zapisu pliku z przeznaczeniem do internetu i warto z tych opcji korzystać. W programie Adobe Photoshop jest to np. opcja Save for Web i jej suwak jakości (o zakresie od 1 – 100, wpływający na sposób działania zestawu algorytmów do optymalizacji stratnej i bezstratnej). Warto testować różne ustawienia jakości zapisu by uzyskać jak najlepsze rezultaty przy możliwie największej redukcji rozmiaru zapisanego pliku. Inne sugerowane zabiegi pomagające w kompresji zdjęć to:
- wycinanie zbędnych obszarów,
- maksymalna akceptowalna redukcja głębi kolorów,
- usuwanie komentarzy do obrazów.
Wykorzystaj narzędzia do optymalizacji zdjęć
Jak to często bywa – nasze problemy możemy rozwiązać korzystając z różnorodnych narzędzi. Są one zarówno w wersji desktop jak i dostępne z poziomu przeglądarki. Postaram się zaprezentować kilka tych, które przypadły mi do gustu, ale nie jest to na pewno żaden ranking najlepszych programów do optymalizacji zdjęć. Mimo wszystko mam nadzieję, że znajdziesz tu coś przydatnego 🙂
Zmiana wielkości zdjęcia
Większość programów graficznych daje możliwość zmiany wielkości grafik do wymiarów jakie dokładnie są nam potrzebne. W tym celu możesz skorzystać z:
- Photoshop
- GIMP (darmowy)
- Paint
- ImageOptim (Mac)
- Irfan View (darmowy do niekomercyjnych zastosowań)
- Zmniejszacz.pl (wersja WEB) – tu możemy dodatkowo nałożyć znak wodny, wykonać proste operacje np. obrócić zdjęcie, dodać proste efekty (rozmycie, sepia itp).
- Picresize.com (wersja WEB)
Kompresja zdjęć
Do kompresji zdjęć możesz posłużyć się:
- Zmniejszacz.pl (zmniejszanie i kompresja zdjęć)
- Imagify.io
(zmniejszanie i kompresja zdjęć) - Optimizilla.com (kompresja zdjęć)
- RIOT czyli Radical Image Optimization Tool (zmniejszanie i kompresja zdjęć w wersji desktop)
- Tinyjpg.com (kompresja zdjęć)
Optymalizacja obrazów to sztuka i nauka
Całkowicie zgadzam się z tym co napisał Ilya Grigorik – “Optymalizacja obrazów to zarówno sztuka, jak i nauka: sztuka, ponieważ nie ma jednej właściwej odpowiedzi, jak najlepiej skompresować dany obraz; nauka, ponieważ opracowano wiele technik i algorytmów umożliwiających znaczną redukcję rozmiaru obrazu”. Mierząc się z tym tematem nie bój się eksperymentować z różnymi parametrami programów do kompresji zdjęć, zapisuj wyniki swoich prób, aż znajdziesz optymalne ustawienia dla swoich obrazów.
Nie jest to jednak proces, który zaprowadzi Cię do jedynego słusznego rozwiązania – każde zdjęcie czy obraz ma swoją specyfikę i na ile to możliwie staraj się podejść do nich indywidualnie. Jest to czasochłonne więc pewnie przy określonej skali działalności stanie się uciążliwe i będziesz potrzebował zautomatyzować te działania lub zlecić. Pamiętaj jednak, że każdy wysiłek włożony w optymalizację obrazów w Twoim sklepie internetowym przekłada się na jego szybkość ładowania, więc nawet jedno ustawienie parametrów, które najczęściej się sprawdza dla Twoich potrzeb będzie już krokiem na przód.
Krok 3: Ważne detale
Kiedy już masz zoptymalizowane obrazy pozostaje dodać je na sklep internetowy. Upewnij się, że nazwy plików są adekwatne do tego co obrazek prezentuje i zawierają słowa kluczowe. Pomyśl jakie frazy wpisują użytkownicy poszukujący Twoich produktów, przeanalizuj temat od strony Search Console czy Google Analytics i wykorzystaj te frazy do nazywania plików.
Ważne jest również wykorzystanie atrybut ALT do opisu zdjęcia. ALT to tekst alternatywny, który pojawi się w przeglądarce, jeśli obraz nie zostanie z jakiegoś powodu wyświetlony. Każda platforma sklepowa lub strona powinna mieć możliwość wprowadzenia zawartości tego atrybutu – tu też zadbaj o słowa kluczowe i adekwatny opis zdjęcia. Opisy nie powinny być naszpikowane niepotrzebnymi przymiotnikami, nie mają nic sprzedać a precyzyjnie oddać to, co prezentuje fotografia/baner/grafika. Jeśli zadbasz o nazwy zdjęć i ich atrybuty ALT – uzyskasz maksimum efektu w postaci lepszych pozycji w wyszukiwarkach, a proces optymalizacji grafik będziesz mógł uznać za wykonany w 100%.
http://mobiletry.com/blog/jak-zoptymalizowac-grafike-na-stronie-internetowej
http://www.jestrudo.pl/jak-przygotowac-zdjecia-na-strone-internetowa
Podsumowanie
Dla mnie osobiście najlepszym rozwiązaniem jest dokonanie modyfikacji na plikach w jednym miejscu (zarówno zmniejszenie jak i kompresja) dlatego najwygodniej korzystało mi się przy testach wykonanych do tego artykułu z Imagify.io oraz RIOT.
Wyniki Imagify.io: dobra jakość, zdjęcie pomniejszone o połowę i skompresowane = zmniejszenie wagi pliku o 75%!. Wadą jest fakt, że ten serwis ma ograniczenia co do korzystania z wersji darmowej (można optymalizować pliki o łącznej wielkości 25MB/miesiąc). Zobaczę czy dla mnie będzie to wystarczające.
Wyniki RIOT – dobra jakość, zdjęcie pomniejszone o połowę i skompresowane = zmniejszenie wagi pliku o 77%!. Z programu korzysta się wygodnie, sam przypomina o zmniejszeniu rozmiaru pliku przed kompresją, działa błyskawicznie i osiąga najlepsze efekty. Można korzystać z niego za darmo.
Jeśli chodzi o samą kompresję to Optimizilla.com też świetnie sobie poradziła z moim plikiem (dobra jakość, zdjęcie pozostało przy swoich oryginalnych rozmiarach = zmniejszenie wagi pliku o 70%!) nie ma ograniczeń co do darmowego jej wykorzystania.
Super robota 🙂
Dziękuję 🙂