Пт, 5/04/19 – 9:26 | 2 комментария

Эта статья о том, что для успеха Landing Page важна не только визуальная привлекательность. От лендингов ждут высоких конверсий. Эффективность лендингового сайта особенно …

Читать статью »
Дизайн

Секреты веб-дизайна, примеры стильных сайтов

Тренды / ТОП

Топ лучших идей, новые тенденции и тренды WEB’а

Маркетинг

Статьи о маркетинге сайтов, примеры эффективности

Свой сайт

Как создать, оформить, сделать сайт лучше

Шаблоны сайтов

Обзоры шаблонов: лучшие темы для сайта

Главная » Дизайн, Свой сайт

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

29 марта 2014 Один комментарий

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

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

Выбираем лучшее изображение для сайта в 7 шагов

1) Авторское право на изображение

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

Иногда возникает вопрос: можно ли использовать стоковые изображения для сайта свободно и есть ли ограничения (некоторые права защищены)?

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

2) Стоковые изображения бесплатно?

Оказывается есть стоковые ресурсы, где можно найти бесплатные изображения и фотографии высокого качества. Крупнейший фотобанк Getty Images недавно решился на бесплатную раздачу своих сток фото и картинок большого разрешения. При помощи embed кода встраиваете их на свой сайт. Миллионы снимков доступны для свободного (но не коммерческого) использования, хотя имеются ограничения по поиску. Акт щедрости пока работает на продвижения фотобанка.

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

Бесплатно стоковые изображения от HubSpot можно скачать тут, тут и тут

3) Релевантность изображения и креатив

Изображение на странице сайта соответствуют окружающему контенту? Оно должно иметь смысловую привязку к  теме статьи или даже словосочетанию из заголовка. Только подумайте: заголовок и релевантные ему изображения – первое, что замечается и оказывает воздействие на посетителя в сфере рекламы и продвижения, например в социальных медиа или e-mail маркетинге. Если связь между ними сразу не ясна, пост будет выглядеть непрофессионально и это может снижать эффективность контента и долю переходов по ссылкам.

Если не получается подобрать подходящее к обсуждению в статье изображение – попробуйте поиграть с заголовком, внедряя слова или фразы до получения возможности очевидной ассоциации с ними качественного интересного изображения. Например, пост ничего общего с апельсинами не имеет, но выбор ассоциативного изображения удачен, потому как в заголовке говорится о разделении (slice, dicing — доля & нарезка на части) и сегментации.

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

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

текст поверх изображения

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

4) Привлекательность

Главному изображению статьи недостаточно быть «уместным & красивым». Оно должно обладать свойством – останавливать взгляд посетителя, привлекать внимание… т.е. быть таким, чтобы его сочли любопытным, обаятельным, трогательным и т.д. Нужно помнить, что первая картинка поста блога обычно притягивает взгляды активной публики соц-сетей, желающей поделиться ссылкой на интересный контент в Facebook, Google+, LinkedIn, VK и т.д. Английская поговорка гласит:

У вас не получится дважды произвести первое впечатление

Выбор скучных и обыденных, некрасивых изображений – это риск понизить с таким «впечатлением» уровень внутренних переходов по сайту.

Читайте также:  20+ вдохновляющих сайтов с плоскими иллюстрациями в дизайне

5) Высоко-качественные изображения

Кажется, это должно быть само собой разумеющимся, но все же, каковы качественные характеристики? Какое разрешение у снимка или картинки? Разрешение – это количество пикселей на дюйм (ppi — pixel per inch). Вес файла картинки растет с увеличением числа пикселей в ней, т.е. с повышением разрешения. При этом линейные размеры изображения остаются неизменными, а размеры пикселей уменьшаются — картинка становится четче и качественнее. В поиске по картинкам высокое разрешение дает преимущество в ранжировании. Выбирая для интересного изображения низкое качество, вы отнимаете у него возможность сыграть свою важную роль и теряете доверие посетителей к сайту.

6) Оптимизация файла изображения

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

Многие эксперты рекомендуют взять за правило не превышать лимит в 100 KB

Имейте в виду:

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

Уменьшать размер (вес) web графики удобно программами для сжатия изображений. Например такими, как эти:

  1. Advanced JPEG Compressor – наверное лучший выбор, когда необходимо уменьшить размер файла скриншота или картинки для сайта. Программа действительно облегчает процесс Image Оптимизации, сжимая оптимально, при параметрах по умолчанию или по выбору предопределенного профиля сжатия (в пакетном режиме)
  2. RIOT (Radical Image Optimization Tool) — это неплохая альтернатива из бесплатных программ

7) Изображения адаптированы под все размеры экранов?

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

Читайте также:  Как правильно оформить главную страницу: 42 сайта в пример