Дизайн — статьи о сайтах
Заказ в доставке делают глазами: человек листает меню с телефона и решает по картинке и короткой подписи. Если снимки разного формата, тяжёлые или не похожи на то, что привезёт курьер, страдают и каталог, и доверие к сервису. Разберём, как навести порядок с фотографиями на сайте.
Какие фотографии нужны и где они хранятся
Для сайта доставки обычно хватает четырёх групп снимков:
- блюда в меню — самый большой массив, десятки и сотни файлов;
- обложки категорий (роллы, пицца, супы) и баннеры акций;
- сеты и комбо — отдельные кадры, на которых видно всё содержимое;
- раздел «О кухне»: команда, упаковка, курьеры — на одной странице, а не в каждом разделе.
Фото блюд должны храниться в карточках товаров и оттуда попадать в каталог, поиск и блок «С этим заказывают». Тогда замена одного снимка обновит все места сразу, а менеджеру не придётся загружать файл в пяти разделах.
Единые правила кадра для каталога
Сетка выглядит неряшливо, когда один снимок горизонтальный, другой вертикальный, у третьего белый фон, а у четвёртого стол с реквизитом. Зафиксируйте для фотографа и контент-менеджера четыре правила:
- одно соотношение сторон для превью, например 4:3 или 1:1;
- одинаковый масштаб: блюдо занимает примерно две трети кадра;
- один фон и направление света;
- отдельное решение для мелких позиций — напитков, соусов, добавок.
Исходники храните крупнее, чем нужно сегодня, и оставляйте свободное поле по краям. Если позже поменяется сетка, кадр можно будет обрезать, а не переснимать меню.
Из чего состоит карточка блюда
Первый кадр — блюдо в том виде, в каком оно приедет: в контейнере или на тарелке, с реальной порцией. Если на фото морепродукты, а в роллах их нет, посетитель почувствует обман. Второй кадр — крупный план или разрез, где видна начинка. Третий — упаковка или порция рядом с предметом для масштаба, например с палочками. Больше четырёх снимков обычно не нужно: на телефоне галерея листается свайпом, и дальше третьего кадра доходят немногие.
Для сетов рядом с фото добавьте текстовый состав: что входит и в каком количестве. Снимок не должен заменять список, ведь по картинке не отличить восемь штук от десяти.
Размер файлов и адаптивность
Фотографии с камеры или телефона нельзя загружать как есть: файл в несколько мегабайт в каталоге из десятков позиций замедлит загрузку на мобильном интернете. Что стоит сделать:
- сохранять фото в JPEG, а PNG оставить для логотипов и значков с прозрачностью;
- готовить несколько размеров одного снимка и отдавать подходящий через атрибут srcset: меньший для превью, больший для карточки, удвоенный для экранов с высокой плотностью пикселей;
- подбирать степень сжатия на глаз, сравнивая результат с оригиналом;
- задавать размеры изображений в вёрстке заранее, чтобы текст не прыгал, когда фото догрузится;
- в длинных каталогах догружать картинки по мере прокрутки, а первые экраны показывать сразу.
Условный пример: фрагмент страницы «Роллы»
Представим страницу вымышленной службы. Вверху — обложка категории и фильтры. Ниже сетка по два блюда в ряд на телефоне и по четыре на компьютере. В каждой плитке:
- фото 4:3 с названием файла вроде roll-philadelphia-8.jpg;
- название и вариант: «Филадельфия, 8 шт.»;
- вес и цена одной строкой, кнопка «В корзину» под ними.
По нажатию открывается карточка: слева галерея из трёх кадров, справа состав, вес и выбор количества. Атрибут alt у первого снимка содержит название и вариант: «Ролл Филадельфия, 8 штук в контейнере». Он нужен посетителям, у которых картинки не загрузились, и пользователям программ экранного чтения.
Проверочный список перед публикацией
- У всех блюд в категории одинаковые пропорции и масштаб кадра.
- Фото соответствует тому, что получает клиент: состав, порция, упаковка.
- Ни один файл не загружен прямо с камеры, для превью и карточки есть свои размеры.
- У каждого изображения заполнен alt, а имя файла понятно без расшифровки.
- У позиции без фото стоит единая заглушка, а не пустой квадрат.
- Каталог открыт на телефоне через мобильный интернет, и первые блюда видны без долгого ожидания.
- Заменить снимок можно в одной карточке, и он обновится везде.
