Крайняя спецификация picture элемента, так получается, что это результат многолетних дискуссий, о том как лучше и качественнее сделать картинки или изображение адаптированным для мобильных аппаратов. Безусловно это будет отличная версия для автора, который будет размещать материал, где присутствуют снимки.
Где одно изображение идет на многих версиях, как на мониторе или экране показывает корректно, где характеристики остаются более или менее подходящей для просмотра пользователями или гостями сайта. Это обновленная спецификация стала популярна и внедряется в такие браузеры, как Chrome, Opera и Firefox.
Воспроизводимое изображение, что изначально находятся в неправильном формате, плюс которые еще не сжато должным образом. То здесь идет под огромным весом, где автоматически станет уменьшить скорость открытие страницы и на прямую влияют на SEO сайта.
Picture — это совершенно новый тег, что только появился на HTML5 версий, который позволит создавать адаптивные изображение изображения, где сам принцип его работы будет похоже или почти аналогичен тегам audio и video.
Создание изображения на разные размеры экрана с помощью элемента <рicture>.
HTML
Код
<picture>
<source media="(min-width: 960px)" srcset="Ссылка на изображение №1" />
<source media="(min-width: 480px)" srcset="Ссылка на изображение №2" />
<img src="Ссылка на изображение №3" alt="ZorNet.Ru - портал для вебмастера" />
</picture>
CSS
Код
img {
display: block;
margin: auto;
max-width: 100%;
}
p {
padding: 0 10px;
}
Бывает такое, что адаптивность изображение проходит под разными способами, что некоторые варианты выходят за рамки простого масштабирования.
Так как можно обрезать изображения, и этим сделать его по весу намного меньше, но сама суть может с обрезанными частями потеряться, так что лучше его грамотно адаптировать, чтоб все корректно выглядело.
Демонстрация
