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 now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.