Загрузка изображений

Вы можете использовать различные типы изображений, например логотип компании, изображения товаров, слайд-шоу, баннеры и изображения для записей в блоге. Вы также можете преобразовывать свои изображения с помощью обрезки и изменения размера, а также настраивать параметры медиафайлов в своей теме, чтобы изменить рамку или тень у всех медиафайлов, отображаемых в вашем магазине.

Чтобы изображения в вашем интернет-магазине отображались именно так, как вы хотите, необходимо использовать правильное соотношение сторон. Изображения автоматически оптимизируются для вашей витрины с помощью сети доставки контента (CDN) Shopify.

Загрузка изображения в редакторе тем

Вы можете добавлять изображения в свою тему в редакторе тем. Вы также можете загружать изображения в разделе Контент > Файлы панели администратора Shopify. Чтобы узнать больше, обратитесь к разделу «Загрузка файлов и управление ими».

Шаги:

Добавление изображений с помощью метаполей

Если у вас настроены метаполя для изображений, вы можете использовать инструмент выбора динамического источника, чтобы добавить изображение в интернет-магазин. Дополнительную информацию о метаполях и поддерживаемых форматах изображений см. в разделе «Добавление значений в метаполя».

Установка фокусной точки на изображении

С помощью фокусных точек можно определить самую важную часть изображения в вашем интернет-магазине. Устанавливая фокусную точку, вы делаете её основной областью изображения. Фокусные точки всегда остаются в кадре, даже если тема обрезает изображение под свой макет. Фокусные точки дают больше контроля над отображением изображения на экранах разного размера и в случаях, когда в темах используются разные соотношения сторон.

Для каждого изображения можно установить только одну фокусную точку, но её можно в любое время изменить или удалить.

Совместимость фокусных точек с бесплатными темами Shopify

Фокусную точку можно установить в следующих версиях бесплатных тем Shopify:

• Все темы семейства Horizon
• Colorblock версии 3.0.0 и выше
• Craft версии 5.0.0 и выше
• Crave версии 5.0.0 и выше
• Dawn версии 7.0.0 и выше
• Origin версии 1.0.0 и выше
• Publisher версии 1.0.0 и выше
• Refresh версии 2.0.0 и выше
• Ride версии 3.0.0 и выше
• Rise версии 1.0.0 и выше
• Sense версии 5.0.0 и выше
• Spotlight версии 0.0.1 и выше
• Studio версии 4.0.0 и выше
• Taste версии 4.0.0 и выше
• Trade версии 1.0.0 и выше

Если вы используете стороннюю тему, проверьте её документацию, чтобы узнать, поддерживает ли она фокусные точки.

Добавление фокусной точки на изображение

Если вы добавите фокусную точку к изображению, а затем будете использовать это изображение в нескольких местах интернет-магазина, эта же фокусная точка будет применяться везде.

В зависимости от того, как ваша тема обрезает и изменяет размер изображений, фокусная точка не всегда может быть визуально по центру.

Шаги:

1. В админ-панели Shopify нажмите на изображение в любом из следующих мест:
   • В разделе «Контент» > «Файлы».
   • В редакторе тем.
   • В разделе «Медиа» ваших листингов продуктов в разделе «Товары».
   • В редакторе электронной почты Shopify Messaging.
   • В разделе «Метаполя» любого ресурса, у которого есть метаполе типа «Ссылка на файл» для добавления изображения.
2. Чтобы выбрать часть изображения, где вы хотите установить фокусную точку, нажмите на изображение или перетащите синюю точку.
3. Нажмите «Сохранить».

Удаление фокусной точки с изображения

Шаги:

1. В админ-панели Shopify нажмите на изображение в любом из следующих мест:
   • В разделе «Контент» > «Файлы».
   • В редакторе тем.
   • В разделе «Медиа» ваших листингов продуктов в разделе «Товары».
   • В редакторе электронной почты Shopify Messaging.
   • В разделе «Метаполя» любого ресурса, у которого есть метаполе типа «Ссылка на файл» для добавления изображения.
2. Нажмите «Удалить».
3. Нажмите «Сохранить как новый».

Форматы изображений

Поддерживаются следующие форматы изображений:

• JPEG
• Прогрессивный JPEG
• PNG
• GIF
• HEIC
• WebP

Использование изображений в формате JPEG

Изображения в формате JPEG идеально подходят для фотографий и других статичных изображений со сложными цветами. Формат JPEG имеет палитру из миллионов цветов. В JPEG также используется сжатие с потерями, что помогает сократить время загрузки страницы без заметной потери качества изображения. Используйте формат JPEG для следующих типов изображений:

• товары
• баннеры или слайд-шоу
• страницы и записи в блоге

Использование изображений в формате PNG

Изображения в формате PNG идеально подходят для графики и значков с однотонной заливкой без градиентов. Формат PNG также поддерживает прозрачность изображений. Используйте формат PNG для следующих типов изображений:

• логотипы
• значки
• рамки и окантовки

Автоматическое сжатие изображений и выбор формата

Изображения не сжимаются при загрузке в панель администратора Shopify, что помогает сохранить их исходное качество. Однако для ускорения загрузки страниц для ваших клиентов могут происходить следующие процессы:

• Когда изображения отображаются через тему вашего магазина, они могут подвергаться сжатию для обеспечения высокого качества
• Shopify автоматически определяет наилучший возможный формат файла для доставки ваших изображений
• Когда веб-браузер клиента поддерживает современные форматы изображений, такие как WebP и AVIF (AV1 Image File Format), ваши изображения доставляются в этих форматах
• Файлы GIF автоматически преобразуются в анимированный формат WebP для повышения производительности за счёт уменьшения размера файла

Для наилучшего качества изображений рассмотрите следующие действия:

• Загружайте изображения с более высоким разрешением — до 5000 x 5000 пикселей или 25 мегапикселей
• Выбирайте типы изображений с меньшими потерями, например PNG, для штриховых рисунков, текста и знаковой графики с прозрачностью
• Используйте JPEG для изображений товаров или слайд-шоу
• Файлы SVG поддерживаются, но имеют ограничения: их нельзя трансформировать (изменять размер, обрезать и т. д.), не запросив растровый формат (JPEG, WebP, PNG)

Другие типы файлов, такие как PSD (Photoshop Document), TIFF (Tagged Image File Format) и BMP (Bitmap), принимаются, но при загрузке будут преобразованы в JPEG/PNG.

Ограничения на загрузку изображений

Загрузка изображений в Shopify имеет ограничения как по количеству мегапикселей, так и по размеру файла, который измеряется в мегабайтах (Мбайт). Мегапиксели используются для обозначения того, сколько миллионов пикселей составляет изображение. Мегабайты используются для обозначения того, сколько миллионов байт памяти или дискового пространства занимает изображение.

Изображения, загружаемые в Shopify, не могут превышать ни один из следующих лимитов:

• 20 мегапикселей
• 20 мегабайт

Чтобы определить количество мегапикселей вашего изображения, вы можете использовать следующую формулу:

(ширина в пикселях x высота в пикселях)/1 000 000

Например, изображение с разрешением 4900 x 6930 пикселей составляет 33,9 мегапикселя на основе формулы: (4900x6930)/1 000 000 = 33,9 МП.

Цветовые профили изображений

Когда вы просматриваете изображение в своём интернет-магазине, его цвета могут отображаться иначе, чем в исходном изображении, которое вы загрузили в Shopify. Это может произойти, если у изображения есть цветовой профиль — набор данных, хранящийся в файле с расширением .ICC или .ICM.

Цветовые профили часто встраиваются в изображения, чтобы помочь стандартизировать отображение цветов на разных устройствах. Когда изображения отображаются в вашем интернет-магазине, их цветовые профили удаляются.

Цветовые профили удаляются по следующим причинам:

• Не все устройства могут считывать цветовые профили .ICC или .ICM, поэтому их сохранение может привести к несоответствию цветов изображений на разных устройствах.
• Если загруженное изображение не содержит цветового профиля, веб-браузер по умолчанию использует sRGB — самый распространённый цветовой профиль для отображения изображений в интернете. Это гарантирует одинаковое отображение ваших изображений во всех основных веб-браузерах и на всех устройствах.
• Цветовые профили могут занимать много места на диске, что может привести к увеличению времени загрузки страницы.

Удаление цветового профиля из изображения

Вы можете удалить цветовой профиль из изображения, сохранив его без этого профиля перед загрузкой в Shopify. Этот процесс зависит от вашей программы для редактирования изображений.

Ознакомьтесь с документацией Adobe о том, как назначить или удалить цветовой профиль (Illustrator, Photoshop) и назначить или удалить цветовой профиль (InDesign).

Лучшие практики для слайд-шоу, баннеров и полноширинных изображений

Многие темы Shopify содержат большие изображения или слайд-шоу, которые масштабируются по высоте вашего браузера или адаптируются к размеру экрана.

Если вы используете одну из этих тем или у вас есть большое слайд-шоу или фоновое изображение, вам необходимо понимать, какие типы изображений будут отображаться лучше всего.

Поскольку большие изображения не могут поместиться на всех устройствах, Shopify иногда отображает только часть изображения в зависимости от используемого устройства. Если ваше слайд-шоу содержит много больших изображений, вы можете обнаружить, что некоторые их части не видны.

Рекомендации по использованию изображений для слайд-шоу или баннеров

Чтобы ваши изображения хорошо сочетались с вашей темой, помните о следующем:

• Изображения, которые вы используете для слайд-шоу или в качестве фона, не должны содержать текст. Если текст является частью самого изображения, он может смещаться, обрезаться или корректироваться в зависимости от вашей темы. Используйте редактор тем, чтобы добавлять текст и ссылки в слайд-шоу и на фон.

• Для изображений, которые вы используете в слайд-шоу или в качестве фона, выбирайте простые изображения, чтобы любой наложенный текст было легко читать.

Широкие изображения на высоких экранах

Широкие изображения могут обрезаться слева и справа, если для их просмотра используется устройство с высоким экраном, например мобильный телефон или планшет в портретном режиме. В приведённом ниже примере, если люди являются самой важной частью изображения, вы можете разместить точку фокуса в правой части изображения.

Высокие изображения на широких экранах

Высокие изображения могут обрезаться сверху и снизу, если для их просмотра используется устройство с широким экраном, например ноутбук или монитор настольного компьютера. В приведённом ниже примере, если обувь является самой важной частью изображения, вы можете разместить точку фокуса в нижней части изображения.

Поведение при загрузке изображений

При посещении страницы вашего интернет-магазина вы можете заметить, что изображения сначала выглядят немного размытыми, а через мгновение становятся чёткими. Это нормальное поведение, которое помогает повысить скорость загрузки вашего магазина и улучшить удобство его использования.

Темы Shopify используют метод отложенной загрузки, при котором сначала загружается уменьшенная версия изображения, в то время как изображение в полном разрешении загружается в фоновом режиме. Это позволяет клиентам сразу просматривать контент, не дожидаясь полной загрузки больших изображений. Обычно этот процесс занимает меньше секунды, но создаёт впечатление, что ваш магазин загружается быстрее.

Этот метод особенно полезен для магазинов с большим количеством изображений, поскольку он значительно сокращает начальное время загрузки страницы и обеспечивает клиентам немедленную визуальную обратную связь.

Устранение неполадок с изображениями