Ładowanie 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 z postów na blogach. Obrazy możesz przekształcać za pomocą czynności przycinania i zmiany rozmiaru. Dostosowując ustawienia multimediów w szablonie, możesz zmienić obramowanie lub cień we wszystkich multimediach wyświetlanych w Twoim sklepie.

Aby wyświetlić obrazy w sklepie online dokładnie w taki sposób, jaki chcesz, musisz użyć odpowiedniego współczynnika proporcji obrazu. Obrazy są automatycznie optymalizowane dla witryny sklepu za pomocą sieci Shopify Content Delivery Network (CDN).

Uwaga

Obrazy nie muszą być ręcznie kompresowane przed załadowaniem. Zawsze ładuj obrazy w najlepszej możliwej jakości, jaką możesz zapewnić.

Prześlij obraz w edytorze szablonów

Możesz dodać obrazy do szablonu w edytorze szablonów. Ponadto możesz przesyłać obrazy w sekcji Zawartość > Pliki w panelu administracyjnym Shopify. Aby dowiedzieć się więcej, zapoznaj się z tematem Przesyłanie plików i zarządzanie nimi.

Kroki:

Pulpit

1. W panelu administracyjnym Shopify przejdź do opcji: Sklep online > Szablony.

2. Kliknij opcję Dostosuj dla szablonu, dla którego chcesz przesłać obraz.

3. Opcjonalnie: Jeśli chcesz dodać obraz do strony w sklepie innej niż strona główna, kliknij menu rozwijane Strona główna, a następnie wybierz wzorzec, który chcesz edytować.

4. Na pasku bocznym edytora szablonów kliknij sekcję lub blok, do którego chcesz dodać obraz.

5. W polu Obraz wykonaj jedną z następujących czynności:

   • Aby przesłać obraz ze swojego komputera, wykonaj następujące kroki:

     1. Kliknij opcje: Wybierz obraz > Dodaj obrazy.
     2. Znajdź i otwórz obraz na swoim komputerze.
     3. Kliknij Gotowe.

   • Aby użyć darmowego obrazu z serwisu Burst, wykonaj poniższe kroki:

     1. Kliknij Przeglądaj darmowe obrazy.
     2. Znajdź obraz, którego chcesz użyć.
     3. Kliknij opcję Wybierz.

6. Kliknij opcję Zapisz.

iPhone

1. W aplikacji Shopify naciśnij przycisk .

2. W sekcji Kanały sprzedaży naciśnij Sklep online.

3. Naciśnij opcję Zarządzaj wszystkimi szablonami.

4. Naciśnij opcję Dostosuj dla szablonu, dla którego chcesz przesłać obraz.

5. Opcjonalnie: Jeśli chcesz dodać obraz do strony w sklepie innej niż strona główna, naciśnij menu rozwijane Strona główna, a następnie wybierz wzorzec, który chcesz edytować.

6. Naciśnij Sekcje, a następnie sekcję lub blok, do którego chcesz dodać obraz.

7. W polu Obraz wykonaj jedną z następujących czynności:

   • Aby przesłać obraz ze swojego urządzenia, wykonaj następujące kroki:

     1. Naciśnij opcje: Wybierz obraz > Dodaj obrazy.
     2. Znajdź i otwórz obraz na swoim urządzeniu.
     3. Naciśnij Gotowe.

   • Aby użyć darmowego obrazu z serwisu Burst, wykonaj poniższe kroki:

     1. Naciśnij opcję Przeglądaj darmowe obrazy.
     2. Znajdź obraz, którego chcesz użyć.
     3. Naciśnij Gotowe.

8. Naciśnij Zapisz.

Android

1. W aplikacji Shopify naciśnij przycisk .

2. W sekcji Kanały sprzedaży naciśnij Sklep online.

3. Naciśnij opcję Zarządzaj wszystkimi szablonami.

4. Naciśnij opcję Dostosuj dla szablonu, dla którego chcesz przesłać obraz.

5. Opcjonalnie: Jeśli chcesz dodać obraz do strony w sklepie innej niż strona główna, naciśnij menu rozwijane Strona główna, a następnie wybierz wzorzec, który chcesz edytować.

6. Naciśnij Sekcje, a następnie sekcję lub blok, do którego chcesz dodać obraz.

7. W polu Obraz wykonaj jedną z następujących czynności:

   • Aby przesłać obraz ze swojego urządzenia, wykonaj następujące kroki:

     1. Naciśnij opcje: Wybierz obraz > Dodaj obrazy.
     2. Znajdź i otwórz obraz na swoim urządzeniu.
     3. Naciśnij Gotowe.

   • Aby użyć darmowego obrazu z serwisu Burst, wykonaj poniższe kroki:

     1. Naciśnij opcję Przeglądaj darmowe obrazy.
     2. Znajdź obraz, którego chcesz użyć.
     3. Naciśnij Gotowe.

8. Naciśnij ✓.

Dodawanie obrazów za pomocą metapól

Jeśli masz metapola skonfigurowane dla obrazów, możesz użyć dynamicznego selektora źródła, aby dodać obraz do swojego sklepu online. Aby uzyskać więcej informacji na temat metapól i obsługiwanych formatów obrazów, zapoznaj się z tematem Dodawanie wartości do metapól.

Ustawianie punktu centralnego na obrazie

Możesz użyć punktów centralnych, aby zdefiniować najważniejszą część obrazu w swoim sklepie online. Punkt centralny obrazu jest ustawiany jako obszar ogniskowania. Punkty centralne zawsze pozostają w kadrze,, nawet jeśli obraz w szablonie jest przycięty tak, aby pasował do układu. Punkty centralne zapewniają większą kontrolę nad sposobem wyświetlania obrazu na ekranach o różnych rozmiarach oraz gdy w szablonach używane są różne współczynniki proporcji.

Dla każdego obrazu może być ustawiony tylko jeden punkt centralny. W dowolnym momencie możesz go jednak zmienić lub usunąć.

Kompatybilność punktu centralnego z darmowymi szablonami Shopify

Punkt centralny możesz ustawić dla poniższych wersji darmowych szablonów Shopify:

• Colorblock w wersji 3.0.0 i wyższej
• Craft w wersji 5.0.0 i wyższej
• Crave w wersji 5.0.0 i wyższej
• Dawn w wersji 7.0.0 i wyższej
• Origin w wersji 1.0.0 i wyższej
• Publisher w wersji 1.0.0 i wyższej
• Refresh w wersji 2.0.0 i wyższej
• Ride w wersji 3.0.0 i wyższej
• Rise w wersji 1.0.0 i wyższej
• Sense w wersji 5.0.0 i wyższej
• Spotlight w wersji 0.0.1 i wyższej
• Studio w wersji 4.0.0 i wyższej
• Taste w wersji 4.0.0 i wyższej
• Trade w wersji 1.0.0 i wyższej

Jeśli korzystasz z szablonu firmy zewnętrznej, sprawdź w jego dokumentacji, czy zapewnia on możliwość korzystania z punktów centralnych.

Dodaj punkt centralny do obrazu

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

W zależności od sposobu, w jaki przycinane są obrazy i zmieniany jest ich rozmiar w szablonie, punkt centralny może nie zawsze być wizualnie wyśrodkowany.

Kroki:

1. Kliknij obraz w dowolnym z poniższych miejsc w panelu administracyjnym Shopify:

   • W sekcji Zawartość > Pliki.
   • W edytorze szablonów.
   • W sekcji Multimedia dla ofert produktów w sekcji Produkty.
   • W edytorze Shopify Email.
   • W sekcji Metapola dowolnego zasobu z metapolem typu Odwołanie do pliku służącym do dodawania obrazu.

2. Aby wybrać część obrazu, w której chcesz ustawić punkt centralny, kliknij obraz lub przeciągnij niebieską kropkę.

3. Kliknij opcję Zapisz.

Uwaga

Możesz przenieść punkt centralny, ponownie otwierając obraz i klikając inny jego obszar, aby ustawić nowy punkt centralny.

Usuń punkt centralny z obrazu

Kroki:

1. Kliknij obraz w dowolnym z poniższych miejsc w panelu administracyjnym Shopify:

   • W sekcji Zawartość > Pliki.
   • W edytorze szablonów.
   • W sekcji Multimedia dla ofert produktów w sekcji Produkty.
   • W edytorze Shopify Email.
   • W sekcji Metapola dowolnego zasobu z metapolem typu Odwołanie do pliku służącym do dodawania obrazu.

2. Kliknij opcję Usuń.

3. Kliknij opcję Zapisz jako nowy.

Formaty obrazów

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

• JPEG
• Progresywny JPEG
• PNG
• GIF
• HEIC
• Webp

Uwaga

Shopify automatycznie wykrywa formaty obrazów, które są obsługiwane przez przeglądarkę Twojego klienta, a następnie automatycznie wyświetla obraz w najlepszym dostępnym formacie. Dowiedz się więcej o funkcjonalności przekształcania obrazów Shopify.

Korzystanie z obrazów JPEG

Format JPEG nadaje się idealnie do zdjęć i innych nieruchomych obrazów o złożonych kolorach. Format JPEG ma paletę z milionami kolorów. Ponadto format ten ma kompresję stratną, która pozwala na szybkie ładowanie stron bez zauważalnej utraty jakości obrazu. Używaj formatu JPEG w przypadku 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 nadają się idealnie do grafiki oraz ikon o jednolitych kolorach i bez gradientów. Ponadto format PNG obsługuje przezroczystość w obrazach. Używaj formatu PNG w przypadku następujących typów obrazów:

• logo
• ikony
• obramowania i wykończenia

Automatyczna kompresja obrazu i wybór formatu

Aby zapewnić krótki czas ładowania, Shopify kompresuje automatycznie obrazy wyświetlane w Twoim sklepie online. Kompresja obrazu oznacza zmniejszenie jego rozmiaru, pozwalające na szybsze ładowanie strony.

Ponadto Shopify automatycznie ustala najlepszy możliwy format pliku do wykorzystania podczas dostarczania obrazów. Na przykład, gdy wykryjemy, że przeglądarka internetowa klienta obsługuje nowoczesne formaty obrazów, takie jak WebP i AV1 Image File Format (AVIF), obrazy zostaną Ci dostarczone w tych formatach.

Aby zwiększyć wydajność poprzez zmniejszenie rozmiaru pliku, pliki GIF są automatycznie konwertowane na animowany format WebP.

Limity przesyłania obrazów

W przypadku ładowania obrazów do Shopify zastosowanie mają ograniczenia zarówno, jeśli chodzi o liczbę megapikseli (MP), jak i rozmiar pliku, który jest mierzony w megabajtach (MB). Megapiksele służą do wskazania, ile milionów pikseli tworzy dany obraz. Megabajty wskazują, ile milionów bajtów pamięci lub miejsca na dysku zajmuje dany obraz.

Obrazy przesyłane do Shopify nie mogą przekroczyć jednego z następujących limitów:

• 20 megapikseli
• 20 megabajtów

Aby znaleźć wartość megapikseli obrazu, możesz użyć poniższego równania:

(pixel width x pixel height)/1,000,000

Na przykład obraz o rozdzielczości 4900x6930 pikseli ma 33,9 megapiksela na podstawie równania: (4900x6930)/1,000,000 = 33.9 MP.

Uwaga

Istnieją różne limity rozmiaru obrazu i pliku do ładowania obrazów produktów.

Profile kolorów obrazu

Kolory obrazu przeglądanego w sklepie online mogą wyglądać inaczej niż w oryginalnym obrazie przesłanym do Shopify. Może się to zdarzyć, gdy obraz ma profil kolorów, który jest zbiorem danych przechowywanych w pliku z rozszerzeniem .ICC lub .ICM.

Profile kolorów są często osadzane w obrazach, aby pomóc w ujednoliceniu sposobu wyświetlania kolorów na różnych urządzeniach. Gdy obrazy są wyświetlane w 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 zachowanie ich w nienaruszonym stanie może spowodować niespójności w kolorach obrazu na różnych urządzeniach.
• Jeśli załadowany obraz nie zawiera profilu kolorów, przeglądarka internetowa przyjmuje profil sRGB, który jest najczęściej używanym profilem kolorów używanym do wyświetlania obrazów w Internecie. Dzięki temu obrazy wyglądają tak samo we wszystkich głównych przeglądarkach internetowych i urządzeniach.
• Profile kolorów mogą zajmować dużą ilość miejsca na dysku, co może powodować wydłużenie czasu ładowania stron.

Usuń profil 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. Proces ten różni się w zależności od programu do edycji obrazów.

Wyświetl dokumentację Adobe na temat sposobu przypisywania lub usuwania profilu kolorów (Illustrator, Photoshop) i przypisywania lub usuwania profilu 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 rozmiaru ekranu.

Jeśli korzystasz z jednego z takich szablonów lub masz duży pokaz slajdów lub obraz tła, musisz ustalić, które typy obrazów będą wyglądać najlepiej.

Ze względu na to, że duże obrazy nie mieszczą się na wszystkich urządzeniach, Shopify czasami wyświetla tylko część obrazu w zależności od używanego urządzenia. Jeśli pokaz slajdów zawiera wiele dużych obrazów, może się okazać, że niektóre części obrazów są niewidoczne.

Informacje dotyczące korzystania z obrazów w pokazach slajdów lub banerach z obrazami

Aby obrazy były dopasowane do szablonu, zwróć uwagę na poniższe kwestie:

• Obrazy używane do pokazów slajdów lub tła nie powinny zawierać w sobie tekstu. Jeśli tekst jest częścią samego obrazu, może zostać przeniesiony, przycięty lub dostosowany na podstawie 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ła wybieraj proste obrazy, tak aby można było z łatwością odczytać każdy znajdujący się na nich tekst.

Szerokie obrazy na wysokich ekranach

Szerokie obrazy mogą zostać przycięte po lewej i prawej stronie, jeśli urządzenie używane do ich wyświetlania ma wysoki ekran, np. telefon komórkowy lub tablet oglądany w trybie 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ą zostać przycięte na górze i na dole, jeśli urządzenie używane do ich oglądania ma szeroki ekran, taki jak laptop lub monitor stacjonarny. W poniższym przykładzie, jeśli najważniejszą częścią obrazu są buty, możesz umieścić punkt centralny w dolnej części obrazu.