Managing responsive images is more complex than relying on screen width. Scaling images is not a linear process, for the following reasons:
Different screen widths often have a different column count
Images may be cropped differently when being resized to fit different screen widths
The following figure shows how the scaling of images in RWD layouts is not linear:
Scaling images in RWD layouts is not linear
Sometimes, as seen on the previous figure, on smaller screen widths, an image may appear bigger or equal to its size on wider screens. Also sometimes it is necessary to provide the image with different proportions or crop the image differently to keep it interesting in smaller sizes. The following figures show how plain scaling for lower resolution images doesn't work:
Plain scaling image for lower resolution doesn't always work. Details become unrecognizable
The elements in the preceding figures, after scaling down, become hard to recognize. The same...