Images are a large part of most websites. They may be hero images stretching across the page, icons or drawings representing offerings, or pictures accompanying news stories or products.
When a site needs to work on several different devices, many designers simply resize each image in the large screen design to make it fit smaller screens. However, images that work well on large screens do not always translate well to small screens. They may not retain their meaning at a smaller scale, they may be cropped inappropriately, or they may cause unneeded scrolling. (Conversely, images that work well on small screens may not work well for large screens.)
Images need special attention when a design must work across multiple screen sizes. This article explores three common issues associated with scaling images for small screen devices and three possible solutions.