Атрибуты изображений
Атрибуты изображений - параметры HTML-тега <img>, которые определяют свойства и поведение изображения на веб-странице. Наиболее важными для интернет-маркетинга и SEO являются атрибуты src, alt, width, height и loading, влияющие на индексацию, доступность, скорость загрузки и визуальную стабильность сайта.
Основные атрибуты
[править]src (source)
[править]Обязательный атрибут, указывающий путь к файлу изображения. Может содержать относительный путь (например, "/images/product.jpg") или абсолютный URL (например, "https://example.com/images/product.jpg").
Ошибки в src приводят к отображению битой ссылки, что ухудшает пользовательский опыт.
alt (alternative text)
[править]Текстовое описание изображения, которое показывается, если файл не загрузился, и зачитывается программами экранного доступа для незрячих пользователей.
Для маркетинга и SEO alt важен по нескольким причинам:
- Поисковые системы используют alt для понимания содержания изображения
- Изображения с заполненным alt имеют шанс попасть в поиск по картинкам
- Соблюдение требований доступности (a11y) улучшает репутацию сайта
- При отключённых изображениях пользователь видит описание вместо пустого места
Правила заполнения alt:
- Кратко и точно описывать суть изображения
- Для товарных фото указывать название товара, бренд, артикул
- Для декоративных элементов, не несущих смысловой нагрузки, оставлять alt пустым (alt=""), чтобы скринридеры пропускали их
- Избегать переспама ключевыми словами
width и height (ширина и высота)
[править]Атрибуты, задающие размеры изображения в пикселях. Их указание критически важно для метрики CLS (Cumulative Layout Shift).
Без width и height браузер не знает, сколько места зарезервировать под картинку до её полной загрузки. Когда изображение загружается, оно "раздвигает" соседние элементы, вызывая скачки контента. С указанными размерами браузер резервирует нужное пространство сразу.
Современная практика:
- Указывать width и height в HTML
- В CSS при необходимости переопределять размеры, сохраняя пропорции через свойство aspect-ratio
- Для адаптивных изображений использовать width: 100% и height: auto вместе с заданными атрибутами
<img src="product.jpg" width="600" height="400" alt="Название товара" style="width: 100%; height: auto;">
loading (загрузка)
[править]Атрибут, управляющий отложенной загрузкой изображений. Принимает значения:
- lazy - изображение загружается только тогда, когда пользователь приближается к нему при скролле
- eager - изображение загружается сразу (значение по умолчанию)
Использование loading="lazy" ускоряет загрузку начального экрана и экономит трафик пользователей, особенно на страницах с большим количеством картинок (каталоги, галереи).
Важно не применять lazy к изображениям, которые находятся в видимой части страницы при загрузке (above the fold), так как это может ухудшить восприятие LCP (Largest Contentful Paint).
fetchpriority (приоритет загрузки)
[править]Сравнительно новый атрибут, позволяющий указать браузеру важность загрузки изображения:
- high - загрузить в первую очередь
- low - загрузить в последнюю очередь
- auto - значение по умолчанию (браузер решает сам)
Полезен для ключевых изображений на странице, например, главного фото товара или основного баннера.
srcset и sizes (адаптивные изображения)
[править]Атрибуты для загрузки разных версий изображения под разные размеры экрана и разрешения устройства.
srcset задаёт список файлов с указанием их ширины (например, "image-400.jpg 400w, image-800.jpg 800w") или плотности пикселей ("image-2x.jpg 2x").
sizes подсказывает браузеру, какую ширину будет занимать изображение на разных разрешениях экрана ("(max-width: 600px) 100vw, 50vw").
Это позволяет не грузить тяжёлые десктопные картинки на мобильных устройствах, ускоряя загрузку и экономя трафик.
<img src="image-400.jpg"
srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"
sizes="(max-width: 600px) 100vw, 50vw"
alt="Описание">
decoding (декодирование)
[править]Указывает браузеру, как обрабатывать декодирование изображения:
- sync - синхронно (изображение отобразится только после полного декодирования)
- async - асинхронно (страница может отображаться до завершения декодирования)
- auto - браузер решает сам
Для большинства случаев достаточно auto, но async может немного ускорить отрисовку контента вокруг изображений.
Влияние на маркетинговые метрики
[править]Скорость загрузки
[править]Правильное использование атрибутов (размеры, lazy loading, srcset) напрямую влияет на скорость загрузки страницы, которая является фактором ранжирования и влияет на поведенческие метрики.
Визуальная стабильность (CLS)
[править]Указание width и height критически важно для хороших показателей CLS, что влияет на ранжирование в Google и удобство пользователей.
Поисковый трафик
[править]Качественное заполнение alt помогает изображениям ранжироваться в поиске по картинкам, привлекая дополнительный трафик.
Конверсия
[править]Быстрая загрузка изображений и отсутствие скачков контента при скролле улучшают пользовательский опыт и могут повышать конверсию, особенно в интернет-магазинах.
Доступность
[править]alt-тексты делают сайт доступным для людей с ограниченными возможностями, что может быть важно для репутации бренда и соответствия законодательству.
Типичные ошибки
[править]- Отсутствие alt у содержательных изображений
- Переспам ключевыми словами в alt
- Отсутствие width и height, вызывающее смещения
- Применение lazy loading к изображениям в видимой части экрана
- Использование слишком тяжёлых изображений без srcset
- Битые ссылки в src
Инструменты проверки
[править]- PageSpeed Insights - показывает, какие изображения можно оптимизировать
- Lighthouse - проверяет наличие атрибутов и даёт рекомендации
- Chrome DevTools - позволяет увидеть, какие изображения загружаются и с какими размерами
- Google Search Console - отчёт "Улучшения для изображений" показывает проблемы с alt
