Оптимизация изображений на сайте

Содержание

1. Требования к изображениям

1.1 Сколько изображений должно быть на странице?

1.2 Разрешение

1.3 Уникальность

2. Оптимизируем изображения

2.1 Формат

2.2 Адаптация

2.3 Ленивая загрузка

2.4 Атрибут ALT

2.5 Атрибут TITLE

3. Выводы




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

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

Требования к изображениям

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

Сколько изображений должно быть на странице?

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

Считается, что оптимально разместить на странице до 12 изображений:

• первые 4 – это три превью вместе с оригиналом для мобильных устройств;

• затем проводится дублирование этих элементов с соотношением сторон 16:9;

• последние 4 – повторный дубляж с соотношением сторон 4:3.

Рекомендуем также настроить микроразметку ImageObject и/или разместить указатели на эти изображения в виде ссылок через атрибут тега link.

Разрешение

А это – «палка о двух концах». Дело в том, что для SEO важно разрешение изображений, поскольку поисковики считают такие картинки более качественными. Но элементы в высоком разрешении «весят» больше, поэтому дольше загружаются и сильно нагружают страницу – а это уже негативно оценивается поисковиками. Здесь важна умеренность, нужно учитывать и количество картинок. Можно ограничиться небольшим их количеством, но добавить в хорошем качестве.

Существует определенное «золотое правило» для 12 картинок, касаемо разрешения:

• нижняя граница по высоте – не менее 1080 px;

• для превью 640 px в ширину;

• обычно выбирают такой вариант: фото 1920 px в ширину и три превью для мобильных устройств – 640, 920 и 1220 px.

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

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

Здесь можно дать следующие полезные советы:

1. Для карточек товаров достаточно стандартных картинок, скачанных с других площадок. Главное, чтобы на них не было ссылок на сайты-источники;

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

Оптимизируем изображения

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

Формат

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

Наиболее распространенные форматы:

• JPEG;

• PNG;

• GIF;

• WebP;

• AVIF.

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

Адаптация

Эта процедура включает несколько действий – здесь важно найти компромисс между весом изображения и его качеством:

1. Уменьшение размера – этот вариант выбирают для картинок, которые будут размещаться на сайте и увеличивать их не будет необходимости. Сжать файл можно программами guetzli, pngquant или mozjpeg;

2. Работа с палитрой – можно сохранить качество, просто уменьшив цветовую палитру. Внешних изменений обычно не видно, за исключением того, что будет меньше ярких оттенков;

3. Конвертация GIF-файлов в видео – выбирают для длинных анимаций. В этом случае размер уменьшится, что улучшит оптимизацию страницы. Обычно выбирают стандартный формат MP4;

4. Удаляем лишние метаданные – после того, как файл обработан, остается его XML-разметка с метаданными. Ее можно удалить, поскольку она не требуется для дальнейших задач. У фото срезают информацию о дате съемки, геоданных и фотокамере.

Ленивая загрузка

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

Точная настройка согласно рабочим требованиям может быть выполнена только опытным и квалифицированным вебмастером.

Атрибут ALT

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

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

Требования к атрибуту ALT – он должен:

• быть связан по смыслу с основным текстом;

• не содержать повторов слов;

• четко описывать содержание изображения;

• не повторять основные ключи и заголовок страницы;

• иметь длину не более 100 символов.

Атрибут TITLE

Это название изображения, которое выводится при наведении курсора. TITLE обычно прописывают максимально коротко, например, «штукатурка декоративная», «собака Мопс», «самодельная прицеп-дача». Главное, чтобы читатель смог быстро понять, что точно изображено перед ним, получив пояснения. На SEO данный атрибут не влияет, но является полезным для пользователей.

Выводы

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

руководитель seo-студии increase sales

Об авторе: Павел Швальгин

В интернет-маркетинге с 2009 года

Оптимизация изображений на сайте

Оптимизация изображений на сайте

Расскажите нам о вашем проекте