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 examples.
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License , and code samples are licensed under the Apache 2.0 License . For details, see our Site Policies .
