Image Comparison

Introduction

Images are one of the most popular ways to present information on webpages and mobile apps. They help customers navigate and help create a deep immersive experience. Images that are downloaded from the network should be properly sized to fit in the allotted space on the screen.

Background

Assume you are building an app with images You have an image on the server, and you set it up to download in the app. If the photo is 500x1000 pixels – that means that it uses 500,000 pixels to build the image. On the device, it appears as a 150x300 pixel image, using 45,000 pixels on the screen. This means that only 9% of the pixels downloaded actually appear on the display.

An image that is 90% smaller in pixel dimensions would be ~90% smaller in KB size, meaning that the file will download faster. Further, when an image is larger than the allotted screen area – the device's CPU must re-process he image to fit the size (in this case, purging 91% of the pixels that were downloaded). Downloading and reprocessing the image takes time, making your application appear slow.

If this image were resized to a size closer to 150x300 pixels, the amount of data needed to download the image will be greatly reduced. After the file is downloaded, the phone's CPU must process the image and throw 91% of the pixels aside to make it fit in the space allotted on the screen.

Best Practice Recommendation

Images downloaded from the network should be approximately the same size as the images that appear on the screen. Video Optimizer measures each image on the screen and compares the dimensions to the images downloaded over the network.

In the screenshot above, we see that 17 images should be smaller before sent to the phone. The first image downloaded uses 204,608 pixels, but appears on the screen as 12,496. Properly sizing this image could reduce the file by 93% - speeding up delivery and making your mobile application run faster.