A picture is worth 1000 words, and images play an integral part of every page. But they also often account for most of the downloaded bytes. With responsive web design not only can our layouts change based on device characteristics, but images as well.
Responsive web design means that not only can our layouts change based on device
characteristics, but content as well. For example, on high resolution (2x)
displays, high resolution graphics are needed to ensure sharpness. An image
that is 50% width may work just fine when the browser is 800px wide, but will
use too much real estate on a narrow phone, and still comes at the same
bandwidth overhead when scaled down to fit on a smaller screen.
Other times the image may need to be changed more drastically: changing the
proportions, cropping and even replacing the entire image. In this case,
changing the image is usually referred to as art direction. See
responsiveimages.org/demos/ for more