Основные задачи размещения изображений на сайте — это привлечение внимания пользователей, предоставление максимально точной информации о продукте, создание привлекательного образа товара, стимулирование пользователей к покупке.
Давайте поэтапно рассмотрим процесс создания фотографий для сайта: с момента подготовки к съемкам до адаптации готовых изображений для интернета.
Где брать фото?
Вы можете взять фотографии товаров непосредственно с сайта производителя или организовать фотосессию (самостоятельно либо обратиться к профессионалам).
Преимущество первого способа заключается лишь в том, что он не требует затрат. Но если фото взяты с сайта производителя, вполне предсказуемо, что этими изображениями уже завален весь интернет. К тому же, такие изображения часто содержат водяные знаки. То есть в любом случае, позаимствовав фото с сайта компании, претендовать на уникальность вы уже не можете.
Фотосессия своими силами — это не так просто и не так дешево, как может показаться на первый взгляд. Ведь если вы хотите получить качественные фото, для этого придется постараться. Во-первых, для съемки, помимо фотоаппарата, вам понадобится дополнительное оборудование: лайт-куб (конструкция кубической формы с белыми прозрачными сторонами, предназначенная для рассеивания и смягчения света), стол для предметной съемки, осветительное оборудование. Во-вторых, вам придется арендовать студию.
Почему так важно предоставлять на сайте профессиональные фотографии?
По изображению у пользователя складывается первое впечатление о товаре. За неимением возможности пощупать, примерить изделие, посетители сайта ищут ответы о продукции в иллюстрациях. Можно сколько угодно описывать словами узоры на платье и его фасон, но точнее фотографии это сделать все равно не удастся.
Вторая важная причина: изображения непосредственно влияют на эмоции покупателей. Один и тот же товар может иметь разную степень привлекательности на разных фотографиях. И, конечно, выиграет в итоге тот, который будет лучше выглядеть на фото. В-третьих, внешний вид сайта — это репутация магазина. Вряд ли сайт с некачественными фото вызовет большое уважение у клиентов. Тогда как качественные фотографии способны улучшить репутацию магазина. Ну и в четвертых, профессиональный фото-контент способен принести вам видимое преимущество перед конкурентами.
Итак, конверсия онлайн-магазина напрямую зависит от изображений, поэтому к фотосъемкам товаров нужно отнестись с особой ответственностью.
Ставим задачи фотографу
Фотосессия товаров — это не творческий полет и не свободное плавание. У вас есть четкая цель: предоставить потенциальным клиентам максимально точную, понятную, привлекательную и целостную картинку продукта. Исходя из этого, должны выстраиваться ваши планы на фотосессию.
На что обратить внимание при съемке:
- Фон фотографии. Проконтролируйте, чтобы фон контрастировал с продуктом. Ведь товар должен выделяться и ни в коем случае не сливаться с фоном. Голубой чайник на голубом фоне никто не сможет рассмотреть.
- Ракурсы и детали. Скорее всего, одной фотографии анфас будет недостаточно для товара. Фото должны быть выполнены как минимум в трех стандартных ракурсах: вид спереди, вид сзади и вполоборота. Помимо этого, зная свой продукт и особенности его покупателей, можно предположить, на какие части товара покупатели в офлайн-магазине обращали бы свое внимание в первую очередь. Именно эти части/детали необходимо снять дополнительно. Клавиатура ноутбука, молния на сумке, каблук туфля, спинка кресла должны быть отсняты отдельно.
Пример съемки нескольких ракурсов фотоаппарата на сайте e-bay.
- Согласованность изображений. Все фото должны быть сняты с одинаковых ракурсов. Это нужно для того, чтобы в дальнейшем у пользователя ресурса не возникало путаницы и чтобы он мог с легкостью сравнить товары между собой.
- Модели и дополнительные предметы. Модели нужны для того, чтобы проиллюстрировать, как сидит одежда, обувь, аксессуары, а также для того, чтобы продемонстрировать масштаб предмета, ведь, имея изображение лишь одного товара, не всегда можно понять, каких он габаритов. Для определения масштабов хорошо подходят фотографии с другими предметами. Лучше всего — если это будут аксессуары к основному продукту, ведь так вы не просто подадите товар в контексте его использования, но и получите возможность увеличить прибыль за счет продажи сопутствующих товаров. Подавая контекст, в котором используется товар, вы приближаете пользователя к условиям реального магазина. Покажите, какого размера планшет в руках пользователя, как этот букет стоит на столе, как выглядят эта рубашка, галстук, брюки и ремень вместе.
Пример того, как показывает вещи в контексте магазин шляп THE HAT COMPANY.
Подготовка к публикации
Итак, фотографии сделаны и даже прошли обработку фотографом. Достаточно ли этого для того, чтобы фото были опубликованы на сайте? Нет, потому что, скорее всего, эти красивые профессиональные фотографии занимают немало места. А, как известно, чем больше размер фотографий, тем больше времени загружается сайт. Время — деньги. Никто не будет ждать и 5 секунд, чтобы увидеть фото. Загрузка должна происходить как можно быстрее. Поэтому до публикации фото с большим разрешением должны пройти процедуру сжатия. Ее можно произвести несколькими способами.
Самый элементарный — посредством Photoshop. Заходите в images > adjustments > posterize. Далее вы увидите ползунок с уровнями. Изображения имеют 256 тоновых диапазонов. Данная функция в Photoshop уменьшает это значение и делает переходы между тонами более резкими. Соответственно, вам необходимо перетащить этот ползунок, чтобы уменьшить количество тоновых диапазонов, однако чтобы это не бросалось в глаза на самой картинке. Затем жмите «Ок», заходите в File и дальше — Save for web. Выбирайте функцию 2-Up — перед вами две картинки сразу: оптимизированная и нет. Далее выбирайте необходимый уровень сжатия и формат. Важно: при сжатии необходимо выдержать баланс, чтобы потеря в качестве не была столь заметной.
Также существуют отдельные онлайн-сервисы для сжатия изображений (например, Smush.it, Dynamicdrive), а также специальные программы (AdvanceCOMP, Caesium — для Windows, ImageOptim, JPEGmini — для Mac), которые будут актуальны тогда, когда сайт имеет более сотни фотографий и обрабатывать их одна за другой вручную будет долго и сложно.
Пожелания к форматам
Несколько слов о форматах. Стоит отметить, что Google индексирует не все изображения, а лишь те, которые имеют формат BMP, GIF, PNG, JPEG или SVG WebP. Наиболее оптимальные решения для сайтов — GIF, PNG, JPEG:
- GIF будет уместен для небольших иконок;
- PNG нужен там, где необходимо передать больше цветов (однако этот формат занимает больше места, чем GIF, PNG, JPEG);
- JPEG подходит для всех крупных изображений.
Увеличение фото
Покупатели разглядывают даже кирпичи и строительную краску. Поэтому онлайн-магазины также не должны отнимать у своих пользователей такой возможности. Zoom-фотографии позволят рассмотреть товар поближе. Вы можете загружать изображения в уменьшенном размере, а пользователи будут увеличивать их с помощью инструмента «лупа». Эту функцию можно наладить с помощью специального javascript-кода.
Уделите особое внимание маленьким изображениям. Если на домашней странице или в каталоге вам необходимо использовать небольшие картинки, убедитесь, что они будут понятны для посетителя. Прежде чем обрезать или увеличивать/уменьшать фото до нужного размера, обратите внимание, как оно смотрится, можно ли с ходу определить, что изображено.
Выкладываем в сеть
Также как и текст, изображения в интернете поддаются оптимизации. Причем оптимизация эта не только способствует попаданию в поисковую выдачу, но и дает пользователю понимание о том, какой продукт он видит перед собой.
Название
Названия изображений должны быть понятными и, желательно, соответствующими продукту.
Пример:
IMG_1820.jpg — плохо.
Platye-krasnoe-dlinnoe.jpg — хорошо.
Правильное название поможет улучшить ранжирование в результатах поиска по изображениям.
Примечание: слова в названиях необходимо разделять дефисом, а не нижним подчеркиванием.
Атрибуты alt title (входят в язык html)
Назначение атрибута alt — заменить изображение альтернативным текстом, а именно описанием картинки. Обязательно добавляйте в описание ключевые слова, но не переусердствуйте: «нафаршированное» ключевыми фразами фото поисковая система может счесть за спам. Данный текст видят поисковые роботы при индексации сайта. Пользователь увидит этот текст лишь в том случае, если в его браузере отключена функция показа изображений.
Атрибут title также предусмотрен для описания картинки. Однако он предназначен больше для пользователей — это описание посетитель сайта увидит при наведении курсора на изображение. Данный атрибут не имеет прямого влияния на продвижение ресурса, однако он может стимулировать пользователей к совершению дополнительных действий на сайте (например, кликов, переходов со страницы на страницу), а это, в свою очередь, имеет значение при ранжировании сайта поисковыми системами.
Примечание: текст данных атрибутов должен отличаться.
Мы рассмотрели лишь основные требования к созданию фото-контента для сайтов. Это вершина айсберга — существует множество инструментов, способных сделать ваш бизнес еще более успешным. Но следование хотя бы этим простым рекомендациям принесет вам видимое конкурентное преимущество. Возможно, вы продаете уникальный продукт, возможно, ваши товары существенно лучше товаров конкурентов по качеству, дизайну либо другим характеристикам. Но вам вряд ли удастся убедить в этом пользователя, пока он не увидит преимущества собственными глазами.
Оформление сайта — это упаковка ваших товаров, и в ваших силах сделать ее как можно привлекательнее. Помните, что от момента подготовки к съемке и до оптимизации изображений шаг за шагом вы создаете рекламный образ для отдельных товаров и для всего магазина в целом.
