Фотографии товаров принято обсуждать как дело вкуса. Какой фон, какой ракурс, подходит ли к бренду.
Но это прежде всего не вопрос вкуса. Изображения — самое большое, что есть почти на любой странице товара, а значит, главная причина, по которой страница тормозит. Это единственная замена возможности взять вещь в руки, а значит, главная причина, по которой люди покупают или не покупают. И всё чаще их не разглядывают, а читают — поисковики, ассистенты и каждый клиент, который пользуется скринридером.
Три задачи, один ресурс — и именно эту статью бюджета обычно режут первой, когда денег становится меньше.
Для чего нужна фотография товара
В интернете фотография делает ту работу, которую в магазине делает возможность взять вещь в руки. Значит, стандарт здесь не «красиво». Стандарт — «отвечает на вопрос, который иначе остановил бы покупку».
Эти вопросы скучно одинаковы во всех категориях:
- Какого он на самом деле размера?
- Из какого материала — если посмотреть вблизи?
- Как он выглядит сбоку и сзади?
- Как он выглядит в использовании, в том масштабе, в каком им пользуется человек?
- Что именно лежит в коробке?
- Совпадает ли цвет на моём экране с цветом вещи?
Одна хорошо освещённая главная фотография на белом фоне не отвечает ни на один из них. Это миниатюра, и именно потому, что её считают страницей товара, столько магазинов отвечают на эти вопросы уже в процессе возврата.
Список кадров, за который стоит заплатить
Для большинства физических товаров — шесть изображений:
- Главный кадр на однотонном фоне — изображение для каталога, то, что появляется в списках и в результатах поиска.
- Ориентир для масштаба — рядом с рукой, с привычным предметом или на человеке. Самый недоснятый кадр в электронной коммерции — и тот, что предотвращает больше всего возвратов.
- Деталь крупным планом — фактура, строчка, отделка, то, чем оправдана цена.
- Другие стороны — вид сзади и в профиль. Если их нет, это выглядит как попытка что-то скрыть.
- В контексте — вещь в деле, там, где ею пользуются.
- Что приходит покупателю — всё содержимое коробки, разложенное на столе.
Если бюджет заставляет сокращать, оставьте 1, 2 и 3. Масштаб и фактура — это именно то, что отнимает экран.
Половина, которая про скорость
А вот часть, которая вообще не про фотографию.
На типичной странице товара главное изображение — это и есть самый большой элемент, который браузеру нужно отрисовать. Поэтому именно оно определяет, насколько быстрой кажется страница, а скорость загрузки — это переменная в выручке, а не техническая оценка. Подробно мы разбирали это в статье «Скорость — это ценовое решение».
А значит, несжатая фотография на 4 МБ — не красивый ресурс. Это скидка, которую вы дарите каждому, кто зашёл с телефона.
Четыре правила, и ни одно из них не стоит качества, если всё сделать как следует:
Отдавайте современные форматы. WebP или AVIF с разумным качеством и запасным вариантом. Экономия по сравнению с JPEG большая, а на тех размерах, на которых люди реально смотрят картинки, разница на глаз незаметна.
Отдавайте тот размер, который показывается. Оригинал шириной 3000 пикселей, отправленный на телефон шириной 390 пикселей, — это 90% байтов впустую. Несколько размеров, а выбирает браузер.
Первое изображение загружайте сразу, всё остальное — лениво. Главный кадр должен начать скачиваться немедленно. Изображения галереи ниже не должны с ним конкурировать.
Резервируйте место. Ширина и высота у каждого изображения, чтобы страница не прыгала по мере появления картинок. Контент, который уезжает из-под пальца, — это настоящая проблема удобства, и её можно полностью избежать.
Один пример того, насколько это важно, из нашей собственной работы: в Finkonkurs мы заменили веб-шрифт иконок Material Symbols на 3,8 МБ встроенными SVG. Это были иконки, а не фотографии, — и всё равно несколько мегабайт страницы. Изображения обычно весят больше.
Часть, которую читает машина
У каждого изображения должен быть альтернативный текст (alt), и стоит понимать, что теперь он решает не одну задачу, а три.
Для незрячего покупателя это и есть изображение. Это изначальное назначение, и одного его уже достаточно. В ЕС и Великобритании это к тому же юридическая обязанность, а не просто хорошая практика, — см. статью «Счёт за доступность пришёл».
Для поисковика это изображение. Картинки сопоставляются с запросами по их описанию.
Всё чаще это изображение и для ИИ-ассистента, который пересказывает ваш товар покупателю, так и не открывшему вашу страницу. Когда модель читает ваш каталог, альтернативный текст — это значительная часть того, что она знает о внешнем виде товара.
Как его писать
Описывайте вещь, а не файл. «Синяя керамическая кружка, 350 мл, матовая, вид сбоку» — а не «IMG_4471» и не «кружка».
Не начинайте с «изображение…». Это и так изображение.
Не набивайте ключевыми словами. Поисковику это кажется спамом, а слушать такое по-настоящему неприятно.
Оставляйте пустым, если изображение декоративное. Пустой alt="" говорит скринридеру пропустить картинку — и это правильно для фонового украшения и гораздо лучше, чем заставлять человека слушать описание градиента.
Два принципа, которых мы здесь придерживаемся, пришли из нашей работы с доступностью и извлечением данных, и они применимы везде. Legible создаёт альтернативный текст и восстанавливает таблицы из PDF и изображений, и там нечитаемые значения остаются пустыми (null) и помечаются, а не угадываются — потому что уверенно неверное значение хуже, чем никакого. RecipeReel читает текст с экрана в кулинарных видео, и там количество, которое нельзя определить, остаётся пустым, а не выдумывается.
Примените это к своему каталогу: альтернативный текст, описывающий цвет, в котором вы не уверены, хуже более короткого, но правдивого. Тем более что покупатель, который им пользуется, проверить не может.
Единообразие, благодаря которому каталог похож на магазин
Даже хорошие по отдельности фотографии дают плохой каталог, если их снимали в разное время разные люди.
Один фон, одна схема света, одно соотношение сторон кадра для всего в категории. Сетка товаров с разнобойными изображениями выглядит как маркетплейс не связанных друг с другом продавцов, а это один из самых сильных сигналов, по которым люди решают, настоящий ли перед ними магазин.
Одно соотношение сторон, и строго. Это самая лёгкая победа из всех. Смешанные пропорции дают рваную сетку или искажённые изображения, и ни то ни другое не исправить в CSS, не обрезав что-нибудь неудачно.
Правило именования файлов — чтобы никому не приходилось гадать, какой из одиннадцати файлов главный.
Это ещё и вопрос данных каталога, а не только фотографии. Плохие или незаполненные атрибуты меняют то, что люди покупают, подталкивая их к единственному атрибуту, который заполнен всегда, — цене. Мы разбирали это отдельно в статье «Ваш каталог — это и есть продукт», а изображения — самый заметный атрибут из всех.
Честный бюджет
Неудобная арифметика: для магазина с несколькими сотнями товаров съёмка часто стоит дороже сайта. Наши интернет-магазины стоят от $499, срок — от одной до пяти недель. Профессиональная съёмка 200 товаров, сделанная как следует, по шесть кадров на каждый, обойдётся дороже.
Именно поэтому она должна быть в брифе, а не обнаруживаться на пятой неделе. Три честных варианта:
Снимать как следует. Правильно для товаров, где внешний вид и есть решение о покупке.
Снимать самим, но системно. Окно, белый фон, телефон на штативе, одна и та же схема для всего подряд. Единообразие важнее техники, и дисциплинированная любительская серия лучше разношёрстной профессиональной.
Брать фото поставщика — и понимать цену. Быстро и бесплатно, но ваша страница теперь выглядит так же, как у всех остальных продавцов этого товара. Приемлемо для массовых товаров и губительно, если вы пытаетесь обосновать цену выше, чем у конкурента с той же фотографией.
Что бы вы ни выбрали, внесите это в объём работ с датой. Магазин, который ждёт фотографий, — самая частая причина, по которой проект с фиксированной ценой стоит на месте. Поэтому мы отдельно выносим этот пункт в статье «Бриф, после которого вам назовут настоящую цену».
Проверка за десять минут
В своём магазине, с телефона, через мобильный интернет:
- Засеките, сколько времени появляется главное изображение товара.
- Проверьте его размер и формат. Всё, что больше нескольких сотен килобайт для фото товара, требует работы.
- Посчитайте изображения у товара. Есть ответ про масштаб? Про фактуру?
- Пролистайте сетку товаров. У изображений одинаковые пропорции, фон, кадрирование?
- Прочитайте альтернативный текст у пяти товаров. Позволил бы он купить, не видя картинки?
- Проверьте, прыгает ли страница по мере загрузки изображений.
Всё это исправляется без редизайна, а вместе двигает и цифру скорости, и цифру продаж.
Расскажите, что вам нужно. В ответ вы получите фиксированную цену и дату сдачи — бесплатно и без обязательств продолжать.
Частые вопросы
Сколько изображений нужно на один товар?
Пять-шесть для большинства физических товаров. Меньше трёх — и вы оставляете вопросы без ответа; больше восьми — и люди перестают смотреть. Количество важнее не само по себе, а как охват: масштаб, фактура, другие стороны, вещь в деле.
Что лучше — фото в интерьере или на однотонном фоне?
И то и другое — для разных задач. Однотонный фон — это изображение для каталога и сравнения, ему место в сетке и в результатах поиска. Фото в жизни отвечает на вопрос «каково этим владеть». В магазине, где только лайфстайл-фото, трудно выбирать; в магазине, где только однотонный фон, трудно захотеть.
Стоит ли делать видео?
Для товаров, где вопрос в движении или масштабе, — одежда, мебель, всё механическое — короткий ролик ответит на большее, чем ещё одна фотография. Делайте его коротким, не включайте автовоспроизведение со звуком и не давайте ему блокировать страницу: тяжёлое видео на странице товара сводит на нет всю работу над скоростью, о которой шла речь выше. Задайте ему обложку, чтобы, пока оно загружается, на его месте не было пустого прямоугольника.
Можно ли использовать сгенерированные ИИ изображения товаров?
Для самих товаров — нет. Покупатель покупает вещь с картинки, и любое расхождение между ними — это возврат, спор или претензия о введении в заблуждение. Для фонов, композитных сцен и декоративного окружения это такой же инструмент, как любой другой, — при условии, что сам товар настоящий и показан точно.
А изображения с текстом?
Избегайте их для всего важного. Текст на картинке не прочтёт скринридер, его нельзя перевести, по нему нельзя искать, и на телефоне он не перестраивается под экран. Если утверждение настолько важно, что его нужно поставить на страницу, поставьте его текстом рядом с картинкой.
