Resize Images for Mobile

Introduction

Images that are not correctly sized for mobile display can cause extreme delays in rendering. Before delivering content to a mobile device, it's more efficient to resize it to fit the available area.

This Best Practice Deep Dive looks at the pros and cons of different approaches for sizing and displaying images, and provides recommendations for determining which images are causing inefficiency and how they can be resized.

Background

It is a good idea to properly size images on the server to fit the available display area, and specifying the width and height for all images allows for faster rendering.

The display sizes of mobile devices vary widely, from the smallest smartphone to the biggest tablet, so some developers pre-size every image into several different buckets, and send the most suitable image to each device.

It is also important to make sure that images that are served as thumbnails are served as close to the size rendered as possible to reduce the bandwidth and the time it takes to deliver the images to your users.

The Issue

Using a "one size fits all" approach to images results in very large images sent to devices with very small screens. Since image size increases 4x when you double the x and y dimensions of the image, this can lead to large delays (first a large image is downloaded, and then the browser must resize the image so that it fits into the page properly).

The Manual Approach

The most basic approach is to manually resize images for all the targeted device displays and orientations that you can identify, and then deliver the correct image by profiling the device. This is a good solution, but it requires a lot of disk space to store images in all of the various sizes, and a high level of device recognition to stay current with every device in the market. There are free tools like Wurfl that profile every device, which can help simplify these issues.

CSS Media Query

Some developers are using the CSS Media Query feature to manage images. This is especially appealing when repurposing content from a standard web site for mobile devices.

Typically, this is accomplished in two ways: One is to have image tags that are hidden by CSS, and the other is to use CSS background images and switch the background image. Unfortunately, using CSS Media Query to solve image sizing also has problems. CSS Media Queries are not universally supported, and they will not remove unnecessary HTML nor remove JavaScript that will slow down mobile browsers.

Content Management Systems

Content Management Systems are another possible solution. A CMS manages the problem by determining the right image sizing for the device based on device profiling, and then delivers the correctly sized image from its content library.

A CMS can be a good solution, but they are time consuming to build, time consuming to manage, and can be prohibitively expensive.

The bottom line is that developing content for the ever-expanding world of mobile devices is difficult. There are no simple solutions that make it easy to provide a great mobile-optimized experience.

Best Practice Recommendation

The Best Practice Recommendation is to resize images for mobile display whenever possible. Regardless of the challenges, properly sizing images can save many bytes of data and will improve user experience.

The AT&T Video Optimizer tool runs a test on trace data from your application that helps you identify which images should be resized.

Video Optimizer checks the dimensions of each image and compares that to the size of the area specified for it in the CSS or HTML. If the image is more than 150% larger on any dimension than the area specified for it, Video Optimizer flags the file. If there are no dimensions specified Video Optimizer determines whether the file is smaller than the screen of the device.

To resize your images, try some of the following methods:

• Use an image editor to scale images to match the largest size needed in your page.
• Specify those dimensions in the page.
• Follow guidelines for the platforms that your app is targeting and use content types which are supported on those platforms.
• Follow standards and keep researching new approaches for optimizing content.

For additional recommendations, see the "Questions to ask when designing your mobile content:" section in the Best Practice titled Content Optimization for Mobile Devices.