Optymalizacja zdjęć w sklepie do nowego formatu .webp

Nowy format zdjęć .webp zaprojektowany przez google wszedł już na dobre do oprogramowania sklepu KQS.store i z powodzeniem można wyświetlać zdjęcia produktów które zajmują aż 60-80% mniej miejsca na serwerze niż pliki z rozszerzeniem .jpg i .png

Pierwszą przeglądarką internetową która wspierała ten format pliku zdjęć było oczywiście Chrome i do chwili obecnej już wszystkie przeglądarki prawidłowo odczytują zdjęcia WebP.

Jednak starsze wersje przeglądarek nie będą mogły prawidłowo odczytać pliku zdjęcia przez co pojawi się białe pole.

Lista wersji przeglądarek niewspierających tego formatu dostępna jest na stronie:

https://caniuse.com/webp

i choć wydaje się że problem już nie występuje, tak spora część klientów ogląda Twój sklep właśnie ze starych wersji przeglądarek.

Sprawdź swoje Analitycs

Jak sprawdzić ilu posiadasz klientów którzy nie zaktualizowali przeglądarki do nowej wersji? Z pomocą przychodzą dane z Google Analitycs (jeśli wcześniej skrypt został zainstalowany na sklepie). Po zalogowaniu się do panelu Google Analitycs przejdź do działu:

Odbiorcy / Technologia / Przeglądarka i system

I wybierz konkretny rodzaj przeglądarki w której sprawdzisz dokładną ilość wejść z poszczególnych wersji.

Dla przeglądarki Firefox, Chrome, Opera, Edge nie uświadczysz sporej ilości antycznych wersji jakie zostały wydane. Ale problem istnieje w przypadku przeglądarki Safari oraz przeglądarki Internet Explorer.

Pominę oczywiście Internet Explorer bo ilość wejść z tej przeglądarki jest marginalna, jednak przeglądarka Safari wręcz przeciwnie – ma spory udział w ilości wszystkich wejść i w zależności od strony / sklepu internetowego (asortymentu) wynosi ok 6-9%

To dużo!

Jeśli teraz wgłębimy się jeszcze bardziej i sprawdzimy udział poszczególnych wersji przeglądarki Safari to może się okazać, że ilość wejść ze starych przeglądarek jest na poziomie 4-6% i są to wersje Safari które nie wspierają nowego formatu zdjęć WebP.

Stare Safari nie wspiera .webp

Poradzić sobie z tym można na kilka sposobów, dostosowując odpowiednio kod html sklepu oraz kod styli css.

Im bardziej rozbudowany sklep, tym więcej będzie przy tym pracy żeby wszystko dostosować. Oczywiście nie obejdzie się bez posiadania jednocześnie dwóch formatów zdjęć tego samego obrazka, bo dla klientów sklepu ze starymi przeglądarkami Safari będą wyświetlane zdjęcia w formacie .jpg / klienci nowszych przeglądarek będą widzieli zdjęcia w formacie .webp

Zdjęcia produktów

Nowe wersje oprogramowania sklepu posiadają w swoich ustawieniach możliwość generowania zdjęć produktów do nowego formatu (przekonwertowany zostanie stary obrazek zdjęcia na nowy w formacie .webp, pozostawiając wcześniejsze zdjęcia produktów).

Dodawanie nowych zdjęć produktów odbywać się będzie tak samo jak do tej pory, wystarczy wgrać zdjęcie produktu w formacie .jpg lub .png i automatycznie zostanie przekonwertowane przez sklep do dodatkowego formatu .webp

To nie wszystko co należy wykonać, żeby zdjęcia w sklepie wyświetlały się w nowym formacie. Do szablonów graficznych (wszystkich, które wyświetlają zdjęcie produktu) doszły nowe zmienne (zdjęć) które należy wstawić w miejscu obecnych zdjęć.

Dodatkowo mamy do dyspozycji 3 rozmiary miniatur zdjęć produktów, których rozmiar możemy ustawić w dziale:

Ustawienia / Rozmiary zdjęć

Ustawimy rozmiar:

  • Standardowa miniatura w katalogu
  • Miniatura w galerii
  • Zdjęcie główne na stronie produktu

 

zarówno dla zdjęć produktów jak i zdjęć wpisów na bloga.

Ustawienia rozmiarów zdjęć w sklepie

Konwertowanie miniatur

Jeśli posiadasz w sklepie bardzo dużą ilość zdjęć, to musisz uzbroić się w cierpliwość – trochę to potrwa. Rekord w jednym ze sklepów to ok 10-11 godzin (przy kilkunastu tysiącach zdjęć), więc lepiej konwertowanie miniatur odłożyć na godziny wieczorne.

Zdjęcia możesz konwertować oddzielnie dla każdego rodzaju zdjęć miniatur produktów oraz zdjęć bloga, lub jednym przyciskiem wygenerujesz wszystkie miniatury zdjęć na nowy rozmiar.

Pozostałe zdjęcia

Zdjęcia produktów to nie wszystko. Jeśli posiadasz swój szablon graficzny sklepu w którym wykorzystujesz bannery, ikonki czy inne zdjęcia – to musisz ręcznie je przekonwertować na nowy format .webp oraz wgrać na serwer i podlinkować w miejscu wcześniejszych zdjęć/ikon/bannerów.

Po co optymalizować zdjęcia?

Optymalizacja zdjęć do nowego formatu .webp jest jednym z zaleceń googla co do optymalizacji Core Web Vitals. Obecnie google duży nacisk kładzie na szybkość i użyteczność sklepu a właśnie zdjęcia które mogą się szybciej wczytać na ekranie monitora/tabletu czy telefonu poprawiają czynniki rankingowe.

Zoptymalizowane zdjęcia produktów .webp zajmują aż do ok 80% mniej miejsca niż normalne zdjęcie .jpg bez utraty jakości.

Konwertowanie zdjęć produktów do webp

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *