Jak zoptymalizować obrazy pod kątem internetu mobilnego

Wybierając typy plików i wymiary obrazów, pamiętaj o jakości, czasie ładowania strony, możliwościach powiększania i wymaganiach rynkowych, zwłaszcza jeśli sprzedajesz na wielu platformach. Przyjrzyjmy się optymalizacji obrazów w internecie i sposobom wyboru typu pliku, pamiętając o urządzeniach mobilnych, aby poprawić wrażenia użytkownika.

Wybór odpowiednich wymiarów obrazu

Ważne jest, aby zachować równowagę między obrazami, które są wystarczająco duże, aby użytkownicy mogli się powiększać, a tymi, które mają optymalny rozmiar, aby nie zajmowały zbyt dużo miejsca i nie spowalniały ładowania strony. W Shopify możesz przesyłać obrazy o rozmiarze do 4472 x 4472 pikseli o rozmiarze pliku do 20 MB. Jednak twórca witryn zazwyczaj zaleca użycie 2048 x 2048 pikseli w przypadku kwadratowych zdjęć produktów. Są to obrazy o wysokiej rozdzielczości, które nadają Twojemu sklepowi profesjonalny i wszechstronny wygląd z doskonałymi możliwościami powiększania. Pamiętaj, że aby funkcja powiększania działała, Twoje obrazy muszą mieć więcej niż 800 x 800 pikseli.

Podobnie Amazon i Etsy wymagają obrazu o wymiarach 1000 x 1000 pikseli, aby umożliwić powiększanie.

Aby zachować jednolity wygląd wzdłuż linii produktów i na stronach kolekcji, należy zachować takie same proporcje szerokości i wysokości wszystkich obrazów funkcji, na przykład kwadrat. Obraz funkcji to pierwszy obraz produktu, który pojawi się w Twoim sklepie – na stronie głównej, stronie koszyka, stronie kasy i różnych stronach kolekcji. Zachowaj również wszystkie miniatury w tym samym rozmiarze i kształcie, aby oddać dopracowany wygląd sklepu. Pamiętaj, że wielu Twoich klientów będzie również przeglądać na urządzeniach mobilnych, a kwadratowe obrazy łatwiej będzie zmienić na mniejsze ekrany.

Wybór odpowiedniego formatu obrazu

Przyjrzyjmy się formatom plików najczęściej używanym w fotografii produktowej i ich zawartości. Są one wymienione tutaj według tego, jak często są używane w fotografii produktowej.

JPG

JPG jest najpopularniejszym formatem plików obrazów cyfrowych. Jest szeroko obsługiwany i może pochwalić się małym rozmiarem pliku z dobrą gamą kolorów. Jego kompresja pozwala zachować równowagę między rozmiarem pliku a jakością obrazu. Shopify poleca JPG w szczególności, ponieważ może dostarczyć obrazy o stosunkowo małym rozmiarze i dobrej jakości, co dobrze sprawdza się w przypadku zdjęć produktów.

PNG

PNG został stworzony w celu ulepszenia formatu GIF poprzez usunięcie ograniczenia 256 kolorów. Jest powszechnie akceptowany, bezstratny (zmniejsza rozmiar pliku bez obniżania jakości) i obsługuje przezroczystość (powiedzmy dla przezroczystego tła). Wadą jest to, że rozmiary plików PNG mogą być duże ze względu na bezstratną kompresję, a format nie jest tak uniwersalny, jak JPG.

GIF

GIF oferuje mały rozmiar pliku, kompresując i redukując obrazy do 256 kolorów. Chociaż został szeroko zastąpiony przez PNG, nadal jest używany do animacji, ponieważ jest to jedyny format, który obsługuje go i jest powszechnie rozpoznawany przez przeglądarki.

SPRZECZKA

TIFF to bezstratny format kompresji, który jest szeroko obsługiwany przez szereg aplikacji edycyjnych i internetowych. Oferuje wysoką rozdzielczość, a wiele obrazów i stron można wygodnie zapisać w jednym pliku. Jednak rozmiar pliku jest zwykle duży.

BMP

BMP jest powszechnie używany w ekosystemie Windows. Obsługuje kompresję danych, kanały alfa (używane w Photoshopie do przechowywania dodatkowych informacji, których można użyć do manipulowania częściami obrazu, na przykład dodawania przezroczystego tła) i prawie uniwersalną kompatybilność. Nieskompresowany oferuje doskonałe obrazy, ale rozmiary plików mogą być również bardzo duże.

Ogólnie rzecz biorąc, JPG jest z pewnością najwygodniejszy, jeśli chodzi o połączenie mniejszego rozmiaru z przyzwoitą jakością. Chociaż format PNG zapewnia bezstratną kompresję o wyższej jakości, odbywa się to kosztem większego rozmiaru pliku. GIF jest przydatny, jeśli oferujesz zdjęcia 360 stopni i potrzebujesz lekkich plików. Dla porównania BMP i TIFF mogą oferować świetną jakość, ale rozmiary życia są zwykle raczej ciężkie i niepraktyczne.

Zmiana rozmiaru obrazów na telefon komórkowy

Shopify automatycznie zmienia rozmiar obrazów, aby dopasować je do mniejszych ekranów, ale niektóre obrazy mogą czasami wymagać ręcznej edycji. Należy pamiętać, że ekrany komputerów stacjonarnych i urządzeń przenośnych mają nie tylko inny rozmiar, ale także przeciwną orientację. I chociaż Shopify stara się to uwzględnić dzięki delikatnemu przycinaniu, najlepiej będzie, jeśli Twoje obrazy będą kwadratowe, a produkt będzie wyśrodkowany w pionie i poziomie.

Ponadto obrazy o zbyt dużych rozdzielczościach, na przykład maksymalnie 4000 x 4000 pikseli Shopify, mogą być rozmyte po zmianie rozmiaru na urządzenia mobilne. Zmniejszenie obrazu do łatwiejszego w zarządzaniu rozmiaru i kształtu, które uwzględniają urządzenia mobilne, może poprawić wygląd Twojego sklepu na wszystkich urządzeniach. Pamiętaj, że duże pliki również spowalniają ładowanie Twojej witryny. A w e-commerce, a zwłaszcza na urządzeniach mobilnych, liczy się każda sekunda, więc optymalizacja zdjęć powinna być priorytetem.

Tak więc, chociaż kompresja bezstratna może zapewnić najwyższą jakość obrazu, często tworzy duże pliki, których przesłanie trwa wiecznie (zwłaszcza w dużych ilościach) i może spowolnić czas ładowania strony, powodując, że odwiedzający porzucają Twój sklep. Dotyczy to zwłaszcza urządzeń mobilnych, gdzie prędkość internetu może być wolniejsza, a czekanie na pojawienie się obrazu frustruje kupujących.

Podczas gdy responsywne projekty i algorytmy Shopify są dobre w zmienianiu rozmiaru i wyświetlaniu obrazów na różnych urządzeniach, zapewnienie im pomocy z przemyślanymi rozmiarami plików może oznaczać jeszcze płynniejsze zakupy.

O autorze

Holly Cardew jest założycielem Pixc, platformy, która pomaga sklepom eCommerce edytować i optymalizować zdjęcia produktów, aby mogły zwiększać sprzedaż. Pixc zmienia przeciętne zdjęcia produktów w piękne, edytując i usuwając tło w ciągu 24 godzin. Zaczynając jako nastolatka, sprzedając w serwisie eBay i tworząc własny rynek online, Holly ma doświadczenie w handlu elektronicznym, marketingu internetowym, projektowaniu graficznym i budowaniu rozproszonych zespołów. Ma również doświadczenie w budowaniu i prowadzeniu sklepów Shopify oraz w zwiększaniu liczby obserwujących w mediach społecznościowych. W 2016 roku Holly znalazła się na liście Retail and eCommerce Forbes 30 under 30. Holly dzieli swój czas między San Francisco, Brisbane i Sydney. Kiedy Holly nie pracuje, uwielbia podróżować, poznawać nowe miejsca, piękny design, typografię i wymyślać nowe pomysły biznesowe.