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?
- reduce page weight
- website loads faster
- better perceived site performance
- positively impacts bounce rate
- positively impacts user engagement
- 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?
To optimize performance, use srcset to offer the browser different resolutions
<img src="" alt="" srcset="" >
For design control, use <picture> to specify which image per screen size
<picture> <source srcset="" media=""> <source srcset="" media=""> <img src="" alt=""> <⋰picture>
Resolution switching with srcset
alt="Large field of sunflowers"
Art direction with <picture>
Responsive images summary
- images of different size or focus
- different versions used in different circumstances
- increased performance
- design control
- better user experience
- srcset attribute in
- browser selects which size of the same image is optimal in the circumstances
- 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?