Ł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.
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:
- Z panelu administracyjnego Shopify przejdź do opcji: Sklep online > Szablony.
- Wyszukaj szablon, który chcesz edytować, a następnie kliknij opcję Dostosuj.
- W aplikacji Shopify naciśnij Sklep.
- W sekcji Kanały sprzedaży naciśnij Sklep online.
- Naciśnij Zarządzaj szablonami.
- Wyszukaj szablon, który chcesz edytować, a następnie naciśnij Dostosuj.
- Naciśnij Edytuj.
- W aplikacji Shopify naciśnij Sklep.
- W sekcji Kanały sprzedaży naciśnij Sklep online.
- Naciśnij Zarządzaj szablonami.
- Wyszukaj szablon, który chcesz edytować, a następnie naciśnij Dostosuj.
- Naciśnij Edytuj.
- Użyj rozwijanego menu, aby wybrać szablon, który chcesz edytować.
- Na pasku bocznym edytora szablonów kliknij sekcję, do której chcesz dodać obraz.
-
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.
Kliknij obraz, aby zobaczyć jego podgląd w szablonie. Po znalezieniu obrazu, którego chcesz użyć, kliknij Wybierz.
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.
Kroki:
- W edytorze szablonów kliknij sekcję lub blok z obrazem.
- Kliknij opcję Edytuj w obrazie.
- Kliknij opcję Dodaj punkt centralny.
- Kliknij i przeciągnij niebieskie kółko lub kliknij najważniejszą część obrazu, aby ustawić punkt centralny.
- Kliknij Gotowe.
Kroki:
- W edytorze szablonów naciśnij sekcję lub blok, który ma obraz.
- Naciśnij opcję Edytuj w obrazie.
- Naciśnij opcję Dodaj punkt centralny.
- Naciśnij najważniejszą część obrazu, aby ustawić punkt centralny.
- Naciśnij Gotowe.
Kroki:
- W edytorze szablonów naciśnij sekcję lub blok, który ma obraz.
- Naciśnij opcję Edytuj w obrazie.
- Naciśnij opcję Dodaj punkt centralny.
- Naciśnij najważniejszą część obrazu, aby ustawić punkt centralny.
- Naciśnij Gotowe.
Usuń punkt centralny
Kroki:
- W edytorze szablonów kliknij sekcję lub blok z obrazem.
- Naciśnij opcję Edytuj w obrazie.
- Kliknij opcję Usuń punkt centralny.
- Kliknij Gotowe.
Kroki:
- W edytorze szablonów naciśnij sekcję lub blok, który ma obraz.
- Naciśnij opcję Edytuj w obrazie.
- Naciśnij opcję Usuń punkt centralny.
- Naciśnij Gotowe.
Kroki:
- W edytorze szablonów naciśnij sekcję lub blok, który ma obraz.
- Naciśnij opcję Edytuj w obrazie.
- Naciśnij opcję Usuń punkt centralny.
- Naciśnij Gotowe.
Formaty obrazów
Shopify obsługuje następujące formaty obrazów:
- JPEG
- Progresywny JPEG
- PNG
- GIF
- HEIC
- Webp
- AVIF
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
.
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:
Kliknij polecenia: Edycja > Przydziel profil.
Wybierz opcję Nie zarządzaj kolorem w tym dokumencie.
Kliknij OK.
Usuń profil kolorów za pomocą programu Adobe InDesign
Aby usunąć profil kolorów za pomocą programu Adobe InDesign:
Kliknij polecenia: Edycja > Przydziel profil.
W przypadku profilu RGB i profilu CMYK wybierz opcję Odrzuć (użyj bieżącej przestrzeni roboczej).
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: