Ian Fieggen Ian's Graphics Site Pixelated Graphics Icon
Ian's Graphics Site - Computer graphics information and advice from a "PixelTech"
Optimizing Graphic Files
Optimized Uluru photo All of the graphics on this web site have been carefully optimized so that they reproduce well, take minimal space and load as quickly as possible. From choosing the right file formats and quality settings to some surprising revelations about hidden extras within image files!


Choose the Appropriate File Format
The Right 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: JPG for "photos", GIF for "illustrations".
Uluru photo Typical JPG Files:
Photos, products, scenery, faces, textures, backgrounds.
Ian logo illustration Typical GIF Files:
Logos, headings, buttons, borders, simple diagrams, animations.
The Wrong Format:
Choosing the wrong file format for the type of image will still work, but will usually give inferior results. Typically, the filesize will be much higher plus the resulting image quality will also be much lower. (See 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 a 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.


JPG is Best for Photos
The JPG file format is best for photographic type images. Compare the smooth shading and compact filesize of the JPG file with the spotty shading and 50% larger filesize of the GIF file.
JPG = Best
Uluru photo, JPG format
JPG filesize = 26,838 bytes
Uluru photo, JPG format - Detail
JPG close-up shows smooth shading
GIF = Worst
Uluru photo, GIF format
GIF filesize = 41,453 bytes
Uluru photo, GIF format - Detail
GIF close-up shows spotty shading


GIF is Best for Illustrations
The GIF file format is best for illustration type images. Compare the sharp detail and compact filesize of the GIF file with the fuzzy detail and almost 4x larger filesize of the JPG file.
GIF = Best
Ian logo illustration, GIF format
GIF filesize = 3,447 bytes
Ian logo illustration, GIF format - Detail
GIF close-up shows sharp detail
JPG = Worst
Ian logo illustration, JPG format
JPG filesize = 12,991 bytes
Ian logo illustration, JPG format - Detail
JPG close-up shows fuzzy detail


Optimizing JPG Files
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 sliding scale. The following examples were created with Photoshop's "Save For Web" scale of 0 to 100.
10 Uluru photo, Quality 10 Uluru photo, Quality 10 - Detail
Quality = 10; Filesize = 5,632 bytes; Compression = 97%.
The image is noticeably chopped up into 8 × 8 pixel blocks.
30 Uluru photo, Quality 30 Uluru photo, Quality 30 - Detail
Quality = 30; Filesize = 9,864 bytes; Compression = 94%.
Sharp contrasts between the branches and sky introducing "artifacts".
50 Uluru photo, Quality 50 Uluru photo, Quality 50 - Detail
Quality = 50; Filesize = 15,099 bytes; Compression = 91%.
Looking pretty clear overall, though still some noticeable artifacts.
70 Uluru photo, Quality 70 Uluru photo, Quality 70 - Detail
Quality = 70; Filesize = 26,838 bytes; Compression = 84%.
Excellent image overall. Smooth shades, fine details, few artifacts.
90 Uluru photo, Quality 90 Uluru photo, Quality 90 - Detail
Quality = 90; Filesize = 55,364 bytes; Compression = 68%.
Artifacts almost non-existent. Sky is less smooth as fine detail emerges.
Recommended Quality Setting:
I generally use a quality setting of between 60 and 70 for the photos on this web site. This provides a reasonable balance between sufficiently high image quality and reasonable filesize. Again, the quality setting depends on the graphics software used, so you may have to experiment with your software to find a similarly "balanced" setting.

Maximum Quality Setting:
Choosing a quality setting higher than about 90 gives diminishing returns in that there is hardly any increase in visible quality yet there is a significant increase in filesize. It's generally agreed that using 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 level of compression, and the results will vary from one image to the next.
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 results in a lower quality.

Hidden Extras in JPG Files
Extras within 240x320 JPG file

The next most important optimization step for JPG files is to eliminate any "hidden extras". I've decoded the innards of thousands of JPG files. 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" (or "metadata").

  • 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!

Optimize JPG files with no loss of image quality by cleanly removing extras JPGExtra To The Rescue:
I've written a tiny but extremely powerful 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 web site 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.
Optimize PNG files with no loss of image quality by cleanly removing extras PNGExtra for PNG files:
In the same way that my JPGExtra program optimizes JPG files with no loss of image quality, my new PNGExtra program similarly optimizes PNG files by cleanly removing "extras" (or "metadata").
PNGExtra Program on Ian's Software Site.


Optimizing GIF Files
2 / 16 colors comparison 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 of 256 colors, whereas most images contain more than 256 colors.
Choosing the Optimal Number of Colors:
One can normally choose anything from 2 colors to 256 colors, generally in steps of 2, 4, 8, 16, 32, 64, 128 or 256. Choosing too many colors results in wasted storage, whereas too few colors results in loss of image quality. Comparison of images represented with different numbers of colors
The top row above shows examples of an image that needs few colors. The practical minimum is four colors: Blue for the background, White for the number, Black for the outlines and Dark Blue for a thin shadow. Choosing sixteen colors allows some intermediate shades to give smooth outlines and a wide, soft shadow, but makes the file 2x the size. Choosing more than sixteen colors results in an even larger file with no noticeable increase in quality.

The second row above 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 rough outlines and shadows. 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 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 40% smaller!
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 total savings are well worth the effort.
Sponsored Links