Optymalizacja obrazów na sklepie internetowym

Jeżeli posiadasz sklep internetowy aktywnie sprzedający, na pewno słyszałeś o czymś takim jak optymalizacja obrazów. Jest to w ostatnich latach niesamowicie ważne zagadnienie, ponieważ stosunek Google do optymalizacja obrazów jest widoczny w wynikach wyszukiwania. W dzisiejszym artykule poruszę temat przetwarzania obrazów tak by podobały się użytkownikom oraz wyszukiwarkom internetowym.

Po co optymalizuje się obrazy?

Generalnie jest jeden powód optymalizacji obrazów chodzi o szybkość ładowania sklepu internetowego jaki samego obrazu. Obraz surowy np. z banku zdjęć zajmuje nawet do 20 megabajtów przestrzeni dyskowej. Umieszczony jeden taki obraz na sklepie online może wysłużyć ładowanie nawet o kilkadziesiąt sekund co oczywiście sprawi że użytkownik opuści nasz sklep internetowy. Na sklepie online, na jednej zakładce jest niestety dziesiątki obrazów. Optymalizacja ich wszystkich, sprawia że przyspieszenie sklepu internetowego odczuwalne jest w całych sekundach.

Szybsze ładowanie sklepu internetowego to mniej odrzuceń i lepsze pozycje w wyszukiwarkach internetowych. W skrócie czynność bardzo opłacalna. W Design Cart (https://www.designcart.pl) stosujemy głównie trzy metody optymalizacji obrazów:

• dopasowanie rozmiaru obrazów
• większa kompresja obrazów
• konwersja obrazów do wydajniejszych formatów

Jak się optymalizuje obrazy?

Przede wszystkim obrazy się zmniejsza dostosowując do tego jak się wyświetlają. Stosuje się miniaturki obrazów. Załóżmy mamy listę produktów gdzie każdy produkt prezentuje zmniejszony obraz. Powinniśmy tam mieć obraz dokładnie takiej samej wielkości w jakiej się wyświetla, po przejściu na kartę produktu powinniśmy wywołać kolejny obraz odpowiednio większy. Czyli dla optymalnego ładowania obrazów, jeden obraz powinien mieć kilka swoich formatów.

Kolejnym częstszym sposobem optymalizacji obrazów na sklepach internetowych jest zmniejszenie jego jakości. Zwiększona kompresja powoduje gorszą jakość obrazu słabo widoczną dla ludzkiego oka lub wcale, ale znacznie mniejszy rozmiar. Na przykłada w skali jakości od 0 do 100, pliki jpg kompresuje się do poziomu 90, czasami nawet 80. Na większych rozmiarach obrazów można zyskać nawet kilkaset kilobajtów oszczędności. W przypadku wielu obrazów możemy ładowanie sklepu internetowego przyśpieszyć o kilka sekund.

Kolejną ostatnią omawianą prze zemnie metodą jest zmiana formatu pliku. Są już znacznie wydajniejsze formaty plików dla obrazów niż jpg czy png. Google stworzyło swój własny format ze znacznie lepszą kompresją bezstratną dla obrazów. Przykładowo obraz png prze konwertowany do formatu webp zmiana swój rozmiar z 685kb do 131kb. Jest to zmiana o 502%. Badany obraz to baner składający się pokazu slajdów z trzech dużych obrazów o rozmiarach 1920 x 911 pikseli. Prze konwertowanie tych obrazów do formatu webp zmniejsza rozmiar baneru mniej więcej o 1,5 megabajta. Jest to ogromna zmiana. Więcej na temat optymalizacji obrazów dowiesz się tutaj.

Optymalizacja automatyczna

Większość osób ie optymalizuje obrazów na swoich stronach internetowych, dlatego że ręczna optymalizacja, podstawianie różnych rozmiarów zdjęć wymaga sporo czasu, którego wiecznie brakuje. Proces ten jednak można zautomatyzować. Jednym z najlepszych sposobów jest tworzenie pamięci cache dla obrazów znajdujących się na sklepie. Zamiast wyświetlać obraz bezpośrednio za pomocą znacznika img, możemy to robić przez funkcję do które podaje się wymagany rozmiar zdjęcia. Funkcja ta sprawdza czy danych obraz już ma w pamięci cache swój odpowiednik w danym rozmiarze i wyświetla go. Jeżeli nie posiada, skrypt tworzy odpowiednia miniaturę w rodzimy rozszerzeniu oraz w webp. Na koniec funkcja sprawdza czy dana przeglądarka obsługuje obrazy webp. Jeżeli tak zwraca ścieżkę do nowoczesnego formatu jeżeli nie to do rodzimego.

Stosowanie powyższego rozwiązania daje ekstremalną wygodę w rozbudowie strony i maksymalną optymalizację obrazów.