Можно ли использовать amp-img с srcset и fallback?
Я создаю простой статический веб-сайт и хочу оптимизировать изображения, в конечном итоге генерируя для каждого набора изображений jpgs / pngs и webps разных размеров. В мире без AMP я бы использовал <picture>
тег и <source>
внутренние с разными типами, но здесь у нас только усилитель, как я понимаю. Мой код похож на:
<amp-img src="s.webp" srcset="s.webp 100w, m.webp 200w" width="100" height="100">
<amp-img fallback src="s.png" srcset="s.png 100w, m.png 200w" width="100" height="100"></amp-img>
</amp-img>
- Большинство браузеров без поддержки веб-сайтов (Edge 17, IE 11, Safari 11, iOS 11 Safari) показывают откат при загрузке, но затем, если пользователь изменяет размер браузера и (как кажется) запускает переход srcset, браузеры показывают испорченное изображение, и после изменения размера больше ничего не меняет. Например, откройте страницу на iPhone, поверните, чтобы изменить ориентацию.
- Firefox 67 даже не показывает отступление, если внешний amp-img имеет srcset.
Вот пример демонстрации кода: https://codepen.io/antejan/full/rKEPNm/
Есть ли способ использовать srcset, webp и fallbacks без этих проблем?