Дизайн — статьи о сайтах
Человек, который ищет в прокате перфоратор или плиткорез, выбирает не картинку, а конкретный предмет: подойдёт ли он по размеру, что входит в комплект, в каком он состоянии. Если фотографии на сайте беспорядочны, клиент звонит с вопросами, на которые мог бы ответить снимок. Ниже разобрано, как выстроить фото так, чтобы они работали как часть описания.
Какие снимки нужны карточке инструмента
Для каждой позиции каталога полезен небольшой стандартный набор. Он нужен не для красоты, а чтобы закрыть типовые вопросы:
- Главный снимок. Инструмент целиком, на нейтральном фоне, без лишних предметов. Именно он попадает в список каталога.
- Комплектация. Всё, что выдаётся клиенту, разложено рядом: кейс, буры, зарядное устройство, запасной аккумулятор, ключ.
- Табличка с моделью. Крупно шильдик или надпись на корпусе. Так видно, что это именно та модель, которая указана в описании.
- Масштаб. Инструмент в руке или рядом с привычным предметом. По одному фото трудно понять, что бензорез тяжёлый, а мини-культиватор компактный.
Если инструмент снят на производственной площадке вашего пункта, а не взят с сайта производителя, клиент видит реальный экземпляр. Фото производителя можно оставить как дополнительное, но не как единственное: оно не показывает, что именно вы выдаёте.
Единые правила съёмки для всего каталога
Каталог выглядит аккуратно, когда все главные снимки сделаны по одним правилам. Зафиксируйте их письменно, чтобы любой сотрудник мог снять новую позицию так же:
- одинаковая пропорция кадра, например 4:3, чтобы плитки в списке не прыгали по высоте;
- один и тот же фон: лист серого картона или стена цеха, расчищенная от лишнего;
- инструмент занимает примерно одинаковую долю кадра;
- ракурс «три четверти» для главного снимка, чтобы были видны и рабочая часть, и рукоятка;
- рассеянный свет без жёсткой тени, лучше возле окна, чем со вспышкой в лоб.
Блестящий металл и чёрный пластик легко теряют детали. Проверьте, что кнопки, переключатель режимов и крепление оснастки различимы.
Как выстроить галерею на странице
Крупный главный снимок и под ним ряд маленьких превью — привычная схема, и менять её не нужно. Важны детали:
- порядок всегда один: общий вид, комплектация, шильдик, масштаб;
- превью кликабельны и открывают увеличенную версию в окне поверх страницы, без перехода на другую страницу;
- у каждого снимка есть короткая подпись: «В кейсе: 3 бура, дополнительная рукоятка»;
- подписи совпадают с текстом описания, а не повторяют название инструмента.
Условный фрагмент карточки может выглядеть так:
Перфоратор SDS-plus, 800 Вт (пример). Фото 1: общий вид. Фото 2: «Комплект выдачи: кейс, три бура, боковая рукоятка, ограничитель глубины». Фото 3: табличка с моделью на корпусе. Фото 4: перфоратор в руке, видна длина с буром. Рядом блок «Что входит в комплект» с тем же перечнем списком.
Перечень на снимке и в тексте дублируется намеренно: поисковые системы и читалки текста не видят содержимое картинки, а клиент не всегда увеличивает превью.
Названия файлов, подписи и альтернативный текст
Файл с именем IMG_4821.jpg ничего не говорит ни вам, ни посетителю. Используйте понятные имена латиницей: perforator-sds-plus-800-komplekt.jpg. Через полгода при замене снимка вы сразу найдёте нужный файл.
В атрибут alt пишите, что изображено, коротко и по делу: «Перфоратор SDS-plus в кейсе с тремя бурами». Не набивайте туда перечень ключевых слов: этот текст прочтёт программа для слабовидящих, и бессмысленный набор слов ей только мешает. Если изображение чисто декоративное, alt оставляют пустым.
Размеры и вес файлов
Загружать оригинал с фотоаппарата в несколько мегабайт на страницу каталога нельзя: на мобильном интернете, а им пользуются прямо на объекте, список из двадцати инструментов будет грузиться мучительно долго. Подготовьте для каждого снимка три версии:
- маленькая для списка каталога, порядка 200–300 пикселей по длинной стороне;
- средняя для основного места в карточке, порядка 600 пикселей;
- крупная для увеличенного просмотра, порядка 1000–1200 пикселей.
Фотографии сохраняйте в JPEG с умеренным сжатием и сравнивайте результат на глаз: на сером фоне чрезмерное сжатие даёт заметные пятна. Логотипы и схемы лучше оставить в PNG. Попросите разработчика, чтобы уменьшенные версии создавались автоматически при загрузке, тогда сотрудникам не придётся делать это вручную в редакторе.
Проверочный список перед публикацией карточки
- Есть главный снимок на нейтральном фоне в общей пропорции каталога.
- Показана комплектация выдачи, и она совпадает с текстом.
- Видна табличка или надпись с моделью.
- Есть снимок, по которому понятен размер инструмента.
- Имена файлов осмысленные, у каждого фото задан alt и подпись.
- Для списка и карточки подготовлены уменьшенные версии, страница каталога открывается быстро с телефона.
- Фото обновляется, если вы заменили инструмент или изменился комплект.
Начните с десятка самых востребованных позиций: переснимите их по этим правилам и сравните карточки до и после. Остальной каталог переводите на единый порядок постепенно, по мере обновления парка.
