Визуальный контент для сайта: как использовать изображения эффективно

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

Виды изображений на сайте

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

• Иконки. Используются как часть интерфейса. Визуальные образы должны вызывать определенные ассоциации. Например, увидев значок телефона, пользователь поймет, что эти иконки указывают на раздел с контактами. В качестве ярлыков воспринимаются и логотипы сервисов или продуктов. Однако нельзя полагаться только на визуал. Не все образы интерпретируются одинаково разными людьми. Надписи помогут избежать недопонимания.
• Баннеры с текстом. Один из форматов онлайн-рекламы. Баннеры привлекают внимание и стимулируют пользователей переходить на те или иные разделы сайта. В этом случае визуал должен соответствовать заявленной теме, а надпись — кратко раскрывать суть материала. Он будет демонстрироваться после нажатия на баннер.
• Инфографика. К ней относятся схемы, диаграммы, графики и прочее. Помогают читателю не запутаться в потоке однородных данных, прежде всего числовых. Реализовывать инфографику на движке сайта не всегда возможно или целесообразно. Поэтому часто она создается в стороннем ПО и сохраняется как изображение.
• Фотографии. В статьи блога могут добавляться снимки локаций, объектов, людей или процессов, о которых рассказывается в тексте. Оформляют такие картинки по-разному: как одиночные кадры, коллажи, галереи и слайд-шоу.
• Иллюстрации. Обширная категория, в которую можно включить все, что не вошло в рассмотренные выше. Например, к ней относятся скриншоты и тематические рисунки. Они наглядно показывают, о чем идет речь в тексте, и тем самым помогают пользователям ориентироваться в навигации сайта.

Где искать изображения для сайтов

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

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

У любых картинок есть создатель, или автор. Именно он решает, как будет использоваться его контент.

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

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

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

Стоки

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

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

К таким крупнейшим международным стокам относятся Pixabay, iStock, Pexels, Unsplash. Российские подобные ресурсы: Лори, Photogenica, PressFoto, Медиабанк ТАСС.

Сайты с иконками

Помимо стоков с фотографиями и видео, существуют аналогичные ресурсы с иконками. Они работают по такому же принципу. Доступ к библиотеке свободный (Game-icons.net) или открывается после регистрации (Flaticon, Icons8, Freepik). Скачивать и пользоваться значками можно бесплатно или по подписке.

Как самостоятельно создать изображения для сайта

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

Иллюстрации и коллажи

Один из способов повысить уникальность — создать коллажи или иллюстрации.

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

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

Фотография

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

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

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

Инфографика

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

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

При необходимости в инфографику можно добавлять иконки и другие изображения. Однако они не должны мешать восприятию данных. Для создания такого контента пригодятся специальные онлайн-сервисы: Prezi, Visme, SUPA, Wbcard и другие.

Нейросети

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

Лучшие результаты сейчас демонстрируют зарубежные системы — DALL-E, Midjourney, Stable Diffusion, Microsoft Designer. Для более точной обработки запросов их нужно вводить на английском. Российские сервисы, например Шедеврум и Кандинский, понимают русский язык, но пока отстают по качеству от иностранных аналогов. ИИ не всегда улавливает суть запроса. Чтобы получить результат, который соответствует задаче, иногда приходится использовать несколько разных формулировок.

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

Технические требования к изображениям

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

Формат

В современном интернете обычно используются четыре формата.

• JPEG. Подходит для иллюстраций и фотографий. Может обеспечивать высокое сжатие, но ценой потери качества.
• PNG. Поддерживает прозрачность (альфа-канал), поэтому используется прежде всего для графических элементов интерфейса. В формате задействуется сжатие без потерь, которое обеспечивает высокое качество. Однако файлы становятся большими по размеру.
• WebP. Сравнительно новый формат, предложенный Google. Поддерживает альфа-канал и оба алгоритма сжатия данных — с потерями и без потерь. Причем в каждом из режимов файлы имеют меньшие размеры, чем при сохранении соответственно в JPEG и PNG.
• SVG. Векторный формат, поэтому масштабируется без снижения качества. Предназначен для схем, чертежей, логотипов и графики, которая генерируется кодом сайта.

Размер

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

Размер оптимизируется за счет правильного выбора формата, разрешения и степени сжатия. За редким исключением не имеет смысла сохранять фотографии в PNG. Этот тип файлов лучше использовать для интерфейса. Снижение качества обычно незаметно при уровне сжатия около 60% от оригинала.

Разрешение

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

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

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

SEO-оптимизация изображений

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

ALT-теги

ALT — один из атрибутов тега IMG. В нем прописывается текст, который отображается на странице, если по какой-то причине изображение не получается загрузить и вывести на экран.

Прописанный атрибут повышает доступность ресурса для пользователей, что положительно оценивается поисковиками. Насчет длины текста существуют разные мнения. Считается, что для лучшей выдачи в Google она должна быть до 125 знаков с пробелами, а для Яндекса — до 250.

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

TITLE-теги

TITLE — еще один атрибут тега IMG. Он содержит текст для всплывающей подсказки, которая появляется, когда пользователь наводит курсор на изображение.

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

Имена файлов

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

Названия нужно прописывать транслитом, а между словами ставить дефис. Например, «ryzhaya-koshka-neset-kotenka.jpg». В имена можно включать подходящие SEO-ключи.

Заключение

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

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

Подходящую графику ищете на бесплатных стоках, заказывайте у фотографов и дизайнеров или создавайте самостоятельно. Хорошую помощь сейчас оказывают нейросети. Среди них есть как иностранные, так и российские сервисы. При верстке всем файлам с графикой нужно давать осмысленные названия. Их прописывают транслитом через дефис. Также следует заполнять атрибуты ALT и TITLE для тега IMG.

Заказать дизайн сайта в MWI

Заполните свои контактные данные, и мы вам перезвоним

Нажимая на кнопку «Отправить заявку», вы соглашаетесь на обработку персональных данных в соответствии с политикой конфиденциальности.