Resolution
Since there are constantly new mobile devices, with bigger & better displays being introduced, image resolution (also known as pixel density) is a moving target. Currently, the highest resolution mobile device is the HTC One at a resolution of 460 pixels per inch (ppi). That will of course change; so, the visual designer needs to always be vigilant. Mobile resolutions are much higher than the good old 72ppi desktop, so although an image from a desktop site will look OK on a mobile device, the smaller ones may not look very good when the user chooses to zoom in. To prevent low quality and blurry images, multiple size options should be available so that device media queries can use the correct size.
Now wrapping one’s head around the whole resolution in relation to image size is a tough one.
As the pixel density of a device goes up, the relative size of the asset appears smaller. Imagine a 1 inch x 1 inch square image on your average 72 ppi desktop or laptop monitor. This square will contain 72 pixels across and down. Because mobile devices have much higher resolutions, that same 1 inch square will no longer appear 1 inch on the mobile screen. On the Motorola Zoom’s 160ppi screen, for example, it would appear to be just under a half-inch square. On the iPhone5 with 326 ppi, that same 72 pixel square would appear to be just under a quarter of an inch. This is because an image can never change its pixel size. This is essential to understand when making interactive assets for the web. If your image button is less than a quarter inch on a mobile device, your user will never be able to easily touch it. Buttons and links are best done in code so their sizes can adjust easily to the changing device resolutions.
Image Complexity
The best way to manage how web images are viewed from device to device is through responsive design where a completely different image and cropping can be used based on the device size and resolution, but not everyone can recode their site. One way to solve this is to use simpler images overall. Imagine a whole website viewed at a quarter its normal size. Fewer and less complex images will still be understandable at that size. With multiple size options available through media queries, the user will be able to zoom in on that image to see it more clearly. Even if the site is restructured through CSS to be better formatted on mobile devices, where the user does not have to zoom in to read the content, those images will still need to be smaller. They need to be simple enough to convey their message without interfering with navigation and content in the limited mobile space.
As you can see along with all the other considerations of relevance, appropriateness, aesthetics, brand compliance, and even cost there are also mobile considerations when choosing an image for your web site. A designer just can’t go through the average stock art repository and select any image. They must also consider the actual image size in relation to the ever-changing resolution of mobile devices, how clear it will be, and how it can simply relay the necessary information without overwhelming the rest of the small page. Choose wisely.
Related Posts: Part I: Design Considerations for Mobile, Part II: Design Considerations For Mobile – No Hover State!