Оптимизация изображений для сайта: alt и title

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


Изображение – элемент сайта, поддающийся оптимизации. У него есть имя файла и атрибут alt и title.

атрибут alt

Атрибут alt (альтернативный текст) обязателен, в него записывается текст, отображаемый посетителю в случае отсутствия картинки по либой из причин.

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

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

У изображения — ссылки, атрибут alt — анкор. Грамотно составленный alt, вместе с информативным именем файла, позволит сервисам картинок поисковых систем осуществлять поиск по изображениям.

Атрибут title содержит дополнительную информацию, отображаемую пользователю при наведении курсора на картинку. title используется для удобства пользователей, показывая им сопровождающий изображение текст, и для продвижения в сервисах картинок поисковых систем. В отличие от alt, title — необязательный атрибут.

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


  1. Изображения статей размещайте возле относящейся к ним части текста. Нет такой возможности — оставляйте у картинок описательные подписи, а не «рис. 1″.
  2. Автоматически генерируемые изображения: CAPTCHA, счётчики, информеры, закрывайте от индексации в robots.txt.
  3. Не используйте изображения вместо текстового контента, если текст в изображении необходим, продублируйте его в статье, иначе, нужная информация будет упущена поисковыми системами, не распознающими текст в картинке.
  4. Навигация, выполненная в виде картинок, а не текста, хоть и даёт возможность перейти на внутренние страницы, не сообщает поисковым системам информацию об их содержимом. По возможности, предоставляйте альтернативное текстовое меню на основные разделы.
  5. Сайты, выполненные на flash, должны иметь текстовую версию. Она полезна не только поисковым системам, но и пользователям с устаревшими браузерами, либо с неустановленным flash.
  6. Вместо того, чтобы хранить изображения в разных директориях, лучше разместить их в одной папке, например, в images, это упростит путь к графическим элементам.
  7. Браузеры поддерживают распространённые типы файлов: GIF, PNG, GPEG и BMP, придерживайтесь этих форматов, избегая редко применимых расширений.
  8. Указывайте размер изображения. Значения высоты и ширины записываются в параметры width и height.
  9. Оптимизируйте изображения для Web. Наполняя сайты изображениями, оптимизируйте их вес, подбирая параметры форматов так, чтобы размер файла картинки был минимальным. Оптимизируя картинки, не забывайте о посетителях, слишком уменьшенное в размере изображение имеет плохое качество, что делает картинку визуально непривлекательной, а её детали трудноразличимыми. Оптимизированное изображение уменьшит вес веб-страницы, на которой оно расположено, увеличив скорость её загрузки.

Рекомендуется:

  1. Использовать короткие, описательные имена и текст в атрибуте alt и title.
  2. Применять атрибут alt в графических ссылках. Он сообщит поисковым системам информацию о странице, той, куда ведет ссылка.

Не рекомендуется:

  1. Использовать типичные имена файлов: 1.png, pic.png, image1.png.
  2. Помещать в атрибут alt и title большое количество ключевых слов.
  3. Длинный alt-текст.
  4. Использовать изображения в качестве навигации по сайту.

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

Читайте также: