Twój sklep internetowy wolno działa? Zobacz jak kompresja obrazów może to poprawić

Przeprowadzone badania przez Akamai [1], dowodzą że dwie sekundy to tak naprawdę próg akceptowalności dla witryny e-commerce. Co wskazuje, na oczekiwania użytkowników.

To był rok 2010. Do dziś szybkość ładowania się stron to często i mocno zaniedbywany element, który przekłada się na odbiór witryny przez użytkowników. Oczekiwanie na załadowanie się sklepu internetowego, brak natychmiastowej możliwości podróżowania po sklepie, zapoznania się z ofertą może irytować. W prostej linii prowadzi to do zwiększonego współczynnika odrzuceń.

2 sekundy to nadal niezwykle rzadko osiągany próg. Jednym z kluczowych działań jakie należy podjąć to odpowiednie zarządzanie obrazami. To one najczęściej stanowią o tym jak szybko ładuje się strona. Google page speed po przeanalizowaniu strony www bardzo często wskazuje, że największym ciężarem dla strony są właśnie zdjęcia.

Jakie są najpopularniejsze formaty zdjęć?

Zanim podejdziemy do kompresji warto zapoznać się z najpopularniejszymi formatami zdjęć, jakie są stosowane zarówno na stronach biznesowych, jak i w sklepach internetowych:

• JPEG (Joint Photographics Expert Group) – to jeden z najbardziej popularnych formatów obrazów jaki stosowany jest na stronach www. Charakteryzuje się wysoką jakością, a do zalet popularnych jpegów zaliczyć trzeba to, że wykazują się wysokim poziomem renderowania, co pozwala na ich dobrą kompresję. W tej grupie formatów znajdują się nowocześniejsze jego warianty, które są często zalecane przez Google`a – są to JPEG 2000 oraz JPEG XR.
• PNG (Portable Network Graphics) – swego rodzaju alternatywa dla JPEGa, jednak nie da się nie dostrzec co najmniej kilku różnic. Po stronie korzyści postawić należy to, że PNG nie ma limitów 256 kolorów, charakteryzuje się także lepszą kompresją. Nie zapominajmy także o tym, że ma kanał Alfa, czyli obsługuje przezroczystość – obraz może być zarówno przezroczysty, częściowo przezroczysty, jak i całkiem nieprzezroczysty.
• GIF (Graphic Interchange Format) – format, który szczyty popularności ma już dawno za sobą, co nie oznacza że jest dzisiaj zupełnie zapomniany. Format GIF obsługuje przezroczystość i sprawdza się obecnie przede wszystkim w tworzeniu prostej, zapętlonej animacji.

Jaki format do czego?

Nie ma jasnych kryteriów co do wyboru tego czy innego formatu. Jednak można z powodzeniem wybrać najlepszą opcję jeśli znamy dokładne zastosowanie pliku. Jeśli chcemy by duże zdjęcie (produktowe, które np. otrzymujemy od dostawcy lub producenta) było lekkie, szybko się wczytywało najlepszym wyborem będzie format JPEG. W przypadku, kiedy liczy się jakość lub chcemy zapisać w formie graficznej wykres, logo, ilustracje lub wymagana jest przezroczystość zdecydujmy się na PNG. GIF powinien służyć w zasadzie tylko wtedy, kiedy tworzymy prostą animację.

Dlaczego kompresja zdjęć jest tak istotna?

Zarządzając stroną internetową, ale przede wszystkim administrując sklepem online mamy do dyspozycji różnego rodzaju zdjęcia. Sklep internetowy w odróżnieniu od strony biznesowej stale wymaga dodawania dużej ilości nowych zdjęć. Wynika to z tego, że do oferty e-sklepu regularnie dochodzą nowe produkty. Zdjęcia, którymi dysponujemy często pochodzą od dostawcy i są bardzo wysokiej jakości. Jeśli będą dodawane bez większej refleksji doprowadzą do tego, że strona będzie się ładować w nieskończoność. Co za tym idzie? Mozolne ładowanie się strony wpływa negatywnie na wiele aspektów. Z jednej strony Google indeksuje takie strony na niższych pozycjach. Zatem przekłada się to na całe pozycjonowanie. Z drugiej strony taka strona pozostawia złe wrażenia na użytkownikach, którzy częściej będą opuszczać stronę internetową.

Jakie narzędzie pozwala na przeprowadzenie sprawnej kompresji obrazów?

W agencji DIH obsługujemy wiele e-sklepów, które funkcjonują w środowisku Prestashop. Z powodzeniem korzystamy z modułu tinyPNG, który jest dostosowany do prestashopowej platformy. Zdejmując ciężar ze zdjęć, odciążamy także administratorów i właścicieli sklepów z tego obowiązku. Dlaczego zdecydowaliśmy się na ten moduł? Wynika to z tego, że po odpowiedniej konfiguracji w Prestashopie, działa on w pełni automatycznie. By rozpocząć kompresję zdjęć wymagane jest jednak wygenerowanie oraz skonfigurowania klucza API. Bez klucza API nie otrzymamy dostępu do algorytmu, który odpowiada za właściwą i optymalną kompresję obrazów.

Moduł tinyPNG umożliwia kompresję w zasadzie dowolnej wskazanej grupy zdjęć:

• produktowych,
• kategorii,
• producentów,
• dostawców,
• sklepów,
• blogowych,
• innego rodzaju grafik,
• dowolnie wskazanego folderu lub plików znajdujących się na serwerze FTP.

Automatyzacja pracy jest o tyle wygodna, że opiera się na wykorzystaniu CRONa. Umożliwia to skonfigurowanie cyklicznej kompresji zdjęć np. raz w tygodniu „diecie” będą poddawane zdjęcia produktowe, które systematycznie są dodawane do sklepu. Istotną cechą tej funkcji jest to, że zdjęcia raz już aktualizowane nie będą kompresowane ponownie. Mamy też dostęp do szczegółowych statystyk z przeprowadzonych przez moduł działań. Wiemy dokładnie ile zdjęci zostało skompresowanych, a także ile ważyły zdjęcia przed i po kompresji.

Mimo tego, że różnice w ciężarze zdjęć mogą wynosić nawet 60-80% to w żaden sposób nie rzutuje to na ich jakość. Co więcej moduł sam podmienia zdjęcia oryginalne na te skompresowane. Po przeprowadzonych przez nas kompresjach różnice w wydajności i prędkości strony są zauważalne i zdecydowanie mierzalne. Udało się nam odchudzić jeden z obsługiwanych przez nas e-sklepów o 793MB, z 2,6GB do 1,8GB.

Co jeszcze możesz zrobić ze zdjęciami, by zoptymalizować szybkość ładowania się strony?

Kompresja obrazów jest jednym z bardziej skutecznych sposobów, który prowadzi do przyspieszenia strony. Warto też pamiętać o innych dobrych praktykach związanych z dodawaniem zdjęć do sklepu online czy innego rodzaju witryny. Pamiętajmy o tym, by nie wstawiać zdjęć większych niż wymaga tego potrzeba. Nie ma najmniejszego powodu, by np. zdjęcie produktowe miało rozdzielczość ponad 5 tys. pikseli. Karta produktu nie wymaga takich wielkości, w zupełności wystarczy obraz o szerokości 1000 px.

Kompresję zdjęć można też przeprowadzić zanim wstawimy je na stronę. Jest to o tyle sensowne, że zdjęcia mogą być „wyposażone” w detale, których nie dostrzegamy. Np. mogą być w nich zapisane takie informacje jak czas wykonania zdjęcia. Kompresja eliminuje wszelkie zbędne dane, które niepotrzebnie zwiększają rozmiar obrazu. Dobrym narzędziem, które pozwoli na odciążenie zdjęć jest właśnie TinyPNG.

Jako agencja interaktywna w DIH podejmujemy ruch, który jest konieczny do tego, by przyspieszyć stronę jest także pozbycie się wszelkich zbędnych zdjęć, które są na niej osadzone. Nie zawsze jest potrzeba dodawania kilkunastu zdjęć do karty produktu. Warto wykonać wstępną selekcję, by strona nie została przeciążona. Pamiętajmy o tym, że każde kolejne zdjęcie będzie miało wpływ na to jak długo będzie ładować się strona.

---

Przypis:

1. Założona w 1998 r. Akamai to jedna z największych firm na świecie zajmująca się przechowywaniem danych i przyśpieszeniem pracy w internecie.