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 imagery is required. Because you still need to support devices with less-capable screens, however, you still require lower-resolution images and must pay attention to the way images are delivered to various devices.
When you think about image delivery, the intent isn’t only to deliver the best visual experience possible, but also to deliver images that are appropriate for a device’s capabilities. Knowing how to properly deliver images ensures that devices with less capability are never burdened with more than what they need, while ensuring that the most capable devices are receiving the best possible experience. Maintaining this balance ensures an appropriate mix of visual appeal and performance.