On Thursday night, Derek Johnson from The Tomorrow Lab gave a talk in the Rumble Laboratory about “Responsive Images”, introducing new markup that will make our images on the web truly adaptable.

The talk attracted a big crowd, as it appealed to designers and developers alike, and contained plenty of practical, working demos to back up the theory making the code easier to swallow.

The Picture element

At the beginning of his presentation, Derek introduced us to picture, the element recently added to the HTML specification. It allows developers to group and describe multiple image sources and control the instances in which each image should be displayed on screen. With his various use cases, we found out how to harness this new element, by using the srcset and size attributes to make our images responsive.

Pixel Density

The first use-case Derek discussed was adapting fixed-width images to various pixel densities, or device-pixel-ratios. To do this, he demonstrated how to use srcset attribute. Simply pass a comma-separated list of image URLs, each with an x descriptor (e.g. x1, x2) to the srcset attribute of a picture element, and the browser will display the appropriate image for the device.

        <img src="images/pikachu-1.png"
             alt="Pikachu"
             srcset="images/pikachu-1.png 1x,
                     images/pikachu-2.png 2x">
        

Derek’s practical example showed how Chrome on his (non-retina) Macbook chose to display the lower-res image of Pikachu, but his iPhone with the larger pixel-density-ratio displayed the higher-res version.

Fluid Layouts

As an alternative from using x descriptors, scrset also accepts w descriptors that tells the browser the images’ widths. This can be used for fixed width images, for example, the code below will allow the browser to show the smallest image when the screen width is 300px or smaller. Similarly, it will display the largest image when the window is 1000px or over, since the image path is followed by the descriptor “1000w.”

        <img src="images/deadpool-200.jpg"
             alt="Deadpool"
             srcset="images/deadpool-200.jpg 200w,
                     images/deadpool-400.jpg 400w,
                     images/deadpool-600.jpg 600w,
                     images/deadpool-800.jpg 800w,
                     images/deadpool-1000.jpg 1000w">
        

However, the width descriptor becomes more useful when paired with another new tool, the size attribute. Being truly responsive means really taking site performance into account, and with images often being the heaviest elements on the page, loading them quickly is hugely important.

Browsers are always aware of the size of the viewport and resolution of the user’s screen, so before the CSS is loaded you can already tell it what size of image it will need. Let’s say you have 3 versions of an image varying in size, and a flexible grid where they’ll fit into that has various break-points (for example a single column layout switching to 3 columns in larger viewports), the browser will be looking for the smallest image that will still look sharp within the grid.

Using srcset again, list the 3 image sources along with their w descriptors, which tells the browser how many pixels each image has. Next, use the sizes attribute to tell the browser how many pixels it needs by describing the final rendered width of the image.

        <img src="images/podiceps-cristatus.jpg"
             alt="Great Crested Grebe"
             srcset="images/podiceps-cristatus-300.jpg 300w,
                     images/podiceps-cristatus-400.jpg 400w,
                     images/podiceps-cristatus-600.jpg 600w,
                     images/podiceps-cristatus-800.jpg 800w"
             sizes="(min-width:78.947em) 18.75em,
                    (min-width:74em) 23.75vw,
                    (min-width:60em) 31.6666667vw,
                    (min-width:38em) 47.5vw,
                    95vw">
        

The size attribute is interested in two things; the CSS length of the image and the media query. The length of the image can be absolute (e.g. 100px or 16em) or relative to the viewport (e.g. 33.3vw). The media query tells the browser ahead of time where the break-points in the layout so it can make the best decision as to which image to use.

The w descriptor in the srcset will also allow the browser to adapt to varying device-pixel-ratios, so this markup allows the browser to load the most suitable images for any fluid layout.

See this in action by checking out Derek’s srcset and sizes demo.

I’d recommend reading this article on Smashing Magazine for a fuller explanation.

Art Direction

Already you’ll notice how great these news tools are for making images responsive, but there’s another handy method you can use to make your images even more adaptable!

Derek demonstrated how you may use this by using an example showing two birds known as “crossbills”. The unique thing about these birds is that, unlike other finch species, their bills overlap and cross at the tips. When his browser was at full width, an image of two crossbills was displayed, but as he dragged the window in, image seemed to crop to fit the viewport, as to clearly show the most relevant part of the image; the bird’s beak. This is known as art direction.

Art Direction used to control images on devices

Achieving this is pretty simple, simply list the various images (the full image and the cropped ones) and tell the browser the minimum width it will need to display each one. You’ll also want to include a fallback image for unsupporting browsers.

        <picture>
          <source srcset="images/loxia-curvirostra-a.jpg"
                  media="(min-width:54.625em)" />
          <source srcset="images/loxia-curvirostra-b.jpg"
                  media="(min-width:26.1875em)" />
          <source srcset="images/loxia-curvirostra-c.jpg" />
          <img src="images/loxia-curvirostra-c.jpg"
               alt="Crossbills have overlapping beaks" />
        </picture>
        

Check out Derek’s bird example in action.

Type-switching

New image format WebP is considerably smaller in file size when compared to JPG and PNG images, plus it allows for transparency. You might want to give it a whirl but still provide fallback for browsers that don’t yet support it. This is where type-switching comes in handy. Type-switching allows you do this, simply list your resources and the browser will use the first one it understands.

          <picture>
            <source srcset="images/emberiza-citrinella.webp"
                    type="image/webp">
            <source srcset="images/emberiza-citrinella.jpg"
                    type="image/jpeg">
            <img src="images/emberiza-citrinella.jpg"
                 alt="Yellowhammer">
          </picture>
        

And there you have it

As you can see, the picture elements provides us with a rich set of tools to make our images responsive in a wealth of different situations. We’d like to thank Derek for covering them all in his very informative talk and keeping us up-to-date in the latest in front-end news.

Derek has kindly posted his slides from Thursday night, along with all of his demo files and a blog post of his own about responsive images. Definitely check them out for some easy-to-understand examples of the code in action.

We’d also like to say thanks to the attendees who came along and provided feedback on our new product, we’ll be launching it very soon!