Методы оптимизации изображений

Почему это важно

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

HTML-синтаксис для оптимизации изображений

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

  • alt – альтернативный текст для описания изображения;
  • title – всплывающая подсказка (подпись);
  • width – ширина изображения;
  • height – высота изображения.

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

ris.1

Рис.1 – Пример заполнения атрибутов тега a – title; b – width & height; c - alt

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

Формирование текстов для атрибутов тега

Альтернативный текст для атрибутов должен быть коротким (менее 150-ти символов с учетом пробелов) и информативным. Поисковым системам необходим описание картинки, которое будет включать информацию о тематическом содержании с использованием релевантных ключевых слов. Для этих целей можно задействовать низкочастотные запросы, что увеличит шансы попадания в TOP поиска по картинкам. Наиболее значимые запросы лучше указывать в начале описания. Вместе с тем, не следует злоупотреблять количеством ключевых слов в описании. Такие действия могут иметь негативные последствия для продвижения. Не нужно использовать символы, которые не имеют поисковой актуальности, например © или (с).Текст, который расположен вокруг картинки должен быть уникальным, а графический объект по смыслу должен соответствовать содержанию. Немаловажным фактором для ранжирования изображения является семантическая составляющая окружающего текста (примерно 15 слов до и после). Такая связь позволяет поисковым системам определить качество изображения. Отчасти данные рекомендации сформулированы в документах MSDN (MSDN – библиотека для технических специалистов по разработке программного обеспечения).

Установка значений для атрибутов width и height

Заполнение значений ширины (width) и высоты (height) изображения (см. Рис.1) способствуют ускорению его загрузки. Так, если браузеру недоступны эти данные, он должен их сначала определить и только потом загрузить объект и остальную часть кода страницы.Когда же параметры прописаны, браузер может заранее выделить место под изображение, одновременно загружая оставшуюся часть страницы. Кроме того, эти правила справедливы и для таблиц. Поисковые системы Яндекса и Google для поиска картинок (см. Рис.2) также используют атрибуты width и height для картинки (маленькое, среднее, большое). Стоит перепроверять, что установленные значения соответствуют фактическому размеру изображения. 

ris.2

Рис.2 – Сервисы&nbsp поиска картинок (a - images.yandex.ru; b - images.google.com.ua)

Название графических файлов

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

  • имена должны быть простые и удобные пользователю;
  • необходимо использовать- ключевые слова в названии файла;
  • название файла не должно содержать цифры и бессмысленный набор букв (например, IMG027589.jpg);
  • количество слов в файле не должно превышать 4-5;
  • вместо пробелов между словами использовать дефис;
  • при необходимости использования одного названия изображения для разных файлов, необходимо использовать идентификаторы (например, kozhanaja-kurtka-01.jpg, kozhanaja-kurtka-02.jpg, kozhanaja-kurtka-03.jpg и т.д;).
  • если изображения имеют похожий смысл и логически дополняют друг друга, необходимо размещать их в одной папке с соответствующим именем (например, … /kozhanye-kurtki/kozhanaja-kurtka-01.jpg, … /kozhanye-kurtki/kozhanaja-kurtka-02.jpg и т.д.).

Выбор формата изображений

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

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

  • GraphicsInterchangeFormat (GIF) – этот формат изображения лучше всего подходит для изображений, в которых используется 1-2 цвета, например, логотипы или анимация. Особенности: прозрачный фон, отсутствует смешение цветов.
  • PortableNetworkGraphics (PNG) – обеспечивает высокое качество, но при этом генерирует файлы большого размера, которые часто не подходят для использования в сети. Существуют исключения, например, когда требуется чрезвычайно высокое качество: произведения искусства (картины).
  • JointPhotographicExpertsGroup (JPEG) – это предпочтительный формат для изображений в сети Интернет. Показывает большое разнообразие цветов и генерирует файлы меньшего размера, чем PNG. Этот формат великолепно подходит для фотографий, а также для иллюстраций, где присутствует градиент, тени и т. п.

Сохранять изображения лучше с применением прогрессивной схемы сжатия (progressive JPEG, см. рис.3а) вместо базового режима кодирования (baseline JPEG, см. рис.3b). В таком случае рисунок будет загружаться быстрее, постепенно увеличивая степень детализации. (см. рис.3a).

ris.3

Рис. 3 – a (прогрессивное сжатие JPEG ); b (базовое сжатие JPEG)

Размер одного и того же изображения при использовании разных форматов: GIF (256 цветов) – 42K; PNG-8 (256 цветов) – 37K; PNG-24 – 146K; JPG (60 quality) – 32K

Сервисы для оптимизации формата изображения

При использовании большого количества визуального контента на сайте, скорость загрузки страницы может замедлится , что негативно влияет на ранжирование и поведение пользователей на сайте. Для того, чтобы избежать повышения показателя отказа на страницах из-за низкой скорости, необходимо использовать сервисы для уменьшения размера картинок. В доступе существуют как бесплатные, так и платные сервисы. Также следует учесть тот факт, что некоторые сервисы сжимают изображения с потерей качества. Среди бесплатных сервисов, которые не приводят к потере качества изображения следует выделить Kraken, Optimizilla и Compressor.io.

Выводы

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

Подводя итог, необходимо учесть еще несколько хороших практик:

  • графические файлы должны быть доступны для поисковых роботов (в файле robots.txt папки с изображениями не должны закрываться от индексации);
  • изображения желательно добавлять в карту сайта (см. подробнее);
  • если возникает необходимость - создавать несколько версий изображения, использовать графические миниатюры (см. подробнее);
  • привлекать внешние ссылки для наиболее ценных изображений;
  • обеспечить уникальность графических материалов.

Дополнительную информацию можно найти в справочниках поисковых систем:

Если вы хотите работать с нами,
давайте начнем с обсуждения задачи

Получить консультацию

Получайте новости интернет-маркетинга

Только полезная информация от экспертов Promodo

Получайте новости интернет-маркетинга