The article's discussion of AMP's limitations regarding images is somewhat inaccurate.

Firstly, the claim that images must be supplied with a known height and width is wrong. All you need to provide to AMP is the aspect ratio of the image.

You can give the width as "16" and the height as "9" and AMP will calculate exactly what size to display the image. It would use any exact measurements provided only to determine the aspect ratio. That's why this layout can be called 'responsive' at all.

Example:

    <amp-img width="4" 
             height="3" 
             layout="responsive"
             src="/assets/images/your_picture.jpg">
    </amp-img>

will validate and the image will be rendered at the largest size possible in 4:3 aspect ratio, relative to its flow context/container.

In action:

https://wnda.github.io/amphtml-examples/layout/#development=...

https://wnda.github.io/amphtml-examples/basic-page/#developm...

---------------

Secondly, if you won't even know the aspect ratio of your images with any certainty, AMP doesn't give a damn about exact dimensions for background-images.

Proof:

http://wnda.github.io/amphtml-examples/experiments/backgroun...

With background-size: cover, background-images are actually extremely effective for responsive web design as long as you're not supplying massive images.

You might think it's a problem because the background-images will not be lazyloaded , but technically they sort of will be, because AMP intercepts everything in your page and serves it via HTTP/2 from its CDN. You just can't link the lazyload up with JavaScript callback.

What you can do is estimate the time it will take to download the image and configure a CSS animation to fire after a certain amount of time using the animation-delay CSS property.

Just an idea.