<picture>Изображения являются неотъемлемой частью любого современного сайта. Сегодня мы поглубже поговорим о том, как можно улучшить их загрузку, адаптивность и производительность с помощью тега
<picture>.Обычно мы сталкиваемся с проблемой, что разные устройства требуют разных размеров изображений. Например, нет смысла загружать на смартфон фото с огромным разрешением, предназначенное для больших мониторов. Тег
<picture> идеально подходит для таких случаев.✅ Вот как работает этот тег:
- Внутрь тега вставляется
<img> с базовым изображением.- Добавляются один или несколько тегов
<source>, каждый из которых может указывать разные источники изображений для разных условий (например, ширины экрана).Пример кода:
<picture>
<source media="(min-width:1024px)" srcset="img_big.jpg">
<source media="(max-width:465px)" srcset="img_small.jpg">
<img src="img.jpg" alt="Awesome image" style="width:auto;">
</picture>
✨ В итоге на устройствах с шириной экрана до 465 пикселей загрузится
img_small.jpg, а на ширине более 1024 пикселей - img_big.jpg. Для всех остальных случаев будет использоваться img.jpg.Также,
<picture> отлично подходит для использования современных форматов изображений, как WEBP, который может значительно уменьшить размер файлов, но поддерживается не всеми браузерами. Атрибут type у тега <source> позволяет указать формат изображения, так что браузер сможет загрузить изображение только если поддерживает данный формат. Это предотвращает загрузку несовместимого контента и ускоряет отображение страницы:
<picture>
<source type="image/webp" media="(min-width: 1024px)" srcset="img_large.webp">
<source type="image/jpg" media="(min-width: 1024px)" srcset="img_large.jpg">
<img src="img.jpg" style="width: 100%;">
</picture>
🔗 Узнать больше про использование тега
<picture> вы можете в статье на Medium: HTML <picture> tag in practice.Как видите, тег
<picture> является мощным инструментом для создания адаптивных и оптимизированных интернет-ресурсов. Внедряйте его в свои проекты для улучшения пользовательского опыта и скорости загрузки страниц!