Адаптивные изображения с веб-и художественным направлением
Я пытаюсь создать пример для тега изображения художественного направления, используя webP в качестве основного формата, png, если webP не поддерживается (все еще в теге picture), и тег png img для браузеров, не поддерживающих изображение. Я собираюсь обработать размер с помощью стиля вне тега и собираюсь добавить 2x и 3x разрешение изображения в какой-то момент, когда я получу основы работы
я имею
<picture>
<source media="(min-width: 800px)" srcset="images/catstand.webp">
<source media="(min-width: 600px)" srcset="images/catsitting.webp">
<source media="(min-width: 450px)" srcset="images/catsleeping.webp">
<source media="(min-width: 1px)" srcset="images/catface.webp">
<source media="(min-width: 800px)" srcset="images/catstand.webp">
<source media="(min-width: 600px)" srcset="images/catsitting.png">
<source media="(min-width: 450px)" srcset="images/catsleeping.png">
<img src="images/catface.png" alt="Cat cartoon" id="subImg">
</picture>
Он отлично работает в браузерах, которые поддерживают webp, но не в Edge, где он пытается (и не может) загрузить изображение webp
Любой совет (а также любая демонстрация этой работы с разрешением 2х) будет приветствоваться.
Спасибо