Android chrome ALWAYS using full size image from srcset

Question

This issue is really frustrating and I'd appreciate any insight. Here is the summary.

Despite images having a full srcset, Chrome on android is always serving the full sized image.

So if the page has 10 images, despite there being 5 versions of each for different widths, the full sized will be used, which is often 1-2MB each, so that's 20MB on mobile.

If you take a look at the currentSrc in the image below, it is Cape-Vulture.jpg". This is the full sized 1.2MB version. It has been downloaded fresh on this load (status 200 -- see debugging info below for more on emptying cache). You will also see that the clientWidth is 372, Indeed the max width of the view is 412px.

Img html source:

<img class="wp-image-43726 size-large"
    src="http://media.londolozi.com/wp-content/uploads/2016/01/11033102/Cape-Vulture-720x477.jpg"
    alt="" width="720" height="477"
    srcset="http://media.londolozi.com/wp-content/uploads/2016/01/11033102/Cape-Vulture-720x477.jpg 720w,
        http://media.londolozi.com/wp-content/uploads/2016/01/11033102/Cape-Vulture-300x199.jpg 300w,
        http://media.londolozi.com/wp-content/uploads/2016/01/11033102/Cape-Vulture-1398x927.jpg 1398w,
        http://media.londolozi.com/wp-content/uploads/2016/01/11033102/Cape-Vulture.jpg 1400w"
    sizes="(max-width: 720px) 100vw, 720px">

So why is this occurring? Why is the full image being used? Surely the above img src would result in the 720px version being served on a phone? The correct image url is even specified in the src attr, but somehow chrome still insists on pulling the 1.2MB version. This is completely ruining the mobile experience of this blog and driving me insane. As far as I can tell there is no reason the full image should be downloaded when the code is according to the standards.

As a site note the correct images (720px) are correctly being served on desktop (FF, chrome).

Notes on my debugging setup:

Using remote debugging of Chrome on android device (SAMSUNG Galaxy S6)
Clearing cache manually before every test
Using incognito mode to further rule out cache

Thanks in advance

The page you linked to doesn't seem to have this srcset markup anywhere in it. — Josh Lee
I removed the srcset because of the problem (edited answer to remove link) — 21stcn

Nicolas Hoizey Nicolas Hoizey · Accepted Answer · 2017-10-04T10:52:10

If the device has a density of 4, the image needed to fill a 372px wide viewport has to be 1488 pixels wide.

What kind of device are you using for your tests?

Android chrome ALWAYS using full size image from srcset

1 Answers