Ну, уже относительно новый... Просто этот метод всё ещё не так активно используется. А между тем он позволяет легко настроить адаптивные изображения на веб-странице, отталкиваться от плотности пикселей, оптимизировать SEO и использовать самые современные форматы изображений...
Тег <picture>, о котором пойдет речь в данной статье по своей структуре очень похож на <video> или <audio>. Здесь также есть атрибут source для создания условия показа - чаще всего в него закладывается логика, похожая на медиа-запросы css.
<picture><source srcset="test.jpg" media="(max-width: 1024px)"><source srcset="test2.jpg"><img srcset="test2.jpg"></picture>
В данном примере существует условие, при котором на разрешении менее 1024px применится изображение test.jpg, а в ином случае test2.jpg. Конечно, условий может быть гораздо больше, например позволяется использовать orientation: landscape и т.д.
Чтобы включить в тег поддержку экранов с "Ретина", нужно добавить в атрибут srcset значение 2х. Вот небольшой пример того, как это может выглядеть:
<source srcset="test.jpg, test.jpg 2x" media="(max-width: 1024px)">
Дополнительные преимущества подхода с использованием тега <picture> - это возможность использования webp формата, который так любят сеошники, а также подгружаемость конкретной картинки под определенное разрешение - например, для мобильного сразу загрузится картинка с малым весом, что также позитивно повлияет на поисковую оптимизацию сайта.
Данный тег уже поддерживают все современные браузеры (IE не поддерживает). Но даже если нужно учитывать также и устаревшие браузеры, можно легко найти полифиллы.
