Amphtml: amp-img should not replace img with one from srcset if the new image would be lower resolution.

Created on 8 Sep 2017 · 7Comments · Source: ampproject/amphtml

When a screen width is reduced (eg rotating a phone from landscape to portrait) the amp-img component is loading a new image from the srcset even if that image is lower res than the one already in place. This is unneeded bandwidth. Expected behavior would be to only ever choose a higher resolution image that the one already downloaded.

Soon

Source

jpettitt

👍2

Most helpful comment

@jpettitt , @dvoytenko had a great explanation of this, quoting from him here:

How images are selected is a tradeoff between quality and speed. Not all browsers make the same decision and AMP is slightly different then browsers. E.g. Chrome always loads a higher-quality image, Safari always loads closest in width. AMP however prefers the better image, but up to a point. Currently threshold is at 10%.

Also important to note - AMP reserves the right to also include network quality as a condition for calculations, in which case it'd penalize higher quality images if network is slow. This has been mostly implemented, but not live yet as (a) bandwidth measurements in browsers are still very novel and poor; (b) we are still debating whether this should be the job of AMP Cache

aghassemi on 8 Sep 2017

👍3

All 7 comments

This makes sense after https://github.com/ampproject/amphtml/pull/10726. Could do this as a GFI.

jridgewell on 8 Sep 2017

Although I agree with this, we need to be careful since it can be a breaking change in cases where the images are not simply different resolutions of the same image and might be a differently cropped/zoomed-in/etc.. version (not that uncommon). Probably needs to be guarded by a new attribute (e.g. same)

aghassemi on 8 Sep 2017

Out of interest why does AMP do it's own srcset and not just use the browser supported one (at least for browsers that support it)

jpettitt on 8 Sep 2017

@jpettitt , @dvoytenko had a great explanation of this, quoting from him here:

How images are selected is a tradeoff between quality and speed. Not all browsers make the same decision and AMP is slightly different then browsers. E.g. Chrome always loads a higher-quality image, Safari always loads closest in width. AMP however prefers the better image, but up to a point. Currently threshold is at 10%.

Also important to note - AMP reserves the right to also include network quality as a condition for calculations, in which case it'd penalize higher quality images if network is slow. This has been mostly implemented, but not live yet as (a) bandwidth measurements in browsers are still very novel and poor; (b) we are still debating whether this should be the job of AMP Cache

aghassemi on 8 Sep 2017

👍3

This issue hasn't been updated in awhile. Do you have any updates?

ampprojectbot on 11 Dec 2017

This issue hasn't been updated in awhile. Do you have any updates?

ampprojectbot on 5 Jun 2018

We got rid of our srcset polyfill and support native srcset now, so this issue is no longer relevant. Chrome doesn't have this problem, but Firefox does.