Jak uzyskać szybko ładujące się, fantastycznie wyglądające zdjęcia produktów?
Opublikowany: 2016-02-25Jak wie każdy właściciel sklepu, zdjęcia są kluczowym elementem każdej strony produktu. Zdjęcia produktów same w sobie mogą przekonać kupującego do zrobienia kolejnego kroku w procesie zakupu — oferują pięknie wykonane, bardzo szczegółowe zdjęcia swoich produktów, a jesteś o wiele bliżej kliknięcia przycisku „dodaj do koszyka” .
Dostarczanie kupującym wszystkich tych zdjęć może jednak mieć swoją cenę. Z każdym dużym zdjęciem lub plikiem multimedialnym dodanym do strony produktu wydłuża się czas ładowania. A Twoi kupujący, bez względu na to, jak bardzo są zainteresowani, nie chcą czekać dłużej niż kilka sekund.
Wyzwanie dla właścicieli sklepów polega na znalezieniu sposobu na dostarczenie kupującym pożądanych zdjęć w wysokiej rozdzielczości przy jednoczesnym zapewnieniu szybkiego ładowania stron produktów . Może to brzmieć jak wyzwanie nie do pokonania, ale w rzeczywistości istnieje wiele sposobów na zrównoważenie szybkości i fantastycznej równowagi, od kompresji obrazu po wtyczki WordPress.
Twoi klienci rzeczywiście mogą mieć swoje ciasto i też je zjeść. Przyjrzyjmy się, jak możesz przyspieszyć ładowanie zdjęć produktów, zachowując ich jakość.
Dlaczego szybkość Twojego sklepu ma znaczenie (podpowiedź: to nie tylko SEO)
Istnieje kilka powodów, dla których posiadanie szybko ładujących się zdjęć produktów jest tak samo ważne, jak posiadanie atrakcyjnych. Ten, o którym myśli większość właścicieli sklepów, dotyczy wyszukiwarek.
Google zaczął uwzględniać szybkość witryny jako czynnik rankingowy swoich wyników wyszukiwania w 2010 roku. Od tego czasu prawie każda porada dotycząca optymalizacji wyszukiwarek dla witryn eCommerce zawiera porady „przyspieszyć swój sklep” lub „skrócić czas ładowania”.
Prawdą jest , że szybsze witryny będą działać lepiej w rankingach wyszukiwania, wszystkie inne rzeczy są uważane za równe. Ale SEO to nie jedyny powód, dla którego szybkość jest tak ważna . Google uczyniło z szybkości czynnik rankingowy przede wszystkim ze względu na wrażenia użytkownika .
Oto, do czego naprawdę się sprowadza: kupujący nie chcą czekać . Nie chcą czekać na przesyłki, nie chcą czekać na odpowiedzi, a już na pewno nie chcą czekać, aż Twój sklep się załaduje. Więc jeśli zaoferujesz potencjalnemu klientowi powolną, opóźnioną stronę produktu… cóż, co to mówi o sposobie, w jaki może potoczyć się reszta jego doświadczeń z tobą?
Tak więc, podczas gdy duże rozmiary plików graficznych mogą powodować powolne ładowanie stron, które mogą potencjalnie zaszkodzić SEO, te powolne strony mogą również – co ważniejsze – irytować kupujących . Dlatego tak ważne jest zachowanie równowagi między szybkością a pięknem.
Mając to na uwadze, przejdźmy do metod, których możesz użyć, aby zmniejszyć pliki obrazów, zachowując ich jakość.
Spróbuj najpierw: zapisz obrazy z kompresją specyficzną dla sieci
Kupujący chcą, aby zdjęcia produktów były duże, bardzo szczegółowe i można je było powiększać (jeśli masz włączoną funkcję powiększania w swoim sklepie). Może się to wydawać niemożliwe, jeśli Twoim zadaniem jest zmniejszenie rozmiarów plików.
Na szczęście tak nie jest. Różne aplikacje i witryny internetowe oferują kompresję gotową do użycia w Internecie, umożliwiającą zagęszczanie plików przy jednoczesnym zachowaniu ich jakości. Wiele z tych aplikacji stało się tak wydajnych, że niewprawne oko nie jest w stanie dostrzec różnicy między skompresowanymi i nieskompresowanymi obrazami.
Oto, w jaki sposób możesz zapisać oryginalne zdjęcia produktów bezpośrednio z aparatu dzięki kompresji gotowej do użycia w Internecie.
Jeśli masz dostęp do Adobe Photoshop, wypróbuj opcję „zapisz w Internecie”
Jeśli korzystasz z dowolnej wersji programu Adobe Photoshop, opcja „zapisz dla Internetu” jest dokładnie tym, czego potrzebujesz, aby skompresować zdjęcia produktów dla swojego sklepu . W Photoshop CC 2015 opcję można znaleźć w menu Plik > Eksportuj > Zapisz do Internetu; w poprzednich wersjach opcja ta znajduje się w Plik > Zapisz dla Internetu.
W nowym menu, które się pojawi, możesz dostosować wynikowy rozmiar obrazu, kompresję i format. Otrzymasz również przybliżony czas ładowania i rozmiar pliku — wszystko, co musisz wiedzieć, jeśli jesteś na dobrej drodze ze skompresowanymi zdjęciami.
Nie masz Photoshopa? Nie ma problemu: wypróbuj jedno z tych bezpłatnych narzędzi online
Nie każdy ma dostęp do Photoshopa, ale to nie powinno Cię powstrzymywać. Istnieje wiele bezpłatnych narzędzi online służących do kompresji Twoich zdjęć .
Dwa z najlepszych to Kraken Image Optimizer i TinyPNG. Oba narzędzia zmniejszają obrazy do zaskakująco małych rozmiarów, zachowując jednocześnie jakość.
Gdy narzędzia będą gotowe z przesłanymi obrazami, będziesz mógł je zapisać i dodać do swojego sklepu. Jasne, to dodatkowy krok, ale pomyśl o tym, ile czasu (wczytywania) zaoszczędzi kupującym.
Korzystasz z WooCommerce? Edytuj ustawienia WordPressa lub wypróbuj wtyczkę
Możesz wiedzieć, ale nie musisz, że kompresja obrazu jest wbudowana w WordPress . Ta kompresja zmniejsza pliki JPEG do 90% ich oryginalnego rozmiaru, ale może to nie wystarczyć dla sklepów, które wybierają duże, bardzo szczegółowe zdjęcia lub duże galerie.
Jedną z opcji, którą musisz kontrolować wbudowaną kompresję, jest edycja pliku functions.php WordPressa. Umożliwi to zwiększenie lub zmniejszenie, jeśli wolisz, ilości automatycznej kompresji, która występuje przed trafieniem obrazów do Biblioteki multimediów.
Chcesz łatwiejszą trasę? Zawsze możesz wypróbować wtyczkę. TinyPNG ma swój własny, który działa zarówno dla plików JPEG, jak i PNG. Z bezpłatnym kontem możesz zmniejszyć do 100 zdjęć miesięcznie.
Wybierz JPEG, chyba że potrzebujesz przezroczystości
Kolejna rzecz, o której należy pamiętać: format pliku. Jasne, możesz dowolnie kompresować obrazy, ale niektóre formaty są naturalnie większe niż inne.
Ogólnie rzecz biorąc, JPEG powinien być Twoim ulubionym formatem, chyba że z jakiegoś powodu potrzebujesz przezroczystości . Jeśli wymagana jest przezroczystość, powinieneś wybrać przezroczysty plik PNG.
Inne formaty są większe lub mniej wygodne do kompresji online. I chociaż możesz ulec pokusie, aby użyć zabawnego animowanego GIF-a na swojej stronie produktu… prawdopodobnie powinieneś to przemyśleć. Kompromis w czasie ładowania nie jest wart krótkiego chichotu, jaki mogą mieć Twoi kupujący.
Włącz sieć dostarczania treści dla swojego sklepu
Chociaż nowoczesne połączenia internetowe i ulepszone możliwości hostingu skróciły czas potrzebny kupującemu na załadowanie Twojego sklepu, nadal mogą wystąpić nieprzewidziane opóźnienia. Czasami te opóźnienia są nieuniknione, jeśli kupujący znajduje się na całym świecie, z którego znajduje się Twój serwer.
Na szczęście istnieje sposób na przyspieszenie ich działania (i nie tylko w przypadku większych plików, takich jak zdjęcia produktów). Sieć dostarczania treści (CDN) korzysta z pamięci podręcznej, aby dostarczać przechowywane treści z serwerów lokalnych zamiast treści na żądanie z jednego miejsca , co przyspiesza obsługę wszystkich kupujących.
Dzięki CDN, takim jak CloudFlare lub Amazon CloudFront, zbuforowane (czyli nie aktualne do drugiej) kopie Twojego sklepu będą pokazywane odwiedzającym. Odwiedzający otrzymają również zawartość z najbliższego im serwera CDN. Obie te rzeczy znacznie przyspieszają czas ładowania, szczególnie w przypadku dużych zdjęć i plików multimedialnych.
Oprócz kompresji, korzystanie z CDN to fantastyczny sposób na bardzo szybkie wyświetlanie zdjęć produktów , zwłaszcza jeśli nie aktualizujesz swojego sklepu zbyt często. (I oczywiście, jeśli coś wymaga pilnej aktualizacji, możesz wyłączyć CDN.)
Kilka innych sposobów na szybkie i fantastyczne balansowanie
Przedstawione powyżej pomysły to największe i najbardziej znaczące rzeczy, które możesz zrobić, aby zachować równowagę między zdjęciami produktów, które dobrze wyglądają i szybko się ładują . Ale oto kilka dodatkowych wskazówek, o których warto pamiętać:
- Wybierz białe tło . Ogólnie rzecz biorąc, im mniej kolorów zawiera obraz, tym mniejszy będzie rozmiar pliku. Jest to jeszcze bardziej prawdziwe, gdy w grę wchodzi kompresja, a paleta jest jeszcze bardziej zmniejszona.
- Wyeliminuj niepotrzebne strzały produktu. Masz zdjęcia butów, które sprzedajesz z dziesięciu różnych punktów widzenia? Prawdopodobnie możesz zredukować do pięciu i skrócić czas ładowania o połowę.
- Najpierw załaduj miniatury, a po kliknięciu wyświetlaj pełny rozmiar . W ten sposób kupujący będą oczekiwać na większe zdjęcia.
- Jeśli zdjęcia nie działają, wypróbuj wideo… hostowane poza witryną . Ładowanie wideo z YouTube lub Vimeo nie spowolni Twojego sklepu i jest to zgrabny zwrot w koncepcji zdjęć produktów.
Niesamowite zdjęcia produktów nie muszą spowalniać Twojej witryny (ani kupujących)
Może się wydawać, że jedynym sposobem na uzyskanie wspaniałych zdjęć produktów jest zadowolić się powolnym sklepem… lub że jedynym sposobem na szybkie ładowanie stron produktów jest zadowolić się małymi, mocno skompresowanymi zdjęciami. Ale błagamy o różnice.
Wystarczy kilka optymalizacji zdjęć produktów, aby znaleźć idealną równowagę między szybkim ładowaniem a fantastycznym wyglądem . I ani Twoja witryna — ani Twoi kupujący — nie będą musieli zwalniać.
Masz pytania dotyczące tego, jak uzyskać niesamowite zdjęcia produktów w swoim sklepie WooCommerce bez spowalniania rzeczy? Albo jeszcze lepiej jakieś własne wskazówki, którymi chciałbyś się podzielić? Chcielibyśmy usłyszeć od Ciebie w komentarzach!