Картинки для сайта: какие изображения лучше использовать

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

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

Требования к картинкам на сайте

1. Привлекательность, оригинальность

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

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



Замечали, что на популярных ресурсах (в т.ч. соцсетях) все меньше безликих, неинтересных картинок, взятых из поиска? Всем надоели очевидные ассоциации, где:

- сделка или партнерство – это обязательно пожатие рук;
- SEO-продвижение – банальный набор шестеренок.

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

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

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

2. Релевантность

Изображение должно соответствовать содержанию. Релевантность картинок для людей определяется на логическом и смысловом уровне. Релевантность для роботов складывается из особого программного анализа содержимого картинок, тегов "ALT"/"TITLE", подписей и контекста.

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

3. Уникальность

Картинки для сайта должны быть эксклюзивными и неповторимыми (в идеале). Это важно для пользователей и поисковых систем. Благодаря уникальности графики вебмастер в итоге:

- повышает SEO- и SMM-потенциал страниц сайта;
- привлекает трафик из сервисов изображений и поиска по картинкам;
- улучшает индексацию и ранжирование страниц за счет частых визитов роботов;
- удерживает посетителей и способствует возвратам с помощью хорошего юзабилити;
- получает серьезное конкурентное преимущество.

Для проверки уникальности изображений используйте специальные онлайн-сервисы (например, TinEye) или инструменты поисковых систем. Войдите в Google.Картинки и рядом с поисковой строкой отыщите значок "фотоаппарат", загрузите картинку с компьютера. Если есть дубли и совпадения – система покажет.

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

4. Оформление

При вставке картинок на сайт уделите 1 минуту на заполнение мета-тегов "ALT" и "TITLE", добавьте подпись. Желательно, чтобы текст в мета-тегах содержал ключевики, был релевантным и уникальным (насколько это возможно).

Заполнение мета-тегов картинок часто доверяют автоматике CMS, игнорируют или откладывают "на потом" ввиду малой важности. Если конкуренты или площадки из ТОПа органической выдачи упускают из виду этот фактор ранжирования, оформляйте картинки для своего сайта как нужно – получите конкурентное преимущество в выдаче.



5. Авторство

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

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

Факты таковы, что по закону нельзя использовать чужие авторские картинки (даже из открытого поиска Яндекс/Google). Ссылка на источник не снимает ответственности, хотя воспринимается как положительный смягчающий фактор.

6. Качество, "вес", размеры

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

Выход один – использовать на страницах небольшие и "легкие" изображения, оптимизированные под веб-пространство, но давать ссылки на оригиналы. Для компрессии (уменьшения, сжатия) размеров картинок используйте PhotoShop или специальные онлайн-сервисы (например, TinyPNG), не теряя качества.

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

Не забывайте – любая картинка на сайте (даже самая мизерная - 1x1 пиксель) замедляет загрузку страниц. Чтобы ваш сайт "не тормозил":

1) Используйте изображения грамотно и там, где без них не обойтись.
2) Если это возможно, замените картинки в дизайне на стили оформления с помощью таблиц CSS.
3) Оптимизируйте через сжатие все изображения перед вставкой на сайт.
4) При выборе качества картинок руководствуйтесь скоростью загрузки страниц и советами сервиса PageSpeed Insights.
 

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

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

1. Картинки из общего доступа поисковых систем (только без "ватермарок", "водяных" знаков).
2. С других сайтов, соцсетей, форумов (желательно со ссылками на источники).
3. Из фотохостингов, хостингов картинок, фотобанков и фотостоков (платно или бесплатно).
4. Создавать самостоятельно (рисовать иллюстрации, подключать художественные таланты, делать скриншоты, фотографии или инфографику).
5. Редактировать чужие картинки (фильтры, ретушь, заливка, рамка, обрезка, наклон, зеркальность).
6. Нанимать специалиста со стороны - фотографа, художника, иллюстратора, фрилансера-дизайнера.
7. Просить у партнеров, поставщиков товаров, дилеров, подрядчиков (актуально для сферы услуг и товаров).
8. Покупать или заказывать на биржах контента.
9. Использовать сканы старых книг, газет, каталогов или журналов (проверяя на уникальность).