Is it possible to use amp-img with srcset and fallback?

718 Views Asked by At

I'm building simple static website and want to optimize images, ended up generating for each image set of jpgs/pngs and webps in different sizes. In non-AMP world I'd use <picture> tag and <source> inner ones with different types, but here we have only amp-img as I understand. My code is like:

<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. Most of the non-webp-supportive browsers (Edge 17, IE 11, Safari 11, iOS 11 Safari) do show fallback on load, but then if user resize browser and (as it seems) triggers srcset transition, browsers show broken image, and after resize doesn't change things anymore. For example, open page on iPhone, rotate to change orientation.
  2. Firefox 67 doesn't even show fallback if outer amp-img have srcset.

Here's codepen demo: https://codepen.io/antejan/full/rKEPNm/

Is there a way to use srcset, webp and fallbacks without these issues?

0

There are 0 best solutions below