File Size

File Size

Problem

How to get images that download quickly but still look good.

Description

For a satisfactory user experience, a website should find a balance between quality graphics and a quick download time. The smallest files should be generated wherever possible, while maintaining a certain degree of image quality.

Solution/Discussion

The filesize of any bitmap graphics file is primarily a function of five factors:

• The height and width of the image in pixels
• The “bit-depth” or number of colors in the image
• The file format in which the image will be saved
• The type and amount of compression used, if any
• The complexity of the image’s subject matter

Image Size

If the final image has smaller height and width dimensions, the file size will, on average, be smaller as well.

Bit-depth

Usually, a smaller number of colors results in a smaller file size. GIF files will definitely become smaller when they are saved to a lesser bit-depth. Significant file size reductions can be attained when the number of colors is 32 or less, but they will only look good if the original subject matter is within a limited range of colors or is of a simple nature, like a diagram or logo. Until the JPEG 2000 format is commonly supported by web browsers, JPEG currently supports only either millions of colors or 256 shades of gray. Because of this limitation, using the reduce() function will not produce a smaller JPEG image…in fact, if the ‘dither’ parameter is used in the reduce() function, the additional “busyness” introduced by the dither may very well make the final image larger than would be had by simply saving it as JPEG with no color reduction.

File Formats: At this time, web browsers are predominately supporting the JFIF form of JPEG and GIFs.

GIF files

Limited to 256 or less colors. GIF files can be very small when the number of colors is reduced to less than 256. Please see the MediaScript Reference Guide for GIF parameters that can also affect file size.

JPEG files

This format allows an adjustable amount of compression that can produce a very small size file, but this is accompanied by an increasing amount of distortion of the image data. Please see the MediaScript Reference Guide for other JPEG parameters that can also affect file size.

Image Compression

The JPEG format allows an adjustable amount of compression of the “lossy” type: this means that setting the ‘quality’ parameter to an amount under 50 or 60 will produce a smaller file but the image data may be distorted by the compression process to the point that the compression effects become visible. This may not be a hindrance if the final image will be very small, or if the original is more diagrammatic than photo-realistic.

Image Complexity

Images with a wide range of colors and a lot of contrast will make larger files. For example, a nighttime photo with a brightly colored, well-lit merry-go-round filling the frame will produce a much larger file than a photo of a jet’s contrail in a light-blue sky, even though both images are of the same dimensions.

Back to Developer Resources