According to a recent report from Pew Internet, half of US adults own a smartphone, and 28% of Americans use a mobile device as their primary means of accessing the web. In light of these findings, it becomes clear that having a mobile-accessible website for your business is a matter of increasing importance. As more and more of your customers use their mobile devices in their daily life, you need to be able to serve them, and that means going mobile yourself.
When investigating your mobile web design options, it is important to pay special attention to the images you choose for your mobile site. Images currently comprise 60% of all website bandwidth usage; for mobile devices, bandwidth is a precious commodity. If you don’t choose the right images, they can eat up bandwidth, waste battery power, increase page load times, and ultimately cause customers to leave your page prematurely.
Less Is More
The small size and resolution of mobile devices means you need to make different design choices than with your regular website. The size of your text and images will be much larger in comparison with the smaller screen; this content must be easy to scroll through and navigate with a touch screen.
When engaging in web design on small-scale mobile devices, the adage “less is more” rings particularly true. Simplifying and optimizing your mobile web content reduces page size, reduces page load time, and makes it easier for the user to understand and navigate the page.
- Most mobile devices do not support Flash, Java, frames, or pop-ups, so eradicate those elements from your mobile web design in order to avoid errors and bugs.
- CSS background images or byte-heavy infographics can be problematic for smaller screens, and visual embellishments can add unnecessary bulk to your site bandwidth.
- Consider the screen shape and resolution of mobile devices. Where your regular website may easily utilize several columns in its design without causing issues, a one-column structure may be more appropriate for your mobile website.
- Most mobile websites have fewer images on the page and present smaller images on the screen – even those sites oriented around images and image sharing (like Flickr). You should follow this reductionist trend and reduce your image usage to only those that are necessary – and keep them small.
Available Image Formats
Once you have decided how you want to incorporate images into your mobile site, you need to consider image file types. There are several image formats available on the web, and each format is appropriate for different functions and uses.
- The GIF extension is the best format for displaying an image with a transparent background, such as your company logo. Use it for line art, simple drawings, and images that have no gradients or blends.
- The PNG format serves the same function as GIF, but with smaller file sizes and better transparency. This file type is not supported in older browsers, but on the mobile web that’s less of a concern.
- JPG or JPEG is the best format for images that are colorful and complex. Any photographs you use on your site should be in the JPEG format to preserve color quality.
Image Size versus Screen Size
Screen sizes and screen pixel densities have changed dramatically in just a few short years. Screen dpi (the number of pixels, or dots per inch) has increased from 72 or 96 dpi on most screens, to a new norm of 150 dpi by 2008. The newest iPhones are now 300dpi. Low-dpi images that are displayed on high-dpi screens can look jarring and pixelated, degrading the user experience.
Meanwhile, the range of screen resolutions on which users view web content, has increased. Large HD monitors display graphics at 1920×1200 or higher resolution; the iPhone 4 has a resolution of 640x960p; and some Android and Blackberry phones operate at a resolution of 320×240. Supporting this range can be challenging for web designers.
- The goal of mobile web design is to serve the best quality images as efficiently as possible to a wide range of users and devices.
- One method of optimizing images for multiple screen sizes is set a max width of 100% to your images, forcing them to scale up or down to fit inside the parent container. The next section will outline the advantages and disadvantages of this technique.
Implications of Image Resizing
Responsive design is a method of using CSS to scale and adjust website layouts automatically according to device screen size. It works as an alternative to the more labor-intensive coding if multiple separate CSS stylesheets for every possible screen size.
Setting the max-width property of all images to 100% will automatically reduce your images to fit any screen, but this method has problematic implications for your load times and bandwidth usage.
- In order to view scaled images on a mobile device, you must force your device to download an unnecessarily large file – one optimized for viewing on a computer monitor – decompress it in the phone’s memory, and then resize it on the small screen.
- According to WebDesignShock.com, “This process takes about 3 bytes per pixel of memory, so a 1024×768 image will take about 2.36 MB of memory.” Since mobile devices have limited processing power, rendering an image through responsive design can exceed the device’s memory limitations, cause a noticeable time delay, and use large amounts of server bandwidth and device battery power.
While you can use code to hide background images from being displayed on a mobile device, those images will still be downloaded. Using a CSS media query to replace your regular background image with a mobile-optimized version can sometimes result in both versions being downloaded to your device.
In this case, WebDesignShock advices, “There are two cases that seem to work: setting the parent of the element with a background image to display:none, and using a min-width declaration to specify a minimum browser width for the desktop image and a max-width for the mobile image. The result of both is only the mobile image been downloaded and viewed on the mobile device.”
However you decide to create and code for your mobile website, you need to acknowledge a few simple truths. Images can often be necessary to your website’s readability and overall design, but that functionality comes at the cost of higher bandwidth usage. You can decrease this usage by employing images sparingly and at smaller resolutions – so long as this doesn’t damage image quality.
The key to using images in mobile web design is to find a balance between presenting the best quality images to your audience while keeping network and device processing time to a minimum. Choosing the right images is an important element of that balance.
Megan Webb-Morgan is a web content writer for ResourceNation. She writes about small business, focusing on topics such as business sales.
