Ładowanie obrazów

W swoim sklepie online możesz używać wielu różnych obrazów, w tym logo swojej firmy, zdjęć produktów, pokazów slajdów, banerów i zdjęć z blogów. Zaleca się dostosowanie rozmiaru lub formatu ładowanego obrazu do sposobu i miejsca jego późniejszego wykorzystania.

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:

  1. Wyszukaj szablon, który chcesz edytować, i kliknij opcję Dostosuj.

  2. Na pasku narzędzi edytora szablonów kliknij sekcję, do której chcesz dodać obraz. Wybierz sekcję zawierającą selektor obrazów:

    Część paska narzędzi edytora szablonów przedstawiająca selektor obrazu. Dostępny jest przycisk Wybierz obraz oraz link z tekstem Przeglądaj bezpłatne obrazy.

  3. Dodaj obraz, klikając Wybierz obraz. Aby załadować obraz ze swojego komputera, kliknij Załaduj. Aby użyć darmowego obrazu z serwisu Burst, kliknij Darmowe obrazy.

  4. Kliknij opcję Zapisz.

Formaty obrazów

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

  • JPEG lub JPG
  • Progresywny JPEG
  • PNG
  • GIF

Shopify obsługuje obrazy w formacie WebP w obsługiwanych przeglądarkach.

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.

Współczynniki kompresji

Aby zapewnić krótki czas ładowania, Shopify kompresuje obrazy wyświetlane w Twoim sklepie online. Kompresja obrazu oznacza zmniejszenie jego rozmiaru, pozwalające na szybsze ładowanie strony. Dzięki kompresji można zapisać więcej obrazów, wykorzystując określone miejsce na dysku lub w pamięci. Ponadto znacznie skrócony zostaje czas potrzebny na uzyskanie dostępu do obrazów. Kompresja może spowodować zmianę jakości obrazu, w zależności od jego formatu, rozmiaru i jakości oryginału.

Poziomy jakości obrazu Shopify po kompresji są następujące:

  • JPEG: między 65 - 90
  • PNG: 90
  • GIF: bez zmiany jakości

W przypadku obrazów JPEG poziom jakości skompresowanego obrazu zależy od jakości oryginalnego obrazu JPEG oraz rozmiaru wyjściowego:

Współczynniki kompresji
Jakość oryginalna Rozmiar wyjściowy Jakość wyjściowa
86 lub więcej Wysokość lub szerokość 1024px lub więcej 85
65 - 85 Wysokość lub szerokość 1024px lub więcej Jakość oryginalna
64 lub mniej Wysokość lub szerokość 1024px lub więcej 65
76 lub więcej Wysokość i szerokość jest mniejsza niż 1024px 75
65 - 75 Wysokość i szerokość jest mniejsza niż 1024px Jakość oryginalna
64 lub mniej Wysokość i szerokość jest mniejsza niż 1024px 65

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

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 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 (Boundless i Brooklyn) lub dostosowują się do rozmiaru ekranu (Venture).

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:

  • Niektóre szablony mają ustawienie położenia obrazu, którego można użyć do wyznaczenia części obrazu jako punktu centralnego. Jeśli Twój szablon nie ma takiego ustawienia, upewnij się, że centralny punkt każdego obrazu znajduje się w środku. Podczas przycinania obrazów na niektórych ekranach punkt centralny jest widoczny, a obszary wokół niego są ukryte.

  • 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):

Szerokie obrazy na wysokich ekranach

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):

Wysokie obrazy na szerokich ekranach

Gotowy(-a) do rozpoczęcia sprzedaży za pomocą Shopify?

Wypróbuj za darmo