Оптимизация изображений для интернет-магазина: полное руководство

Изображения в электронной коммерции – настоящий катализатор продаж.

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

В этом отношении только видео может сравниться с картинками по эффективности.

Предприниматели используют фотографии товара повсюду:

·         На страницах товаров

·         На страницах категорий

·         На главной странице магазина

·         В сообщениях с брошенной корзиной

·         Для рекламы в социальных сетях

·         В корпоративном блоге

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

Пользователи любят скорость, а Google любит пользователей.

Поисковик №1 – первый критик, кто заинтересован в оптимизации изображений.

В январе 2018 года компания анонсировала, что мобильные поисковые алгоритмы начнут учитывать скорость загрузки веб-страниц уже с июля – через 3 месяца!

Между тем, картинки – это один из важнейших активов любого интернет-магазина.

И все же ими часто пренебрегают, забывая о размерах, качестве и скорости.

Почему так происходит?

Потому что оптимизация изображений – это очередная галочка в бесконечном списке дел.

Потому что ей присваивается низкий приоритет на фоне, скажем, наполнения каталога.

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

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

Зачем нужны изображения для интернет-магазина

Прежде чем приступить к практике, давайте разберемся: зачем все это нужно?

1.      Первое впечатление клиента

Картинка – это первая вещь, которую потенциальный покупатель видит на сайте.

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

Исследование Comprehensive Modern Consumer Shopping Habits Study, проведенное в 2017 году среди американских онлайн-покупателей, дало весьма любопытные результаты:

Что вы хотите видеть на сайте интернет-магазина?

·         Фотографии товара – 78%

·         Подробные обзоры – 69%

·         Сравнение продуктов – 46%

·         Отзывы пользователей – 42%

·         Видео обзор (распаковка) – 30%

·         Онлайн-консультант – 22%

·         Ссылки на соцсети – 9%

Учитывая среднегодовой рост электронной коммерции в 20-25%, успешное внедрение перечисленных элементов принесет вам впечатляющие преимущества и дивиденды!

2.      Картинка стоит тысячи слов

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

Онлайн нельзя «пощупать» вещь, как в традиционном магазине, поэтому фотография стала продолжением витрины. А кто будет покупать товар, который нельзя рассмотреть?

Что вам не нравится в онлайн-торговле?

·         Оплата за доставку – 58%

·         Покупка товара вслепую – 49%

·         Проблемы с возвратом – 34%

·         Ожидание доставки – 34%

·         Нарушение приватности – 29%

·         Проблемы с навигацией по сайту – 21%

·         Ввод платежных данных – 19%

·         Избыток товаров – 10%

·         Плохой поиск – 9%

В подтверждение приводим вторую часть результатов упомянутого исследования Square и BigCommerce, где 49% покупателей жалуются на невозможность посмотреть товар.

3.      Мобильные покупки

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

Пользователь все чаще судит о товаре не по тексту, а по качественным фото.

Четкие и привлекательные образы – залог высоких продаж.

4.      Изображения могут навредить сайту

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

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

·         Ваши изображения загружаются медленно?

·         Вы не добавляете релевантные мета-описания?

·         Посетители быстро покидают страницу?

Если хотя бы на один вопрос ответ «Да» - пересмотрите визуальные элементы!

Во избежание проблем картинка должна соответствовать простым критериям:

·         Профессиональное качество

·         Грамотная поисковая оптимизация

·         Высокая уникальность

·         Разумный объем

Руководство по оптимизации веб-изображений

Оптимизация изображений дает стратегические преимущества в UX и ранжировании.

Это означает больше кликов, больше поискового трафика, больше продаж.

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

1.      Делайте качественные снимки

Успешная электронная коммерция начинается с фотоаппарата.

Вам не обязательно покупать навороченную профессиональную фотокамеру за $3000.

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

·         Цифровой зеркальный фотоаппарат (DSLR) или смартфон. Сегодня у большинства смартфонов есть камера, которой более чем достаточно для получения стандартных фотографий продукта на первых этапах работы интернет-магазина.

·         Источник света. Правильная установка источника света обеспечивает равномерное освещение вашего товара и будет иметь огромное значение для качества снимка. Начинающим фотографам проще работать с естественным источником света.

·         Белый фон для фотографирования. Установка фона – белоснежной ткани или рулона бумаги – поможет равномерно распределить освещение и упросит редактирование.

·         Устойчивая поверхность. Если вы делаете серию снимков товара, наличие устойчивой поверхности и штатива просто необходимо. Занимаясь продажей мелких вещей (монеты, ювелирные украшения), подумайте о рельсах для микрофотографии.

2.      Покажите продукт под разными углами

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

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

Разные снимки товара демонстрируют разные аспекты:

·         Фотографии на дальней дистанции показывают вещь на модели, помогая клиенту представить ее в различных жизненных ситуациях (применение)

·         Фотографии на средней дистанции акцентируют внимание на общем виде товара

·         Снимки с увеличением демонстрируют качество изделия (ткань, пошив)

3.      Используйте белый фон для фотографирования

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

·         Товары выглядят более привлекательно

·         Вы можете составлять серии однотипных снимков

·         Вы экономите деньги и время на редактировании

·         Вы можете легко заменять фон любой фотографии

·         Многие площадки сегодня требуют белый фон

·         На белом проще сравнивать вещи

Чтобы вручную заменить фон изображения, вы можете воспользоваться стандартными программами вроде Photoshop или Pixlr.

4.      Выбирайте подходящий размер

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

·         Слишком тяжелые картинки замедляют загрузку и повышают отказы

·         Слишком маленькие картинки не внушают доверия покупателям

Для оценки размеров изображений ориентируйтесь на пиксели.

Камера вашего iPhone имеет разрешение около 12 мегапикселей, то есть сделанные ею фотоснимки состоят из 12 000 000 условных точек, или 3000 х 4000 пикселей.

Много это или мало? Для сайтов электронной коммерции это с головой.

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

Кстати, делая снимки «квадратными», вы способствуете их корректному отображению.

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

5.      Выбирайте формат для быстрой загрузки

При сохранении файла проще выбрать формат по умолчанию, но за привычными расширениями gif, png и jpeg стоят существенные отличия. Каждый из этих форматов обладает своими плюсами и минусами, определяющими сферу его использования:

·         Файлы GIF ниже по качеству, но и занимают меньше места. Если вам нужно создать изображение специально для небольших значков или миниатюр, стоит использовать GIF. Это также единственный формат, который поддерживает анимацию (не забудьте APNG). По мере увеличения размера обработка цветов GIF становится менее эффективной.

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

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

6.      Экспериментируйте с качеством изображений

В большинстве случаев интернет-магазины используют формат JPEG.

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

Когда не нужно использовать JPEG на сайте:

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

·         Когда картинка – это в основном линии, значки или резкие контуры: сжатие JPEG может размыть линию между изображением и фоном, сделав контраст менее отчетливым.

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

7.      Оптимизируйте объем

Типичный размер файла фотографий iPhone 7 составляет примерно 3 МБ, что соответствует тридцати веб-изображениям оптимального размера! Теперь представьте, что в интернет-магазине появилась галерея из 10-15 снимков такого размера. Начинаете понимать, почему размер решает?

Отрегулировать уровень сжатия файлов JPEG несложно – для этого используются многочисленные платные графические редакторы и бесплатные онлайн-сервисы. Например, оптимизатор TinyJPG, который производит интеллектуальное сжатие снимков в JPG и PNG.

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

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

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

Вот несколько вещей, которые стоит сделать перед публикацией картинок на сайте:

1.      Используйте информативные имена файлов

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

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

2.      Включите alt изображений

Alt текст представляет собой альтернативное описание картинки.

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

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

3.      Окружите картинку контентом

Релевантное окружение графического объекта необходимо и людям, и машинам.

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

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

4.      Продумывайте размер и положение

Стремитесь максимально усилить пользовательский опыт:

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

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

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

5.      Настройте Open Graph для социальных сетей