Full size image from srcset ALWAYS used on mobile DESPITE setting size of image in editor

I have an extremely frustrating problem where mobile (tested chrome on android & ios, and safari on ios) is always using the largest sized image from the srcset (even if a smaller size is EXPLICITLY chosen in the editor).

Here is a summary of the problem:

• In Wordpress editor, when inserting an image, I choose LARGE (720px x 480px) as the image size
• On a mobile device, the full size image from the srcset is being downloaded and shown on the frontend every time

So the problem is two-fold:

1. Firstly that the full image is somehow being used DESPITE actively selecting the large size (why should this be possible?)
2. Secondly that chrome is not respecting the src set anyway and is downloading the full sized image

This is problematic because I purposefully generate many different image sizes as the original images for this blog are often quite large, often a couple of megabytes. So I have a post with 30 images, each with an elaborate srcset, and yet Chrome on Android is downloading the 1.5Mb version for every one (that's 45Mbs on mobile, even though there are images sizes and a srcset -- and a lightbox and lazy-loading which I've disabled for testing -- for this exact reason).

The image below is a screenshot from Chrome inspector using remote USB debugging (so this is actually from a phone, not browser simulation). You can see the image's actual SRC attribute is the correct, smaller version of the image (notice the '-720x480'):

.jpg

However, Chrome on Android has in fact downloaded and is serving the full image. I know this because:

1. Images in network tab show status of 200 (not from cache), and are the full sized images

2. The image (and post) takes a while to load (I can see the images downloading progressively)
3. Pressing and holding to download the image on the phone saves the full image
4. Pressing and opening the image in a new tab opens the full size image

Some other things:

• It is correctly only downloading the smaller image on desktop (firefox & chrome)
• On every test I fully clear the cache
• The problem still occurs if LINK TO is set to NONE (to rule out the parent a tag's href interfering)
• The device width is 420px
• You can see that the 'large' image size has been selected in the Wordpress editor by the 'size-large' class on the image, so the full size should not be downloaded at all
• I have tested this on another wp site and same issue... selecting image size has no effect on chrome android
• You can see it yourself in action here: blog.londolozi/2017/08/04/the-week-in-pictures-295/

So I don't know how to explain this behaviour.

Am I correct in asserting that if I explicitly set a size when inserting an image into a post, that the image downloaded by the browser should not be larger than that size, no matter what? Or else setting a size is redundant.

Any ideas why this is happening?

I have an extremely frustrating problem where mobile (tested chrome on android & ios, and safari on ios) is always using the largest sized image from the srcset (even if a smaller size is EXPLICITLY chosen in the editor).

Here is a summary of the problem:

• In Wordpress editor, when inserting an image, I choose LARGE (720px x 480px) as the image size
• On a mobile device, the full size image from the srcset is being downloaded and shown on the frontend every time

So the problem is two-fold:

1. Firstly that the full image is somehow being used DESPITE actively selecting the large size (why should this be possible?)
2. Secondly that chrome is not respecting the src set anyway and is downloading the full sized image

This is problematic because I purposefully generate many different image sizes as the original images for this blog are often quite large, often a couple of megabytes. So I have a post with 30 images, each with an elaborate srcset, and yet Chrome on Android is downloading the 1.5Mb version for every one (that's 45Mbs on mobile, even though there are images sizes and a srcset -- and a lightbox and lazy-loading which I've disabled for testing -- for this exact reason).

The image below is a screenshot from Chrome inspector using remote USB debugging (so this is actually from a phone, not browser simulation). You can see the image's actual SRC attribute is the correct, smaller version of the image (notice the '-720x480'):

http://media.londolozi.com/wp-content/uploads/2017/08/10130833/DSC_3855-720x480.jpg

However, Chrome on Android has in fact downloaded and is serving the full image. I know this because:

1. Images in network tab show status of 200 (not from cache), and are the full sized images

2. The image (and post) takes a while to load (I can see the images downloading progressively)
3. Pressing and holding to download the image on the phone saves the full image
4. Pressing and opening the image in a new tab opens the full size image

Some other things:

• It is correctly only downloading the smaller image on desktop (firefox & chrome)
• On every test I fully clear the cache
• The problem still occurs if LINK TO is set to NONE (to rule out the parent a tag's href interfering)
• The device width is 420px
• You can see that the 'large' image size has been selected in the Wordpress editor by the 'size-large' class on the image, so the full size should not be downloaded at all
• I have tested this on another wp site and same issue... selecting image size has no effect on chrome android
• You can see it yourself in action here: blog.londolozi.com/2017/08/04/the-week-in-pictures-295/

So I don't know how to explain this behaviour.

Am I correct in asserting that if I explicitly set a size when inserting an image into a post, that the image downloaded by the browser should not be larger than that size, no matter what? Or else setting a size is redundant.

Any ideas why this is happening?

• images
• mobile

Share Improve this question edited Aug 10, 2017 at 18:07 21stcn asked Aug 10, 2017 at 17:14 21stcn21stcn 1111 silver badge33 bronze badges 2

• This is probably (99.9999%) not a WordPress issue, rather a Chrome one, something related to it's CSS and/or image heuristics. Therefore: 1) maybe you search for help in other Stackexchange network site – Celso Bessa Commented Oct 15, 2017 at 21:46
• browser behaviour is off-topic, especially srcset which is defined in the standard as "each browser can do what it wants" – Mark Kaplun Commented Oct 16, 2017 at 2:01

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

I messed up with my comment and can't edit it. So, I writing as an answer instead:

This is probably (99.99%) not a WordPress issue, rather a Chrome one, something related to it's CSS and/or image heuristics. Therefore:

1. Maybe you will have better luck looking for help in other Stackexchange network site
2. Maybe your pageload time and CSS rules makes Chrome algorithm/heuristics to prioritize the full image and you should tweak your CSS and speed things up
3. Try using the thumbnail, small or medium size images in src, decreasing changes of chrome using full sizes on mobile/tablets because the default one will be small. And increasing the changes of Chrome using full images it finds in srcset only when the user is on larger screens.

Let me know if it helps you.

browsers take

pixel ratio

into account when choosing which image to download, you should check that your pixel ratio is 1 before trying to resize browser and understand the logic