Dlaczego optymalizacja zdjęć jest tak ważna?
Wiedzą już Państwo, że gdy Państwa sklep e-commerce nie ładuje się w odpowiednim tempie z powodu rozdzielczości i rozmiaru zdjęć, jednym z głównych skutków jest to, że odwiedzający opuszczają stronę. Jak już nieraz wspominaliśmy, użytkownicy nie będą czekać, skoro wiedzą, że inne strony zaoferują im te same treści szybciej. Wolno ładująca się strona oznacza bardzo wysoki współczynnik odrzuceń. Co więcej, sieci 3G i 4G w smartfonie nawet nie zbliżają się do prędkości domowego łącza szerokopasmowego. Biorąc pod uwagę to oraz fakt, że coraz więcej osób korzysta z internetu na urządzeniach mobilnych, nie można lekceważyć szybkości ładowania zdjęć w swoim sklepie. To jednak nie wszystko. Internetowy gigant również przywiązuje dużą wagę do szybkości ładowania strony w kontekście pozycjonowania SEO. Jak się zapewne Państwo domyślają, Google ma ograniczony czas na przeskanowanie Państwa witryny. Oznacza to, że im szybciej otwiera się Państwa sklep, tym więcej podstron Państwa e-commerce Google zdąży przeskanować, a tym samym rosną Państwa szanse na miejsce w czołówce wyników wyszukiwania. Ale zacznijmy od początku…Jakiej jakości powinny być zdjęcia?
Jak już wspominaliśmy, zdjęcia są kluczowym elementem każdego sklepu internetowego. Dlatego chcemy pokazać Państwu, jakie parametry należy brać pod uwagę przy wyborze i optymalizacji zdjęć na swojej stronie.Rozdzielczość
Przede wszystkim trzeba zrozumieć, że zapisanie zdjęcia do publikacji w internecie to coś innego niż zapisanie go do druku. To dwa sposoby wyświetlania obrazu na zupełnie różnych nośnikach: na ekranie i na papierze. Dlatego najważniejsze jest sprawdzenie w programie graficznym (np. Photoshop, Illustrator czy GIMP), czy zdjęcie ma rozdzielczość 72 ppi (pikseli na cal). Im wyższa ta wartość, tym wyższa jakość. Do wyświetlania na stronie 72 ppi w zupełności wystarczy, natomiast do druku, np. plakatu, potrzeba około 300 ppi.Format
Przy zapisywaniu zdjęcia z pewnością widzą Państwo kilka formatów i pewnie nieraz nasuwało się Państwu pytanie: co waży więcej, PNG czy JPG? Dlatego warto wiedzieć, do czego służy każdy z formatów, bo ta wiedza bardzo się przydaje przy optymalizacji zdjęć. Za każdym z nich kryje się cały świat, ale spokojnie – podajemy Państwu wszystko, co trzeba wiedzieć, żeby wybrać właściwy:- JPG: To uniwersalny format do fotografii, bo najlepiej je kompresuje bez utraty tonacji i oryginalnych kolorów. Świetnie sprawdza się więc przy zdjęciach z dużą liczbą szczegółów. Dodatkowo można ustawić jakość w skali od 0 do 100. Na przykład przy jakości 80 różnicę w ostrości ledwo zauważą Państwo, za to odczują ją w wadze pliku, który będzie zajmował około 30% mniej.
- PNG: Zachowuje przezroczystość, dlatego to najlepszy format dla grafik firmowych, takich jak logotypy, oraz obrazów z jednolitymi kolorami. Jego dużą zaletą jest niewielka utrata jakości przy kompresji. Ale czy jest różnica między PNG 8 a PNG 24? Polega ona na tym, że PNG 8 przechowuje maksymalnie 256 kolorów, a PNG 24 aż 16 milionów. Zalecamy używać PNG 8 tylko w przypadku obrazów, które nie wymagają przezroczystości i mają niewiele kolorów.
- GIF: Warto sięgać po ten format tylko wtedy, gdy Państwa obrazy zawierają animację. Proszę pamiętać, że nie kompresuje się on z dobrą jakością, bo animacje składają się z wielu klatek, czyli zawierają więcej niż jedno zdjęcie.
- WEBP: ten format, opracowany kilka lat temu przez Google, zapewnia wysoką jakość obrazu przy mniejszym rozmiarze pliku niż inne formaty, np. PNG czy JPG. Ponieważ znacząco optymalizuje rozmiar zdjęć bez utraty jakości, świetnie nadaje się na strony internetowe.
Wymiary
Zwykle zapisujemy zdjęcie w domyślnym, a nawet w dużym rozmiarze, bo wydaje nam się, że dzięki temu będzie lepiej wyglądać na stronie. Jak już jednak Państwo wiedzą, jakość i ostrość zdjęć zależą przede wszystkim od rozdzielczości i formatu, w jakim je Państwo eksportują. Proszę więc zapomnieć o zapisywaniu zdjęć w dużym rozmiarze – ich waga znacznie wzrośnie, i to zupełnie bez sensu, jeśli na stronie będą wyświetlane w dużo mniejszym formacie. Dlatego radzimy eksportować wszystkie zdjęcia w rzeczywistym rozmiarze, w jakim wyświetlą się na Państwa stronie, czyli w wymiarach używanych w Państwa PrestaShopie. Jeśli więc zdjęcie ma zajmować obszar 50 px x 70 px, proszę je dopasować do tego rozmiaru. W ten sposób znacznie zmniejszą Państwo wagę zdjęć bez utraty jakości i bez efektu pikselozy. Po co Państwu większe zdjęcie, skoro użytkownicy i tak zobaczą je pomniejszone?Jaki rozmiar zdjęć produktów wybrać?
W zakładce Wygląd > Ustawienia zdjęć w panelu administracyjnym PrestaShopa można przefiltrować typy zdjęć według produktów i sprawdzić rozmiary wszystkich zdjęć produktów w swoim sklepie.
Jeśli więc na przykład największy typ zdjęć produktów ma 1000 px x 1000 px, zdjęcia tego typu muszą Państwo przygotować właśnie w tym rozmiarze. Jeśli użyją Państwo mniejszego zdjęcia, będzie ono rozpikselowane. Innymi słowy, każde zdjęcie trzeba dopasować do ustawionego formatu lub rozmiaru. Jeśli chodzi o wagę zdjęć, zaleca się, aby nie przekraczała 100 KB, bo w przeciwnym razie wydłuży się czas ładowania Państwa sklepu e-commerce.
Narzędzia do optymalizacji zdjęć
Pokażemy Państwu kilka dobrych praktyk i narzędzi, dzięki którym Państwa sklep internetowy będzie ładował się znacznie szybciej. Jeśli mają już Państwo swój sklep, proszę zacząć od sprawdzenia szybkości ładowania. W tym celu polecamy przeanalizować go w PageSpeed. To bardzo proste: proszę wpisać adres URL, kliknąć „Analizuj” i zobaczą Państwo wyniki podzielone na diagnostykę i możliwości. Co więcej, po kliknięciu strzałek po prawej stronie zobaczą Państwo, jak poprawić te błędy.
Teraz wystarczy zmniejszyć wagę tych zdjęć i je podmienić, więc proszę zapisać je na swoim komputerze. Gdy już wszystkie zapiszą Państwo, proszę użyć narzędzia do kompresji zdjęć. My pokażemy Państwu Compresspng i Compressjpg, ale mogą Państwo skorzystać z dowolnego, bo wszystkie działają bardzo podobnie i dość intuicyjnie. Najpierw proszę wgrać zdjęcia do Compresspng lub Compressjpg, w zależności od ich formatu, klikając Upload Files. Kompresja potrwa krócej lub dłużej w zależności od tego, ile zdjęć prześlą Państwo. Gdy się zakończy, proszę pobrać je przyciskiem Download ZIP. Państwa zdjęcia są już skompresowane! Teraz wystarczy ponownie wgrać je na stronę.
A jeśli chcą Państwo dodać na stronę nowe zdjęcia, wystarczy wyeksportować je z programu graficznego w odpowiednim formacie i w rozdzielczości 72 ppi. W Photoshopie i GIMP-ie proszę zapisać je za pomocą opcji Zapisz dla Internetu. Pojawi się okno, w którym wybiorą Państwo format – warto postawić na ten, który najlepiej pasuje do Państwa potrzeb, zgodnie z tym, co wyjaśniliśmy wcześniej. Rozdzielczość mogą Państwo też sprawdzić i zmienić w menu Obraz > Rozmiar obrazu.
Podsumowując:
Moduł PrestaShop do optymalizacji zdjęć
Jak wspomnieliśmy na początku artykułu, szybsze ładowanie to korzyść nie tylko dla użytkownika, który spokojnie przegląda nasz sklep PrestaShop. Google, zawsze głodne wartościowych stron, tak wysoko ocenia czas ładowania sklepu e-commerce, że jeśli otwiera się on w akceptowalnym tempie, wyświetli go na najwyższych pozycjach. Co to oznacza? Że jeśli mają Państwo wspaniały sklep internetowy, ale Państwa konkurencja też, a do tego jej sklep ładuje się szybciej, Google umieści go wyżej w wynikach wyszukiwania. Wiedzą Państwo, że wygoda, przejrzystość i bezpieczeństwo to fundament każdego sklepu internetowego. Oczywiście, że Państwo wiedzą – i rozumiemy też, ile wysiłku to wymaga. Dlatego spośród wszystkich sposobów na przyspieszenie ładowania proponujemy Państwu ten najwygodniejszy i najskuteczniejszy. Moduł PrestaShop do optymalizacji zdjęć od Línea Gráfica to wsparcie, którego Państwo potrzebują, żeby Państwa sklep PrestaShop stał się prawdziwą wagą piórkową. Moduł zmniejsza rozmiar zdjęć na Państwa stronie bez utraty ich jakości – za pomocą intuicyjnego i bardzo łatwego w obsłudze systemu:- Proszę wybrać, o ile procent mają zostać zmniejszone pliki JPG i JPEG.
- Proszę ustawić poziom kompresji plików PNG.
- Proszę wskazać zdjęcia w sklepie, których nie chcą Państwo kompresować – na przykład logo.
Zobacz moduł do kompresji zdjęć!
Jeśli potrzebują Państwo szybkiego sposobu, by poprawić szybkość i pozycjonowanie swojej strony, to jest właśnie to rozwiązanie. Jeszcze nigdy nie było tak łatwo zobaczyć efekty w rekordowym czasie i zapewnić klientom lepsze wrażenia z zakupów! A jeśli mimo wszystko nadal nie wiedzą Państwo, jak przyspieszyć ładowanie PrestaShopa, spokojnie. Przygotowaliśmy kompletny poradnik krok po kroku!A Państwo, czy korzystają z innych narzędzi do optymalizacji zdjęć? W Línea Gráfica jesteśmy ekspertami od marketingu cyfrowego i Partnerem Platinum PrestaShop, więc jeśli potrzebują Państwo pomocy w pozycjonowaniu swojego sklepu, wystarczy, że skontaktują się z nami.