Responsive Images: Picture and srcset

Previously we showed some basic CSS to make an image responsive.

/* Basic Responsive Images and Video */
img,video{
  width: auto; 
  height: auto;
  max-width: 100%; 
}

All that does is allow the image to resize as the element that contains it resizes. This means that you have to add the image at the largest size it can possibly be.

The techniques below allow you to load different images at different screen widths. This allows you to size and crop the image differently for different screen sizes.

srcset attribute

This attribute allows you to specify different sources to use for an image. It allows you to direct the browser to choose which image based on either the width of the browser window or the resolution of the screen. In this example below we will look at using the width of the browser. Resolution is more useful if you have a fixed image size (like an icon) and want to use a higher quality image for higher resolution screens.

<img src="images/medium.jpg" srcset="images/x-small.jpg 600w, images/small.jpg 900w, images/medium.jpg 1200w, images/large.jpg 3000w, " alt="photo description">

Let’s look at what’s involved here.

img: this is a typical img element
src attribute: this is the default image that will be show. Also this is what will be shown to older browsers that don’t understand srcset
alt: description of the image; also part of a normal img element and required for accessibility.
srcset: this is a comma separated listed of images with the width it should be displayed for next to it. For example the images/x-small.jpg 600w is noting that the x-small.jpg image should be used at screens 600 pixels wide and narrower.

You can use as many or few images in the srcset list as you like. Also, the browser will determine which one to use. If you’re interested you should know that this is a simple use of srcset. You can also add the sizes attribute that helps the browser know how much of the window the image will take up. See the resources below for more info and examples

Picture Element

The picture element allows you to use source elements and media queries to specify images at different browser widths. When just using the srcset attribute as above the browser makes more decisions. With the picture element then the browser does what is listed.

<picture>
    <source media="(max-width: 600px)" srcset="images/xsmall.jpg">
    <source media="(max-width: 900px)" srcset="images/small.jpg">
    <source media="(max-width: 1200px)" srcset="images/medium.jpg">
    <source media="(min-width: 1201px)" srcset="images/large.jpg">
    <img src="images/medium.jpg" alt="description of image">
</picture>

Breaking it down:

picture element: this wraps all of the elments
source element: each one lists an image source.
- The media attribute allows you to specify when the image should be shown, like with a CSS media query
- the srcset attribute gives the location of the image. Write it like the src attribute of an image.
img element: This is a normal image element and will be what shows on browsers that don’t understand the picture and source elements.

Example Files

This zip file contains a folder with an example. It has both a srcset only and picture element example. There are also unused image files you can use to try it yourself.

https://www.dropbox.com/s/gthsj9ugs63rl1q/responsive-images.zip?dl=0