Изображения для сайта: где, какие, как?


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

Изображение дает вам контекст, благодаря которому вы решаете, читать ли материал дальше, задерживаться ли на самой картинке, делиться ли материалом в сетях. Экспериментами доказано: если к тексту добавить картинку (пока не говорим о ее качестве), вероятность его прочтения вырастет на 80% , а материалами, в которых есть изображения, в соцсетях делятся в 40 раз чаще.

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

ГДЕ ИСКАТЬ?

Все чаще поисковые системы обращают внимание на уникальность всего контента. Google может либо понизить сайт в выдаче, либо и вовсе удалить его из результатов поиска, если на ресурс постоянно жалуются за нарушение авторских прав. Поэтому главное правило, которым нужно руководствоваться при поиске изображения гласит: публикацию ЛЮБОГО фото нужно согласовать с правообладателем, косвенно или напрямую. Иначе могут разозлиться не только поисковики, но и сам автор снимка. Теперь поговорим о том, как можно использовать фотографии на своем сайте законно.

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

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

Фото — Alex John

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

CC Attribution. Разрешается свободное использование произведения при условии указания его автора.
CC Attribution — Share Alike. Разрешается свободное использование произведения с указанием его автора. Кроме этого, можно создавать переработанные версии, но распространять их можно только под той лицензией, под которой опубликовано оригинальное произведение.
CC Attribution Non-Commercial. Разрешается свободное использование произведения с указанием автора, но только в некоммерческих целях (то есть, без получения прибыли*).
CC Attribution No Derivative Works. Разрешается свободно использовать произведения с указанием автора, но запрещается вносить любые изменения.

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

 

Знаки различных лицензий

Кроме лицензий СС, существует еще Public Domain. Если вы видите такую пометку, значит, эти снимки стали общим достоянием – например, на них истекли авторские права или сами авторы подарили их миру. Такие снимки можно использовать бесплатно и даже без указания авторства.

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

Эмбед — это способ заимствовать и задействововать возможности другого веб‐ресурса на вашей странице. Он позволяет встраивать на сайт мультимедийные элементы из различных веб‐сервисов.

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

1. Flickr

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

Ищите на сайте по максимально конкретным запросам

2. Unsplash

Сюда за редкими и атмосферными снимками. Отличительное свойство сайта — авторы размещают тут фотографии под еще одним интересным типом лицензии: Creative Commons Zero. Фактически они отказываются от претензий даже на авторство, превращая свои работы в общественное достояние. Каждые 10 дней здесь выпускают симпатичную подборку новых фото. По такому же принципу работают, Pixaby.com (есть как фотографии, так и векторная графика и иллюстрации) и Pexels.com (можно искать по архиву, цветам).

Пример фотографии, которую можно найти на сайте

3. Google images

 Да-да, а вы совсем забыли про старину Гугла! Здесь тоже можно находить авторские фотографии, только для этого нужно указывать необходимый тип лицензии при поиске. Ищем через вкладку «Картинки», затем переходим в «Инструменты поиска» и указываем необходимый тип лицензии. Здесь же можно указать желаемый размер.

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

Давайте попробуем поискать в гугле картинки Джоди Уиттакер — актрисы, которая сыграла последнего на данный момент Доктора Кто. Допустим, мы не знаем, как ее зовут.

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

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

Поэтому пробуйте разные варианты: на английском, по фамилии актрисы по запросу «тринадцатый доктор» и т.д.

Фотобанки

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

Условно все сайты, на которых можно купить снимки, можно разделить на три категории.

1. Stocks

Это те же стоки, только с чуть менее заезженными снимками. И хотя они более оригинальны, чем бесплатные снимки, здесь все равно достаточно много банальных предложений. Но зато они не будут дорого стоить — примерно $1-2.

Еще один плюс – авторы работают по лицензии «Royalty-Free»: это значит, что вы покупаете картинку и можете использовать ее неограниченное количество раз (но только ПОСЛЕ ПОКУПКИ). Такие фотографии можно найти, например, здесь:

2. Creative

В этой группе можно найти более качественный контент. Но и цена будет стартовать от 100$, и лицензия будет совсем другой, нежели в предыдущей группе — «Rights-Managed». Это значит, что в большинстве случаев вы отдаете деньги только за использование фото строго оговоренное в договоре количество раз (вплоть до одного раза).

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

Посмотрите: фотография стоит почти 500 долларов, но вы также можете сделать и эмбед.

3. Editorial

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

Фотосессия

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

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

Фото — Лилия Гайдаржи

КАКИЕ ФОТО ДЛЯ САЙТА?

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

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

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

С точки зрения техники все немного сложнее. Первое, что необходимо соблюдать, — единый размер для всех изображений. Он определяется в пикселях и для корректного отображения должен быть не менее 600х400 рх. Наилучший размер — не меньше разрешения наиболее популярного экрана для настольных компьютеров (например, 1366х768 рх).

Здесь важно соблюсти баланс: с одной стороны, сохранить качество изображения, с другой — оптимизировать его для поисковых систем (об этом мы поговорим в следующем разделе).


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

  • JPEG нужно использовать для стандартных фотографий — оптимальное соотношение размера и качества;
  • PNG — для графиков, которые рисуют ваши дизайнеры — позволяет рассмотреть детали;
  • В SVG лучше публиковать векторные изображения — это всевозможные логотипы, значки и геометрические штуки;
  • С GIF все понятно: если вам нужно вставить анимацию, этот формат Гугл тоже распознает.
  • WebP — достаточно новый формат фотографий, с которым знакомы поисковые системы, но не все браузеры, поэтому с ним нужно быть осторожным.

КАК ИСПОЛЬЗОВАТЬ ФОТО?

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

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

«Важный момент — нужно ли подписывать саму фотографию на сайте? ОБЯЗАТЕЛЬНО! Автор не должен бросать снимок в своего читателя, чтобы он сам разбирался, что хотел сказать журналист. Емкая подпись не испортила ни одно изображение. Исключение можно сделать, пожалуй, только для главной фотографии, которая служит квинтэссенцией всего материала, — например, красивый цветок в вазе в тексте про букет для мамы. Подписывать картинку лучше снизу, чтобы сразу расставить акценты, в крайнем случае — справа. Нельзя забывать про пунктуацию и указание источника (обязательное правило практически для всех случаев).

Так фотографии подписывает новостной портал Медуза

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

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

  • Compressor.io (бесплатный сайт, можно загружать фотографии до 10 МВ, сжимает до 90%);
  • Kraken.io (можно одновременно работать с несколькими изображениями);
  • Optimizilla.com (разрешает добавить сразу до 20 снимков).

Кроме этого, оптимизировать изображение на сайте можно еще несколькими способами: снизить глубину цвета, сжать данные, масштабировать изображение… Для всего этого можно воспользоваться классическими программами Photoshop, CorelDraw и даже Paint, а можно найти множество онлайн-сервисов.

Так выглядит главная страница одного из самых известных оптимизаторов.

Большую работу придется проделать и с метаданными изображения.

  1. Заголовок. Следите, чтобы он был понятным, это должно быть кратким описанием в названии файла. Причем название должно даваться латинскими буквами, вместо пробелов лучше использовать дефисы или нижние подчеркивания. Будет круто, если вы используете максимально конкретные ключевики (не «купить книгу», а «книга Льва Толстого»).
  2. Title. Это то, что видит пользователь, когда наводит мышку на изображение. Лучший вариант — создать максимально корректное название на русском, которое слегка дополнит основной заголовок.
  3. Alt. Это описание вашего изображение, которое несет в себе очень важные функции. Во-первых, если по каким-то причинам ваша страница перестанет грузиться, вместо изображения пользователь увидит именно метатег Альт. Во-вторых, именно альтернативный тег используется при объяснении людям с ослабленным зрением того, что находится на картинке. В-третьих, поисковики тоже индексируют текст Alt, чтобы понять, какие изображения лучше показывать пользователям.Теперь вы понимаете, почему он должен корректно описывать картинку? Для этого используйте четкие фразы, можно добавить ключевики (только не переспамьте, это плохо!) Чаще всего метатег состоит из 115 символов.
  4. Автоматизация. Можно создать автоматическую генерацию мета-тегов, чтобы вам было проще работать. Еще на этапе разработки сайта укажите это в задании для программистов.
  5. Близость. При верстке старайтесь, чтобы текст, который относится к изображению, стоял рядом с ним. Это тоже влияет на ранжирование.Уникальность. Не лишним будет еще раз вспомнить о ней. Чем более уникально ваше изображение, тем лучше оно проиндексируется. Кстати, проверить уникальность снимка можно с помощью различных сервисов — например, TinEye.
Главная страница сайта.

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

  1. Искать картинки можно на бесплатных и платных ресурсах. Преимущества первых — не нужно ничего платить, недостаток — низкое качество фотографий, сложный поиск.
    Преимущества вторых — высокое качество контента, хорошая уникальность, недостаток — недорогие иллюстрации чуть лучше бесплатных, цена за дорогие фотографии не всегда себя окупает.
  2. Хороший выход — не искать чужие фотографии, а создавать свои, самостоятельно или с помощью профессиональных фотографов. Особенно это важно для работы сайта и для работы в социальных сетях. Поверьте, люди отличают стоковую картинку от настоящей. 
  3. Обращайте внимание на тип лицензии фотографий, которые вы используете. 
  4. Чем уникальнее фотография на сайте — тем лучше. Приятнее и людям, и поисковым роботам. 
  5. Технически и эстетически фотография должна быть безупречной: соответствовать тексту по смыслу и определенным параметрам (размеру, формату, яркости, контрастности) — по форме. 
  6. Важно оптимизировать фотографии. 
  7. Уменьшайте размер снимков без потери качества. 
  8. Обращайте внимание на подпись к фотографиям. 
  9. Alt — это гиперважно. Используйте его с умом.Создавать гениальное просто.

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

  1. Разместить изображение поверх текста
    Это сильный графический прием, который требует аккуратности. Он подчеркивает важность информации на изображении, поэтому лучше применять его для снимков на обложке, для главной страницы сайта, в начале раздела или на блоках, где есть призыв к действию.Такой прием должен показывать однородность стиля и отсутствие мелких деталей — особенно в центре, поскольку текст, вероятно, будет находиться именно там. Изображение должно создавать с текстом контраст, но не спорить с ним, поэтому фон нужно делать темнее. Также можно использовать прием размытости текста, чтобы убрать лишний акцент с деталей.Используйте незаполненное пространство на картинке, чтобы вписать туда текст. После окончания работы не забудьте проверить отображение подобных картинок на различных устройствах: оно должно быть корректным.
  2. Лучший прием — классическое размещение текста и изображения
    Помните: расставляя элементы материала и выбирая их размер, вы делаете акценты в тексте. Классическая схема, по которой версталась не одна тысяча материалов. Сначала идет изображение, после него — заголовок и текст. Так людям психологически проще, поэтому экспериментировать с другими формами стоит осторожно.
  3. Если не до конца уверены в своих силах, вдохновляйтесь примерами!
    Можно как использовать уже готовые шаблоны Tilda или Canva, так и подсмотреть несколько идей. Нравится какой-то сайт? Обратите внимание, какие иллюстрации они используют, как их подписывают и где берут. Пойдите еще дальше и понаблюдайте за сайтами мировых домов моды, информационных агентств, футбольных клубов. Вдохновляйтесь и создавайте новые шедевры иллюстраций!


+ Нет комментариев

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