What are responsive images?

Responsive images are images that work well on a variety of devices with different screen sizes and different resolutions. By implementing responsive images on our websites, we can improve the performance and user experience of a site.

Why use responsive images?

Increased performance

  • reduce page weight
  • website loads faster
  • better perceived site performance
  • positively impacts bounce rate
  • positively impacts user engagement

Design control

  • different image on different size screens
  • art direction
  • direct user's attention
  • greater control of what browsers display
  • improved user experience

How to create responsive images?

1

To optimize performance, use srcset to offer the browser different resolutions

<img
  src=""
  alt=""
  srcset=""
>

2

For design control, use <picture> to specify which image per screen size

<picture>
  <source srcset="" media="">
  <source srcset="" media="">
  <img src="" alt="">
<⋰picture>

1

Resolution switching with srcset

Example code

<img 
  src="sunflowers-lrg.jpg" 
  alt="Large field of sunflowers"
  srcset="sunflowers-md.jpg 400w,
          sunflowers-sm.jpg 100w,
          sunflowers-xl.jpg 1500w"
>

Use the srcset attribute on the img tag to tell the browser which images are available. If the browser doesn't support srcset it will use the src attribute instead. 

NOTE: The width of the images use the w unit rather than px as you might expect.

2

Art direction with <picture>

Responsive images summary

WHAT?
  • images of different size or focus
  • different versions used in different circumstances
 
WHY?
  • increased performance
  • design control
  • better user experience
 
HOW?
  • srcset attribute in <img> tag
    • browser selects which size of the same image is optimal in the circumstances
  • <picture> tag
    • developer selects which different image the browser will use in different circumstances

Implement your own responsive image

Take your HTML page from the previous assignment, and run it through lighthouse. Note the page load times on desktop and on mobile.

Using your graphics software, create smaller versions of your images.

Update all of your <img> tags with the srcset attribute to indicate the newly sized images you created.

Run your page through lighthouse again, and note the page load times on desktop and mobile. How much savings did you achieve?