Optimizing the use of images on a web page has the following five flavors:
Optimizing image dimensions
Optimizing image compression
Optimizing the file format
Avoiding the use of images
Reducing the number of images
Bitmaps have always defined dimensions in pixels. It is best when those dimensions match the exact area occupied by the image on the screen—without resizing with HTML or CSS. Scaling down images is possible only in the fixed layout of an HTML page. In responsive pages, fluid image scaling with CSS is a routine. We can only approximately adjust the actual image dimensions to its displayed size. We talked in detail about existing solutions in Chapter 5, Responsive Images Client- and Server-Side Approaches. The module responsive_images
we created in that chapter allows adding image versions manually adjusted to each resolution. It has the following two advantages over purely automated generation (like the one used in the script from www.adaptive...