Optimizing Graphics Files

Optimizing graphics to be clear, small and fast

It's important that all websites optimize their images – Google does, and so should you! This section details how to optimize web images so that they reproduce well, take minimal space and load as quickly as possible.

Choose the Appropriate File Format

Knowing the right file format for the type of image is probably the most important factor in optimizing graphics. As explained in more detail on my Computer Graphic File Formats page, the two most common types of graphic files – GIF and JPG – have two fairly distinct uses: GIF for "illustrations", JPG for "photos".

Ian logo illustration

Typical GIF Files

Logos, headings, buttons, borders, simple diagrams, animations.

Uluru photo

Typical JPG Files

Photos, products, scenery, faces, textures, backgrounds.

The Wrong Format

Choosing the wrong file format for the type of image won't fail completely – you'll still get an image file that works. However, the result will be inferior – typically a much larger filesize plus much lower image quality (as per the examples below).

If you've unfortunately got it wrong and have created images in the incorrect file format, there's no easy solution – the damage has been done. In other words, you can't simply use a graphics program to convert an inferior GIF file into a JPG file (or vice versa) and expect to regain the quality that was lost. The only way to "undo" the damage and get the images into the correct file format is to re-create them from the originals.

Logo Comparison – GIF vs JPG

This sample logo has been saved both as a GIF file and as a JPG file. Compare the sharp detail and compact filesize of the GIF file with the fuzzy detail and almost 4x larger filesize of the JPG file. For this logo, GIF is clearly the best format.

Ian Logo, GIF format

Ian Logo – GIF format

Filename: IanLogo1.gif
Settings: 16 colors
Filesize: 3,447 bytes

Ian Logo, JPG format

Ian Logo – JPG format

Filename: IanLogo1.jpg
Settings: Save For Web Quality 70
Filesize: 12,991 bytes

Ian Logo, GIF format - Detail

Ian Logo – GIF format – detail

Detail of above logo in GIF format, showing sharp detail and solid, consistent colors. It's the clear winner.

Ian Logo, JPG format - Detail

Ian Logo – JPG format – detail

Detail of above logo in JPG format, showing fuzzy detail and inconsistent colors – particularly around areas with sharp contrasts. The result is an inferior looking logo.

Photo Comparison – JPG vs GIF

This sample photo has been saved both as a JPG file and as a GIF file. Compare the smooth shading and compact filesize of the JPG file with the spotty shading and 50% larger filesize of the GIF file. For this photo, JPG is clearly the best format.

Uluru photo, JPG format

Photo of Uluru – JPG format

Filename: UluruPhotoQ070.jpg
Settings: Save For Web Quality 70
Filesize: 26,838 bytes

Uluru photo, GIF format

Photo of Uluru – GIF format

Filename: UluruPhoto.gif
Settings: 256 colors
Filesize: 41,453 bytes

Uluru photo, JPG format - Detail

Photo of Uluru – JPG format – detail

Detail of above photo, showing smooth shading – particularly around the sky. It's the clear winner.

Uluru photo, GIF format - Detail

Photo of Uluru – GIF format – detail

Detail of above photo, showing spotty shading due to GIFs color reduction down to 256 colors. The result is an inferior looking photo.

GIF Optimization – Colors

Comparison of images represented with different numbers of colors

Having chosen to save an illustration as a GIF file, the next most important optimization step is to choose an appropriate number of colors. This is necessary because GIF files are limited to a maximum palette of 256 colors. Generally, one selects the maximum size of the color palette and the image editing software selects the best colors to suit that image.

Number of Colors

Most image software allows one to choose from 2, 4, 8, 16, 32, 64, 128 or 256 colors. Choosing too many colors results in wasted storage, whereas too few colors results in loss of image quality.

Images With Few Colors

The first column at right shows examples of an image that needs very few colors. The practical minimum for this image is four colors: Blue for the background, White for the number, Black for the outline and Dark Blue for a thin shadow. Choosing sixteen colors allows some intermediate shades to give a smooth outline plus a wide, soft shadow, at the expense of doubling the filesize. Choosing more than sixteen colors results in an even larger file with no noticeable increase in quality.

Images With Many Colors

The second column at right shows examples of an image that needs many more colors. In this case, sixteen colors is probably the practical minimum, with the background still noticeably spotty plus a rough outline and shadow. For a smooth result, 128 or 256 colors would be more appropriate, at the expense of making the file about 2x or 3x the size.

GIF File Optimization Example

This shoelace knot diagram from my popular Ian's Shoelace Site is typically viewed more than 1,000 times per day, so it's well worth optimizing. Can you spot the difference between the three versions?

Ian Knot diagram - 256 colors

Colors = 256, Filesize = 8,064 bytes

The "full" version uses the maximum GIF file allowance of 256 colors. This is more than enough colors: Black, Grey, White, Blue and Yellow, plus intermediate shades of each, producing a clear diagram with fine detail and smooth shading.

Ian Knot diagram - 64 colors

Colors = 64, Filesize = 5,633 bytes

This optimized version came after experimenting with 128, 64, 32 and even 16 colors, eventually settling on 64 colors as the best balance of reasonable image quality and compact filesize.

Ian Knot diagram - 16 colors

Colors = 16, Filesize = 3,366 bytes

Taking the optimization further, I created a custom palette of 16 carefully chosen colors: 8 × Greyscale, 4 × Blue, 4 × Yellow. The resultant image is almost indistinguishable, while the GIF file is another 40% smaller!

NOTE: Creating a custom color palette is a lot of work for one-off image optimization, but in cases such as my Ian's Shoelace Site, where there are many images with identical palettes, the long-term savings are well worth the up-front effort.

JPG Optimization – Quality Setting

10 / 90 quality comparison

Having chosen to save a photo as a JPG file, the next most important optimization step is to choose an appropriate quality setting. Almost all graphics software uses some sort of linear scale. The following examples were created with Photoshop's "Save For Web" scale of 0 to 100.

JPG Quality 10

Uluru photo, Quality 10

Q10 – Full Photo

Filename: UluruPhotoQ010.jpg
Filesize: 5,632 bytes
Compression: 97% (31:1)

Uluru photo, Quality 10 - Detail

Q10 – Detail

This minimal quality image is missing detail and is noticeably chopped up into 8 × 8 pixel blocks.

JPG Quality 30

Uluru photo, Quality 30

Q30 – Full Photo

Filename: UluruPhotoQ030.jpg
Filesize: 9,864 bytes
Compression: 94% (18:1)

Uluru photo, Quality 30 - Detail

Q30 – Detail

Fairly blurry detail, plus sharp contrasts between the branches and sky introducing "artifacts".

JPG Quality 50

Uluru photo, Quality 50

Q50 – Full Photo

Filename: UluruPhotoQ050.jpg
Filesize: 15,099 bytes
Compression: 91% (11:1)

Uluru photo, Quality 50 - Detail

Q50 – Detail

Everything looking pretty clear, though still some noticeable artifacts around the branches.

JPG Quality 70

Uluru photo, Quality 70

Q70 – Full Photo

Filename: UluruPhotoQ070.jpg
Filesize: 26,838 bytes
Compression: 84% (6:1)

Uluru photo, Quality 70 - Detail

Q70 – Detail

Excellent image overall. Smooth shades, fine details, few artifacts.

JPG Quality 90

Uluru photo, Quality 90

Q90 – Full Photo

Filename: UluruPhotoQ090.jpg
Filesize: 55,364 bytes
Compression: 68% (3:1)

Uluru photo, Quality 90 - Detail

Q90 – Detail

Artifacts almost non-existent. Sky is less smooth as fine detail retained from the original image emerges.

JPG Quality Setting Summary

Ian's Recommended Setting

I generally use a JPG quality setting of between 60 and 70 for the photos on this website. This provides a reasonable balance between sufficiently high image quality and modest filesize. Again, the quality setting depends on the graphics software used, so you may have to experiment with your software to find a similar "balanced" setting.

Maximum Quality Setting

Choosing a JPG quality setting higher than 90 gives diminishing returns. It results in much larger files with very little extra increase in visible quality. It's generally agreed that anything above 95 is pretty much a waste.

Why Not 100% Quality?

Don't mistake the above scale for a percentage! A setting of 100 does NOT mean "100% quality", as there is still some tiny loss of detail. Also, a setting of 75 does NOT mean either "75% of the quality" or "75% of the filesize". The settings merely adjust the aggressiveness of the compression, and the results will vary from one image to the next.

NOTE: The quality scale can also vary between different programs, with some programs even using a reverse scale, such that the higher number means a higher compression and hence result in a lower quality.

JPG Optimization – Metadata Removal

Extras within 240x320 JPG file

The next most important optimization step for JPG files is to eliminate any "hidden extras" (or "metadata"). I've decoded the innards of thousands of JPGs. The image at right is a representation of the innards of one typical file.

The two blocks with green borders are the only necessary portions. The seven blocks with yellow borders are all "extras".

  • JFIF Header: Indicates the file format.
  • Exif data: Date and time photographed, shutter speed, aperture and other photographic settings, even the make and model of camera.
  • Thumbnails: Miniature versions of the photo for fast previews. The digital camera added one thumbnail and the image editing software, Adobe Photoshop, added the second.
  • Photoshop data: Various other info added by Adobe Photoshop.
  • Adobe XAP data: More info from Photoshop, this time in XML format, and often containing only 25% data and 75% blank space.
  • ICC profile: Color profile for more accurate color rendition on different systems (eg. screens, printers). Ignore the actual "rainbow", which I added to show that this block has something to do with color.
  • Adobe data: Tiny bit of additional data added by Adobe Photoshop.
  • Main image: Finally, after all of the "extras", we reach the actual image data.

This JPG file contains about 44% of "extras", the bulk of which are downloaded and then simply discarded by most web browsers. It's a real waste!

There are several ways to ensure that your JPG files contain fewer "extras", but the simplest way to ensure that they contain NONE is to run them through an image optimizing program. Luckily, I've created just such a program!

JPGExtra To The Rescue

JPGExtra program

I've written a tiny but extremely powerful – and FREE – metadata removal program called JPGExtra, which optimizes JPG files by cleanly removing all the hidden extras, reducing their overhead to an absolute minimum. The optimized JPG files download more quickly –
– which allows the browser to show the images sooner –
– which results in the web pages displaying faster –
– which in turn speeds up the whole website and cuts bandwidth costs!

Best of all, JPGExtra removes those extras without any re-compression of the JPG image data, which means that there will be no further loss of image quality.

JPGExtra Program on Ian's Software Site.

PNGExtra for PNG files

JPGExtra program

In the same way that my JPGExtra program optimizes JPG files with no loss of image quality, my PNGExtra program similarly optimizes PNG files by cleanly removing "extras" (or "metadata").

PNGExtra Program on Ian's Software Site.

Graphics Optimization Summary

This page has covered the following:

  • Selecting the right file format for the type of image;
  • Choosing a quality setting (for JPG files), or –
  • Choosing a suitable number of colors (for GIF files);
  • Ensuring that "extras" (or "metadata") are removed.

In future, I intend to delve into the complexities of optimizing PNG files as well as optimizing animated GIFs.

– Ian Fieggen, 18-Jan-2018

Sponsored Links