Chapter 5. Making images responsive

This chapter covers

  • Using CSS media queries to deliver the right background images for a user’s device
  • Delivering responsive images in HTML using srcset and the <picture> element
  • Using Picturefill to polyfill srcset and <picture> in certain browsers
  • Using SVG images in CSS and HTML

Now that you’ve learned useful CSS optimization techniques, you can dive into the importance of managing the images on your website.

Images often compose the largest portion of a website’s total payload, and that trend shows no sign of changing. Though internet connection speeds are continually improving, many devices are shipping with high DPI displays. In order for images to display optimally on these devices, higher-resolution ...

Get Web Performance in Action: Building Fast Web Pages now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.