Ответ
Если не дожидаться загрузки изображения в конце страницы, пользователь сразу увидит контент выше изображения. Само изображение появится позже, когда загрузится.
Проблемы:
- Layout Shift - если не заданы размеры (
width/heightилиaspect-ratio), страница "прыгнет" при загрузке картинки - Плохой UX - пользователь может не заметить, что картинка загрузилась, если она ниже viewport'а
Решение:
<img
src="image.jpg"
width="600"
height="400"
alt="Описание"
loading="lazy" <!-- Ленивая загрузка -->
>
Или через CSS:
img {
aspect-ratio: 16/9; /* Сохраняет место под изображение */
background: #eee; /* Плейсхолдер */
}