New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

srcset question #14

Closed
tevko opened this Issue Sep 26, 2014 · 5 comments

Comments

Projects
None yet
3 participants
@tevko
Owner

tevko commented Sep 26, 2014

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

Image ofscreenshot

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?

@tevko tevko added the question label Sep 26, 2014

@chriscoyier

This comment has been minimized.

Show comment
Hide comment
@chriscoyier

chriscoyier Sep 30, 2014

Collaborator

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.

Collaborator

chriscoyier commented Sep 30, 2014

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

This comment has been minimized.

Show comment
Hide comment
@tevko

tevko Sep 30, 2014

Owner

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"

Owner

tevko commented Sep 30, 2014

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

This comment has been minimized.

Show comment
Hide comment
@chriscoyier

chriscoyier Oct 1, 2014

Collaborator

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.

Collaborator

chriscoyier commented Oct 1, 2014

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

This comment has been minimized.

Show comment
Hide comment
@tevko

tevko Oct 1, 2014

Owner

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?

Owner

tevko commented Oct 1, 2014

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

This comment has been minimized.

Show comment
Hide comment
@mor10

mor10 Oct 2, 2014

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

mor10 commented Oct 2, 2014

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

@tevko tevko closed this Nov 6, 2014

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment