Kiedy potencjalny klient trafi na Twoją stronę Shopify , na podstawie zdjęć zdecydują, czy chcą dokonać zakupu. Twoim zadaniem jako sprzedawcy jest zatem dopilnowanie, aby obrazy nie spowalniały szybkości ładowania witryny (w ten sposób odstraszając użytkowników) i format i odpowiednio dostosuj rozmiar 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.
- Użytkownicy chętniej zamieniają się w płacących klientów, gdy wyraźnie widzą obrazy po prawej stronie format.
- 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. Motywy czasami mają własne standardy obrazu, więc miej je na oku. Innywise, wyjaśnimy, kiedy będziesz mieć pewną swobodę w zakresie 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 trzymanie się rozdzielczości 2048 × 2048 pikseli square obrazy.
- Unikaj niczego mniejszego niż 800 × 800 pikseli square obrazy.
- Unikaj niczego większego niż 4472 × 4472 dla square obrazy.
Dla osób niebędącychsquare obrazów, zdecydowanie zalecamy skorzystanie z poniższych przewodników. Warto również zauważyć, że niektóre motywy przycinają obrazy w inny sposób, więc być może będziesz musiał zgadnąć i sprawdzić, które rozmiary obrazów będą najlepsze dla Twojego sklepu internetowego.
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.
Połączenia 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ęć.
Proponujemy square obraz do zdjęć produktów, aby uniknąć niechcianego kadrowania 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 kontrola nad wpływem motywu na zdjęcia jest mniejsza. Może się okazać, że zdjęcia krajobrazowe zostaną zmniejszone w porównaniu do portretu format.
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.
Połączenia square Wymiary pomagają w ustaleniu standaryzacji format we wszystkich kolekcjach, szczególnie gdy są wyświetlane obok siebie.
Przekonasz się też, że square Łatwiej jest pracować z obrazami, jeśli używasz bloków treści prezentujących 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 square logo, ale nie przekraczaj rozmiaru 250 x 250 pikseli, aby nie zajmował 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.
Wreszcie to też wise aby dostosować ustawienia wszystkich banerów graficznych i obrazów głównych. Możesz zmodyfikować 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.
Pamiętaj, aby zarządzać wszystkimi ustawieniami pokazu slajdów, aby wybrać najlepsze formatdo pokazu slajdów. Może zaistnieć potrzeba przeniesienia pola zawartości w inne miejsce lub pokaz slajdów wyglądałby lepiej, gdyby nieco zwiększono jego 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ą obraz optymalny formats, kompresje, źródła obrazów, stylizacja i inne. Czytaj dalej, aby dowiedzieć się wszystkiego o najlepszych praktykach i krokach, które należy podjąć w celu optymalizacji obrazów Shopify.
Krok 1: Wybierz optymalny obraz Format
Shopify rozmiary obrazów są ważne, ale pierwszym krokiem w optymalizacji każdego zdjęcia powinien być wybór najlepszego obrazu format.
Istnieje wiele obrazów formatto jest to Shopify pozwala.
Oto, co czyni je wyjątkowymi:
- JPEG/JPG: Być może najpopularniejszy plik format dla obrazów i słusznie. Pliki JPEG dobrze się kompresują i zapewniają doskonałą jakość. Polecamy je do stron produktowych, zwłaszcza gdy na zdjęciach znajdują się 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 obraz format do animacji. Zasadniczo przypomina to przekształcenie krótkiego filmu w ruchomy obraz, co jest pomocne w krótkim objaśnieniu produktu bez nadmiernego 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 formatjak JPEG, TIFF i PNG.
- WebP: Być może najbardziej wszechstronny ze wszystkich obrazów formats, WebP staje się coraz bardziej powszechny, ponieważ oferuje silniejszą kompresję i jakość niż zarówno JPEG, jak i PNG, a także zalety przejrzystości PNG. Nie wspominając, że możesz także tworzyć animacje za pomocą WebP. Rozważ użycie WebP dla 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 wspiera formatjak HEIC, progresywny JPEG i AVIF. HEIC to obraz format standard używany na urządzeniach Apple. Jest niezwykle kompaktowy, może zawierać wiele zdjęć w jednym obrazie i zapewnia doskonałą jakość. Są jednak niekompatybilne z większością urządzeń innych niż Apple, dlatego trudno je polecić. Obraz AVIF format ma dość duże zalety ze względu na wysoką jakość i dramatyczny współczynnik kompresji. Krótko mówiąc, wydajność w przypadku plików AVIF powinna być w rzeczywistości lepsza niż w przypadku obrazów JPEG i WebP. Jednak zajmuje to trochę czasu desktop i przeglądarek mobilnych, aby przyjąć go jako plik format standard. Dlatego nie możemy go teraz polecić. Dopiero prawie każdy, kto ma połączenie z Internetem, będzie mógł faktycznie przeglądać obrazy online.
W zależności od tego, do czego planujesz używać obrazu, wybierz odpowiedni format z góry. 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 swoim komputerze i prześlij je do swojego sklepu, wyszukiwarki nie będą miały do nich dostępuformato treści zdjęcia. Może to 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 rozwiązania format i rozmiar, czas sprawdzić jak prezentują się 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ę square obrazy to jeden ze sposobów, aby mieć pewność, że Twoje zdjęcia e-commerce nie zostaną przycięte. Może się jednak okazać, że ta zasada nie zawsze ma zastosowanie w Twoim przypadku Shopify motyw.
Dlatego zalecamy przesyłanie obrazów produktów, kolekcji i banerów o różnych rozmiarach, aby zrozumieć, z czym Twój motyw najlepiej sobie poradzi. Innywise, podoba nam się standard 2046 × 2046 pikseli. Jednak w przypadku banerów, logo i pokazów slajdów warto zastosować bardziej szczegółowe wymiary wymienione powyżej w tym artykule.
Jeśli potrzebujesz wyjaśnień, daj nam znać w komentarzach poniżej Shopify rozmiary obrazu!
Komentarze Odpowiedzi 0