Использование srcset для устройств разных размеров и разрешений

Question

Я использую это для мобильной версии (медиазапрос) моей новой страницы:

<!-- CSS is img{width=100%;height:auto} -->
<img src="360x1.jpg" srcset="360x1.jpg 1x, 360x2.jpg 2x, 360x3.jpg 3x">

Отлично работает до сих пор на мобильных телефонах, а также на DPR ...

Итак, следующим шагом будет добавление планшетов (768 пикселей).

Я думал, что это возможно:

<img src="360x1.jpg" srcset="360x1.jpg 1x, 360x2.jpg 2x, 360x3.jpg 3x, 768x1.jpg 1x 768w, 768x2.jpg 2x 768w, 768x3.jpg 3x 768w">

Так что это будет сочетать DPR и ширину устройства. Было бы. : -)

Я знаю тег изображения, но я не уверен, что это правильное решение. Также я знаю атрибуты размеров, но ...

Есть идеи, как это решить? Спасибо!

Answer 1

Из описаний атрибутов для <img>:

Неправильно смешивать дескрипторы ширины и дескрипторы плотности пикселей в том же атрибуте srcset.

Также относительно использования атрибута sizes с дескрипторами плотности пикселей:

Если атрибут srcset отсутствует или не содержит значений с шириной (w) дескриптор, то атрибут sizes не действует.

Вместо <img> вы можете использовать <picture> с source и соответствующим атрибутом media для каждого размера устройства, включая дескрипторы плотности пикселей в атрибуте srcset.

<picture> 
   <source srcset="https://via.placeholder.com/50x50 1x,
                   https://via.placeholder.com/100x100 2x"
           media="(max-width: 767px)">
   <source srcset="https://via.placeholder.com/200x200 1x,
                   https://via.placeholder.com/400x400 2x">
   <img src="https://via.placeholder.com/100x100" alt="picture"> 
</picture>