Join Christopher Schmitt for an in-depth discussion in this video Swapping responsive images, part of Learning Responsive Media.
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.
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.
- Using percentage-based values for scaling
- Resizing typography
- Using icon fonts
- Embedding HTML5 video content
- Resizing and compressing raster images
- Compressing vector images