Join Morten Rand-Hendriksen for an in-depth discussion in this video How responsive images work, part of Responsive Images.
- In an ideal world, when you visit a web page your browser should be able to download only the content it needs and nothing else. That's what responsive images are trying to achieve. In a previous movie, I gave the example of a page with a full-bleed featured image. Now, let's look at how using responsive images would change that situation. In simple terms, responsive images work by providing the browser with options in the form of a list of different image files of different sizes. The browser figures out how big the area where the image suppose to be displayed is, and then picks the appropriate image file from the list.
In our example, we would provide the browser with responsive image markup and three image options. A large image for big or high-resolution displays, a medium image for medium displays, and a small image for small mobile devices. When the page is visited by device, the browser figures out how big the space for the image is, and then pulls down the most suitable image. The genius in all of this is that the browser only pulls down the image file it needs. It leaves the rest of the images alone.
That means on a mobile device, you're not only downloading the small version, not data is wasted and the page loads quicker. On a desktop, different image files will be loaded based on the current viewport. The small image, if it's a small viewport. A medium image, if it's a medium viewport. A large image, if it's a wider viewport. This means if you change the width of your browser like I just did, you may end up loading two or three or more images. This constant re-sizing of browser windows, isn't something regular web users do much, it's more of a Web Designer Developer thing.
For most users, only one image file will be loaded, and it will be the most optimal one for their viewport resolution and device.
- How responsive images work
- Adding Picturefill to your site
- Making regular images responsive
- Using the <picture> element
- Identifying breakpoints and layout changes
- Using the <picture> elements for image type fallbacks