🔍 Оптимизация изображений с тегом <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> является мощным инструментом для создания адаптивных и оптимизированных интернет-ресурсов. Внедряйте его в свои проекты для улучшения пользовательского опыта и скорости загрузки страниц!