HTML 5: The srcset-attribute, the imageset-property and sizes-attribute confusion - how to use this correctly?

Question

The HTML 5 srcset attribute and the CSS imageset property seem to be fantastic improvements for web development. Retina optimization and mobile optimization all done by the Browser no more work for me except for specifiying three or four different image URLs for the same image but with different dimensions right? Wrong! I am f* confused.

My thoughts are very simple: The Browser should always choose the smallest version of an image possible. But without ever scaling it up. If scaling up is required the next bigger version should be choosen and so on.

There are two different possibilities for specifiying images with srcset (more information here: http://w3c.github.io/html/semantics-embedded-content.html#element-attrdef-img-srcset):

1) Device-pixel-ratio-based selection

The user agent can choose any of the given resources depending on the user’s screen’s pixel density, zoom level, and possibly other factors such as the user’s network conditions.

srcset="150-marie-lloyd.jpg 1.5x, 200-marie-lloyd.jpg 2x"

Ok great. It is pretty likely that Browsers behind Retina-Screens will take the 2x version, while Browsers behind normal screens will take the normal size. *However the Browser has no idea of how big those images actually are without downloading at least one of them right?

Therefore - if dimensions are not specified in the width / height properties of the img tag - how should this be useful for responsive design?

2) Viewport-based selection

This is why I have decided to use viewport-based selection. It is being described as follows:

The user agent will calculate the effective pixel density of each image from the specified w descriptors and the specified rendered size in the sizes attribute. It can then choose any of the given resources depending on the user’s screen’s pixel density, zoom level, and possibly other factors such as the user’s network conditions.

This sounds pretty nice. Look at the following example:

<img srcset="512.jpg 512w, 1024.jpg 1024w, 2048.jpg 2048w" />

This is what I would assume:

• If the image element is currently larger than 512px, use 1024.jpg
• If you are a retina screen and the image is currently larger than 256px, use 1024.jpg
• If you are a retina screen and the image is currently larger than 512px, use 2048.jpg

Why do I have to complicate things with the sizes attribute then? Furthermore I have checked it with Chrome - it is always choosing the largest image even if a smaller one would fit. Why? Do they really take e.g. the bandwith in account?

Also in many cases I want to specify background images not img tags and the CSS-brother of srcset is imageset. However imageset only supports "Device-Pixel-ratio based selection". Example:

background-image: image-set(url(256.jpg) 1x,url(512.jpg) 2x);

while this is not supported:

background-image: image-set(url(256.jpg) 256w,url(512.jpg) 512w);

Maybe this is somehow related to the problem with the "sizes" attribute?

So my question is: How should I use srcset correctly for my use case described above? Which selection type should I chose? And (why) should I use this sizes attribute?