Размеры изображений для Shopify

Используйте разрешение 2048 на 2048 пикселей в качестве мастер-копии для Shopify и следите, чтобы размер каждого загружаемого файла не превышал 500 KB. Shopify допускает изображения размером до 20 MB и разрешением до 4472 пикселей по квадратной стороне, но эти цифры описывают то, что платформа способна выдержать, а не то, что требуется для быстрой работы интернет-магазина.

Цифра в 20 MB — это значение, которое приводится в большинстве руководств, и ориентироваться на него при проектировании — ошибка. То, что Shopify разрешает, и то, что он поощряет, — разные вещи. Страница товара, содержащая 8 изображений по 3 MB каждое, весит в сумме 24 MB, и мобильные покупатели уйдут с нее еще до того, как она успеет загрузиться.

Размеры изображений Shopify по типу размещения

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

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

Почему 500 KB — это действительно важная цифра

Общий вес страницы определяет скорость загрузки интернет-магазина, а изображения составляют большую часть этого веса на типичной странице товара. Страница общим весом менее 2 MB легко загружается через мобильный интернет, в то время как страница весом 24 MB — нет.

Покупатели со смартфонов составляют большинство трафика для большинства магазинов, а мобильное соединение гораздо менее стабильно, чем офисный широкополосный интернет. Каждая секунда загрузки стоит конверсий, что делает вес изображений вопросом выручки, а не просто техническим нюансом. Сжатие 8 изображений товара с 3 MB до 300 KB убирает 21 MB со страницы и при этом визуально ничего не меняет для покупателя.

Сжимает ли Shopify изображения за вас

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

Но в этом и кроется ограничение. Shopify создает уменьшенные варианты на основе вашего оригинала, поэтому плохо сжатый исходник размером 5 MB даст на выходе более тяжелые варианты, чем хорошо подготовленный файл размером 400 KB. Сжатие перед загрузкой также экономит место на диске и значительно ускоряет массовый импорт, так как при импорте 500 товаров передается 200 MB вместо 2,5 GB.

Как подготовить изображения для Shopify

Чтобы создать быструю страницу товара, выполните следующие 6 шагов.

1. Экспортируйте квадратную мастер-копию размером 2048 на 2048 пикселей из вашего фоторедактора.
2. Измените размер любого баннера или имиджевого изображения до его фактической ширины отображения, умноженной на два для экранов высокой четкости.
3. Конвертируйте фотографии в WebP или оставьте JPG, если этого требует ваш рабочий процесс, так как Shopify в любом случае выполнит конвертацию.
4. Сжимайте до целевого размера, ориентируясь на 300 KB для фотографий товаров и 400 KB для баннеров.
5. Называйте файлы в соответствии с кодом товара и ракурсом, чтобы при массовом импорте через CSV изображения автоматически привязались к нужным товарам.
6. Загрузите файлы и проверьте страницу товара на телефоне, а не только в режиме предварительного просмотра на компьютере.

WebP на Shopify

Shopify уже много лет нативно поддерживает WebP и автоматически конвертирует загруженные файлы JPG и PNG для браузеров, которые с ним совместимы. Прямая загрузка WebP также поддерживается и дает вам полный контроль над сжатием, вместо того чтобы доверять этот процесс платформе.

Формат WebP обеспечивает такое же визуальное качество, как и JPG, при этом размер файлов уменьшается на 25–35 процентов, что крайне важно для страницы с 8 фотографиями. Единственный случай, когда стоит избегать загрузки WebP, — это если файл в дальнейшем будет скачиваться поставщиком или отправляться в типографию, так как там по-прежнему ожидают формат JPG.

Исправление медленной страницы товара

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

• Изменяйте разрешение перед сжатием. Баннер размером 4000 пикселей в слоте шириной 1920 пикселей впустую тратит 75 процентов данных.
• Сократите количество изображений на первом экране. Галерея из 12 изображений, загружающаяся одновременно, задерживает все остальные элементы.
• Убедитесь, что включена ленивая загрузка (lazy loading) для изображений ниже первого экрана, что большинство современных тем делают по умолчанию.
• Замените анимированные файлы GIF на видео, так как короткая гифка часто весит больше, чем вся остальная страница вместе взятая.
• Проведите аудит приложений. Виджеты отзывов, всплывающие окна и значки доверия часто загружают свои собственные изображения и скрипты.

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

Пишите альтернативный текст (alt text), описывающий товар для покупателей, использующих программы чтения с экрана, и называйте файлы в соответствии с названием товара, а не так, как их назвала камера. Файл с именем IMG_4821.jpg ничего не говорит ни поисковым системам, ни покупателям.

Используйте структуру вида navy-linen-shirt-front.jpg, которая остается понятной при массовом импорте, предсказуемо сортируется в папке и описывает изображение в результатах поиска. Альтернативный текст должен описывать то, что изображено на фотографии, включая цвет, материал и ракурс, не дублируя при этом название товара слово в слово. Заполнение этих полей занимает секунды для каждого товара, но значительно улучшает видимость магазина в поиске по картинкам.

Тестирование изменений перед запуском

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

Проверьте 3 вещи на тестовых товарах. Убедитесь, что изображения выглядят четкими при максимальном увеличении, так как покупатели активно используют зум при просмотре одежды и ювелирных изделий. Убедитесь, что в сетке коллекции все изображения обрезаны одинаково. Проверьте, быстро ли загружается страница через мобильный интернет, а не через офисный Wi-Fi. Только после этого применяйте те же настройки ко всему остальному каталогу.

Приложения для работы с изображениями против подготовки перед загрузкой

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

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

Распространенные ошибки с изображениями в Shopify

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

Регулярно встречаются еще две ошибки. Смешивание разных пропорций изображений в одной коллекции создает неровную сетку, так как темы обрезают картинки до квадрата, и вертикальная фотография теряет верхнюю и нижнюю части. Использование формата PNG для фотографий товаров увеличивает размер файлов в 3–5 раз без какой-либо видимой пользы, поскольку PNG сохраняет каждый пиксель точно, а на фотографиях нет однотонных областей, которые можно было бы эффективно сжать.

Поддержание единообразия каталога

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

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

Обработка каталога за один проход

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

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