Swapping responsive images

To help with responsive images, new attributes are being introduced into HTML5 specification for the image element, source set and sizes. These new attributes are so new, in fact, that at the time of this recording, they are not currently supported in any web browsers natively. If we take a look at the Can I Use website for srcset, you can see this status of which browser support using srcset. Down at the bottom, however, you notice that support doesn't cover the use of srcset with the uses of sizes. When you view this video, I recommend taking a look at the Can I Use website, to see what the current status is. While support for these attributes is growing, in the mean time, we'll be using a bit of Java script to make these attributes function. With these attributes, we're given new freedoms in web offering. These new attributes work in tandem to help web builders, to help browser's, to change out images based on the width of the browser. Let's work through an example of a main image in an example page. Let's start with the basic image element. Here we have an image that's small in file size, ideal for mobile delivery. Next, we add source set attribute to the image element. Within this attribute is where we feed the browser additional information, so that if site visitors are visiting our page with wider and better screens, they can view better images. We fill in the source set attribute with a comma delimited list of all the possible replacement images. While I've put in each image's respective file size in their file name in the code example, the browser won't know or understand those are the dimensions it can use to swap out those images. We need to add another piece of information with each of these additional images. The criteria in which the browser should swap them in. In other words, how wide is a browser window need to be in order to swap in a specific image? I put in a new number immediately after each file name in our list. These values, 400w, 600w, 800w, 1200w, represent how wide each respective image is in the list. Notice the 400 pixel wide image is mentioned in both the source set and the source attribute. The source attribute and this value are going to serve as a fall back, for those browsers that don't support the source set attribute, or that have JavaScript disabled, since we will be using a JavaScript solution. Typically, we don't tell the browser how wide our images are in the HTML. We use the responsive images technique of setting the max width property in the CSS. So why tell browsers how wide our images are? Browsers have this amazing ability of trying to help us out. Every time it comes across an image source attribute, it goes out, finds how big the image is by downloading the image, which is exactly what we want to avoid. If we don't want the browser to have to do all that additional work, and slowing down performance by downloading more images. And we do that by giving these hints in the source set attributes. Next we add the sizes attribute with the value of a 100vw. The unit vw refers to viewport width, if we have the value of 1vw, think of it as 1% of the browser window. At 100vw, we're telling the browser to scale the image as large as possible. Since we already have CSS rules, dictating the layout and the size of the images, the image in this element won't stretch 100% of the browser window, but we do want to tell the browser to stretch as much as possible. Having said that, we can pass some additional information to the browser through the sizes attribute. This new attribute says that, if the browser meets the criteria of being 600 pixels wide, that image is going to be shown at 50%. Otherwise, it's going to be shown at 100%. Inserting these media query specific rules, isn't going to actually dictate to the browser how to display the image. They're mainly hints that we pass on to the browser. Personally, I find it a bit confusing to have bits of CSS media queries within my HTML. So I opt to leave the sizes attribute set to a 100 vw and let CSS rules reside on my style sheet to render the design. To power the source set and sizes attribute, we use the Picturefill Java script solution, at scottjiyls github page. I put together a quick demo that you can look at in the exercise files that uses the JavaScript plugin, to show you an example of how this can work in action. Notice as we scale the web browser, that different images are loaded depending on the width of the browser window.