Summary
Hopefully, the terminology, techniques, and appropriate applications for responsive images are now a little clearer.
In this chapter, we looked at new image formats like AVIF and WebP, and the massive economies they can offer in terms of file size. We considered their shortcomings in terms of support and looked at how we can use the picture element to serve up both those image types alongside a suitable fallback.
We also looked at srcset and how that allows us to provide the browser with a number of possibilities alongside our preference, enabling the browser to make an informed choice about which to use.
We then looked at picture again, considering how to use it to serve entirely different images based on things like viewport width.
The techniques we have covered in this chapter apply to bitmap images — photos and such. But that’s just one side of the image coin. In the next chapter, we will take a deep dive into Scalable Vector Graphics (SVG...