Image Format

Introduction

Among the largest file downloads in mobile apps today behind video are images. When an application runs and downloads many images, you can speed delivery by ensuring that each image is properly formatted and optimized for the device requesting the file—thus helping the app run faster for your customers.  This best practice examines using alternate image formats inside your mobile application.

Background

JPEG is one of the most popular file formats on the web today. However, the basic JPEG compression algorithm was developed in the 1980s—over 30 years ago! In the last 30 years, compression algorithms have improved dramatically, so using a newer image format could result in much smaller files with identical quality. Because smaller images download faster, your application performance will increase.

The Issue

Google has created a new image format called WebP that is supported on Android devices (and libraries support WebP on iOS). iOS natively supports JPEG-2000, a new format of JPEG compression with similar compression characteristics to WebP.

The following JPEG image is 500KB:

When you load this JPEG image in Chrome on an Android device while Video Optimizer is running, it downloads the entire 550KB image file.

When you compress this JPEG image to 85% quality, it reduces the file size to 304 KB – a savings of 45%! However, there is a quality loss from the compression process.  The Image format best practice takes this image and formats it into WebP (for Android) or JPEG2000 (for iOS) and looks for an improvement.

In the case of this image, a WebP version of the image shrinks the file size by 61% to 210 KB. This is a 31% savings over the reduced quality JPEG at 85%!

Best Practice Recommendation

Alternative image formats can help increase the speed of your mobile application, as newer compression algorithms compress the files to a much smaller size, with virtually no loss in quality.