👌SEO-оптимизация изображений для поисковых систем

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

Расскажем, какие параметры учесть при SEO-оптимизации изображений и как правильно их корректировать.

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

Формат изображения влияет на его качество и вес, а вес, в свою очередь, — на скорость загрузки. Правильный выбор формата поможет уменьшить вес картинки без потери качества. Для размещения на сайтах используются векторные и растровые изображения, основным форматом векторной картинки является svg, растровой — png, gif, jpeg.

Как оптимизировать векторную картинку?

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

Пример векторной графики — много линий, мало цветов, нет сложных переходов и оттенков

Как оптимизировать растровую картинку?

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

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

Пример растровой графики — много деталей, цветов и оттенков

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

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

Выясните, какой оптимальный размер изображения требуется для сайта, и заранее уменьшите размер (и вес!) изображения.

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

Как заполнить теги для SEO-оптимизации изображений?

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

Выглядит это примерно так:

<img src = "/ссылка или путь к картинке" alt = "Описание картинки" title = "Заголовок картинки">

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

• Название — название картинки отображается в ее ссылке, поэтому перед загрузкой изображения переименуйте файл. Используйте латиницу, вместо пробелов нижнее подчеркивание. Например, если фото называется «Комод белый антик с тремя ящиками», на выходе должно получится примерно «Komod_belyj_antik_tri_yashchika», а ссылка будет выглядеть как «/Komod_belyj_antik_tri_yashchika.jpeg»
• Title — заголовок изображения, который пользователь видит при наведении курсора на картинку. Заголовок пишите на русском, ограничьтесь несколькими словами.
• Alt — описание картинки, которое пользователь увидит, если изображение вдруг не загрузится. Пишите также на русском, чуть подробнее заголовка, уложитесь в одно простое предложение.

Как использовать микроразметку для SEO-оптимизации изображений?

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

Узнайте больше об оптимизации изображений в нашей статье.