Нужно ли указывать высоту и ширину картинки которая не будет изменяться?

Зачем указывать фиксированные размеры для статических изображений

Да, явное указание высоты (height) и ширины (width) для изображения, размер которого не будет меняться, является важной практикой веб-разработки. Это не просто рекомендация, а критически важный аспект для производительности, стабильности макета (Layout Stability) и Core Web Vitals.

Основные причины указывать размеры

1. Предотвращение Cumulative Layout Shift (CLS)

CLS — ключевой показатель пользовательского опыта, измеряющий визуальную стабильность страницы. Без указанных размеров браузер не может зарезервировать место под изображение до его загрузки. Когда изображение наконец загружается и отрисовывается, оно "выталкивает" окружающий контент, вызывая неприятные скачки макета.

<!-- ПЛОХО: CLS гарантирован -->
<img src="hero.jpg" alt="Герой-изображение">

<!-- ХОРОШО: место зарезервировано, CLS предотвращен -->
<img src="hero.jpg" alt="Герой-изображение" width="800" height="600">

С указанными width и height браузер вычисляет соотношение сторон (aspect ratio) и резервирует корректное пространство в макете еще до загрузки файла, даже если само изображение подгружается позже.

2. Повышение производительности загрузки страницы

Когда браузер заранее знает размеры изображения, он может более эффективно планировать и оптимизировать процесс рендеринга. Это особенно важно для ленивой загрузки (lazy loading), так как система знает, сколько места нужно выделить под элемент, который появится в viewport позже.

3. Улучшение SEO и соответствие критериям Core Web Vitals

Поисковые системы, такие как Google, используют Core Web Vitals как фактор ранжирования. CLS — один из трех ключевых показателей. Страницы с низким CLS получают преимущество. Указание размеров — самый простой и эффективный способ контролировать этот параметр для статических изображений.

Как правильно указывать размеры: современный подход

Раньше указание width и height могло создавать проблемы с адаптивностью, если стили CSS их переопределяли. Современные браузеры решают эту проблему с помощью внутренней логики: атрибуты задают внутренние (intrinsic) размеры, а CSS управляет отображаемыми (rendered) размерами.

Рекомендуемая практика:

• Указывайте width и height в HTML, соответствующие реальным размерам файла изображения.
• Для адаптивности используйте CSS, чтобы задать максимальную ширину в 100% и высоту auto. Браузер использует атрибуты для расчета пропорций, а CSS — для масштабирования.

<img 
  src="product.jpg" 
  alt="Продукт" 
  width="1200" 
  height="800"
  loading="lazy" 
  style="max-width: 100%; height: auto;"
>

/* Альтернативно в CSS */
img.responsive {
  max-width: 100%;
  height: auto;
  display: block; /* Убирает лишний отступ снизу */
}

Практические шаги и исключения

1. Определите реальные размеры. Используйте графический редактор или свойства файла, чтобы узнать точные width и height в пикселях.
2. Добавляйте в разметку. Включайте эти значения как атрибуты тега <img>.
3. Сопровождайте адаптивным CSS. Всегда добавляйте правило max-width: 100%; height: auto; для корректного отображения на мобильных устройствах.
4. Для адаптивных изображений с srcset указывайте размеры для каждого дескриптора плотности пикселей. Это помогает браузеру выбрать оптимальный источник.

Исключения, когда можно не указывать:

• Чисто декоративные изображения, скрытые для вспомогательных технологий (у которых role="presentation" или aria-hidden="true"). Однако и для них указание размеров может помочь рендерингу.
• Изображения, которые должны радикально менять размер в разных контекстах (например, полноэкранный фон), но даже здесь часто лучше использовать <picture> с разными источниками и заданными размерами.
• SVG-графика, которая является векторной и по своей природе масштабируемой. Но для инлайновых SVG можно задать viewBox.

Заключение

Явное указание width и height для статичных изображений перестало быть опциональным в современной веб-разработке. Это обязательная мера для:

• Гарантированной визуальной стабильности макета
• Улучшения показателей Core Web Vitals (особенно CLS)
• Повышения общей производительности загрузки страницы
• Улучшения пользовательского опыта

Потратив несколько секунд на добавление этих атрибутов, вы предотвращаете потенциальные проблемы с отображением, которые негативно влияют на восприятие сайта пользователями и его ранжирование в поисковых системах. Всегда указывайте размеры, если исходное изображение имеет фиксированные пропорции.