@chriscoyier , I put together a pen http://codepen.io/tevko/pen/tlFBJ in an effort to understand the srcset syntax. From what I understand, this code is telling the browser that it has a full width image (100vw) and three possible sizes to choose from. It's also letting the browser know that it has three breakpoints as well.
Here's where I'm having difficulties.
1st up, (and I don't know if this is picturefill, the browser, or me causing this problem), the browser almost always loads 2 images on page load. first it loads the largest image, then it loads the correct one as defined by the srcset syntax. Relevant image:
2nd, lets define a use case in which an iphone 5s, 6, 6plus, 9000 etc. is loading a page, but they have a poor network connection. Where it would make sense to serve the user a lower quality image, the srcset syntax will force the browser to serve the user an image that works best with their screen resolution. It seems that srcset doesn't have a use case for high dpi screens with poor network connections. Am I understanding this correctly?