Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by mrx3
mrx3
8,742 Points

I have a few questions about srcset .(Codepen include).

http://codepen.io/mike316/full/VLVBMa/ I just started to take Nick's responsive images course. The first thing I want to address is, that the images are large, and "hi-res" they do take a little bit to download, and they are embedded images. I know this isn't the correct way to do use srcset, but it is the only way I can think to add images to codepen.

My first question is, Do I have to use dev tools in Chrome and disable Cache, and then refresh the page at the various breakpoints? I have tested the site in IE and because of the polyfill, everything works exactly as planned without the refresh.

My last question is to make sure I understand what srcset really is. When I think of using source set and using this great idea. I think of it as having 2 or three images and declaring them in one img tag. Now for the large/desktop I could us a standard none-hi-res image in the header, and for a tablet and mobile phone I could use two high-res retina images. After I have declared the images using srcset, srcset will allow the browser to decide which images should be used for the various devices, based on the the pixel density of both image and screen. Is this the correct way to think about srcst?

I would like to use srcet to make a large image in the header "responsive?" and adjust to the browser viewport. This is acceptable, right?

Thanks in advance for any replies.

Juliette Tworsey
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Juliette Tworsey
Front End Web Development Techdegree Graduate 32,625 Points
Juliette Tworsey
.a{fill-rule:evenodd;}techdegree seal-36
Juliette Tworsey
Front End Web Development Techdegree Graduate 32,625 Points

Mr. X,

Though I have also taken and finished Nick's Responsive Design course, I'm not sure how to reply to your first question. I am also new to the concept of srcset and I too have to make sure that I really understand its functionality.

As for your 2nd question, it sounds to me like you have the right idea. Here is an interesting article to reinforce what we have already learned. I find that this explanation is quite simple to understand:

"The srcset attribute, which is a proposed attribute for the <img> element, allows you to specify different images for varying viewport widths and pixel densities. This allows you to load a larger image for new high resolution devices while displaying lower resolution images for everyone else."

http://html5hub.com/srcset-attribute-solving-responsive-image-dilemma/

So yes, once you have srcset in place with all of your img urls/paths (along with a polyfill in the header section for those browsers that do not support srcset), the browser does the rest of the work for you. That's how I understand it at this point. I'm going to have to refresh:-)