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

Опубликовано: 2021-11-02

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

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

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

Каковы лучшие размеры изображений Shopify?

Когда дело доходит до изображений Shopify, не обязательно быть универсальным.

Давайте посмотрим на различные типы изображений Shopify и их идеальные размеры.

Изображения продуктов

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

Согласно Shopify, максимальный размер изображения, которое вы можете загрузить, составляет 4472 x 4472 пикселей с максимальным размером файла 20 МБ.

Файлы размером более 20 МБ будут занимать ценное место на вашем веб-сайте. Попытка использовать изображения большего размера повлияет на скорость и функциональность вашего интернет-магазина, в результате чего ваши страницы будут загружаться слишком медленно. Это может увеличить показатель отказов на вашей странице, поскольку посетители, как правило, покидают веб-сайты, которые загружаются слишком долго или изображения на которых повреждены. Это контрпродуктивно, если вы хотите, чтобы покупатели проводили на вашем сайте больше времени, а не меньше.

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

размер изображения

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

Размер обеспечивает достаточно высокое разрешение, чтобы ваш сайт Shopify выглядел профессионально, что, в свою очередь, поможет вам увеличить продажи. Кроме того, количество пикселей на изображении размером 2048 x 2048 позволяет пользователю увеличивать изображение, когда он хочет рассмотреть его поближе. (Возможности масштабирования начинаются, когда размер изображения составляет 800 x 800 пикселей.)

Фавиконы

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

пример фавиконки

Фавикон должен быть размером 32 х 32 пикселя.

Логотипы

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

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

Ваши логотипы должны быть размером 450 x 250 пикселей.

Изображения для баннеров, популярные изображения в блогах или фоны для всего магазина

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

Здесь вам нужно выбрать изображения размером 1800 x 1000 пикселей.

пример изображения баннера

Всплывающие изображения

Многие бренды предлагают поощрения, такие как бесплатная доставка или скидка 15% при подписке на их рассылку. Shopify настоятельно рекомендует загружать изображения размером 425 x 575 для всплывающих окон новостной рассылки.

пример всплывающего изображения

Фоновое изображение для вашей страницы входа

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

пример изображения страницы входа

Эти изображения должны быть 1600 x 1000.

Избранные рекламные изображения

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

пример продвижения избранного изображения

Галерея изображений

Создаете галереи своих продуктов, чтобы упорядочить их по разным категориям? Загрузите изображения размером 800 x 800 пикселей.

пример изображения галереи

Изображения баннеров слайд-шоу

Некоторые веб-сайты будут иметь слайд-шоу изображений продуктов, доминирующих на их главной странице. Если это стиль темы, который вы выбрали, выбор изображений размером 1600 x 1000 пикселей, вероятно, будет хорошим выбором, но обязательно проверьте свою конкретную тему.

Пример изображения баннера слайд-шоу

Баннеры страницы оформления заказа

Опять же, важно создать полностью брендированный пользовательский интерфейс на каждом этапе пути покупателя. Это включает в себя страницу оформления заказа! Загрузите изображение размером 1800 x 300 с вашим логотипом, чтобы создать баннер на странице оформления заказа.

Пример баннера на странице оформления заказа

Типы изображений для включения в ваш магазин Shopify

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

Это включает:

  • Изображения только продукта, которые часто размещаются на нейтральном или белом фоне. Обычно они используются для основных изображений продукта, которые отображаются при поиске.
пример изображения продукта beardbrand
  • Изображения используемого продукта с богатым фоном. Это может быть женщина, крутящаяся в платье, которое вы продаете, или люди, стоящие возле палатки, которую вы хотите продвигать, на фоне леса. Показ изображения в использовании может помочь людям представить себя, используя его, и предложить ценность.
Пример изображения продукта для костра
  • Фотографии с графическими наложениями, такие как приведенная ниже фотография, на которой используются графика или текст для установления контекста использования или размера или выделения различных функций. Мы можем помочь с этим в Snappa; просто загрузите изображение своего продукта и используйте наши встроенные графические инструменты и инструменты дизайна с перетаскиванием для создания изображений с высокой конверсией.
Пример наложения фонарика anker
  • Графика полностью используется для предоставления информации. Это может включать графику, показывающую три разных варианта, сравнение размеров или вариантов или даже таблицу размеров.
Пример изображения товара в таблице размеров цветов

Shopify Рекомендации по работе с изображениями

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

Используйте миниатюру в одном стиле для всех основных изображений продукта

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

Пример изображения 49-го параллельного кофе

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

Включите различные изображения

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

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

пример разнообразия образа волос

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

Протестируйте, чтобы увидеть, что работает

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

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

пример изображения товара в современном магазине

Существуют инструменты, которые могут помочь в этом, в том числе приложение Neat A/B, которое будет циклически перемещать различные изображения вперед и назад с заданными интервалами, пока вы не получите ответы, которые вам нужны, и посмотрите, что более эффективно. Это может быть разным в каждой отрасли и для каждого бренда, поэтому время, потраченное на проведение тестов, может быть отличным вызовом.

Знайте, какие типы файлов выполняют свою работу

При выборе изображений для вашего магазина Shopify очень важно знать, какой тип файла лучше всего подходит для изображения, которое вы пытаетесь представить. Есть несколько вариантов на выбор, но чаще всего используются следующие форматы: JPG, GIF, PNG, TIFF и BMP.

Что касается формата файла, JPG является наиболее популярным и часто используемым изображением Shopify.

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

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

JPG / JPEG

Файлы JPG/JPEG (Joint Photographic Experts Group) представляют собой сжатые изображения, которые по-прежнему выглядят как высококачественные визуализации, которые отлично подходят для веб-сайтов. При отображении с высоким разрешением и разумным размером файла (в идеале ниже максимального Shopify 4472 x 4472 пикселей) они могут быстро загружаться и отлично выглядеть в вашем интернет-магазине.

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

гифка

GIF («Формат обмена графикой») — это тип растрового изображения (BMP), который позволяет использовать анимацию. Это отличный вариант, если вы хотите добавить изюминку в свой интернет-магазин. Но есть серьезное ограничение, когда дело доходит до этого формата файла. Хотя Shopify позволяет вам использовать GIF-файлы на вашем сайте, он также значительно сжимает файл.

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

PNG

Наряду с JPG изображения PNG («Portable Graphics Format») чрезвычайно распространены среди владельцев сайтов Shopify. Поскольку изображения PNG представляют собой файлы со сжатием данных без потерь, их можно легко уменьшить без ущерба для качества изображения.

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

Единственным недостатком выбора типа файла PNG является то, что файлы изображений обычно больше, чем JPG. Это может создать нагрузку на ваш сайт и привести к тому, что он будет загружаться медленнее, чем должен. Цветовые палитры PNG могут отображаться в 24-битном цвете RGB или в оттенках серого.

Формат PNG отлично подходит для фотографий и изображений, содержащих элементы графического дизайна.

ТИФ / ТИФФ

Обычно файлы TIF («формат изображения с тегами») / TIFF («формат файла изображения с тегами») имеют большой размер, но представляют собой растровую графику, которую можно редактировать в различных приложениях. TIF — это файлы со сжатием данных без потерь, что означает, что их можно уменьшить, сохраняя при этом визуальное качество, такое как JPG.

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

БМП

BMP («битмап») — это растровая графика, которая универсальна и совместима со всеми устройствами. Обычно они не сжимаются, поэтому изображения отображаются в отличном качестве.

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

Вывод

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

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

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