Наверх
8 800 350 55 01
+7 (495) 118-22-22
/
/
Как выбирать иллюстрации для сайта: источники, сервисы, советы
В тренде

Как выбирать иллюстрации для сайта: источники, сервисы, советы

26.07.2019 Время прочтения: 5 минут

Где найти картинки для сайта?

Изображения для свободного использования в коммерческих и некоммерческих целях можно получить бесплатно и за деньги.

Бесплатные стоки

Бесплатные фотостоки работают по лицензии CCO. Сейчас их очень много, вот некоторые из них:


Платные фотобанки

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

Примеры фотобанков:


Напрямую у фотографов и графических дизайнеров

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


Создавать самому

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

Также можно пользоваться простыми онлайн-редакторами, которые помогают создавать иллюстрации разных форматов для разных целей:


Как выбрать размер изображения?

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

Чтобы пользователь открыл страницу и сразу увидел изображение целиком, нужно заранее задать ей адекватные параметры и оптимизировать вес (а еще желательно внедрить адаптивный дизайн, который любят все — и поисковики, и пользователи).

Размер изображения

Идеальные размеры картинок для сайта у всех свои. Но относительно универсальным можно считать разрешение от 900х700 пикселей и меньше. Этого будет достаточно, чтобы пользователь видел изображение без дополнительных манипуляций, при этом оно не будет закрывать весь экран или, наоборот, теряться из виду.

Если нужно выбрать картинку под заданное место на сайте, можно пользоваться специальными расширениями для браузеров: например, линейка Page Ruler рассчитывает размер элементов в пикселях.

page ruler

Наводите курсор на нужный объект, и сервис посчитает его размер

Вес фотогафий и иллюстраций

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

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

optimizilla

В зависимости от порога веса картинки, можно увеличить или уменьшить качество

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

Как выбрать картинки для сайта и создать свой стиль: советы

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

представление у пользователя о ваших услугах или товарах

Фотографии пирожных с сайта пекарни «Хлебница» сделаны в теплых тонах — это вызывает приятные ассоциации

  1. Добавляйте элементы корпоративного цвета. Даже среди бесплатных изображений для сайта можно найти картинки подходящих цветов. А если делать изображения самим, то можно собственноручно расставлять акценты.

Добавляйте элементы корпоративного цвета

Корпоративный цвет SEO.RU — зеленый, и мы стараемся использовать его в том числе при оформлении статей в блоге

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

теория и практика

На сайте образовательной платформы «Теории и практики» превью одной из статей состоит из двух фотографий — оно привлекает внимание контрастом и ярким оформлением

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

Лаборатория реактивного движения

Именно так работает инфографика — пример с сайта Лаборатории реактивного движения НАСА

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

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

Пусть другие тоже знают!

Еще на эту тему

Полное руководство по seo-оптимизации для сайта в разработке
Полное руководство по seo-оптимизации для сайта в разработке
Подробное руководство по seo-оптимизации разрабатываемого са...
10.08.2018 1720
SEO-продвижение для блога
SEO-продвижение для блога
SEO для блога компании, особенности продвижения и наполнения...
11.02.2019 1361
Внутренняя оптимизация сайта: инструкция по применению
Внутренняя оптимизация сайта: инструкция по применению
Интернет-маркетинг – это огромная доля всего маркетинг...
09.10.2017 11835
Показать еще материалы

Другие интересные статьи

Защищенный протокол HTTPS. Что это и почему вам нужно его использовать
Защищенный протокол HTTPS. Что это и почему вам нужно его использовать
Разбираем, что такое защищенный протокол HTTPS и каковы его ...
26.07.2018 2665
Черное SEO
Черное SEO
Черные методы оптимизации – это нелегальные методы продвижен...
14.09.2017 4425
Стоимость контекстной рекламы в Яндекс и Google: цена за клик, прогноз бюджета
Стоимость контекстной рекламы в Яндекс и Google: цена за клик, прогноз бюдж ...
Узнайте, из чего складывается стоимость контекстной рекламы....
23.05.2018 9210
Поисковые запросы и их частотность. Высоко-, средне- и низкочастотные запросы
Поисковые запросы и их частотность. Высоко-, средне- и низкочастотные запро ...
Рассказываем о поисковых запросах и их частотности. Высокоча...
07.09.2018 7555
Адрес, телефон и цена в сниппете: секреты настройки для e-commerce проектов
Адрес, телефон и цена в сниппете: секреты настройки для e-commerce проектов
Для e-commerce  e-commerce и сайтов услуг есть мно...
29.01.2018 2839
Показать еще материалы