W dzisiejszych czasach trendy webowe skupiły się mocno na przekazie wizualnym na stronach internetowych, stało się tak głównie z dwóch powodów.
Diametralnie przyśpieszył internet na przestrzeni ostatnich dziesięciu lat oraz jesteśmy ze wszystkich stron bombardowani terabajtami treści, a więc coraz częściej zaczynamy je omijać. Obraz jest swego rodzaju haczykiem, który pozwala skupić na sobie uwagę i zachęcić użytkownika do przeczytania treści którą chcemy mu zaprezentować. Właściciele stron jednak często wykorzystują niezoptymalizowane obrazy które mają nawet wielokrotnie większe rozmiary niż powinny, wydłużając tym samym czas ładowania strony internetowej o kilka sekund.
Sklep internetowy to wyjątkowe miejsce gdzie obraz, czas załadowania karty z produktem, mogą zadecydować o udanej transakcji. Warto więc przyjrzeć się obrazom na naszym sklepie internetowym. No co zwrócić uwagę?
Rozmiar zdjęć na stronie internetowej
Cała optymalizacja obrazów powinna zacząć się od tego punktu. Jest to najczęstsze przewinienie, które owocuje nawet kilkunastosekundowym ładowaniem strony internetowej. Zdarza się i więcej ale już i kilkanaście sekund wystarczy by pozbyć się użytkownika. Często można zaobserwować taki mechanizm. Właściciel strony internetowej pisze artykuł lub dodaje podstronę. Stwierdza że warto by dodać do treści jakiś obraz. Wrzuca swoje zdjęcie z lub z jakiegoś banku zdjęć. W efekcie na stronie ładuje się obraz o szerokości ponad 5000 pikseli z drukarskim dpi. Zdjęcie oczywiście na stronie dostosowane jest to szerokości bloku np. 400 pikseli. Jest to najczęstszy błąd i najbardziej opłakany w skutkach. Zdjęcia o jakości drukarskiej zajmują bowiem po kilkanaście megabajtów przestrzeni dyskowej. Użytkownik uruchamiając taką stronę musi to wszystko pobrać.
Optymalizację obrazów na stronie internetowej powinniśmy zacząć od dostosowania wielkości obrazów do takich rozmiarów w jakich mają się wyświetlać i starać się nie stosować większych formatów. Dodatkowo zdjęcia umieszczane na serwerze powinny mieć 72 dpi. Większa wartość jest zbędna ponieważ monitory zazwyczaj prezentują jedynie 72 dpi.
Format zdjęć na sklepie internetowym
Główne formaty zdjęć, które są wykorzystywane w sieci to jpg, png oraz gif. Tak było od zarania internetu ale zdążały się publikacje zdjęć bmp. Nie będę rozwodził się nad charakterystyką poszczególnych plików, ponieważ w sieci jest mnóstwo informacji na ten temat, a lista stosowanych formatów jest już mało aktualna. Jeżeli posiadasz grafiki gif bez animacji, zastanów się czy nie lepiej byłoby je przekonwertować do formatu svg, być może dzięki temu uda Ci się zaoszczędzić kilka kilobajtów. Jeżeli publikujesz zdjęcia jpg oraz png z tłem lub bez niego, powinieneś rozważyć przekonwertowanie ich do nowszego bardziej wydajnego formatu jakim jest webp. Format oddany użytkownikom przez Google. Konwersja do webp pozwala na zaoszczędzenie nawet do kilkuset kilobajtów bez zmiany rozmiaru, na jednym zdjęciu. W obrębie całej strony możemy uzyskać nawet do kilku megabajtów oszczędności. Jest to ogromny skok.
Gotowy konwerter obrazów do webp dla Opencart pobierzesz tutaj: https://www.designcart.pl/laboratorium/1-dc-webp-images.html
Kompresja obrazów w sklepie internetowym
Oprócz samego dostosowania rozmiarów obrazów i przekonwertowania ich do najlepszy dla nich formatu, możemy jeszcze zastosować kompresję. Działanie to znacznie zmniejsza rozmiar zdjęcia. Mamy dostępne kompresje bezstratne, czyli takie które nie wpływają na jakość obrazu oraz kompresje stratne, które w zależności od stopnia kompresji wpływają mniej lub bardziej na jakość pliku. W przypadku sklepów, stron internetowych możemy śmiało zastosować kompresję w granicach 80 – 90%. Kompresja na tym poziomie znacznie zmniejszy rozmiar plików, a ich wartość wizualna praktycznie nie zmieni się.
Genrowanie miniatur w sklepie internetowym
Zdarza się też tak że jedno zdjęcie używane jest w różnych miejscach sklepu internetowego lub prezentowana jest jego mniejsza forma, a po kliknięciu otwiera się większa. W takich przypadka warto na swoim sklepie zaopatrzyć się w generator miniatur. Jak to działa? Tworzony jest skrypt PHP, który pozwala na deklarację rozmiaru obrazu. Załóżmy że mamy jeden obraz który na karcie produktów jest banerem, w galerii produktów jest miniaturą oraz miniatura ta otwiera jego większą wersję.
Wyświetlając obraz przez odpowiednią funkcję PHP możemy go przeskalować do odpowiedniego rozmiaru. Wynik skalowania zapisać jako nowy obraz o tej samej nazwie z dopiskiem o rozmiarze. Porogram gdy ponownie będzie miał wyświetlić obraz w danym rozmiarze, sprawdzi najpierw czy taki już istnieje, a więc każdy rozmiar zapiszemy tylko raz, zachowując przy tym oryginał zdjęcia.
Daje to niesamowite, lepsze osiągi ładowania witryny internetowej, broni też nas przed przypadkami gdy na stronę wgramy nieobrobione zdjęcie np. z banku zdjęć.
Nie ładowanie obrazów poza ekranem
Jest to kolejna świetna operacja wykonywana na obrazach znajdujących się na stronach internetowych. Polega na tym że opóźniamy ładowanie obrazów, które znajdują się poza widokiem użytkownika. Załóżmy że użytkownik wszedł na sklep internetowy z obszerną listą produktów. Po co od razu ładować zdjęcia ostatnich produktów na liście skoro można wyświetlić szybciej gotowy serwis, a zdjęcia z poza ekranu załadować gdy użytkownik do nich dojdzie.
Do tego typu operacji znajdziemy w sieci masę skryptów Lazy Load, gotowych pluginów do systemów CMS.
Pamięć podręczna
Co jeszcze możemy zrobić aby nasze obrazy ładowały się szybciej, a sklep klientowi otwierał się natychmiast. Najszybsza metoda to...przechowywać je u naszego klienta na komputerze. Dzięki pamięci podręcznej przeglądarki i specjalnym regułom w pliku .htaccess możemy tego dokonać. W takim przypadku omijamy czas transferu. Jest to świetne rozwiązanie dla stałych klientów.
Powyższe metody w wystarczający sposób skrócą czas ładowania obrazów na stronie internetowej. Stosując się to powyższych wskazówek zwiększysz również swoją punktację w Google Page Speed Insight, a ta przełoży się na lepsze wyniki w tej wyszukiwarce.
