Как оптимизировать картинки через &nbsp;picture и source Оптимизация изображений – самый простой спсоб ускорить сайт. Современные форматы AVIF и WebP помогут сильно уменьшить вес картинок. Еще нам поможет тег picture – он помогает загружать разные изображения под разные устройства и поддерживаемые форматы. Базовое использование picture <picture> <img src="./imgMobi.png" alt="image" /> </picture> На данный момент это ничем не отличается от простого <img src="./imgMobi.png" alt="image" />, &nbsp;но до тех пор пока не начнем устанавливать source. Картинки под разные разрешения (адаптивные изображения) Главная фича picture – позволяет загружать разные файлы для разных размеров экрана. <picture> <source srcset="./imgDesk.png" media="(min-width: 1280px)" /> <source srcset="./imgTabl.png" media="(min-width: 768px)" /> <img src="./imgMobi.png" alt="image" /> </picture> Работает это просто: Браузер проверяет сверху вниз и выбирает первое совпадение, ни один source не подходит под условия, то выбирает <img /> Поддержка разных форматов AVIF, WebP, PNG С помощью <picture> можно подменять форматы картинки, в зависимости от поддержки браузером. Вот пример <picture> <source srcset="./mobi.avif" type="image/avif"> <source srcset="mobi.webp" type="image/webp"> <img src="./mobi.png" alt="image" /> </picture> AVIF – Самое сильное сжатие, но работает не везде WebP – Хорошее сжатие, широкая поддержка PNG – Работает везде, сжимается хуже Можно комбинировать форматы и медиазапросы <picture> <source srcset="./desk.avif" media="(min-width: 1280px)" type="image/avif" > <source srcset="./desk.webp" media="(min-width: 1280px)" type="image/webp" /> <source srcset="./desk.png" media="(min-width: 1280px)" type="image/png" /> <source srcset="./tab.avif" media="(min-width: 768px)" type="image/avif" /> <source srcset="./tab.webp" media="(min-width: 768px)" type="image/webp" /> <source srcset="./tabl.png" media="(min-width: 768px)" type="image/png" /> <source srcset="./mobi.avif" type="image/avif"> <source srcset="mobi.webp" type="image/webp"> <img src="./mobi.png" alt="image" /> </picture> Громоздко смотрится, но зато точно будет работать. Обычно хватает 2ух форматов, avif + webp или avif + png. Как в примере 3 формата avif + webp + png делали только для Индии Сжимать можно этими сервисами squoosh compresspng Еще хороший вариант если вы настроите свой сборщик, и он автоматом будет сжимать все ваши картинки и форматировать под нужные форматы Мои каналы: 📱 Youtube 📱 Vk.ru 🔠Teletype