Design, How To

Подбор и оптимизация изображений для сайта

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

Если вы сомневаетесь в важности правильного подбора картинок для сайта, тогда вот 5 пунктов, почему они нам необходимы:

1. картинки участвуют в продвижении сайта;
2. при грамотно подобранных картинках (даже при беглом взгляде) пользователь интуитивно понимает, чему посвящён ресурс и что предлагает компания;
3. картинки наглядно показывают все характеристики товара;
4. нередко используют изображения и при навигации на сайте;
5. вызывают доверие у потенциальных клиентов (реальные фотографии офиса, сотрудников, складов, процессов работы).

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

Где на сайте нужны картинки?

– На главной

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

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

первый экран на главной странице

– О компании

Когда пользователь не может определиться с выбором, то он смотрит и на страницу о компании. Дополнительным бонусом в копилку к доверию будет фото сотрудников, офиса и сертификаты.
Например, не стоит показывать пустые помещения. Тут лучше сработают живые фотографии, как происходит процесс работы:

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

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

сертификаты компании

– Каталог товаров

Порой «вкусные» картинки продают лучше, чем весь контент страницы. Но, к сожалению, не все владельцы интернет-магазинов это понимают. Одна из самых распространенных ошибок – использование только одной иллюстрации к товару, как здесь:

карточка товара люстр
Потенциальный покупатель вряд ли остановит свой выбор на этой люстре, так как не понятно, как она выглядит с других сторон и в интерьере. Поэтому постарайтесь сфотографировать товар со всех ракурсов. Например, как тут:

правильная карточка товара

– Портфолио

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

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

неверно оформленное портфолио компании

– Статьи в блоге

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

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

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

использование картинок внутри статьи
Как вы сами поняли, картинкам на сайте нужно уделить особое внимание. Ведь качественные изображения влияют не только на конверсию ресурса, но и на доверие к компании.

Если подвести итог, то изображения должны соответствовать следующим характеристикам:

— подходить под формат ресурса. Например, если сайт посвящен интерьеру, не нужно на главной странице размещать фото пляжа.
— иметь высокое качество. Мутные и не четкие изображения автоматически портят впечатления о компании.
— быть уникальным. То есть необходимо делать контент под свой сайт. Это поможет избежать ситуаций, когда одна и та же картинка размещена на нескольких сайтах. Исключением только могут быть фотографии для статей.
— иметь вес от 70 до 110 килобайт. Если изображение тяжелое, это скажется на времени загрузки страницы.

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

Оптимизация картинок

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

Пример 1. Непонятно, что из себя представляют изображения.
— Book254886.jpg
— I59695.png

Пример 2. По надписи картинки понятно, что она из себя представляет.
— sumka-black-Hilfiger.jpg
— Book-smm-2018.png

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

Вот неудачный пример теста, вписанного в атрибут alt:
— alt=»отзывы, акции, скидки на туфли всех брендов »

А вот правильное заполнение:
— alt=»черная сумка Prada»

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

Оptimizilla 
Compressor

После того как опубликуете на странице изображения, обязательно проверьте, доступны ли они для индексации в robots.txt.

Вместо вывода

Хотите получить дополнительные баллы доверия от клиентов и поисковиков, тогда вот оно — то самое время проверить свой ресурс на качество изображений и их оптимизацию. Если вы заметили, что у вас есть в этом направлении какие-то недочеты, то в качестве помощника мы даем вам список из 80 бесплатных ресурсов, которые помогут дизайнеру в работе. Список можно скачать по ссылке.

Об авторе Ксения Захарова

Интернет-маркетолог 1PS.RU Более 3 лет занимается маркетингом и PR. Знает, как сделать пиар компании с минимальным бюджетом и получить от этого 100% эффект.Информация не предоставлена автором

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *