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

Описание

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

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

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

Тип значения Пример Применение
Абсолютное (px) width="300" Фиксированная ширина в пикселях
Относительное (CSS) style="width: 100%" Гибкая ширина относительно родителя
Автоматическое width="auto" (только CSS) Сохраняет оригинальные пропорции

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

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

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

<style> .responsive-img { width: 100%; height: auto; max-width: 1200px; } </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="400" height="400">

Пример с srcset и размерами:

<img src="image-800.jpg" srcset="image-400.jpg 400w, image-800.jpg 800w, image-1600.jpg 1600w" sizes="(max-width: 600px) 400px, 800px" alt="Адаптивное изображение" width="800" height="600">

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

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

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