Вёрстка: Отложенная загрузка (lazy loading) изображений

Атрибут loading с значением lazy в HTML позволяет отложить загрузку изображений, которые находятся вне видимой области экрана, до тех пор, пока они не станут видимыми при прокрутке страницы. Это полезно для оптимизации производительности страницы и уменьшения объема передаваемых данных, особенно на медленных интернет-соединениях.

В этом примере первое изображение (visible_image.jpg) загружается сразу же при открытии страницы, так как оно находится в видимой области экрана. Второе изображение (lazy_image.jpg) находится за пределами видимой области, и его загрузка будет отложена до тех пор, пока пользователь не прокрутит страницу до него. Здесь атрибут loading с значением lazy применяется к тегу img для второго изображения:

<img src="visible_image.jpg" alt="Видимое изображение" width="600" height="400">

<div style="height: 1500px;"></div>

<img src="lazy_image.jpg" alt="Ленивая загрузка изображения" width="600" height="400" loading="lazy">