Причины указания ширины и высоты в теге
При создании веб‑страниц одним из самых часто используемых элементов является <img>. Однако часто видны случаи, когда при вставке изображения указывают только src, а размеры опускают.
Такой подход может привести к смещению макета во время загрузки, ухудшению пользовательского опыта и показателей производительности. В этом посте мы разберём, почему важно задавать width и height в теге <img> и какие практические выгоды это приносит с технической точки зрения.
1. Производительность рендеринга и скорость загрузки страницы
1‑1. Обеспечение стабильного макета
Браузер парсит HTML и пытается как можно быстрее отрисовать страницу. Если размеры изображения неизвестны, браузер не может заранее вычислить, сколько места элемент займет.
В результате, когда изображение загружается, оно «толкает» существующий контент, вызывая непреднамеренный сдвиг макета (Layout Shift).
<img src="photo.jpg">
В таком случае до загрузки изображения элемент считается без высоты, а после загрузки высота применяется и страница перестраивается.
1‑2. Снижение Cumulative Layout Shift (CLS)
CLS — один из показателей Google Core Web Vitals, измеряющий неожиданные изменения макета во время загрузки страницы.
Указав width и height, браузер может заранее вычислить точное соотношение сторон (aspect ratio) и зарезервировать нужное пространство.
Критерии CLS
- CLS ≤ 0.1 : хорошо
- CLS ≥ 0.25 : требуется улучшение
Указание размеров изображения — один из самых простых и эффективных способов снизить CLS.
1‑3. Точное понимание сетевого трафика
Здесь есть распространённое недоразумение.
Указание width и height не уменьшает размер загружаемого файла.
- Браузер всё равно скачивает оригинальное изображение.
- Атрибуты
width/heightслужат только для расчёта макета.
Экономия сетевого трафика достигается через:
srcset/sizes- Серверное изменение размера изображения
<picture>
Тем не менее, указание размеров стабилизирует рендеринг, улучшая восприятие скорости и визуальную завершённость.
2. Преимущества с точки зрения доступности (Accessibility)
2‑1. Предсказуемый поток чтения
Ключевой элемент доступности — атрибут alt, но стабильность макета также играет вспомогательную роль.
Когда размеры изображения известны, структура страницы становится предсказуемой, и при использовании скрин‑ридера поток контента не меняется внезапно, что повышает комфорт пользователя.
widthиheightсами по себе не обязательны для доступности, но стабильный макет косвенно улучшает доступность.
2‑2. Предсказуемость макета на мобильных устройствах
На мобильных устройствах ограниченный экран делает даже небольшие изменения макета заметными.
Если размеры изображения не заданы, во время загрузки контент может смещаться, а при масштабировании интервалы между элементами могут резко изменяться.
Указание базового соотношения сторон уменьшает эту нестабильность.
3. Позиция SEO
Поисковые системы оценивают скорость загрузки и пользовательский опыт. Низкий CLS и стабильный рандеринг повышают вероятность того, что страница будет оценена как «высококачественная».
Чёткая структура изображений также облегчает поисковым системам понимание контента и может положительно сказаться на результатах поиска изображений.
4. Практический пример кода
4‑1. Без указания размеров (проблемный пример)
<img src="https://example.com/photo.jpg" alt="Beautiful scenery">
4‑2. С указанием размеров (рекомендованный пример)
<img
src="https://example.com/photo.jpg"
alt="Beautiful scenery"
width="800"
height="600">
Важно
widthиheightзадаются в пикселях.- Для адаптивных макетов обычно добавляют CSS.
img {
max-width: 100%;
height: auto;
}
5. Практические советы
| Ситуация | Рекомендация |
|---|---|
| Статические изображения | Указать width и height |
| Адаптивные изображения | width/height + max-width: 100%; height: auto; |
| Динамические изображения | Вставлять размеры на основе метаданных сервера |
| SVG | Определить пропорции через viewBox, при необходимости добавить width/height |
6. Вывод
- Стабильный макет → снижение CLS → улучшение UX
- Предсказуемый рендеринг → лучшее восприятие скорости
- Положительный сигнал для SEO
Указание width и height в теге <img> — не просто стиль кода, а фундаментальный принцип, повышающий веб‑производительность и пользовательский опыт.
Привычка добавлять эти атрибуты при вставке изображений заметно повышает качество страниц.
Для фронтенд‑инженеров полезны также следующие посты:
Комментариев нет.