Урок 7.10 – Оптимизация изображений, атрибуты alt и title
Для удобства и наглядности восприятия рекомендуется использовать на страницах сайта различные изображения.
В HTML-код изображение вставляется так:
<img src = «ссылка на файл с картинкой» alt = «пояснение что на картинке» />
Основные требования к оптимизации изображений
- Картинка должна быть четкой, то есть хорошего качества.
- Изображение не должно быть большим по объему в мБ, иначе снизится скорость загрузки страницы.
- Изображение не должно выходить за пределы экрана, или прилегать к тексту вплотную.
- Атрибут alt должен быть обязательно задан. В значении атрибута alt нужно прописать пояснение, что изображено на картинке, и в это пояснение органично вписать продвигаемые фразы.
- Изображение должно корректно отображаться на всех устройствах, десктопах, планшетах, телефонах.
- Ссылка на файл с картинкой не должна быть битой.
- Для увеличения скорости загрузки страницы можно использовать ленивую загрузку изображений. Ленивая загрузка – это когда при загрузке подгружаются только те изображения которые находятся в видимой части страницы, остальные изображения подгружаются по мере прокрутки страницы вниз.
- Если страница содержит много полноразмерных картинок, то можно сделать небольшое по размеру превью этих изображений и оформить все это в виде галереи, где по клику будут открываться большие изображения. Это позволит не загружать большие изображения при открытии страницы и увеличит скорость загрузки страницы в целом.
Галерея изображений в HTML-коде может выглядеть так:
<ul>
<li><a href = «ссылка на большое изображение» title = «текст при наведении на ссылку» > <img src = «ссылка на превью картинки» alt = «текст отображаемый если превью не удалось загрузить» /> </a></li>
<li><a href = «ссылка на большое изображение» title = «текст при наведении на ссылку» > <img src = «ссылка на превью картинки» alt = «текст отображаемый если превью не удалось загрузить» /> </a></li>
</ul>
Атрибут alt у картинки
Данный атрибут отображается в тексте страницы в случае, когда невозможно загрузить изображение. В атрибуте alt прописывают основной смысл картинки, органично включаю в описание продвигаемые фразы. Пустой атрибут alt является незначительной SEO-ошибкой.
Заполненный атрибут альт может улучшить ранжирование страницы, плюс изображение добавится в Яндекс картинки и будет участвовать в поиске по значению атрибута alt.
Атрибут title у ссылки
Атрибут title у ссылки рекомендуется заполнять, если в качестве анкора ссылки используется изображение. Значение данного атрибута выводится на экран при наведении курсора мышки на ссылку.
Фактически поисковики воспринимают значение атрибута title, как анкор у ссылки-изображения. Это очень удобно, так как позволяет включить в атрибут тайтл продвигаемые ключевые слова, фразы и их синонимы.
