Кто нибудь делал адаптивные фото с помощью тега picture ( srcset/sizes)?

Нормальная тема. Я тестировал, но в живых сайтах не пользовал пока. единственное, что в список поддерживаемых браузеров не входит всякий палеолит. то-есть если много посетителей на старых браузерах. то придется слегка подкостылить

всё очень просто там и реально круто. к примеру пропорции. на ПК - горизонтальная ориентация, на телефоне даете вертикальную, переделав целиком картинки

Гоните такого верстальщика. Всё там элементарно.

Подводных камней нет. Удобно и ново. Круто же.

Хотелось бы услышать также мнение тех, кто делал на конкретном сайте, хорошо бы с ссылкой, хоть в личку. Или пример какого нибудь другого сайта..

Вот пример view-source:https://tonkosti.ru/%D0%92%D0%B8%D0%B7%D0%B0_%D0%B2_%D0%98%D1%82%D0%B0%D0%BB%D0%B8%D1%8E

Вот кусок

<picture><source srcset="//static.tonkosti.ru/images/f/f0/%D0%92%D0%B8%D0%B7%D0%B0_%D0%B2_%D0%98%D1%82%D0%B0%D0%BB%D0%B8%D1%8E.jpg"  media="(-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi)"><img src="//static.tonkosti.ru/images/f/f0/%D0%92%D0%B8%D0%B7%D0%B0_%D0%B2_%D0%98%D1%82%D0%B0%D0%BB%D0%B8%D1%8E.jpg" alt="">

Но что странно.. не закрывается тег <picture>, кроме этого ссылки на одну и то же фото.. в чем тогда суть?

alexverem, Это ошибка!

https://www.w3schools.com/TAgs/tag_picture.asp

<picture> надо закрывать

Ну да.. вроде бы можно и без теги picture

  <img src="image.jpg" alt="My image" 

    [srcset="<список URL с дескрипторами>"] 

    [sizes="<ваши размеры в зависимости от раскладки>"]>

Вообще никто не использовал в своих проектах что ли? ) Значит похоже рано, а какой наиболее распространенный подход в настоящее время для адаптивных картинок тогда?