что такое lazy load для изображений на сайтах

Что такое lazy load для изображений на сайтах?

Для любого более-менее современного сайта или приложения — изображения и картинки имеют важное значение. В наше время трудно представить сайт, на котором нету логотипа, фото продукта, рекламного баннера или чего либо-другого. Но к великому сожалению изображения являются одними из самых «тяжелых» элементов на странице. В сегодняшней статье мы разберемся что такое lazy load для изображений на сайтах и как эта штука поможет ускорить загрузку страниц и сайт в целом.


Что делает lazy load?

Lazy load – переводится как отложенная загрузка. Для того что ты увидеть как оно работает советую ознакомиться с коротким видео на эту тему ниже:

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


Принцип работы lazy load

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

Такая техника зачастую применяется ко многим элементам страницы таким как JavaScript . Ведь если что то нам не нужно сразу, мы можем загрузить его позже, когда оно будет нужно.


Зачем откладывать загрузку картинок?

Есть два основных преимущества:

  1. Оптимизация

Используя отложенную загрузку мы уменьшаем количество изображений. Тем самым экономя свободные ресурсы нашего устройства (серверные мощности). А еще за счет прироста в оптимизации, наша страница станет доступна для взаимодействия  пользователем намного раньше.

  1. Экономия трафика

Согласно методу lazy load – если картинка не видна, она никогда не загружается. Этим Вы уменьшаете общий вес страницы. Особенно это касается длинных страниц на которых пользователи взаимодействуют только в верхней части.


Как сделать отложенную загрузку изображений?

Существует 2 способа – используя свойства background в стилях CSS или непосредственно в теге <img>. Эти способы в скором времени будут рассмотрены в отдельных статьях на этом сайте.


А кто еще еще пользуется lazy load для изображений?

Да практически все! Начиная от гугл, пинтерест и беханс и заканчивая маленькими корпоративными сайтами.

Добавить комментарий

Ваш e-mail не будет опубликован.