Chapter 6. Going further with images
This chapter covers
- Creating image sprites from multiple image files by using automated tools
- Reducing the file size of images without significantly degrading their visual quality
- Using the WebP image format from Google, and understanding how it compares to older formats
- Deferring the loading (lazy loading) of images that aren’t in the viewport
In the preceding chapter, you learned the importance of optimal image delivery. This entailed using media queries to deliver images in CSS according to the user’s device capabilities, as well as using new features in HTML to accomplish the same goal.
In this chapter, you’ll go a step further in working with images. This entails reducing HTTP requests by combining images into sprites, reducing the size of raster and vector images through new compression methods, using Google’s WebP image format, and understanding the benefits of lazy loading images.
As a front-end developer, you’re constantly looking for ways to improve your site’s performance. With images representing a large portion of your page weight, it makes sense to want to tame these unruly critters and make them more manageable.