srcset question

[tevko]

@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?

[chriscoyier]

The reason it's downloading 2 images is because of the src attribute on the image. That's the correct way to do it for the spec, but incorrect if you're using Picturefill. It's just kind of the sad deal. If you put a src, the prefetcher will see that and snag the image, then Picturefill does it's thing and (probably) gets a different one. You need to leave that off and move it into the srcset - which means it doesn't have a fallback. More sad. Just the way it is.

You're right - bandwidth stuff isn't here yet. But when it IS here, using srcset, browsers will be able to take advantage of it. Which is NOT the case with picture and media attributes. Those MUST be followed exactly as written, so it will never get any better than it already is.

Srcset are just suggestions, so the browser can make it better over time. But it's already better (for this non-art-direction use case) because it makes resolution switching easier.

[tevko]

Makes perfect sense. So then I have all of the information I need to make the update. I'm thinking of including 4 default image sizes (320, 640, 960, 1280) and the following for sizes sizes="(min-width: 800px) 50vw, 100vw"

[chriscoyier]

That sounds pretty good. If you have the time and energy, ideally this would be a settings page where you could choose how you want it to behave. And I'm not exactly sure how the thumbnail functionality works, but it would be good if it didn't every try to make a bigger version of itself. Like if you upload an image that's only 500px wide, all it does is make the 320.

[tevko]

Okay. This will mean a complete rebuild, which I'm totally cool with. Since this is for automatic responsive images, I'm going to leave the <picture> element out, which I think makes sense?

[mor10]

Allow me to pipe in late here: For syntax, go with the correct markup (the one you already have) even though it currently makes some browsers load duplicate images with Picturefill. This is a philosophical question of doing what works right now vs. "paving the cowpaths" as they say. Progressive enhancement is key here: Everything should work even when Picturefill is not loaded, and that means you need to mark it up to have the standard src fallback. This is relevant: http://filamentgroup.com/lab/to-picturefill.html