Можно ли использовать 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>
  1. Большинство браузеров без поддержки веб-сайтов (Edge 17, IE 11, Safari 11, iOS 11 Safari) показывают откат при загрузке, но затем, если пользователь изменяет размер браузера и (как кажется) запускает переход srcset, браузеры показывают испорченное изображение, и после изменения размера больше ничего не меняет. Например, откройте страницу на iPhone, поверните, чтобы изменить ориентацию.
  2. Firefox 67 даже не показывает отступление, если внешний amp-img имеет srcset.

Вот пример демонстрации кода: https://codepen.io/antejan/full/rKEPNm/

Есть ли способ использовать srcset, webp и fallbacks без этих проблем?

0 ответов

Другие вопросы по тегам