Что произойдет, если не указать ширину и высоту для изображения?

Браузер начнет загружать изображение, но не будет знать его точных размеров до полной загрузки. Это может привести к следующим проблемам:

• Сдвиг контента (Layout Shift): При загрузке изображения без указанных размеров, его отображение может сдвинуть остальной контент страницы. Это негативно влияет на пользовательский опыт и метрики производительности, такие как Cumulative Layout Shift (CLS).
• Повторная отрисовка (Repaint): Браузеру приходится пересчитывать и перерисовывать компоновку страницы после получения фактических размеров изображения.

Рекомендуется всегда указывать размеры изображения с помощью атрибутов width и height или использовать CSS для выделения места под изображение до его полной загрузки.

<img src="image.jpg" alt="Описание изображения" width="300" height="200">

Или с помощью CSS:

img {
  aspect-ratio: 3 / 2; /* Устанавливаем соотношение сторон */
  width: 100%; /* Или другая фиксированная/относительная ширина */
  height: auto; /* Высота подстраивается автоматически */
}