Srcset download 2 images with one request.

[adam.radocz]

In certain cases the srcset download the full size and the 768w version of the image in one request. It's a huge amount of waste of bandwidth.

<img class="aligncenter size-full wp-image-108" src="http://wp.dev/wp-content/uploads/2016/03/Big_Bear_Valley_California.jpg" alt="Big_Bear_Valley,_California" width="1920" height="1280" srcset="http://wp.dev/wp-content/uploads/2016/03/Big_Bear_Valley_California-300x200.jpg 300w, http://wp.dev/wp-content/uploads/2016/03/Big_Bear_Valley_California-768x512.jpg 768w, http://wp.dev/wp-content/uploads/2016/03/Big_Bear_Valley_California-1024x683.jpg 1024w, http://wp.dev/wp-content/uploads/2016/03/Big_Bear_Valley_California-1200x800.jpg 1200w, http://wp.dev/wp-content/uploads/2016/03/Big_Bear_Valley_California.jpg 1920w" sizes="(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px" />

[adam.radocz]

screenshot

[johnbillion]

Thanks for the report, @adam.radocz . The behaviour of the srcset functionality is down to your browser. WordPress has no control over what your browser does with the contents of the src or srcset attributes.

That said, this sort of bug can sometimes result in something that WordPress needs to work around, so:

• Which operating system and which version of Chrome are you using?
• Does the image appear anywhere else in the page's contents?
• Does it happen with every image that gets a srcset attribute applied?
• Does it still happen with your browser extensions enabled?
• Does it happen in other browsers such as Firefox?

[adam.radocz]

Replying to johnbillion:

Thanks for the report, @adam.radocz . The behaviour of the srcset functionality is down to your browser. WordPress has no control over what your browser does with the contents of the src or srcset attributes.

That said, this sort of bug can sometimes result in something that WordPress needs to work around, so:

• Which operating system and which version of Chrome are you using?
• Does the image appear anywhere else in the page's contents?
• Does it happen with every image that gets a srcset attribute applied?
• Does it still happen with your browser extensions enabled?
• Does it happen in other browsers such as Firefox?

• I use Windows 10 Insider Preview Build 14295 and MAMP 2015-12-15 (Apache 2.2.27, PHP 7.0, MySQL 5.5.41).
• The image doesn't appear anywhere else in the page's content.
• It happens with every image that gets a 'srcset' attribute applied, but the bug depends on the image size and the viewport.
• It happens in Google Chrome 49.0.2623.87 m (64-bit) and Microsoft Edge 34.14295.1000.0 also, but I didn't test in Firefox.

[joemcgill]

Hi @adam.radocz,

I'm not able to reproduce this with a clean version of the Twenty Sixteen theme (which appears to be what you're using in your screenshot). Is it possible that you have any other plugin enabled that would be modifying the way images are loaded (e.g. a lazy loading plugin maybe)? I suspect there's something beyond the markup/browser causing this issue because in the screenshot shows that an "other" source initiating the double download, and not the HTML markup itself.

If you can replicate the issue again with a clean install of WP and one of the default themes with no plugins activated, that would be helpful.

Thanks,
Joe

[adam.radocz]

I made a video from a clean wordpress in a different pc. When I tried to reproduce the bug with only one image, I also couldn't as you. But when I uploaded a second image the bug appeared. I guess the problem is the wordpress resize the theme's framework when the page is completely loaded, as you can see at 6:30 in the video for one moment, and both the two images are downloaded for the two different viewsport.

Here is the video: ​https://youtu.be/d_PES0DM18Y

Replying to joemcgill:

Hi @adam.radocz,

I'm not able to reproduce this with a clean version of the Twenty Sixteen theme (which appears to be what you're using in your screenshot). Is it possible that you have any other plugin enabled that would be modifying the way images are loaded (e.g. a lazy loading plugin maybe)? I suspect there's something beyond the markup/browser causing this issue because in the screenshot shows that an "other" source initiating the double download, and not the HTML markup itself.

If you can replicate the issue again with a clean install of WP and one of the default themes with no plugins activated, that would be helpful.

Thanks,
Joe

[peterwilsoncc]

I'm inclined to close following above comment it looks like a browser/theme issue rather than something happening in core.

[SergeyBiryukov]

I was able to reproduce the issue on a clean install in the latest Chrome (52.0.2743.116 and 53.0.2785.89) exactly as shown on the video.

The markup is correct though, so if the browser downloads both versions of the image in certain conditions, it's up to the browser, I guess.

[joemcgill]

Replying to SergeyBiryukov:

I was able to reproduce the issue on a clean install in the latest Chrome (52.0.2743.116 and 53.0.2785.89) exactly as shown on the video.

The markup is correct though, so if the browser downloads both versions of the image in certain conditions, it's up to the browser, I guess.

I'm still not able to reproduce this with all plugins off and am fairly confident that this isn't a browser bug. In the video it looks like a Pinterest plugin is being used, which might be adding additional HTML to the page to populate the shareable image. As an aside, if you test this with the Debug bar on, you may appear to get double downloads because the debug bar adds additional markup to the page that can include calls for the original image. This tripped me up at first, but after turning that off, I no longer saw double downloads.

I'm going to go ahead and close this as invalid. Feel free to reopen if it can be demonstrated that this is a reproducible bug that WordPress needs to work around.

[adam.radocz]

In the video I used a clean installed WordPress without any plugin.

Replying to joemcgill:

Replying to SergeyBiryukov:

I was able to reproduce the issue on a clean install in the latest Chrome (52.0.2743.116 and 53.0.2785.89) exactly as shown on the video.

The markup is correct though, so if the browser downloads both versions of the image in certain conditions, it's up to the browser, I guess.

I'm still not able to reproduce this with all plugins off and am fairly confident that this isn't a browser bug. In the video it looks like a Pinterest plugin is being used, which might be adding additional HTML to the page to populate the shareable image. As an aside, if you test this with the Debug bar on, you may appear to get double downloads because the debug bar adds additional markup to the page that can include calls for the original image. This tripped me up at first, but after turning that off, I no longer saw double downloads.

I'm going to go ahead and close this as invalid. Feel free to reopen if it can be demonstrated that this is a reproducible bug that WordPress needs to work around.