Maximum Compression

 

If you plan on keeping your image on your hard drive, and you have a monster drive of 60 GB or more, then don't worry about compression - just save the files as JPG and use a seeting of approximately 9, for sharp, clear images with a fair amount of compression.

If you are emailing images, or you plan to place them on a website - then compression is of the utmost importance - in fact, it's critical !!  The problem with web pages is load time for dial-up users.  As you know, it can be excruciatingly slow, and unless the topic is very important, you will click through the site if it is overloaded with large images.

 

GIF vs JPG

GIF images use indexed color, where a simple table with a max of 256 colors is stored within the image file, and referenced (indexed) by each bit for it's own corresponding color.  JPG  uses the full spectrum of colors, and relies on scalable compression (quality) to reduce file size.  The size of a GIF can only be altered by using less than 256 colors in the index table.  The size of a JPG can be altered by adjusting it's quality setting.

The old rule of thumb was to convert everything to GIF for the web.  It was falsely believed to result in the smallest file size.

The truth is that it depends on several factors - some images are best optimized using GIF  .  .  .  other JPG.  Some GIF images look great with only 8 colors in the table, while others look poor even with 256 colors (actually, any image looks fine if you customize the 256 color table !!!).  Some JPG images look fine when saved using a low quality (try anywhere from 3 to 5 in Photoshop) - while others suffer greatly.  A setting of 0-2 will cause quite a bit of degradation, so those settings are not recommended.

Our goal for web images is to reach a happy medium, where the images are compressed as much as possible while retaining a fair amount of quality.  The amount of quality is entirely subjective, but most agree that a slight blur is not objectionable, and well worth the results.  The page will load twice as fast if you reduce your image sizes by 50%.

In general:

use GIF for images with few colors, or one that can be converted to an image with few colors, and still not suffer greatly as far as quality is concerned.  GIF is especially effective with Clip-Art, Cartoon-style, or black and white images.
use JPG for extremely colorful, photographic images, or grayscale images that require many shades of gray.

 

Optimizing GIF's

The GIF format can yield amazingly small file sizes, if use properly.  For max GIF compression, with acceptable quality - create a custom palette.  This will insure that the palette contains the dominant colors contained by that particular image.

Most people use the standard windows system 256-color palette, which is fine for some images - terrible for others.  Creating a custom palette takes a bit of time, so first, go ahead and try the Windows palette.  If the results are unacceptable, then create a custom palette.

Creating a Custom Palette

Extreme compression !!  This works for clip-art, cartoons, and photographic images with few colors, such as photos of a forest, gold bars, etc.  It does not work well on photos that rely on many colors and flowing hues, such as facial pics.

The idea here is to take an image, and create a palette based on that image.  Photoshop has no way of doing this, so you will need another tool.  Both Image Ready (comes with recent versions of Photoshop) and Ulead GIF Animator can do this for you.

GIF Animator is inexpensive (about 50 bucks), and if you work much with Graphics it is a must.  It not only can create animated GIF's  -  it can also optimize images into GIF files by creating custom palettes.  The utility will show you a Before and After, listing the file sizes.  Then you can either save the image as an optimized GIF, or save the palette as a "pal" file - which can then be imported into Photoshop for the conversion step from JPG to GIF.

Using a 256-color custom palette rarely saves size  -  so you need to use either 16, 32, 64, or 128 colors.  This is an option in GIF animator

Here is an example:

       

Original JPG (30k) GIF converted with Windows 256-color Palette (15k) GIF converted with custom 8-color palette (5k)

       

The image conversion with the custom palette look much better than the one using the Windows system palette.  In addition, it takes 1/6 the original image size, and is 1/3 the size of the Windows system palette image.  This image is ideal for GIF conversion with a custom palette because it has very few colors.  Here is the palette that GIF Animator came up with, when 8-colors was selected:

Black and White Images

These can be compressed to an unbelievable low size !!!  You can use a 2-color palette and convert the JPG to GIF.  Here is an example:

Original JPG (43k) GIF converted with Windows 256-color palette (10k) GIF converted with GIF Animator 2-color palette (3k)

 

Adding Blur

Some people add blur to their web images to save on size.  The savings is marginal at best (10 to 30%), and the degradation is fairly noticeable.  This is a judgment call - however I do not recommend it.  

It can, in some cases, actually increase file size.  When blur is added, it causes edges to smooth out, which increases the number of colors dramatically.  Flowing shades require many more colors than hard edges.  GIF's cannot reproduce gradual, flowing changes in hue or intensity.

NOTE:  when you save a JPG in Photoshop, a box pops up with a quality slider.  It can be set anywhere from 0 to 12.  The further you slide it to the left, the lower the quality - and this adds its' own blur.