Главная/Блог/Дизайн и юзабилити/Фотографии товаров: требования и практические советы

Фотографии товаров: требования и практические советы

Дизайн и юзабилити9 мин чтения · Klaxon Studio

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

Почему фото товара так важны

Для большинства покупателей изображение — главный источник информации о товаре. Они смотрят на снимки раньше, чем читают описание, а часто вообще не читают его, если фото убедило. Качественные фотографии снижают неопределённость: человек видит цвет, фактуру, размер, детали, и ему проще принять решение. Плохие снимки вызывают подозрения, особенно если они тёмные, размытые, снятые на фоне чьей-то кухни или «украденные» из каталога производителя.

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

Какие кадры нужны для карточки товара

Один снимок на товар — это минимум, который почти всегда недостаточен. Лучше продумать набор кадров, который отвечает на типичные вопросы покупателя.

Главное фото

Товар целиком на чистом фоне, в лучшем ракурсе. Именно оно появляется в каталоге, поиске и корзине.

Дополнительные ракурсы

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

Детали

Крупным планом материал, швы, фурнитура, разъёмы, этикетка, упаковка. Здесь видно качество.

Масштаб

Фото рядом с привычным предметом или в руке помогает понять реальный размер.

В использовании

Одежда на модели, мебель в интерьере, прибор в работе. Показывает товар в жизни.

Комплектация

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

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

Технические требования

Размер и пропорции

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

Формат файлов

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

Вес и скорость

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

Единый фон и цвет

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

ПараметрРекомендацияПочему важно
ПропорцииОдин формат для всего каталогаРовная сетка карточек без прыжков высоты
Сторона изображенияОт одной до полутора тысяч пикселей, с запасом для увеличенияЧёткость на больших и экранах высокой плотности
Вес файлаОриентир до нескольких сотен килобайтБыстрая загрузка на мобильных сетях
ФонОднородный светлыйЕдиный вид каталога, соответствие требованиям площадок
Отступы вокруг товараОдинаковые поля со всех сторонТовары выглядят сопоставимо по размеру
Название файлаПонятное, латиницей, с описанием товараУдобство работы и польза для поиска по картинкам

Как снимать: практика без дорогой студии

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

Свет

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

Фон и поверхность

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

Камера и штатив

Современные смартфоны вполне справляются с каталожной съёмкой. Главное — штатив или опора, чтобы кадры получались одинаково выстроенными, а картинка была чёткой. Камеру выставляйте на уровне центра предмета, чтобы избежать искажений перспективы. Не используйте цифровое приближение: лучше подойти ближе или обрезать кадр позже.

Баланс белого и цвет

Цвет — один из главных источников возвратов. Настройте баланс белого по нейтральной серой или белой карте и держите одинаковые настройки в серии. Если есть возможность, периодически сравнивайте снимок с реальным предметом на откалиброванном мониторе. Не перенасыщайте цвета при обработке ради «сочности»: покупатель получит товар скромнее картинки.

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

Обработка снимков

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

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

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

Пошаговый процесс

01

Снять и отобрать

Сделайте с запасом, затем выберите лучшие кадры по резкости, цвету и композиции.

02

Обработать

Скорректируйте экспозицию и цвет, обрежьте по единому формату, уберите дефекты.

03

Сжать

Экспортируйте в подходящий формат, добейтесь разумного веса без заметной потери качества.

04

Назвать файлы

Дайте понятные имена латиницей: тип товара, модель, номер ракурса.

05

Загрузить и проверить

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

Описания для поиска и доступности

У каждого изображения должен быть альтернативный текст, короткое описание того, что на нём изображено. Он помогает людям с нарушениями зрения, показывается при сбое загрузки и используется поисковыми системами. Пишите по существу: «Кроссовки женские белые, вид сбоку», а не набор ключевых слов. Для главного снимка включайте название товара, для остальных — ракурс или деталь.

Фото и поисковое продвижение

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

Видео, 360 градусов и дополненная демонстрация

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

Типичные ошибки

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

Особенности по категориям

Одежда и обувь

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

Мебель и крупные предметы

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

Электроника и техника

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

Еда и косметика

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

Украшения и мелкие предметы

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

Сколько фотографий нужно на один товар?

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

Можно ли использовать фотографии с сайта поставщика?

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

Нужен ли водяной знак?

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

Итоги

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

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

Читайте также

Дизайн и юзабилити

Прототипирование: зачем нужен этап до дизайна

Многие проекты начинаются с фразы «давайте сразу нарисуем дизайн». Выглядит логично: заказчик хочет увидеть картинку, дизайнер хочет показать, на что…

10 мин чтения
Дизайн и юзабилити

UI-kit и дизайн-система для небольшого проекта

Слова «дизайн-система» и «UI-kit» ассоциируются с крупными продуктами и командами из десятков дизайнеров. Но потребность в единых правилах оформления…

9 мин чтения
Дизайн и юзабилити

Доступность сайта: как сделать его удобным для всех

Доступный сайт — это сайт, которым может пользоваться любой человек: с плохим зрением, с травмой руки, с устаревшим телефоном, на ярком солнце или в…

9 мин чтения