Атрибут height тега <img>

Описание

Атрибут height определяет высоту элемента <img> в пикселях. Этот атрибут помогает браузеру резервировать пространство для изображения до его загрузки, предотвращая скачки макета (layout shift).

Пример использования:
<img src="photo.jpg" alt="Описание изображения" height="400" width="600">

Особенности работы:

Тип значения Пример Применение
Абсолютное (px) height="300" Фиксированная высота в пикселях
Относительное (CSS) style="height: 50vh" Гибкая высота относительно окна
Автоматическое height="auto" (только CSS) Сохраняет пропорции изображения

Рекомендации по использованию:

  • Всегда указывайте width вместе с height
  • Для адаптивных изображений используйте CSS вместо HTML-атрибутов
  • Сохраняйте оригинальные пропорции изображения
  • Используйте единицы viewport (vh) для полноэкранных изображений

Адаптивное изображение с сохранением пропорций:

<style> .responsive-img { width: 100%; height: auto; max-width: 800px; } </style> <img src="landscape.jpg" alt="Адаптивное изображение" class="responsive-img">

Важность для Core Web Vitals:

<!-- Плохо: вызывает layout shift --> <img src="product.jpg" alt="Товар"> <!-- Хорошо: резервирует место --> <img src="product.jpg" alt="Товар" width="300" height="300">

Ограничения и совместимость:

  • Поддерживается всеми браузерами
  • HTML-атрибут принимает только значения в пикселях
  • Для процентных значений используйте CSS
  • Всегда тестируйте на мобильных устройствах

Примечание: Правильное использование атрибутов width и height критически важно для метрики CLS (Cumulative Layout Shift) в Core Web Vitals. Для ретины-дисплеев используйте изображения в 2x размере, но уменьшайте их отображение через атрибуты.