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

Согласно данным Jumpshot за 2018 год, более 20% всех поисковых запросов в Интернете приходились на Google Images. Без правильной оптимизации изображений сайт теряет большую часть поискового трафика. Оптимизация изображений дает уйму преимуществ, от улучшение пользовательского опыта, ускоряя загрузка страниц до дополнительного источника трафика.

Давайте рассмотрим основные факторы ранжирования изображений и ускорения работы сайта. Главные советы по оптимизации изображений, которые нужно знать.

Правильный формат

Несмотря на множество форматов изображений, наиболее распространенными для Интернета являются PNG и JPEG.

  • PNG: дает лучше качество, но много весит.
  • JPEG: потеря качества, но можно выбрать уровень качества.
  • WebP: сжатие без потерь или с потерями, формат изображений, поддерживаемый Google Chrome, а также Firefox.

Google поддерживает формат SVG, но не могут проиндексировать JPG-изображение в теге внутри встроенного SVG-файла.

На первый взгляд оптимальный кажется выбрать формат WebP, но так как его поддердивают не все браузеры,  следует сделать резервный вариант файла WebP. Для этого потребуется использовать отдельный элемент <picture> в HTML для создания резервных копий. Так же есть плагин WebP Express для WordPress, который автоматически делает это, и может использоваться для массового преобразования. В конечном счете, эксперименты с WebP не слишком привлекательны, учитывая ограниченную поддержку браузеров.

Используйте только поддерживаемые форматы

Сжимайте изображения

Согласно HTTP Archive, изображения составляют в среднем 21% от общего веса страниц.

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

У TingPNG есть плагин WordPress, Я предпочитаю WP Smush в качестве плагина для WordPress. Он уменьшает размер файла изображения без потери качества. Главное найти плагин, который сжимает изображения на своих серверах, что бы снизить нагрузку на сайт.

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

Если вы не уверен в целесообразности этого шага, проверьте, как изображения влияют на скорость ваших страниц в Google PageSpeed Insights.

Уникальность изображений

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

мужчины, в деловых костюмах, улыбаются

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

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

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

«Большие изображения должны быть не менее 1200 пикселей в ширину и разрешены параметром max-image-preview:large или с использованием AMP».

Авторские права

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

Почтовая служба платит 3,5 миллиона долларов в иске о нарушении авторских прав на изображение. На Skechers подали в суд на 2,5 миллиона долларов.

Если Getty, Shutterstock, DepositFiles или какой-либо другой поставщик стоковых фотографий владеет изображением, которое вы используете, и у вас нет лицензии на его использование, то вы рискуете получить судебный иск.

В соответствии с Законом «Digital Millennium Copyright Act (DMCA)» вам может быть выдано уведомление, если вы нарушили какие-либо законы авторского права. Если владелец контента увидит свой контент на вашем сайте, он может подать заявку на удаление DMCA, которую вы должны соблюдать.

Google Images позволяет фильтровать результаты на основе «доступны для повторного использования», а Минди Вайнштейн недавно поделился 41 сайтом для поиска бесплатных изображений.

Имена файлов изображений

Когда дело доходит до SEO, то правильно заполнить Title, Alt и дать коректное имя файлу изображений, первое что необходимо сделать.

«Название файла может выполнять ту же функцию, что и заголовки с подписями. Поэтому kotik.jpg в качестве названия предпочтительнее, чем IMG00023.JPG. Если вы переводите текст на изображениях, то необходимо также переводить и названия файлов.» — справка Google

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

Давайте представим, например, что у вас есть изображение шоколада. Изображение можно назвать «шоколад», но если вы продаете шоколад на своем веб-сайте, потенциально каждое изображение может быть названо «шоколад-1», «шоколад-2» и так далее, тогда стоит назвать изображение «темный шоколад-кофе», чтобы пользователи и поисковые системы могли правильно интерпретировать содержание изображений.

URL структура файла изображения

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

Повторяю: путь к файлу и имя файла являются фактором ранжирования.
Например, если у вас интернет магазин, вместо того, чтобы размещать все изображения в общую папку /media/, лучше структурировать на подпапки по темам, связанным с категориями.

URL структура файла изображения

Alt текст изображений

Теги Alt — это текстовая альтернатива изображениям, когда браузер не может их правильно отобразить. Подобно заголовку, атрибут alt используется для описания содержимого файла изображения. Когда изображение не загружается, пользователь видит окно изображения с тегом alt в левом верхнем углу. Убедитесь, что оно соответствуют изображению.

Заполнение тега alt также полезно для общей SEO стратегии. Соответствующе заполненный тег alt к изображениям помогает сайту добиться более высокого рейтинга в поисковых системах за счет связывания ключевых слов с изображениями. Даже Google отметил ценность “Alt” текста в изображениях.

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

Оптимизируйте Title & Description страницы

Google также сообщил, что использует Title & Description страницы как часть своего алгоритма поиска изображений.

На странице поддержки Google указано:

Все основные SEO-факторы на странице, такие как метаданные, заголовки, текст на странице, структурированные данные и т. д., влияют на то, как Google ранжирует ваши изображения.

Оптимизируйте Title & Description страницы

Правильные размеры изображений

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

Атрибуты размера изображения также важны для предотвращения проблем с Cumulative Layout Shift (CLS), который может помешать оптимизации в Core Web Vitals.
Убедитесь, что указаны атрибуты ширины и высоты для каждого элемента изображения и видео.

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

Удобство на мобильных устройствах

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

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

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

Добавьте изображения в карту сайта

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

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

Структурированные данные

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

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

Кратко о чем статья

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

Самое главное — убедиться, что изображение и альтернативный текст соответствуют странице. Другие ключевые выводы:

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

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

Удачной оптимизации!