Ładowanie obrazów

W swoim sklepie online możesz używać wielu różnych obrazów, w tym logo swojej firmy, obrazów produktów, pokazów slajdów, banerów i zdjęć z postów na blogach. Shopify umożliwia dynamiczne przekształcanie obrazów za pomocą operacji przycinania i zmiany rozmiaru, a także automatycznie zapewnia najlepszy możliwy format obrazu podczas wyświetlania obrazów w sklepie online.

Uwaga

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

Załaduj zdjęcia

Istnieją dwa różne miejsca, w których możesz ładować obrazy dla swojego sklepu online:

Ładuj obrazy na stronie Pliki

Możesz ładować obrazy na stronie Pliki panelu administracyjnego Shopify. Jest to przydatne, ponieważ umożliwia dostęp do tych obrazów podczas edycji dowolnych szablonów. Aby dowiedzieć się więcej, zapoznaj się z sekcją Ładowanie plików na swojej stronie internetowej.

Załaduj obrazy w edytorze szablonów

Możesz dodać obrazy do szablonu w edytorze szablonów.

Kroki:

Pulpit

1. Z panelu administracyjnego Shopify przejdź do opcji: Sklep online > Szablony.
2. Wyszukaj szablon, który chcesz edytować, a następnie kliknij opcję Dostosuj.

iPhone

1. W aplikacji Shopify naciśnij Sklep.
2. W sekcji Kanały sprzedaży naciśnij Sklep online.
3. Naciśnij Zarządzaj szablonami.
4. Wyszukaj szablon, który chcesz edytować, a następnie naciśnij Dostosuj.
5. Naciśnij Edytuj.

Android

1. W aplikacji Shopify naciśnij Sklep.
2. W sekcji Kanały sprzedaży naciśnij Sklep online.
3. Naciśnij Zarządzaj szablonami.
4. Wyszukaj szablon, który chcesz edytować, a następnie naciśnij Dostosuj.
5. Naciśnij Edytuj.

1. Użyj rozwijanego menu, aby wybrać szablon, który chcesz edytować.
2. Na pasku bocznym edytora szablonów kliknij sekcję, do której chcesz dodać obraz.

3. Kliknij opcję Wybierz obraz, a następnie wykonaj jedną z następujących czynności:

   • Aby załadować obraz ze swojego komputera, kliknij opcję Załaduj.
   • Aby użyć darmowego obrazu z serwisu Burst, kliknij opcję Przeglądaj darmowe obrazy.

4. Kliknij obraz, aby zobaczyć jego podgląd w szablonie. Po znalezieniu obrazu, którego chcesz użyć, kliknij Wybierz.

5. Kliknij opcję Zapisz.

Dodaj obraz, używając metapól kolekcji

W przypadku skonfigurowania metapól dla obrazów możesz użyć dynamicznego selektora źródła, aby dodać obraz. Aby uzyskać więcej informacji na temat metapól i obsługiwanych formatów obrazów, zapoznaj się z sekcją Typy zawartości i wartości metapola.

Banery z obrazem

Możesz tworzyć banery graficzne z następującymi elementami:

• jeden lub dwa obrazy
• tekst
• przycisk czynności

Na komputerach stacjonarnych obrazy banerów są wyświetlane obok siebie. Ponieważ ten format nie jest dostosowany do urządzeń mobilnych, możesz ułożyć w stos obrazy banera graficznego, wybierając opcję Układaj obrazy w stosy na urządzeniu mobilnym w ustawieniach szablonu Baner z obrazem. Aby uzyskać więcej informacji na temat banerów z obrazami i pokazów slajdów, zapoznaj się z sekcją Najlepsze praktyki dotyczące pokazów slajdów i banerów z obrazami.

Ustaw punkt centralny na obrazie szablonu

Możesz użyć punktów centralnych, aby zdefiniować najważniejszą część obrazu w szablonie swojego sklepu online. Punkt centralny obrazu jest ustawiany jako obszar ogniskowania. Punkty centralne są zawsze wyświetlane w ramce, 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, gdy w szablonach używane są różne współczynniki proporcji i różne rozmiary ekranu.

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

Ustawienie punktu centralnego jest możliwe w następujących wersjach darmowych szablonów Shopify:

• Craft w wersji 5.0.0 lub wyższej
• Crave w wersji 5.0.0 lub wyższe
• Colorblock w wersji 3.0.0 lub wyższej
• Dawn w wersji 7.0.0 lub wyższej
• Refresh w wersji 2.0.0 lub wyższej
• Ride w wersji 3.0.0 lub wyższej
• Sense w wersji 5.0.0 lub wyższej
• Studio w wersji 4.0.0 lub wyższej
• Taste w wersji 4.0.0 lub 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

Możesz dodać punkt centralny do obrazu z sekcji Pliki i z edytora szablonów. Jeśli dodasz punkt centralny na obrazie, a następnie użyjesz obrazu w wielu miejscach, wszędzie będzie wykorzystywany ten sam punkt centralny.

Punkt centralny można dodać tylko do obrazów szablonu. Nie można go dodawać do obrazów produktów, blogów ani kolekcji.

Pulpit

Kroki:

1. W edytorze szablonów kliknij sekcję lub blok z obrazem.
2. Kliknij opcję Edytuj w obrazie.
3. Kliknij opcję Dodaj punkt centralny.
4. Kliknij i przeciągnij niebieskie kółko lub kliknij najważniejszą część obrazu, aby ustawić punkt centralny.
5. Kliknij Gotowe.

iPhone

Kroki:

1. W edytorze szablonów naciśnij sekcję lub blok, który ma obraz.
2. Naciśnij opcję Edytuj w obrazie.
3. Naciśnij opcję Dodaj punkt centralny.
4. Naciśnij najważniejszą część obrazu, aby ustawić punkt centralny.
5. Naciśnij Gotowe.

Android

Kroki:

1. W edytorze szablonów naciśnij sekcję lub blok, który ma obraz.
2. Naciśnij opcję Edytuj w obrazie.
3. Naciśnij opcję Dodaj punkt centralny.
4. Naciśnij najważniejszą część obrazu, aby ustawić punkt centralny.
5. Naciśnij Gotowe.

Uwaga

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

Usuń punkt centralny

Pulpit

Kroki:

1. W edytorze szablonów kliknij sekcję lub blok z obrazem.
2. Naciśnij opcję Edytuj w obrazie.
3. Kliknij opcję Usuń punkt centralny.
4. Kliknij Gotowe.

iPhone

Kroki:

1. W edytorze szablonów naciśnij sekcję lub blok, który ma obraz.
2. Naciśnij opcję Edytuj w obrazie.
3. Naciśnij opcję Usuń punkt centralny.
4. Naciśnij Gotowe.

Android

Kroki:

1. W edytorze szablonów naciśnij sekcję lub blok, który ma obraz.
2. Naciśnij opcję Edytuj w obrazie.
3. Naciśnij opcję Usuń punkt centralny.
4. Naciśnij Gotowe.

Uwaga

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.

Formaty obrazów

Shopify obsługuje następujące formaty obrazów:

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

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. Więcej informacji na temat funkcjonalności Shopify w zakresie przekształcania obrazów znajduje się na stronie https://cdn.shopify.com/

Kiedy używać 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 rodzajów obrazów:

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

Kiedy używać 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ść.

Używaj formatu PNG w przypadku następujących rodzajó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 kupującego obsługuje nowoczesne formaty obrazów, takie jak WebP i AV1 Image File Format (AVIF), Shopify dostarczy Twój obraz w tych formatach.

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

Limity ładowania

W przypadku ładowania obrazów do Shopify zastosowanie mają ograniczenia zarówno, jeśli chodzi o ilość megapikseli, jak i rozmiar pliku (mierzony w megabajtach). 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źć megapiksele obrazu, możesz użyć następującego równania: (pixel width x pixel height)/1,000,000. Na przykład obraz o rozdzielczości 4900x6930 miałby 33,9 megapikseli 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

Kolory obrazu przeglądanego w sklepie online mogą wyglądać inaczej niż w oryginale 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 umożliwić ujednolicenie 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 kilku 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 (najczęściej używany profil kolorów używany 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.

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.

Usuń profil kolorów za pomocą programu Adobe Illustrator lub Adobe Photoshop

Aby usunąć profil kolorów za pomocą programu Adobe Illustrator lub Adobe Photoshop:

1. Kliknij polecenia: Edycja > Przydziel profil.

2. Wybierz opcję Nie zarządzaj kolorem w tym dokumencie.

3. Kliknij OK.

Usuń profil kolorów za pomocą programu Adobe InDesign

Aby usunąć profil kolorów za pomocą programu Adobe InDesign:

1. Kliknij polecenia: Edycja > Przydziel profil.

2. W przypadku profilu RGB i profilu CMYK wybierz opcję Odrzuć (użyj bieżącej przestrzeni roboczej).

3. Kliknij OK.

Szczegółowe informacje znajdują się w dokumentacji Adobe na temat profili kolorów..

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, rozważ, 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.

Rekomendacje

Oto kilka rzeczy, o których warto pamiętać, dopasowując obrazy do szablonu:

• 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.

• 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 można przycinać po lewej i prawej stronie, gdy urządzenie używane do ich wyświetlania ma wysoki ekran (np. telefon komórkowy lub tablet). 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 na górze i na dole, gdy urządzenie używane do ich wyświetlania ma szeroki ekran (np. laptop lub komputer stacjonarny). W poniższym przykładzie, jeśli najważniejszą częścią obrazu są buty, możesz umieścić punkt centralny na dole obrazu, aby zapobiec jego wycięciu: