ПОИСК

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Рис.2 – Сервисы поиска картинок (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).

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

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

Выводы

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

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

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

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

1376