Image File Compression

Introduction

Wireless networks are more constrained than wired networks, so it is a good idea to simplify and shrink file sizes whenever possible. Image files are no exception.

Smaller file sizes that deliver acceptable image quality, are always better from a mobile perspective.

This Best Practice Deep Dive provides some background on image resolution and compression, describes the issues involved with managing image sizes, and provides recommendations for reducing the file size of images to provide the best quality images for the lowest overhead on a wireless network.

Background

When There are two ways to measure the size of an image. One is the physical size, which is measured by image resolution that takes into account the width and height of the image as well as the total number of pixels. The second is to measure the size of the file in bytes.

Optimizing image resolution by adjusting width and height is covered in the Best Practice Resize Images for Mobile. AT&T Video Optimizer can help you determine if you are presenting images that are oversized for the area they are being displayed in, but you can also improve performance by reducing file sizes even when images are sized correctly for the display.

This Best Practice is focused on reducing the amount of overall data contained in an image file. One way to do this, is to reduce the size of the file through file compression, another way is to physically reduce the size of the file by shrinking or cropping it.

There are two basic methods of compressing files, lossy and lossless:

• Lossy compression saves space by permanently removing information from the original file. It is possible to remove more data with lossy compression than with lossless compression.
• Lossless compression keeps the original information, so that the original image can be reconstructed when it is decompressed. Lossless compression is used when you want the original data and the decompressed data to be identical. However, the file size in bytes is typically larger than with lossy compression.

The Issue

Ever increasing bandwidth and decreasing latency on wired networks over the years has meant that many developers have not had to worry as much about the size of image files.

But wireless networks are more constrained than wired networks, so every byte counts.

There are plenty of image editing tools available to help you adjust the size of image files, but managing image size, whether it’s measured in bytes or in resolution, involves a trade-off between image quality and efficiency.

Best Practice Recommendation

The Best Practice recommendation for image compression is to find a solution that offers the best quality image while generating the lowest overhead on a wireless network.

Some of the ways that the file size of an image can be reduced are:

• Shrink the physical size of the image by keeping the proportions while making the whole thing smaller. In other words, a 60 x 60 pixel image is reduced to 40 x 40 pixels.
• Crop the image by removing portions of the image, reducing the height, width, or both. Often, cropping can be done in a way that improves the quality of the image. For example, if there is extra head space above the image subject, or unneeded space on one side or another that can be removed, the file size can be reduced while improving the composition of the image.
• Try compressing by converting to a different file format. Each image format involves tradeoffs in terms of quality and file size, so it’s good to experiment. JPEG or JPG (Joint Photographic Experts Group) is a method of compression used most often for photographs and realistic images. PNG (Portable Network Graphics) is a raster graphics file format that supports lossless data compression, it is often used for line art, text-heavy images, and images with few colors. PNG often replaces GIF (Graphics Interchange Format), which is a common web image format. With only 256 colors, GIFs are a more limited form of compression, most often used for text, and simple icons.
• Consider reducing the number of colors. This may reduce the quality, but it can work for simple images like buttons, banners, and icons. Make sure you avoid dithering. Dithering means using random dots or patterns to intermix palette colors. This can make images look better, but it increases the information complexity of an image, resulting in larger file sizes and slower downloads.

Often, you can shrink the file size of an image quite a bit without losing quality. But if you are not paying attention, this can backfire. As you review each image, check to see if the changes make the file smaller without compromising quality.

For an overview on the general topic of content optimization considerations, see Content Optimization for Mobile Devices.