Дизайн — статьи о сайтах
В продуктовом магазине покупатель не может взять товар в руки, поэтому фотография заменяет ему полку. Если снимки разного размера, на разных фонах и с непонятным содержимым, каталог выглядит случайным набором. Ниже разобрано, как выстроить порядок: от списка нужных кадров до названий файлов.
Какие фотографии нужны на сайте продуктового магазина
Удобно разделить снимки по задачам, а не складывать всё в одну папку:
- Фото товара для каталога и карточки: упаковка или сам продукт на нейтральном фоне.
- Дополнительные кадры товара: обратная сторона упаковки, срез, содержимое на тарелке, размер относительно привычного предмета.
- Баннеры и подборки: «Фермерские продукты», «К праздничному столу». Это отдельные изображения, не увеличенные фото товаров.
- Фото магазина и доставки: вход, прилавок, курьер, пункт самовывоза. Они помогают найти вас и понять, чего ждать.
Состав, срок годности и условия хранения пишите текстом рядом с товаром. Фото обратной стороны упаковки служит дополнением: на маленьком снимке мелкий шрифт не прочитать. Текст сверяйте с упаковкой.
Единый стандарт съёмки: что зафиксировать в правилах
Стандарт нужен, чтобы снимки в сетке каталога смотрелись как одна витрина. Достаточно записать на одной странице:
- фон: белый или светло-серый, без случайных предметов;
- формат кадра: например, квадрат, чтобы плитки каталога были ровными;
- ракурс главного фото: упаковка спереди, лицевой стороной к покупателю;
- отступы: товар занимает примерно одинаковую часть кадра, не обрезан по краям;
- свет: мягкий, без жёстких бликов на плёнке и стекле;
- для весовых и свежих товаров: один и тот же принцип показа, например, один плод целиком и один в разрезе.
Снимки поставщиков часто различаются по фону и качеству. Прежде чем размещать их, уточните у поставщика, можно ли использовать фото на вашем сайте. Для ходовых позиций лучше снять свои.
Размеры и вес файлов: три версии одного снимка
Одну фотографию в 3000 пикселей нельзя ставить и в каталог, и в карточку: страница с пятьюдесятью такими снимками будет грузиться долго, особенно с мобильного. Готовьте три версии:
- миниатюра для каталога: около 200×200 пикселей;
- основное фото карточки: около 600×600;
- увеличенное фото по клику: 1000–1200 пикселей по длинной стороне.
Это ориентиры, а не норма: подберите размеры под сетку вашего шаблона. Если хотите, чтобы снимки чётко выглядели на экранах с высокой плотностью пикселей, например у планшетов и ноутбуков с Retina, сделайте основное фото чуть крупнее и задайте размер отображения в вёрстке.
Для фотографий подходит JPEG, для логотипов и значков на прозрачном фоне — PNG. Перед загрузкой сжимайте файлы: в графическом редакторе при сохранении «для веб» качество часто можно снизить без заметной потери. Каталог со сжатыми миниатюрами откроется заметно быстрее, чем с оригиналами.
Названия файлов и подписи: чтобы не потеряться через год
Файлы вида IMG_4821.jpg невозможно найти и сопоставить с товаром. Договоритесь о схеме: товар латиницей, вес или объём, номер кадра. Например, grechka-yadritsa-800g-1.jpg, grechka-yadritsa-800g-2.jpg.
Атрибут alt заполняйте коротким описанием того, что видно: «Гречка ядрица, упаковка 800 г, вид спереди». Он показывается, если снимок не загрузился, и нужен людям, которые пользуются программами чтения с экрана. Не вставляйте в alt перечень ключевых слов: описание должно быть честным и точным.
Условный пример: фрагмент карточки товара
Возьмём вымышленную карточку «Гречка ядрица, 800 г». Порядок кадров в галерее:
- Упаковка спереди на белом фоне, 600×600. Этот кадр же идёт в каталог в уменьшенном виде.
- Упаковка сзади: видны состав и производитель.
- Крупа в светлой миске: видно цвет и размер зерна.
- Готовое блюдо, если оно соответствует содержимому и подписано как «вариант подачи».
Рядом с галереей: название, вес, цена, наличие, блок «Состав и хранение» текстом. Под миниатюрами галереи — подсказка «Нажмите, чтобы увеличить». Если на странице три и более кадров, на мобильном их удобно листать свайпом, а не выводить длинной лентой.
Проверочный список перед публикацией каталога
- У каждого товара есть главное фото в едином формате и на едином фоне.
- Для каталога, карточки и увеличения подготовлены разные размеры файлов.
- Файлы сжаты, миниатюры каталога открываются без заметной паузы.
- Названия файлов понятны и построены по одной схеме.
- Alt заполнен описанием, а не набором слов.
- Состав и срок хранения указаны текстом, а не только на фото.
- Фото соответствует товару: вес, вкус, вариант упаковки не перепутаны.
- Права на фотографии поставщиков уточнены.
- Страницы проверены на телефоне: сетка не ломается, увеличение работает.
- Назначен человек, который добавляет фото к новым товарам по тем же правилам.
Если вы заказываете сайт или переделываете каталог, начните с этого списка: передайте его разработчикам и фотографу как часть задания. Тогда порядок в изображениях будет заложен с самого начала, а не наводиться вручную после запуска.
