Комплексное руководство по оптимизации изображений, видео и 3D-моделей продуктов Shopify

В этой статье рассматривается настройка и загрузка изображений продуктов на Shopify. После обновления системы раздел для загрузки изображений продуктов был переименован в «Медиа», что означает, что теперь вы можете загружать не только изображения продуктов, но и видео и 3D-модели, предлагая больше способов демонстрации продуктов. Однако конечная цель остается прежней: конвертация трафика в заказы.

Рекомендуемые форматы изображений от Shopify – JPG или PNG

Shopify поддерживает большинство форматов файлов изображений, из которых рекомендуются PNG, JPEG и GIF. Также поддерживаются другие форматы изображений, такие как PSD, TIFF, BMP, HEIC и WebP. Ниже приведены рекомендуемые Shopify форматы изображений продуктов:

Изображения в формате JPG

Изображения JPEG/JPG подходят для отображения относительно насыщенных и сложных статических изображений, таких как сфотографированные изображения. Изображения JPEG/JPG насыщены цветом и могут поддерживать качество изображения, обеспечивая при этом эффект отображения, то есть сжатие изображений без потерь. Это обеспечивает как эффект отображения изображения, так и скорость открытия веб-сайта за счет уменьшения размера файла. При том же размере файла цвета изображений JPG значительно ярче, чем GIF и PNG.

Поэтому и Shopify, и автор «10 Must Know Image Optimization Tips» рассматривают формат изображений JPG как первый выбор для изображений продуктов на независимых сайтах электронной коммерции. «Лучшим типом файла для изображений продуктов является .jpg». GIF-изображений следует избегать по возможности. Однако при необходимости вы можете создать несколько GIF-анимаций для вставки в описания продуктов, чтобы увеличить коэффициент конверсии заказов, при условии, что вы контролируете размер GIF-изображений, чтобы обеспечить хорошую производительность сайта.

Поэтому изображения JPEG/JPG подходят для изображений продуктов, баннеров веб-сайтов, изображений карусельного типа, страниц веб-сайтов и изображений записей в блогах.

Изображения в формате PNG

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

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

Например, если мы откроем любую страницу веб-сайта Shopify с помощью браузера Google Chrome, Shopify автоматически заменит все изображения формата JPG на этой странице на изображения формата «WebP». Если вы посетите ту же страницу с помощью браузера, который не поддерживает формат «WebP», например браузера IE, все изображения на этой странице по-прежнему будут в формате JPG. Причина, по которой Shopify автоматически конвертирует изображения в формат JPG или WebP, заключается в том, что эти типы файлов могут достичь оптимизации с точки зрения цветопередачи и размера файла, то есть скорости открытия. Весь процесс выполняется Shopify, и нам не нужно ничего делать.

WebP — это формат изображений, разработанный Google для ускорения загрузки изображений. Сжатый размер изображения составляет около 2/3 от JPEG, что может сэкономить много пропускной способности сервера и пространства данных. Он может уменьшить размер ресурсов загрузки изображений, сэкономить ресурсы пользовательского трафика и сократить ресурсы трафика сервера. Поскольку это сервис, разработанный Google, его совместимость не столь всеобъемлюща. Однако нам не нужно беспокоиться об этом, так как Shopify автоматически решит, отображать ли изображения в формате JPG или Webp, на основе среды браузера клиента.

Мы можем попробовать открыть страницу нашего продукта с помощью браузера Google Chrome, а затем загрузить изображение. Обычно формат сохраненного файла по умолчанию — WebP, даже если формат загруженного нами изображения — JPG или PNG.

Рекомендуемые Shopify размеры, габариты и пропорции изображения товара:

• Идеальный размер изображения товара — 2048 x 2048 пикселей.
• Идеальный размер изображения не должен превышать 200 КБ.

Не обязательно, чтобы размер изображения был квадратным. Например, все изображения продуктов на сайте Fashion Nova прямоугольные с постоянным соотношением сторон. Этот эффект отображения может быть лучше, особенно для одежды, так как она может заполнить весь экран мобильного телефона. Когда вы открываете ссылку на продукт, на весь экран отображается изображение продукта, что создает гораздо лучшее визуальное впечатление.

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

Ограничения Shopify на файлы изображений

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

• Предел размера в пикселях: 4472 х 4472, 20 миллионов пикселей (произведение ширины и высоты изображения в пикселях)
• Ограничение на размер файла: 20 МБ
• Количество изображений для одного товара не может превышать 250 изображений.
• Shopify рекомендует размеры изображения товара 2048 х 2048 пиксели.

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

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

Как контролировать размер файла изображения, сохраняя при этом максимальное качество изображения

Вы, возможно, слышали, что если веб-сайт не открывается в течение 3 секунд на настольном компьютере, многие люди решат уйти; на мобильных устройствах это время увеличивается до 5 секунд. Согласно исследованию данных Amazon, если их веб-сайт загружается на 1 секунду медленнее, они теряют около $1,6 млрд продаж в год. В алгоритме ранжирования Google скорость загрузки веб-сайта также является одним из важных факторов для достижения более высокого рейтинга.

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

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

• Tinypng: https://tinypng.com/
• Компрессор.io: https://compressor.io/compress
• Kraken.io: https://kraken.io/web-interface
• Optimizilla: https://optimizilla.com/

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

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

• JPEG: от 65 до 90
• PNG: 90
• GIF: не сжатый

Конкретное разрешение изображения можно просмотреть и настроить с помощью PS (сочетание клавиш Ctrl+Alt+I). Как показано на рисунке ниже, разрешение «72» на рисунке — это значение DPI изображения.

Требования к изображениям товаров в магазине Shopify и оптимизация изображений
Для файлов формата JPEG Shopify решит, сжимать ли изображение, на основе исходного разрешения изображения. Например, если разрешение загружаемого нами изображения больше 86, а любая из сторон изображения больше или равна 1024px, то Shopify сожмет изображение, и разрешение сжатого изображения будет 85.

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

Оригинальное разрешение	Размер изображения	Сжатое разрешение
86 или выше	Ширина или высота изображения >= 1024px	85
65 – 85	Ширина или высота изображения >= 1024px	Оригинальное качество
64 или ниже	Ширина или высота изображения >= 1024px	65
76 или выше	Ширина и высота изображения < 1024 пикселей	75
65 – 75	Ширина и высота изображения < 1024 пикселей	Оригинальное качество
64 или ниже	Ширина и высота изображения < 1024 пикселей	65

Выбор изображений сцен в качестве основных изображений для продуктов Shopify

Что касается того, как делать хорошие фотографии продуктов, поскольку контент слишком профессиональный, в настоящее время я не могу объяснить это подробно. Однако, создание хороших фотографий продуктов оказывает очень положительное и важное влияние на нас для управления независимыми веб-сайтами и повышения коэффициентов конверсии веб-сайтов. Рекомендуется, чтобы каждый спрашивал Google больше. Есть такая поговорка: в электронной коммерции на самом деле продаются изображения. Но я знаю, что для независимых веб-сайтов вам не нужно соответствовать требованиям Amazon к изображениям продуктов. Основное изображение должно быть не белым фоновым изображением, а изображением сцены продукта.

Фоторедактор iFoto — это передовой инструмент для редактирования изображений, который использует передовые технологии искусственного интеллекта для эффективного повышения разрешения изображений, обеспечивая высококачественные результаты как для делового, так и личного использования. Он предлагает ряд практических функций, таких как удаление фона, улучшение фотографий, очистка изображений и настройка цвета, что делает его идеальным для улучшения изображений продуктов для магазинов Shopify. С помощью iFoto Photo Editor обновление страниц с информацией о продуктах становится простым, что приводит к повышению вовлеченности клиентов, улучшению показателей кликабельности (CTR) и повышению рейтинга на Shopify.

В дополнение к функциям, ориентированным на Shopify, iFoto Photo Editor доступен как веб-платформа и как приложения iOS/Android, обеспечивая пользователям бесперебойный опыт редактирования изображений в различных сценариях. Известный как один из лучших доступных инструментов для редактирования изображений на базе ИИ, iFoto Photo Editor заслужил безупречную репутацию и может похвастаться большой базой лояльных пользователей по всему миру.

Ключевая особенность:

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

Для экстремального примера, как показано на рисунке ниже, для велосипедного фонаря Revolights, левое изображение — это изображение продукта, а правое изображение — изображение сцены его использования. Какое изображение более привлекательно для нас?

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

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

Обычно после того, как мы делаем фотографии с помощью камеры/телефона, импортируем фотографии на компьютер, и имя файла фотографии будет строкой буквенно-цифровых символов плюс расширение файла. Например, DCMIMAGE10.jpg. Первый шаг по оптимизации изображения продукта перед его загрузкой в Shopify — это изменение имени файла изображения на компьютере. Например, измените его на: 2012-Ford-Mustang-LX-Red.jpg.

Почему? Как упоминалось выше, поисковые системы не только сканируют текст на вашей веб-странице, но и ищут ключевые слова в именах файлов изображений. Если изображение по умолчанию называется DCMIMAGE10.jpg, поисковая система не может знать, какой контент находится на этом изображении. Если оно называется 2012-Ford-Mustang-LX-Red.jpg, поисковая система проиндексирует ключевые слова в имени изображения.

Итак, какое из этих трех названий лучше: 2012 Red Ford Mustang LX; Ford Mustang LX Red 2012; Red Ford Mustang LX 2012? По моему мнению, они одинаковы, но автор статьи предлагает посмотреть, какой метод сортировки ключевых слов используют посетители на основе данных анализа веб-сайта, а затем переименовать и повторно загрузить изображение. Точное соответствие поисковым запросам клиентов, конечно, лучше, но я думаю, что если изображение продукта можно точно описать, а порядок слов логичен, этого достаточно.

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

Tips: When naming images, use “-” instead of spaces between words, otherwise, spaces will be replaced by “%20” after the image is uploaded to the server. For example, “2012 Ford Mustang LX Red.jpg” will become “2012%20Ford%20Mustang%20LX%20Red.jpg”.

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

Заполнение атрибута ALT для изображений товаров Shopify

ALT — это аббревиатура английского слова «Alternate», что означает обмен или замена. Атрибут ALT изображения является необходимым атрибутом изображения. Он используется для замены изображения, которое будет отображаться в браузере, когда изображение не может быть отображено или пользователь отключает отображение изображения. Предположим, что изображение не может быть просмотрено по следующим причинам:

1. Низкая скорость сети;
2. Ошибка в атрибуте src;
3. Браузер отключает изображения;
4. Пользователи используют программы чтения с экрана.

При добавлении изображения значение атрибута ALT изображения определяется как «Тюльпан». Когда пользователи открывают браузер для просмотра, нормальным отображением является изображение тюльпана. Если изображение не может быть открыто из-за проблем со скоростью сети, содержимое, отображаемое в позиции изображения, будет: тюльпан.

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

Помимо помощи пользователям в понимании содержания изображения, когда изображение не может быть открыто, еще одна важная функция ALT заключается в том, чтобы помочь поисковым системам лучше понять содержание изображения. Ключевые слова в ALT могут помочь поисковым системам понять содержание изображения, так что ваше изображение может иметь более высокий рейтинг в поисковых системах, особенно в поисковых системах изображений, таких как Google Image. Поэтому, когда мы говорим об оптимизации SEO изображений, нам нужно добавить теги Alt к каждому изображению продукта.

В настоящее время популярной тенденцией при отображении изображений продукта является получение некоторых подробных снимков продукта с разных ракурсов. Поэтому при заполнении атрибута Alt изображения попробуйте заполнить разные теги Alt для каждого изображения. Например, для изображения 2012-Ford-Mustang-LX-Red-Leather-Interior-Trim.jpg используйте тег Alt: alt = «2012 Ford Mustang LX Red Leather Interior Trim». Для другого изображения 2012-Ford-Mustang-LX-Red-Rear-View-Air-Spoiler.jpg используйте тег Alt: alt = «2012 Ford Mustang LX Red Rear View Air Spoiler».

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

Официальные рекомендации Google по оптимизации изображений продуктов

Вот несколько предложений с официального сайта Google по оптимизации изображений для достижения более высоких рейтингов (выдержки из некоторых предложений, которые я лично считаю наиболее важными). Полную версию оригинального текста можно найти по адресу support.google.com/webmasters/answer/114016.

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

• Предоставьте соответствующую информацию: Убедитесь, что ваш визуальный контент соответствует теме веб-страницы, на которой он находится. Мы рекомендуем отображать только те изображения, которые добавляют оригинальной ценности веб-странице. Мы настоятельно не рекомендуем использовать на веб-страницах совершенно неоригинальные изображения и текстовый контент.
• Оптимизировать размещение: Размещайте изображения как можно ближе к соответствующему тексту. При необходимости рассмотрите возможность размещения наиболее важных изображений в верхней части веб-страницы.
• Избегайте встраивания важного текста в изображения: Избегайте встраивания текста (особенно важных текстовых элементов, таких как заголовки веб-страниц и пункты меню) в изображения, поскольку не все пользователи могут получить доступ к такому тексту (и инструменты перевода веб-страниц не работают с изображениями). Чтобы сделать ваш контент доступным для как можно большего числа людей, используйте формат HTML для текста и предоставляйте альтернативный текст для изображений.
• Создавайте качественные, насыщенные информацией веб-сайты: Для Google Images высококачественный контент веб-страницы так же важен, как и визуальный контент — он может предоставить справочную информацию и привлечь больше кликов от пользователей, выполняющих поиск. Контент веб-страницы может быть использован для создания текстового резюме для изображений, и Google учитывает качество соответствующего контента веб-страницы при ранжировании изображений.
• Создавайте веб-сайты, доступные на различных устройствах: Пользователи чаще используют мобильные устройства для поиска в Google Images, чем настольные устройства. Поэтому необходимо разработать веб-сайт, подходящий для всех типов и размеров устройств. Используйте инструменты тестирования совместимости с мобильными устройствами, чтобы проверить, как ваша веб-страница работает на мобильных устройствах, и получить обратную связь о том, какой контент необходимо исправить.
• Создайте хорошую структуру URL для изображений: Google использует пути URL и имена файлов для понимания ваших изображений. Мы рекомендуем хорошо организовать содержимое изображений, чтобы сделать структуру URL логичной.

Измените основное изображение страницы продукта Shopify

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

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

Загрузка видео о продуктах в Shopify

Загружайте видео в Shopify или встраивайте видео YouTube/Vimeo

Мы можем загружать видео напрямую в бэкенд Shopify или сначала загружать видео на YouTube или Vimeo, а затем добавлять видео в бэкенд Shopify встроенным способом. Я провел простой тест, который заключается в загрузке видео размером около 15 МБ на Shopify и YouTube соответственно, а затем протестировал скорость открытия двух страниц с помощью Webpagetest и PageSpeedInsight без изменения источника видео. Вывод — в принципе, разницы нет.

Хотя загруженное нами видео весит 15 МБ, когда клиенты открывают страницу, загружается только миниатюра видео, а не весь видеофайл. Только когда клиент нажимает кнопку воспроизведения, система начинает загрузку и воспроизведение видео.

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

• Продолжительность видео: до 10 минут
• Размер видео: до 1 ГБ
• Разрешение видео: до 4K (4096 x 2160 пикселей)
• Типы видеофайлов: .mp4 или .mov

Что касается разрешения видео, то приемлемым является выбор 480P, 720P, 1080P или 4K. Чем выше разрешение видео, тем больше размер файла. Однако, когда клиенты смотрят видео, если клиент поддерживает настройку разрешения, система автоматически решит, какое разрешение воспроизводить, основываясь на скорости сети клиента. Например, если мы загружаем видео 1080P, клиенты с медленной скоростью сети могут автоматически воспроизводить видео 480P, в то время как клиенты с быстрой скоростью сети могут автоматически воспроизводить видео 1080P.

Если мы загружаем видео на YouTube или Vimeo, таких ограничений нет, но загружаемое нами видео должно соответствовать правилам YouTube или Vimeo.

Измените миниатюру видео продукта Shopify

Аналогично изменению содержимого тега ALT изображений продукта, щелкните видео на странице редактирования продукта, щелкните кнопку параметров справа от кнопки загрузки во всплывающем окне редактирования видео, а затем щелкните кнопку «Заменить миниатюру», чтобы загрузить собственную миниатюру видео. Обратите внимание, что размер миниатюры также следует контролировать. Обеспечивая четкость изображения, постарайтесь, чтобы он не превышал 200 КБ, чем меньше, тем лучше. Файл слишком большого размера повлияет на скорость загрузки страницы веб-сайта.

Использование YouTube или Vimeo

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

Бесплатная версия Vimeo имеет ограниченную поддержку видео и ограниченные настройки стиля проигрывателя. Если позволяют условия, рассмотрите возможность использования платной версии.

Загрузка 3D-моделей товаров в Shopify

По сравнению с изображениями и видео, 3D-модели продуктов могут показать клиентам больше информации и деталей о продукте. Shopify поддерживает типы файлов 3D-моделей GLB и USDZ, с размером файла не более 500 МБ. Если файл 3D-модели больше 15 МБ, Shopify оптимизирует структуру и текстуру модели, чтобы упаковать 3D-файл за более короткое время.

Я загрузил файл GLB размером 5 МБ онлайн (sketchfab.com). Я проверил каскадный поток загрузки страницы в WebPageSpeed, и, как и в видео, страница загрузила только миниатюру 3D-модели, автоматически сгенерированной системой, поэтому, хотя файл GLB большой, он не оказывает особого влияния на скорость открытия веб-страницы. Только когда клиенты нажимают кнопку обзора на модели, система начинает загрузку и загрузку этого файла размером 5 МБ на страницу.

В дополнение к свободной замене миниатюр, таких как видео, мы также можем настроить яркость, цвет фона, перспективу по умолчанию и среду освещения 3D-модели через кнопку «Редактировать файл». Функция довольно мощная.

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

Я пока не использовал 3D-модели. Те, кому интересно, могут зайти на рынок Shopify Experts или Fiverr, чтобы найти поставщиков услуг для расчета стоимости и примерно узнать, сколько стоит изготовление 3D-моделей их продуктов, если это вписывается в бюджет, то стоит вложиться.