Kiedy potencjalny klient trafi na Twoją stronę Shopify Zbieranie danych analitycznych o stronach internetowych lub aplikacjach (aby sprawdzić, czy strona działa poprawnie lub które sekcje strony są najbardziej atrakcyjne dla odwiedzających)., użyją obrazów, aby zdecydować, czy chcą dokonać zakupu. Twoim zadaniem jako sprzedawcy jest zatem upewnienie się, że obrazy nie spowalniają ładowania się witryny (aby odstraszyć ludzi) oraz odpowiednie formatowanie i skalowanie obrazów.
Dzięki temu obrazy nie wydają się rozciągnięte ani obcięte. W naszym ostatecznym Shopify przewodnik po rozmiarach obrazów, pokażemy Ci znaczenie określonych rozmiarów obrazów Shopify fotografii i zapewnij idealne rozmiary takich elementów, jak logo, obraz banera i zdjęcia produktów.
Czytaj dalej, aby dowiedzieć się wszystkiego Shopify rozmiary obrazu!
Dlaczego warto się tym przejmować Shopify Rozmiary obrazu?
Zarządzanie obrazami i przesyłanie ich jest nudne. Jednak często są to główni sprawcy, jeśli chodzi o powolne działanie witryny, problemy z SEO i niską liczbę konwersji w witrynie e-commerce.
Trudną częścią wszystkich narzędzi do tworzenia witryn i platform e-commerce jest to, że musisz trzymać się bardzo konkretnych rozmiarów obrazów, aby mieć pewność, że są zoptymalizowane i wyglądają atrakcyjnie.
Podsumowując, oto dlaczego Shopify rozmiary obrazów mają znaczenie:
- Każdy typ obrazu Shopify wymaga unikalnych wymiarów, np. logo powinno mieć inny rozmiar niż obrazy banerów.
- Prawdopodobieństwo, że użytkownicy staną się płacącymi klientami, wzrasta, gdy mogą wyraźnie zobaczyć obrazy w odpowiednim formacie.
- Odpowiednio dobrane i zoptymalizowane obrazy mogą zwiększyć Twój potencjał SEO.
- Zdjęcia o złym rozmiarze mogą powodować rozciągnięcie lub przycięcie obrazów, co prowadzi do brzydkiej strony internetowej.
- Może się okazać, że obrazy o niewłaściwym rozmiarze powodują spowolnienie witryny lub uniemożliwiają klientom czekanie.
Oprócz tego: wyraźne obrazy o odpowiednich rozmiarach prezentują pewien poziom profesjonalizmu, wywołując u klientów emocjonalne reakcje, potwierdzające, że jesteś firmą godną zaufania, a Twoje produkty są najwyższej jakości. Złe zdjęcia po prostu sprawiają wrażenie, jakbyś nie przejmował się swoimi produktami lub sposobem ich wyświetlania. Twoi klienci mogą zapytać: „Gdzie jeszcze idą na skróty?”
Mając to na uwadze, zapoznaj się z naszym krótkim przewodnikiem po najlepszych Shopify rozmiary obrazów dla obszarów takich jak strony produktów, obrazy banerów i logo.
Najlepszy Shopify Rozmiary obrazów (w zależności od miejsca użycia obrazów)
Nie wszystkie z nich są twardymi zasadami, ale najlepiej trzymać się „idealnego rozmiaru” tak bardzo, jak to możliwe. Tematy czasami mają własne standardy obrazów, więc miej to na uwadze. W przeciwnym razie wyjaśnimy, kiedy będziesz mieć trochę luzu w kwestii wymiarów.
Czy istnieje uniwersalny rozmiar obrazu, którego można użyć? Shopify?
Nie, ale jeśli planujesz zastosować takie podejście, oto co zalecamy:
- Upewnij się, że wszystkie obrazy są wystarczająco duże, aby pokazać skomplikowane szczegóły produktu.
- Pamiętaj jednak, aby obrazy były wystarczająco małe, aby nie zakłócać działania witryny.
- Dobrą zasadą jest stosowanie rozdzielczości 2048 × 2048 pikseli w przypadku obrazów kwadratowych.
- Unikaj obrazów kwadratowych o rozmiarze mniejszym niż 800 × 800 pikseli.
- Unikaj obrazów kwadratowych o rozmiarze większym niż 4472 × 4472.
W przypadku obrazów niekwadratowych zdecydowanie zalecamy korzystanie z poniższych przewodników. Warto również zauważyć, że niektóre motywy przycinają obrazy inaczej, więc być może będziesz musiał zgadywać i sprawdzać, które rozmiary obrazów najlepiej sprawdzą się w Twoim sklepie internetowym.
Aby uzyskać najlepsze wskazówki, spójrz na ideał Shopify rozmiary obrazów poniżej, wszystkie podzielone na kategorie w zależności od typu obrazu:
1. Shopify Rozmiar obrazu produktu (idealny rozmiar: 2048 × 2048 pikseli)
Zdjęcia produktów służą jako podstawowe formy mediów wykorzystywane do sprzedaży. ShopifyMotywy całkiem nieźle radzą sobie z przycinaniem i optymalizacją zdjęć produktów, ale nigdy nie powinieneś polegać na zautomatyzowanych narzędziach.
Kurs zalecane wymiary zdjęć produktów na Shopify mają wymiary 2048 x 2048 pikseli.
To wspaniałe miejsce, w którym możesz mieć pewność, że Twoje obrazy nie spowalniają szybkości Twojej strony, a jednocześnie możesz mieć pewność, że klienci zobaczą bogactwo szczegółów Twoich oryginalnych zdjęć.
W przypadku zdjęć produktów proponujemy kwadratowy obraz, aby uniknąć niepożądanego przycinania. Shopify tematy.
Poniższy zrzut ekranu przedstawia obraz przesłany w rozmiarze 2048 × 2048 pikseli, który nie spowodował przycięcia.
Dłuższe i szersze obrazy nadal mogą działać w przypadku zdjęć produktów, ale jest mniejsza kontrola nad tym, co motyw robi z Twoimi obrazami. Możesz zauważyć, że zdjęcia krajobrazowe są mniejsze w porównaniu do formatu portretowego.
2. Shopify Rozmiar obrazu kolekcji (idealny rozmiar: 2048 × 2048 pikseli)
Dodanie kolekcji niekoniecznie wymaga użycia obrazu, ale pozwala na utworzenie osobnej strony dla tej kolekcji, przypominającej stronę docelową utworzoną tylko dla małego podzbioru produktów.
Obraz kolekcji zostanie przesłany pod adresem Utwórz kolekcję sekcja w Shopify.
Następnie możesz dodać produkt do tej kolekcji i wyświetlić go w bloku treści na stronie głównej lub jako osobną stronę.
Jeśli opuścisz Obraz puste pole na stronie kolekcji, domyślnie przyjmie jedno z polecanych zdjęć produktów z tej kolekcji.
Zalecana Shopify rozmiar obrazu dla kolekcji to 2048 × 2048 pikseli.
Kwadratowe wymiary pomagają ustalić ujednolicony format dla wszystkich kolekcji, zwłaszcza gdy są one wyświetlane obok siebie.
Odkryjesz również, że praca z kwadratowymi obrazami jest łatwiejsza, jeśli wykorzystasz bloki treści prezentujące kolekcje.
Jak zawsze wyniki mogą się różnić w zależności od użytego motywu. Niektóre motywy oferują dalsze możliwości w zakresie obrazów kolekcji, umożliwiając udostępnianie obrazu w formie banera na osobnej stronie kolekcji. W takim przypadku optymalny rozmiar obrazu Twojej kolekcji może być zupełnie inny od tego, o czym tutaj mówiliśmy. Ogólnie rzecz biorąc, najlepszym planem działania jest przeprowadzenie testów z motywem. Dodaj do swoich kolekcji kilka obrazów o unikalnych rozmiarach. Zapisz te, które działają, a następnie zawsze używaj tych wymiarów. Upewnij się tylko, że obrazy nie są zbyt duże ani zbyt małe, a wszystko będzie dobrze.
3. Shopify Rozmiar obrazu logo (idealny rozmiar: 450 W × 250 W pikseli)
Logo wyróżnia się jako wizytówka Twojego sklepu e-commerce. Jest wyświetlany zaraz po wejściu użytkownika na Twoją stronę główną oraz w całej witrynie, biorąc pod uwagę, że jest zwykle widoczny w obszarze nagłówka.
Shopify użytkownicy mający problemy z rozmiarem logo mogą stwierdzić, że logo nie jest wystarczająco duże lub powoduje w jakiś sposób zniekształcenie menu nawigacyjnego. Może się też okazać, że logo pozostawia dużo wolnego miejsca poniżej lub powyżej.
Aby rozwiązać większość tych problemów, sugerujemy użycie logo o wymiarach 250 pikseli wysokości i 450 pikseli szerokości.
W rzeczywistości, Shopify zaleca, aby nigdy nie przekraczać podanych wymiarów szerokości i wysokości. Powiedziawszy to, możesz zmniejszyć rozmiar, o ile pozwala na to Twój motyw.
Co jakiś czas pasek boczny coś psuje, a może Twoje menu nawigacyjne zawiera zbyt wiele elementów, które popychają logo w dziwnym kierunku. Niezależnie od tego najlepiej jest pobawić się wymiarami logo i ustawieniami witryny, aby uzyskać najlepszy wygląd.
Alternatywnie, niektóre motywy wyglądają świetnie z kwadratowymi logotypami, ale pamiętaj, aby ich rozmiar nie przekraczał 250 x 250 pikseli, dzięki czemu nie zajmą zbyt dużo miejsca.
Aby uzyskać największą wszechstronność, przejdź do Ustawienia > Marka in Shopify dodać Domyślnie i Square obraz. W ten sposób możesz przesłać dowolny plik, w zależności od sytuacji.
4. Shopify Rozmiar obrazu banera (idealny rozmiar: 2000 W × 600 W pikseli)
Zwykle nazywane obrazem bohatera lub banerem graficznym, są to większe obrazy, które można umieścić na górze strony głównej, aby zaprezentować nowe produkty i dołączyć tekst z przyciskiem. Bardzo ważne jest, aby obrazy banerów miały wysoką rozdzielczość, aby zapobiec ziarnistości po zmianie rozmiaru i podczas oglądania na różnych urządzeniach.
Shopify posiada również Nagłówek sekcję treści, która działa podobnie do sekcji Obraz baneru sekcja treści.
Niezależnie od tego, który wybierzesz, zalecamy trzymanie się wymiarów 1200 pikseli szerokości x 600 pikseli wysokości dla banerów i obrazów głównych.
Powiedziawszy to, często możesz uciec od 1200–2000 pikseli dla szerokości i 400–600 pikseli dla wysokości. I jak zawsze, zależy to od tematu.
Na koniec, warto również dostosować ustawienia dla wszystkich banerów graficznych i obrazów bohaterskich. Możesz zmienić wysokość banera dla większości motywów i powiedzieć Shopify gdzie chcesz umieścić treść banera, np. w prawym dolnym rogu lub u góry — aby uzyskać lepszy widok obrazu znajdującego się za treścią.
5. Shopify Rozmiar obrazu pokazu slajdów (idealny rozmiar: 2000 W × 600 W pikseli)
Podobnie jak baner, w pokazach slajdów należy używać obrazów o wysokiej rozdzielczości. Te sekcje zawartości umożliwiają wyświetlanie wielu zdjęć w jednym obszarze strony. Następnie przechodzą do następnego obrazu z rzędu.
Ponieważ są bardzo podobne do banerów, w rzeczywistości zachowasz tę samą szerokość i wysokość, co w przypadku obrazu bohatera lub banera. Zalecana szerokość to 2000 pikseli i wysokość 600 pikseli. Jednak wysokość może wynosić od 400–600 pikseli, a szerokość od 1200–2000 pikseli.
Upewnij się, że zarządzasz wszystkimi ustawieniami pokazu slajdów, aby ustalić najlepsze formatowanie dla pokazu slajdów. Być może będziesz musiał przenieść pole zawartości w inne miejsce lub pokaz slajdów będzie wyglądał lepiej, jeśli trochę zwiększysz wysokość.
Jedną z głównych zasad pokazu slajdów jest to, aby w ramach tego samego pokazu slajdów zawsze przesyłać obrazy o tym samym rozmiarze. Możesz dostosować wymiary podczas tworzenia oddzielnego pokazu slajdów, ale upewnij się tylko, że obrazy połączone w jeden pokaz slajdów mają te same wymiary, aby zapewnić ciągłość i wygodę użytkownika.
Jak zoptymalizować Shopify Obrazy
Optymalizacja obrazów pomaga poprawić sposób ładowania zdjęć w Twoim sklepie e-commerce. Pomaga także stworzyć bardziej przyjazne dla użytkownika doświadczenie na stronie internetowej, ponieważ obrazy powinny uzupełniać doświadczenie zakupowe, a nie je przytłaczać.
Optymalizując obrazy pod kątem różnych aspektów, należy wziąć pod uwagę kilka aspektów Shopify. Obszary te obejmują optymalne formaty obrazów, kompresje, źródła obrazów, stylizację i wiele innych. Czytaj dalej, aby dowiedzieć się wszystkiego o najlepszych praktykach i krokach, które należy podjąć w celu optymalizacji obrazów w Shopify.
Krok 1: Wybierz optymalny obraz Format
Shopify Rozmiary obrazów mają znaczenie, jednak pierwszym krokiem optymalizacji zdjęcia powinno być wybranie najlepszego formatu obrazu.
Istnieje wiele formatów obrazów, które Shopify pozwala.
Oto, co czyni je wyjątkowymi:
- JPEG/JPG: Prawdopodobnie najpopularniejszy format plików dla obrazów, i słusznie. JPEG-i dobrze się kompresują i zapewniają doskonałą jakość. Polecamy je na strony produktów, szczególnie gdy zdjęcia zawierają drobne szczegóły.
- PNG: Ten typ pliku jest w rzeczywistości lepszy niż pliki JPEG w zakresie utrzymywania jakości po zmniejszeniu rozmiaru obrazu. Może się jednak okazać, że pliki PNG nie kompresują się tak bardzo. Najlepiej sprawdzają się, gdy potrzebne jest przezroczyste tło (nieobsługiwane w plikach JPEG), dlatego lubimy je w przypadku logo i niektórych obrazów banerów.
- GIF: GIF to format obrazu dla animacji. Zasadniczo jest to jak zamiana krótkiego filmu w ruchomy obraz, co jest pomocne w krótkim wyjaśnieniu produktu bez przytłaczającego rozmiaru filmu. Lubimy je na stronach głównych, stronach produktów i postach na blogu. Nie nadużywaj jednak GIF-ów, ponieważ brakuje im bogatej jakości kolorów, jaką można znaleźć w innych formatach, takich jak JPEG, TIFF i PNG.
- WebP: Być może najbardziej wszechstronny ze wszystkich formatów obrazów, WebP staje się coraz bardziej popularny, ponieważ oferuje silniejszą kompresję i jakość niż JPEG i PNG, a także zalety przezroczystości PNG. Nie wspominając o tym, że można również tworzyć animacje za pomocą WebP. Rozważ użycie WebP do wszystkich typów obrazów w Shopify. Oczekujemy, że w przyszłości WebP będzie częściej używany w Internecie.
Inne niż to, Shopify obsługuje formaty takie jak HEIC, progresywny JPEG i AVIF. HEIC to standard formatu obrazu używany w urządzeniach Apple. Jest niezwykle kompaktowy, może zawierać wiele obrazów na jednym obrazie i zapewnia doskonałą jakość. Są jednak niekompatybilne z większością urządzeń innych niż Apple, co sprawia, że trudno je polecić. Format obrazu AVIF ma dość silne zalety ze względu na wysoką jakość i drastyczne współczynniki kompresji. Krótko mówiąc, wydajność z AVIF powinna być faktycznie lepsza niż w przypadku obrazów JPEG i WebP. Jednak przeglądarki komputerowe i mobilne potrzebują trochę czasu, aby przyjąć go jako standard formatu pliku. Dlatego nie możemy go teraz polecić. Dopóki prawie każdy z połączeniem internetowym nie będzie mógł faktycznie oglądać obrazów online.
Na podstawie tego, do czego zamierzasz użyć obrazu, wybierz odpowiedni format z powyższej listy. Następnie przejdź do następnego kroku, aby style obrazu pozostały takie same w całej witrynie.
Krok 2: Zrób zdjęcie w tym samym stylu na wszystkich zdjęciach
Ciągłość jest kluczem do fotografii w e-commerce. Ustala ogólny wygląd Twojej marki i tworzy ujednolicony styl w całej witrynie.
Na przykład marki często używają jednego koloru tła dla wszystkich zdjęć produktów.
Dotyczy to również wymiarów i stylu obrazów. Jeśli większość zdjęć produktów jest w orientacji poziomej, powstrzymaj się od mieszania kilku zdjęć w orientacji poziomej. Możesz włączyć do tej mieszanki zarówno zdjęcia lifestylowe, jak i zdjęcia produktów, ale przez większość sesji najlepiej trzymać się jednego stylu.
Krok 3: Stwórz połączenie fotografii produktowej i lifestylowej
Jak już wspomniano, najprawdopodobniej będziesz chciał użyć jednego rodzaju stylu fotograficznego w przypadku większości zdjęć produktów. Jednakże istotne jest, aby dołączyć zdjęcia lifestylowe, które uzupełnią standardowe zdjęcia produktów o jednokolorowe tło i inny widok produktów.
Firmy e-commerce mają tę wadę, że klienci nie mogą przymierzyć ani dotknąć produktów na miejscu. Tutaj właśnie pojawiają się zdjęcia lifestylowe. Użytkownicy mogą zobaczyć, jak produkty wyglądają w działaniu. Jak koszula układa się na ciele lub jest wielkości deskorolki, gdy ktoś na niej stoi.
Krok 4: Wybierz odpowiednie nazwy i tytuły plików
Każdy plik obrazu ma nazwę i Shopify pobiera tę nazwę pliku i publikuje ją w metadanych Twojej witryny (każda platforma e-commerce tak robi).
Jeśli więc zapiszesz zdjęcia jako nowe-zdjęcie(1).jpg na komputerze i przesłać je do sklepu, wyszukiwarki nie będą miały żadnych informacji o zawartości zdjęcia. To może zaszkodzić Twojemu SEO.
Optymalizując obrazy, wykonaj następujące kroki, aby mieć pewność, że wyszukiwarki (i osoby z wadami wzroku) zrozumieją, co dzieje się na obrazie:
- Dodaj nazwę pliku przypominającą zawartość obrazu.
- Jeśli zdarzy Ci się przesłać plik o ogólnej nazwie, zmień obraz Tytuł in Shopify. Zastępuje to ustawienie domyślne.
- Użyj tagów alt, aby uzyskać jeszcze lepszą reprezentację tego, co pokazano na obrazie. Są to główne elementy, na które zwracają uwagę wyszukiwarki, ponieważ pokazują one, że w przypadku osób niedowidzących poprawiono komfort korzystania z witryny.
Krok 5: Kompresuj obrazy przed lub w trakcie przesyłania
Shopify oferuje automatyczną kompresję wszystkich obrazów przesyłanych na swoje serwery, ale nie należy na tym całkowicie polegać.
Najlepszym rozwiązaniem jest użycie narzędzia innej firmy do skompresowania obrazów przed przesłaniem Shopifylub zainstaluj Shopify plugin który automatycznie kompresuje zdjęcia po przesłaniu.
O wiele łatwiej jest skorzystać z aplikacji, ale większość z nich wymaga subskrypcji, więc rozumiemy, jeśli musisz ograniczyć się do budżetu.
Niektóre aplikacje, które dobrze sprawdzają się w przypadku kompresji obrazu, obejmują:
Przetestuj te aplikacje, korzystając z bezpłatnych wersji próbnych, aby dowiedzieć się, jak dobrze kompresują obrazy i na ile zautomatyzowany jest ten proces. Następnie możesz zdecydować się na subskrypcję. W przypadku narzędzi innych firm zalecamy TinyPNG i Image Resizer.
Krok 6: Rozważ bezpłatne aplikacje do wyszukiwania obrazów
Chociaż zdecydowanie zaleca się, aby marki e-commerce robiły własne zdjęcia (zamiast szukać bezpłatnych alternatyw lub pobierać je ze strony producenta), istnieją pewne obszary sklepu internetowego, w których można używać bezpłatnych zdjęć.
Na przykład możesz potrzebować malowniczego zdjęcia osoby patrzącej na kanion, aby uzupełnić wpis na blogu. Z drugiej strony możesz użyć zdjęcia jako tła do obrazu głównego, co umożliwi upuszczenie rzeczywistego obrazu produktu i opisu na tło.
W takich sytuacjach sugerujemy skorzystanie z niektórych witryn zawierających obrazy objęte licencją Creative Commons:
- Unsplash
- Burst (Od Shopify)
- Pexels
- Otwarte wersety , , , , , , , , , , , ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,, ,
Należy podkreślić, że licencja Creative Commons nie oznacza, że możesz po prostu bezpłatnie pobrać obraz i umieścić go na swojej stronie internetowej. Czasami tak się dzieje, ale należy sprawdzić każdy obraz, aby upewnić się, jakie masz prawa do jego wykorzystania.
Na przykład licencja Creative Commons mówi:
- Jeśli możesz użyć obrazu do celów komercyjnych lub niekomercyjnych
- Kiedy musisz przyznać twórcy uznanie lub jeśli jest to po prostu zalecane, abyś to zrobił
- Jeśli możesz w jakikolwiek sposób modyfikować obraz
Ponadto istnieje wiele bezpłatnych aplikacji do edycji obrazów, które umożliwiają zmianę rozmiaru, filtrowanie i przycinanie bez płacenia ani grosza:
Sugerujemy:
Krok 7: Przeprowadź testy A/B, aby znaleźć najlepsze obrazy i Formats
Po nadaniu zdjęciom odpowiednich nazw plików, zmianie ich rozmiaru, przycięciu i wybraniu idealnego formatu i rozmiaru, czas zobaczyć, jak wyglądają w Twoim sklepie.
Na szczęście nie należy trzymać kciuków i mieć nadzieję, że obrazy będą najlepsze do konwersji. Masz możliwość przesłania wielu wariantów tych samych obrazów na strony produktów, strony docelowe i strony główne, a następnie sprawdź, które z nich mają najlepszą skuteczność pod względem konwersji.
Obie Naukowiec Tematyczny i Shogun oferuj funkcje testów A/B dla kilku części swojego produktu Shopify projekt.
Wielką zaletą testów A/B jest to, że eksperyment nigdy się nie kończy. Dzięki niemu możesz mieć oko na każdy aspekt swojej witryny. Możesz zamieniać obrazy, które z czasem tracą na aktualności, i przeprowadzać wiele testów w jednym okresie.
Shopify Przewodnik po rozmiarach obrazu: nasz wniosek
Trzymanie się kwadratowych obrazów to jeden ze sposobów na zapewnienie, że Twoje zdjęcia e-commerce pozostaną nieprzycięte. Możesz jednak stwierdzić, że ta zasada nie zawsze jest prawdziwa, jeśli chodzi o Twoje Shopify motyw.
Dlatego zalecamy przesyłanie wielu rozmiarów obrazów dla produktów, kolekcji i banerów, aby zrozumieć, co Twój motyw może obsłużyć najlepiej. W przeciwnym razie lubimy standard 2046 × 2046 pikseli. Ale w przypadku banerów, logo i pokazów slajdów będziesz chciał użyć bardziej szczegółowych wymiarów wymienionych powyżej w tym artykule.
Jeśli potrzebujesz wyjaśnień, daj nam znać w komentarzach poniżej Shopify rozmiary obrazu!
Komentarze Odpowiedzi 0