Ian's Graphics Site - Optimizing Graphic Files

Ian's Graphics Site - Computer Graphics Information and Advice from a "PixelTech"

Optimizing Graphic Files

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!

Choosing Graphic File Formats
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". Knowing which file format to choose is probably the most important factor in optimizing graphics.
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 will still work, but will usually give inferior results. Typically, the filesize will be much higher whilst the resulting image quality will also be much lower.
GIF = Best IanLogo1.gif = 3,447 bytes. Compact file, sharp detail.	JPG = Worst IanLogo1.jpg = 12,991 bytes. Large file, fuzzy detail.
GIF = Worst UluruPhotoC256.gif = 41,453 bytes. Large file, spotty shading.	JPG = Best UluruPhotoQ070.jpg = 26,838 bytes. Compact file, smooth shading.
Got It Wrong? 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.

Optimizing JPG Files
Having chosen to save a photo as a JPG file, the next most important factor 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	Quality = 10; Filesize = 5,632 bytes; Compression = 97%. The image is noticeably chopped up into 8 x 8 pixel blocks.
30	Quality = 30; Filesize = 9,864 bytes; Compression = 94%. Sharp contrasts between the branches and sky introducing "artifacts".
50	Quality = 50; Filesize = 15,099 bytes; Compression = 91%. Looking pretty clear overall, though still some noticeable artifacts.
70	Quality = 70; Filesize = 26,838 bytes; Compression = 84%. Excellent image overall. Smooth shades, fine details, few artifacts.
90	Quality = 90; Filesize = 55,364 bytes; Compression = 68%. Fine details of sky are visible (though they're not really necessary).
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 minute 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

JPG File Headers

Thumbnail Image

Digital Camera Info

JPG File Headers

ICC Color Profile

Image Editor Data

Comment / Credits

JPG File Headers

Some Other Stuff

JPG File Headers

JPG Image Data

Even More Stuff

Typical JPG File:
At left is the breakdown of a typical JPG file. The various green and blue sections are all that's actually needed to display the image. The various yellow sections are all "extras", which are ignored by web browsers and JPG image viewing programs.

However, those yellow sections still take up disk space and, more importantly, consume bandwidth when they are downloaded, even though they are not "needed". The result is that JPG files can easily take twice as long to download and display as they should.

JPG File Headers

JPG Image Data

Optimized JPG File:
Removing all the yellow "extras" and combining some of the green sections whilst leaving the blue section intact results in a much smaller JPG file, yet the resulting image will look identical to the original image because the JPG image data is completely unchanged.

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.

JPG Files With Or Without Extras
What's The Difference? Those hidden extras can make a huge difference to the size of the JPG file whilst making no difference to the image. Here's some real-world examples:
Original JPG File = 29,375 bytes This is a fairly typical JPG file. It started as a high-resolution photo from a 5-Megapixel digital camera. Using Photoshop, the image was resized to fit onto this web page and saved as a JPG file with a modest "quality" setting.	Optimized JPG File = 11,415 bytes Optimized file after processing with JPGExtra, which removed 17,960 bytes of "extras". Despite eliminating 61% of the JPG file, the picture looks absolutely identical because the JPG image data is completely unchanged.
Original JPG File = 16,603 bytes Web sites often have many small "preview" images, especially for product images on catalogues or e-commerce sites.	Optimized JPG File = 2,102 bytes This time JPGExtra saved 14,501 bytes, a similar overall saving as above but a much higher percentage (87%).
More Information: This is only a very brief summary, as there is now a complete section about JPGExtra on my Ian's Software Site, containing several pages of info.

Optimizing GIF Files
GIF Compression: The GIF file format is quite efficient at compressing data, particularly when the total number of unique colors in the image is reduced. This gives two benefits: More of the same colors occur in a row, which compresses well, plus less space is needed to store each pixel. Here's a brief summary: Computers typically use what's called "24 bit RGB" to display images: Every pixel uses 24 bits of data, allowing images of up to 16.7 million unique colors. In GIF files, every pixel uses only 8 bits of data. This limits images to a maximum of 256 unique colors. Every halving of the total number of unique colors requires one less bit of data per pixel, thus 128 colors = 7 bits, 64 colors = 6 bits, 32 colors = 5 bits, etc. Choosing the Number of Colors: The process of optimizing GIF files is mainly about choosing an appropriate number of colors. Too many colors results in wasted storage, whilst too few results in loss of image quality. This "Color Reduction" is performed with image editing software, and how well this is done will determine the finished image quality.
Can You Spot The Difference?
	Colors = 256, Filesize = 8,064 bytes. This image, one of many from my Ian's Shoelace Site, uses the maximum GIF file allowance of 256 colors. This is more than enough colors: black, white, blue and yellow, plus intermediate shades of each, producing a clear image with fine detail and smooth shading.
	Colors = 64, Filesize = 5,633 bytes. In order to further optimize the GIF files, I experimented with reducing the number of colors. I tried 128, 64, 32 and even 16 colors, eventually settling on 64 colors as the best balance of reasonable image quality & compact filesize.
	Colors = 16, Filesize = 3,366 bytes. By 2004, the sheer volume of shoelace images downloaded daily from my web site made them worth optimizing further. I therefore created a custom palette of 16 carefully chosen colors: 8 x greyscale, 4 x blue, 4 x yellow. The resultant images came out almost indistinguishable, whilst the files ended up about 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 a large number of images with identical palettes, the total savings are well worth the effort.

Top of Page

Sponsored Links