Przesyłanie obrazów

Możesz używać różnych typów obrazów, takich jak logo firmy, obrazy produktów, pokazy slajdów, banery i obrazy w postach na blogu. Możesz również przekształcać obrazy, kadrując je i zmieniając ich rozmiar, oraz dostosować ustawienia multimediów w szablonie, aby zmienić obramowanie lub cień wszystkich multimediów wyświetlanych w sklepie.

Aby obrazy w sklepie online były wyświetlane dokładnie tak, jak chcesz, musisz użyć prawidłowego współczynnika proporcji obrazu. Obrazy są automatycznie optymalizowane dla witryny sklepu za pomocą sieci Shopify Content Delivery Network (CDN).

Przesyłanie obrazu w edytorze szablonów

Możesz dodawać obrazy do szablonu w edytorze szablonów. Możesz również przesyłać obrazy w sekcji Treść > Pliki w panelu administracyjnym Shopify. Aby dowiedzieć się więcej, zapoznaj się z sekcją Przesyłanie plików i zarządzanie nimi.

Kroki:

Dodawanie obrazów za pomocą metapól

Jeśli masz skonfigurowane metapola dla swoich obrazów, możesz użyć selektora dynamicznego źródła, aby dodać obraz do sklepu online. Więcej informacji na temat metapól i obsługiwanych formatów obrazów można znaleźć w sekcji Dodawanie wartości do metapól.

Ustawianie punktu centralnego na obrazie

Możesz używać punktów centralnych do definiowania najważniejszej części obrazu w sklepie online. Gdy ustawisz punkt centralny na obrazie, staje się on obszarem zainteresowania. Punkty centralne są zawsze wyświetlane w kadrze, nawet jeśli masz szablon, który przycina obraz w celu dopasowania go do układu. Punkty centralne zapewniają większą kontrolę nad sposobem wyświetlania obrazu na ekranach o różnej wielkości oraz w przypadkach, gdy szablony używają różnych współczynników proporcji.

Możesz mieć tylko jeden punkt centralny na obraz, ale możesz go w każdej chwili zmienić lub usunąć.

Zgodność punktu centralnego z darmowymi szablonami Shopify

Możesz ustawić punkt centralny w następujących wersjach darmowych szablonów Shopify:

• Wszystkie szablony z rodziny Horizon
• W szablonie Colorblock w wersji 3.0.0 i nowszych
• W szablonie Craft w wersji 5.0.0 i nowszych
• W szablonie Crave w wersji 5.0.0 i nowszych
• W szablonie Dawn w wersji 7.0.0 i nowszych
• W szablonie Origin w wersji 1.0.0 i nowszych
• W szablonie Publisher w wersji 1.0.0 i nowszych
• W szablonie Refresh w wersji 2.0.0 i nowszych
• W szablonie Ride w wersji 3.0.0 i nowszych
• W szablonie Rise w wersji 1.0.0 i nowszych
• W szablonie Sense w wersji 5.0.0 i nowszych
• W szablonie Spotlight w wersji 0.0.1 i nowszych
• W szablonie Studio w wersji 4.0.0 i nowszych
• W szablonie Taste w wersji 4.0.0 i nowszych
• W szablonie Trade w wersji 1.0.0 i nowszych

Jeśli używasz szablonu zewnętrznego, sprawdź w dokumentacji szablonu, czy obsługuje on funkcję punktów centralnych.

Dodaj punkt centralny do obrazu

Jeśli dodasz punkt centralny do obrazu, a następnie użyjesz go w wielu miejscach w sklepie online, ten sam punkt centralny będzie miał zastosowanie wszędzie tam, gdzie użyjesz obrazu.

W zależności od sposobu, w jaki szablon przycina i zmienia rozmiar obrazów, punkt centralny nie zawsze może być wizualnie wyśrodkowany.

Kroki:

1. Kliknij obraz w dowolnej z następujących lokalizacji w panelu administracyjnym Shopify:
   • W sekcji Zawartość > Pliki.
   • W edytorze szablonów.
   • W sekcji Multimedia ofert produktów w sekcji Produkty.
   • W edytorze e-maili Shopify Messaging.
   • W sekcji Metapola dowolnego zasobu, który ma metapole typu Odniesienie do pliku służące do dodawania obrazu.
2. Aby wybrać część obrazu, na której chcesz ustawić punkt centralny, kliknij obraz lub przeciągnij niebieską kropkę.
3. Kliknij Zapisz.

Usuń punkt centralny z obrazu

Kroki:

1. Kliknij obraz w dowolnej z następujących lokalizacji w panelu administracyjnym Shopify:
   • W sekcji Zawartość > Pliki.
   • W edytorze szablonów.
   • W sekcji Multimedia ofert produktów w sekcji Produkty.
   • W edytorze e-maili Shopify Messaging.
   • W sekcji Metapola dowolnego zasobu, który ma metapole typu Odniesienie do pliku służące do dodawania obrazu.
2. Kliknij Usuń.
3. Kliknij Zapisz jako nowy.

Formaty obrazów

Obsługiwane są następujące formaty obrazów:

• JPEG
• Progresywny JPEG
• PNG
• GIF
• HEIC
• WebP

Używanie obrazów JPEG

Obrazy JPEG są idealne do fotografii i innych nieruchomych obrazów o złożonych kolorach. Format JPEG ma paletę milionów kolorów. Format JPEG oferuje również kompresję stratną, która może pomóc w utrzymaniu krótkich czasów ładowania strony bez zauważalnej utraty jakości obrazu. Używaj formatu JPEG dla następujących typów obrazów:

• produkty
• banery lub pokazy slajdów
• strony i posty na blogu

Korzystanie z obrazów PNG

Obrazy PNG są idealne do grafik i ikon o jednolitych kolorach i bez gradientów. Format PNG obsługuje również przezroczystość w obrazach. Użyj formatu PNG dla następujących typów obrazów:

• loga
• ikony
• obramowania i wykończenia

Automatyczna kompresja obrazów i wybór formatu

Obrazy nie są kompresowane podczas przesyłania ich do panelu administracyjnego Shopify, co pomaga zachować ich oryginalną jakość. Jednakże mogą wystąpić następujące sytuacje, aby zapewnić klientom szybki czas ładowania strony:

• Gdy obrazy są wyświetlane za pośrednictwem szablonu sklepu, mogą zostać poddane kompresji w celu uzyskania obrazów o wysokiej jakości
• Shopify automatycznie określa najlepszy możliwy format pliku do wykorzystania podczas dostarczania obrazów
• Gdy przeglądarka internetowa klienta obsługuje nowoczesne formaty obrazów, takie jak WebP i AVIF (AV1 Image File Format), obrazy są dostarczane w tych formatach
• Pliki GIF są automatycznie konwertowane na animowany format WebP w celu poprawy wydajności poprzez zmniejszenie rozmiaru pliku

Aby uzyskać jak najlepszą jakość obrazu, rozważ podjęcie następujących działań:

• Przesyłaj obrazy o wyższej rozdzielczości do 5000 x 5000 px lub 25 megapikseli
• Wybieraj mniej stratne typy obrazów, takie jak PNG, dla rysunków kreskowych, tekstu i grafik z ikonami z przezroczystością
• Używaj formatu JPEG dla obrazów produktów lub pokazów slajdów
• Pliki SVG są obsługiwane, ale mają ograniczenia – nie można ich przekształcać (zmieniać rozmiaru, przycinać itp.) bez żądania formatu zrasteryzowanego (JPEG, WebP, PNG)

Inne typy plików, takie jak PSD (Photoshop Document), TIFF (Tagged Image File Format) i BMP (Bitmap), są akceptowane, ale podczas przesyłania zostaną przekonwertowane do formatu JPEG/PNG.

Limity przesyłania obrazów

Przesyłanie obrazów do Shopify podlega ograniczeniom zarówno pod względem megapikseli (MP), jak i rozmiaru pliku mierzonego w megabajtach (MB). Megapiksele służą do wskazania, z ilu milionów pikseli składa się obraz. Megabajty służą do wskazania, ile milionów bajtów pamięci lub miejsca na dysku zajmuje obraz.

Obrazy przesyłane do Shopify nie mogą przekraczać żadnego z następujących limitów:

• 20 megapikseli
• 20 megabajtów

Aby znaleźć wartość megapikseli obrazu, możesz użyć następującego równania:

(szerokość w pikselach x wysokość w pikselach)/1 000 000

Na przykład obraz o rozdzielczości 4900 px na 6930 px ma 33,9 megapiksela zgodnie z równaniem: (4900x6930)/1 000 000 = 33,9 MP.

Profile kolorów obrazu

Gdy wyświetlasz obraz w swoim sklepie online, jego kolory mogą wyglądać inaczej niż w oryginalnym obrazie przesłanym do Shopify. Może się tak zdarzyć, gdy obraz ma profil kolorów, czyli zestaw danych przechowywanych w pliku z rozszerzeniem .ICC lub .ICM.

Profile kolorów są często osadzane w obrazach, aby pomóc w standaryzacji sposobu wyświetlania kolorów na różnych urządzeniach. Kiedy obrazy są wyświetlane w Twoim sklepie online, ich profile kolorów są usuwane.

Profile kolorów są usuwane z następujących powodów:

• Nie wszystkie urządzenia są w stanie odczytać profile kolorów .ICC lub .ICM, więc ich zachowanie może skutkować niespójnością kolorów obrazów na różnych urządzeniach.
• Gdy przesłany obraz nie zawiera profilu kolorów, przeglądarka internetowa przyjmuje profil sRGB, który jest najczęściej używanym profilem kolorów do wyświetlania obrazów w Internecie. Zapewnia to, że obrazy będą wyświetlane tak samo we wszystkich głównych przeglądarkach internetowych i na wszystkich urządzeniach.
• Profile kolorów mogą zajmować dużo miejsca na dysku, co może skutkować dłuższym czasem ładowania strony.

Usuwanie profilu kolorów z obrazu

Możesz usunąć profil kolorów z obrazu, zapisując go bez profilu kolorów przed przesłaniem go do Shopify. Ten proces różni się w zależności od używanego programu do edycji obrazów.

Zapoznaj się z dokumentacją firmy Adobe na temat tego, jak przypisać lub usunąć profil kolorów (Illustrator, Photoshop) i przypisać lub usunąć profil kolorów (InDesign).

Najlepsze praktyki dotyczące pokazów slajdów, banerów z obrazami i obrazów o pełnej szerokości

Wiele szablonów Shopify zawiera duże obrazy lub pokazy slajdów, które skalują się do wysokości przeglądarki lub dostosowują się do wielkości ekranu.

Jeśli używasz jednego z tych szablonów lub masz duży pokaz slajdów bądź obraz tła, musisz wiedzieć, jakie typy obrazów będą wyświetlane najlepiej.

Ponieważ duże obrazy nie mieszczą się na wszystkich urządzeniach, Shopify czasami wyświetla tylko część obrazu, w zależności od urządzenia, którego używasz. Jeśli pokaz slajdów zawiera wiele dużych obrazów, może się okazać, że ich fragmenty nie są widoczne.

Kwestie do rozważenia przy używaniu obrazów do pokazów slajdów lub banerów z obrazami

Aby mieć pewność, że obrazy będą dobrze wyglądać w Twoim szablonie, pamiętaj o następujących kwestiach:

• Obrazy używane do pokazów slajdów lub jako tło nie powinny zawierać tekstu. Jeśli tekst jest częścią samego obrazu, może zostać przesunięty, przycięty lub dostosowany w zależności od szablonu. Użyj edytora szablonów, aby dodać tekst i linki do pokazów slajdów i tła.

• W przypadku obrazów używanych w pokazach slajdów lub jako tło wybieraj proste obrazy, aby nałożony na nie tekst był łatwy do odczytania.

Szerokie obrazy na wysokich ekranach

Szerokie obrazy mogą być przycinane po lewej i prawej stronie, gdy urządzenie używane do ich wyświetlania ma wysoki ekran, np. telefon komórkowy lub tablet w widoku pionowym. W poniższym przykładzie, jeśli najważniejszą częścią obrazu są ludzie, możesz umieścić punkt centralny po prawej stronie obrazu.

Wysokie obrazy na szerokich ekranach

Wysokie obrazy mogą być przycinane u góry i u dołu, gdy urządzenie używane do ich wyświetlania ma szeroki ekran, np. laptop lub monitor komputera stacjonarnego. W poniższym przykładzie, jeśli najważniejszą częścią obrazu są buty, możesz umieścić punkt centralny na dole obrazu.

Sposób ładowania obrazów

Gdy odwiedzasz stronę w sklepie online, możesz zauważyć, że obrazy są początkowo lekko rozmazane, a po chwili stają się ostre. Jest to normalne zachowanie, które pomaga poprawić szybkość ładowania sklepu i doświadczenie użytkownika.

Szablony Shopify wykorzystują technikę leniwego ładowania, która polega na ładowaniu najpierw mniejszej wersji obrazu, podczas gdy obraz o pełnej rozdzielczości ładuje się w tle. Dzięki temu klienci mogą natychmiast przeglądać treść, bez konieczności oczekiwania na całkowite załadowanie dużych obrazów. Proces ten zwykle trwa krócej niż sekundę, ale sprawia wrażenie, że sklep ładuje się szybciej.

Ta technika jest szczególnie korzystna dla sklepów z dużą liczbą obrazów, ponieważ znacznie skraca początkowy czas ładowania strony i od razu wyświetla klientom zawartość wizualną.

Rozwiązywanie problemów z obrazami