Оптимизация картинок Lazy loading. И подводные камни при использовании CSS свойства background-image picture, img, media, source Вся проблема заключается в том, что при использовании background-image все картинки начинают загружаться сразу, даже если они находятся где-то в конце сайта и пользователь никогда их не увидит. Даже если это иконки по 1кб, это все равно тормозит первичную загрузку сайта, так как запросы на сервер тоже кушают ресурсы и время. Лучше использовать background-image в редких случаях например: – Замостить фон – Для спрайта (когда на одной картинке есть все иконки сайта, или для покадровой анимации) Для всех остальных случаев лучше использовать html тег img Да, от этого в DOM станет чуть больше вложености, но зато мы сможем повесить ленивую загрузку на img свойство loading="lazy" <img src="./my.png" alt="my" loading="lazy" /> Lazy loading позволяет нам не загружать медиафайлы до тех пор, пока мы не доскролим до него. От этого первичная загрузка нашего сайта станет быстрее. А еще мы можем скомбинировать это с media queries <picture> <source srcset="./imgDesk.png" media="(min-width: 1280px)" /> <source srcset="./imgTabl.png" media="(min-width: 768px)" /> <img src="./imgMobi.png" alt="image" loading="lazy" /> </picture> Тем самым получается что на каждый девайс у нас будет грузится своя картинка, определенного разрешения. Еще для экономии можно сжать картинки через сервисы: squoosh compresspng Все это в совокупности хорошо оптимизирует не только первичную загрузку, но и хорошо сэкономит трафик пользователя, особенно с плохим интернетом. Мои каналы: 📱 Youtube 📱 Vk.ru 🔠Teletype