7 шагов по созданию и обработке фото для интернет-магазина

Привлекательные картинки – главный способ привлечения покупателей. Как создавать и обрабатывать высококачественные фото для продающего сайта, описала Рейчел Джейкобс на BigCommerce.com, перевел EVO.business

Начнем с того, что гонка за качеством фото увеличивает физический объем подгружаемых на сайт файлов, а это замедляет открытие страниц, особенно в мобайле. Между тем, Google объявила, что с июля 2018 года поисковые алгоритмы при запуске с мобильных устройств начнут учитывать скорость загрузки страницы – то есть понижать в выдаче страницы с долгой загрузкой (на которых или много javascript-приложений, недостаточно встроенных в сайт, или изображений, которые не оптимизируются автоматически под размер экрана посетителя сайта).

Таким образом, возникает вилка возможностей – проход между Сциллой плохого качества и Харибдой замедления загрузки. Это дает для каждого сайта, сервера и качества мобильного покрытия свое пиковое значение предельного уровня качества фото, выше которого подниматься уже неэффективно.

Понятно, что в идеале фото в интернет-магазине к этому пиковому значению качества должны вплотную приближаться. Но к сожалению, очень многие интернет-магазины крайне далеки от этого подхода – и используют крайне слабые фото, еще и заимствованные из Сети.

Мы верим в слова на сайте – и никак не можем понять, что в нашу эпоху очень хорошая картинка стоит 1000 слов

Великолепные фотографии в среде использования помогают клиенту определить качество и детали товара лучше, чем любое описание. А использование непрофессиональных или плохо оптимизированных изображений даст негативное влияние на ваши продажи – даже там, где вы лидируете в поисковой выдаче.

1

Собираем инструментарий для хорошего фото

Первым шагом к оптимизации фотографий товара (или любых изображений на вашем сайте) является то, что вы начинаете с отличных собственных фотографий.

Это не должен быть дорогостоящий процесс – если вы только начинаете, достаточно несколько относительно дешевых вещей, чтобы получать качественные фотографии:

  1. Личный обычный DSLR фотоаппарат (digital single-lens reflex – цифровая однолинзовая зеркалка) или смартфон. Сегодня у многих хороших смартфонов есть камера, которой достаточно для фото товара. Использование смартфона также дает вам доступ к сотням бесплатных или недорогих приложений для обработки фото.
  2. Штатив.
  3. Внешний фотосвет. Наличие профессионального света для фото помогает обеспечить равномерное освещение вашего товара или человека в кадре. Это имеет огромное значение для качества фото. Если вы только начинаете, вам может быть легче cнимать в солнечный день на улице.
  4. Белоснежный хромакей (фоновая завеса или скатерть). Он поможет равномерно распределить освещение по вашему изображению, сэкономит вам деньги и время на редактирование. Ваши изображения будут выглядеть последовательно. А при желании, вместо белого фона вы очень легко подставите любые другие фона и текстуры. Хромакеем может быть что угодно: от одного листа или рулона бумаги – до полотнищ из ткани или  синтетических материалов.
2

Снимаем с разных ракурсов

Разные ракурсы демонстрируют разные аспекты товара.

  • Дальние планы – демонстрируем товар на модели (рядом с ней, в/на руках). Это must have для продающего сайта: визуализировать, как товар выглядит в среде использования. А заодно мы даем понять габариты товара: в сравнении с человеком или его руками.
  • Средние планы – даем общий внешний вид самого товара со всех сторон. У книги, например, фотографируем и корешок, а у детской книги стоит приводить развороты с иллюстрациями – а не только обложку. Даем вид в момент регулярной финальной сборки компонентов: например, момент крепления насадок многонасадочного блендера, кухонного комбайна. Помним также о красивом варианте съемки под 45 градусов – это очень уместно, скажем, для обуви.
  • Крупные планы, макросъемка – иллюстрируем важные детали: разъемы, панели управления, стыки и швы, оформительские фишки. Или внутренние элементы товара, доступные при рядовом использовании.
3

Уменьшаем и квадратизируем фото

Ваш смартфон, скажем, с 12-мегапиксельной камерой даст фотографии 3000 пикселей x 4000 пикселей. Для сайтов этот размер не нужен. Обычно оптимальный размер для фотографий товара – 1028х1028 пикселей , а нетоварные фотографии должны быть немногим меньше 1000 пикселей с обеих сторон.

Фото размерами 500-700 пикселей и меньше – уже относятся к не очень качественным

Сохранение всех ваших изображений квадратными (на белоснежном фоне это просто: добавить или отрезать полосы белого с любой стороны) гарантирует, что они будут отображаться правильно, хорошо выглядеть рядом с любым другим фото вашего сайта. Особенно эффективно работает квадратность фото в Инстаграме.

Если у вас нет доступа к программному обеспечению, которое может изменять размеры ваших изображений, например Photoshop, не волнуйтесь. Такие мобильные приложения, как Pixlr и Canva, могут помочь вам с базовыми возможностями редактирования и изменения размера.

4

Сохраняем в правильном формате

Знание разницы между форматами файлов и настройками может оказать огромное влияние на ваш сайт.

1. Сжимаемые без потерь файлы GIF (Graphics Interchange Format) имеют низкое качество цветопередачи (256 базовых оттенков), но также и самый маленький размер файла для маленьких изображений. Если нужно сохранить на сайте изображение для небольших значков или миниатюр, то лучше использовать GIF. Он вместе с APNG также являются единственными форматами, поддерживающими анимацию. Однако, по мере увеличения размера изображения GIF начинает давать очень крупный размер файла при слабом качестве.

2. Cжимаемые без потерь файлы PNG (Portable Network Graphics) дают наиболее качественную цветопередачу в объеме, более-менее уместном для онлайна. Это единственный формат, поддерживающий прозрачные фонаОднако все это связано со сравнительно большими размерами файлов для изображений любого размера. Только если у вас на сайте по клику на фото товара раскрывается масштабируемое большое фото на весь экран широкого десктопа – пусть это будет PNG идеального качества, которое посетитель сможет на любом участке детализировать в несколько раз без размывания и пикселизации.

3. Изображения с переменным уровнем необратимого сжатия JPEG (это название разработчика: Joint Photographic Experts Group) являются наиболее распространенным форматом, используемым цифровыми камерами. Они поддерживают весьма широкий диапазон цветов. А управление параметрами сжатия JPEG позволяет вам балансировать между предельным размером файла – и потерей качества изображения при серьезном сжатии, упрощающем ряд оттенков и линий.

5

Экспериментируем с настройками качества JPEG

Если ваш графический редактор не предлагает хороших параметров сжатия или вы не находитесь на маркетплейсе, в админку которого заложено сжатие загрузок автоматически – используйте такой инструмент: TinyJPG. Это бесплатный оптимизатор JPG и PNG.

Вместо того, чтобы угадывать правильный баланс между качеством и размером файла, такие службы, как TinyJPG, программно анализируют изображение – определяя наименьшие возможные размеры файлов, сохранив оптимальное качество изображения.

Даже если вы уже сжали свои изображения при сохранении, вы будете удивлены, как сильно они уменьшатся без видимых потерь качества после пропускания через сервис типа TinyJPG.

6

Оптимизируем контент изображений для поисковых систем

 1. Используем только информативные имена файлов фото.

Знайте, что имя файла по умолчанию, которое поступает с вашей камеры, вроде DSC70001459, ничего не говорит для Google. А вот название товара, изображенного на фото, в качестве имени файла – может привести вашу картинку в верхнюю строку выдачи поисковика даже бесплатно.

При назывании изображений, опишите содержимое фотографии, используя тире вместо пробелов.

2. Не забываем прописать ключевые слова в alt-тексте.

Если у пользователя нарушено зрение или если изображение не может быть загружено, то будет отображаться текст alt. Он также используется Google, чтобы лучше понять, что содержит изображение.

Это делает alt-параметр картинки ценным местом для включения в него ключевых слов поискового запроса.

3. Обеспечиваем соответствие изображения и контекста вокруг него.

Поисковые системы действуют так же, как и ваши пользователи – используют контент на всей странице, чтобы создать более общую картину того, о чем идет речь. Это может быть особенно ярким на страницах товаров.

Заметных поисковику различий между фото товара и его описанием тут быть не должно.

7

Верстаем страницу с изображениями

1. Помещаем товарное фото вверху страницы. Люди не всегда прокручивают сайты на смартфоне до нижней части страницы, если вверху «много букв». Поэтому убедитесь, что ваши изображения стоят так высоко на странице, что мобайл-посетители сразу видят их.

2. Указываем в коде ширину и высоту каждого изображения. Если браузер знает, насколько большим будет изображение, он может загружать остальную часть контента, пока ждет завершения загрузки изображения. Если же в коде размеров нет, мультизадачность не подключается – и весь контент страницы «молча ждет» вашу картинку, не отображается. Поэтому размеры в коде сокращают время, необходимое для загрузки вашей страницы, и создают лучший пользовательский интерфейс.

Translated from English. Source: BigCommerce.com. Author: Rachel Jacobs