Optimizing Graphics Files
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".
Typical GIF Files
Logos, headings, buttons, borders, simple diagrams, animations.
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
Filename:
IanLogo1.gif
Settings:
16 colors
Filesize:
3,447 bytes
Ian Logo – JPG format
Filename:
IanLogo1.jpg
Settings:
Save For Web Quality 70
Filesize:
12,991 bytes
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
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.
Photo of Uluru – JPG format
Filename:
UluruPhotoQ070.jpg
Settings:
Save For Web Quality 70
Filesize:
26,838 bytes
Photo of Uluru – GIF format
Filename:
UluruPhoto.gif
Settings:
256 colors
Filesize:
41,453 bytes
Photo of Uluru – JPG format – detail
Detail of above photo, showing smooth shading – particularly around the sky. It's the clear winner.
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
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?
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.
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.
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
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
Q10 – Full Photo
Filename:
UluruPhotoQ010.jpg
Filesize:
5,632 bytes
Compression:
97% (31:1)
Q10 – Detail
This minimal quality image is missing detail and is noticeably chopped up into 8 × 8 pixel blocks.
JPG Quality 30
Q30 – Full Photo
Filename:
UluruPhotoQ030.jpg
Filesize:
9,864 bytes
Compression:
94% (18:1)
Q30 – Detail
Fairly blurry detail, plus sharp contrasts between the branches and sky introducing "artifacts".
JPG Quality 50
Q50 – Full Photo
Filename:
UluruPhotoQ050.jpg
Filesize:
15,099 bytes
Compression:
91% (11:1)
Q50 – Detail
Everything looking pretty clear, though still some noticeable artifacts around the branches.
JPG Quality 70
Q70 – Full Photo
Filename:
UluruPhotoQ070.jpg
Filesize:
26,838 bytes
Compression:
84% (6:1)
Q70 – Detail
Excellent image overall. Smooth shades, fine details, few artifacts.
JPG Quality 90
Q90 – Full Photo
Filename:
UluruPhotoQ090.jpg
Filesize:
55,364 bytes
Compression:
68% (3:1)
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.
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
Related Links
File Formats
Info & advice on common graphics file formats.
JPGExtra
Free optimization app for cleanly removing extras from JPG files.
PNGExtra
Similar app for cleanly removing extras from PNG files.
Shoelace
Software
Graphics
Ian
Tree