В онлайн-магазине косметики нельзя понюхать крем, оценить текстуру или примерить помаду. Всё это заменяют изображения. Если они разного размера, идут вразнобой и не отвечают на простые вопросы, покупатель уходит искать ответы в другом месте. Ниже описано, как выстроить фотографии на сайте, чтобы они работали как витрина.
Какие кадры нужны в карточке и в каком порядке
Порядок важнее количества. Первый кадр показывается в каталоге, в подборках и в поиске по сайту, поэтому он должен быть самым понятным. Условный пример галереи для карточки «Увлажняющий крем для лица, 50 мл»:
- 1-й кадр: упаковка на светлом нейтральном фоне, без лишних предметов;
- 2-й кадр: открытая баночка и текстура на шпателе, крупно;
- 3-й кадр: оборотная сторона упаковки, где читаются состав и способ применения;
- 4-й кадр: товар в руке, чтобы был понятен размер;
- 5-й кадр: комплектация, если продаётся набор или есть мини-версия.
Состав с упаковки лучше продублировать текстом на странице. С фото его нельзя скопировать, а на телефоне мелкий шрифт часто не прочитать.
Как показать оттенки и варианты
Для помад, тональных средств и теней отдельный кадр на каждый вариант обязателен. Хорошо работает такая схема: когда покупатель выбирает оттенок, галерея переключается на фото именно этого оттенка. Если фото остаётся прежним, человек сомневается, что выбрал нужное.
Свотчи, то есть мазки на коже, снимайте отдельно от упаковки и подписывайте: название оттенка, а при необходимости и тип кожи на фото. Рядом можно добавить нейтральное пояснение, что цвет на разных экранах может отличаться. Для сравнения оттенков удобна общая сетка свотчей линейки в конце описания.
Единые правила съёмки и обработки
Каталог выглядит цельно, когда у всех фото одинаковы соотношение сторон (например, 4:5 или 1:1), поля вокруг товара и фон. Зафиксируйте эти правила в коротком документе для фотографа и контент-менеджера, чтобы новые позиции не выбивались из общего ряда.
Отдельное правило касается цвета. Ретушь не должна менять оттенок продукта: яркая обработка делает картинку привлекательнее, но создаёт расхождение между ожиданием и реальным товаром. Для серии снимков держите один свет и один баланс белого.
Вес файлов, форматы и загрузка
Исходники храните отдельно, а на сайт загружайте подготовленные копии. Практичный набор: WebP с запасным JPEG для старых браузеров, несколько размеров одного снимка через srcset, увеличенная версия для zoom. Конкретные размеры подбираются под вёрстку, но для каталога обычно хватает заметно меньшего файла, чем для просмотра крупным планом.
Ещё три правила:
- задавайте width и height у изображений, чтобы страница не «прыгала» при загрузке;
- первый кадр карточки не откладывайте, а остальные и нижние блоки загружайте отложенно;
- проверяйте страницу на телефоне с медленным соединением, а не только на офисном компьютере.
Имена файлов, alt и подписи
Файл с названием IMG_4057.jpg ничего не говорит ни команде, ни программам чтения с экрана. Называйте так: krem-uvlazhnyayuschiy-50ml-tekstura.jpg. Alt должен описывать, что видно на кадре: «Открытая баночка крема, на шпателе видна плотная текстура». Не перечисляйте в нём ключевые слова и не повторяйте одно и то же на всех фото товара. Alt нужен прежде всего людям, которые не видят изображение, а вам он заодно помогает искать файлы в медиатеке.
Проверочный список перед публикацией
- Первый кадр показывает упаковку целиком и понятен в маленьком размере.
- В галерее есть текстура, масштаб и оборотная сторона.
- Каждому оттенку соответствует свой кадр, и он переключается при выборе варианта.
- Состав и способ применения есть текстом, а не только на фото.
- Соотношение сторон, фон и поля совпадают с остальным каталогом.
- Цвет на фото не изменён ретушью.
- Файлы сжаты, у изображений заданы размеры, страница не сдвигается при загрузке.
- У каждого фото есть осмысленное имя файла и уникальный alt.
- Карточка проверена на телефоне.
