dr.Brain

doctor Brain

мир глазами веб-разработчика

Полезные элементы HTML: picture

работаем с адаптивными картинками в HTML

dr.Brain

время чтения 1 мин.

Photo by Alice Dietrich on Unsplash

HTML-элемент picture - контейнер для вложенных элементов source. Он необходим для загрузки адаптивных изображений, оптимизированных в соответствии с выбранными размерами и разрешениями экрана.

picture позволяет определить несколько источников изображения source и выбрать лучший, исходя из возможностей устройства.

Например:

<picture>
    <source media="(min-width: 800px)" srcset="large.jpg">
    <source media="(min-width: 400px)" srcset="medium.jpg">
    <img src="small.jpg" alt="Responsive Image">
</picture>

Таким образом, picture сокращает время загрузки картинки, повышает удобство работы пользователя, предоставляя наиболее подходящее изображение.


Спасибо за внимание.

Новые публикации

Далее

Категории

О нас

Frontend & Backend. Статьи, обзоры, заметки, код, уроки.