Визуальной информации нужно уделять достаточно внимания и времени. Что следует учесть при подготовке изображений? Какие инструменты использовать? На эти вопросы мы ответим в нашей статье.

В процессе подготовки изображений, не считая их поиска\подбора, можно выделить следующие этапы:

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

Давайте рассмотрим каждый более подробно.

ПОДГОН ПО РАЗМЕРУ

Достаточно часто можно встретить картину, когда в каталоге товаров фотографии идут в разнобой. Полосы фона по бокам фото говорят о несоответствии размера изображения. Если быть более точным - это несоответствие соотношения сторон. Добавляя фото на свой сайт следует подгонять их под размеры контейнеров. В случае если размер найденного изображения слишком мал, можно добавить его на пустой слой с нужными размерами. Часто контейнеры изображений имеют форму квадрата, поэтому наши картинки могут требовать обрезки под заданную форму. Обычно для выяснения требуемых размеров я использую инструменты разработчика в браузере. Выглядит это примерно так:

 

Стрелка указывает на кнопку, нажав которую вы перейдете в режим выбора элемента на странице. Просто наводим на контейнер изображения и делаем один клик левой кнопкой. В рамке показаны размеры контейнера.


ЦВЕТОКОРРЕКЦИЯ И РЕТУШЬ


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

НАЛОЖЕНИЕ ВОДЯНЫХ ЗНАКОВ

Наличие водяного знака необходимо в случае использования уникальных изображений. 85%-90% изображений в интернет-магазинах многократно скопированы друг у друга. На мой взгляд копировать изображения, а потом препятствовать их дальнейшему копированию своими знаками - как минимум не спортивно. Именно по этим причинам я всегда рекомендую нашим клиентам поступать на свое усмотрение. В случае уникальной информации можно даже не обсуждать целесообразность установки знаков и прочих методик защиты от копирования. Если же скопировали сами - не будем мешать копировать остальным. Сам процесс нанесения на изображение водяных знаков достаточно прост и описан во все тех же уроках по фотошопу. Вы можете устанавливать знаки на каждом изображении индивидуально, но в ручном режиме, либо в автоматическом, но на одних и тех же позициях.

ИСПОЛЬЗОВАНИЕ ФИРМЕННОГО ПАТТЕРНА

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


ИСПОЛЬЗОВАНИЕ ФИРМЕННОГО ШАБЛОНА

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

 

 СЖАТИЕ ИЗОБРАЖЕНИЙ

Здесь все просто. Есть куча онлайн и оффлайн инструментов для оптимизации и сжатия изображений. Чем меньше объем изображения без заметной потери качества - тем лучше. Поисковые системы учитывают скорость загрузки сайта при ранжировании, соответственно мы можем улучшить эти показатели, правильно оптимизировав изображения и их размер. Как пример инструмента - jpeg-optimizer.com

 

Ну и не стоит забывать о SEO - прописывайте заголовки и альтернативный текст у всех изображений. При не столь больших затратах времени, вы получите возможность побороться за топы поиска по изображениям.