by Mark Larmand

Whenever you set out to create a specific type of graphic, it's good to know ahead of time which format the image will be saved as. During the creation process there are certain procedures that can be utilized to help you take full advantage of each format's particular compression abilities.
May 1999

To understand how to achieve good results using each of the two image formats, we're going to examine some key characteristics of each.

Using the Gif Format

You'll find that in the long run, Gifs have far more capabilities than Jpgs do. As such, they require more time and experience to fully master.

The first step you should always consider when setting out to create a Gif image is what palette you will use. For Web graphics, there should be no question here. You should always use the 216-colour "Web-Safe" palette, no matter what program you have. As was mentioned before, this palette's specific set of colours has been designed to allow graphics to be represented equally well on both the PC and Mac platforms without dithering (no random anomalies), and is the industry standard used in Web design. You'll notice that there is a difference of 40 colours between the 256 and 216 palettes. Those extra 40 colours are the ones that are not common to both platforms, and so were removed from the palette.

Although it does have its own set of limitations, in most cases the 216 palette works just as well or better than a 256 adaptive palette does.

Here is an image that was created using colours from the 216 Web palette, and also saved using the same palette, with dithering applied to smooth out the gradients: file size = 2.95kb

And here is the same image created using colours from the 216 Web palette, but saved using only 16 colours from a 256 adaptive palette, also with dithering applied: file size = 1.81kb

You'll notice in the top image that the gradient areas are somewhat blotchy, or pixelated. And the file size is a fair bit more than the adaptive palette version. That's because the intermediate colours that are needed to make the gradient smooth are not found within the 216 Web palette. And even though dithering was applied to it to try to smooth out the gradual colour blends, it was only partially effective, and in fact was the cause of the increase in file size. That would be considered a weakness of the 216 Web palette, and if you're really insistent on using this palette, one worth noting before creating your Web graphics.

What we've just seen here is a good example of how saving our images using an adaptive palette can sometimes be more beneficial than using the Web palette. But it should be used more as a last resort.

Another important thing to note here is that since we used colours from the Web-safe palette to create our image, even though we chose to save the image with an Adaptive palette the rendering of the colours on both platforms and in most browsers should be satisfactory.

Notes on the 216 Web Palette

What you see isn't always what you get. The 216 Web palette has limitations when applied to graphics using gradients. The main reason is that creating gradients in an image, even when just using 'Web safe' colours, will create new intermediate colours not contained in the Web palette. Your graphics program will tend to deceive you here because as far as it's concerned, it doesn't have a problem adding the extra colours to the gradients and making your image look as good as possible while you're in the program. But when you go to save the image, using only colours from the Web safe palette, all of the intermediate colours your program added to make the gradient look nice and smooth will be removed. What you'll then see is a very close representation of what the image will really look like in a visitor's browser. If you want to avoid having to repeatedly hit the Cancel button when you go to save an image, try to remember this fact before you start creating your images.

A Fix for this Web Palette Limitation

Because every Web visitor to a site will have a different system setup, browser specifications, and surfing habits, Web artists should pay close attention to the amount of 'screen real estate' they use up with their graphics. Unless a site is geared specifically toward showing off graphic works, textual content will always be more important than the images that accompany it. But that can be used to a designer's advantage in the long run.

Watch how I conserve space on my Web page by shrinking this 216 Web palette image (the top one) down in dimension, while at the same time solving the problem of the pixelation anomalies in the gradient areas.

To find out exactly what I changed about the image and why, and how I'm fooling your eyes, go to the “Poking the Pixel” section.

Footnote for the 256 Adaptive palette

Being picky and choosy can be a good thing here. If you're creating an image that uses only a few colours, then choosing a 4-bit (16-colour) palette will most often do the trick. And if there are no gradients in the image, don't bother using dithering unless the image contains curved lines. But even then, check how it looks without dithering first before adding it. Dithering can help to smooth out the edges of curved lines in flat two-dimensional graphics, but will increase the file size a bit when doing so. One common anomaly created by dithering is speckling around the edges of your solid-coloured shapes.

That can indicate two things: 1) dithering should not be used. 2) you need to add more colours to the image's palette. This is best done in increments. Increase your palette from 16 colours to 20, 20 to 24, 24 to 28, etc... And stop when the edges look clean enough.

Note: some graphics programs do not provide such control over the final image palette while in the Saving mode. In that case, do the best with the options you do have. If your program is Photoshop Plugin-compatible, a good inexpensive investment would be Ulead's Gif/Jpg SmartSaver.

Here's an example of when and when not to apply dithering, and why you should experiment with it before saving your final image.

On the left is a gradient ball image 30x30 pixels in size. This image was saved using a 4-bit (16-colour) Adaptive palette, and with no dithering applied. Most images that are 40 pixels or less in size and use gradients will usually not require dithering. Instead, use dithering sparingly for larger images, such as the one below.

And this is the same image but 15 pixels larger, so 45x45 pixels (640 bytes). It was also saved with a 4-bit (16-colour) Adaptive palette, and with no dithering applied. Notice how the gradient begins to show banding between the shading from light to dark? That could be fixed by applying dithering to the image, with an increase in file size (708 bytes). Or, you could also increase the number of colours in the image's palette to 32 instead of 16, and that would also smooth the gradient, but with a slightly larger increase in file size (1.65kb).

Saving Larger or More Complex Images as Gifs

If you're creating an image that uses a large amount of different colours, including gradients, don't be afraid to use the Adaptive palette when saving. The method used by this form of compression to determine colours is fairly simple to understand. Basically, when choosing Adaptive as your palette option you're asking your program to save your image using only the best and most important colours that are in the image. The rest will be removed. That does not always mean it will use all the original colours that your image started with, but it will most often make the right choice when it does choose which ones to use.

When you first choose to use the Adaptive palette, use all 256 colours with dithering. After your program has made its choice of which 256 colours to use, (from the thousands or millions that may be in the original), look at the preview of your image, if you have one, and see how close it looks to the original. If you still notice any blotching or colour banding, then that would be a good indication that Jpg compression might be the better way to go.

To find out more about the differences between the Web Safe and Adaptive palettes, and how they behave, see the section Poking the pixel.

Using the Jpg Format

When talking about using the Jpg format for Web graphics, there's not really a whole lot to say. Most often Jpg is the format of choice for photos or graphics containing complex graduations. Basically anything non-illustrative in nature.

A couple of key things to remember about using photos on the Web is that you should try to keep their dimensional size within reason. In other words, if its only purpose is to catch a reader's eye, or show a graphic example of the subject matter within a paragraph of text, shrink it down to the point where it's almost undiscernible, increase it by 5 to 10 pixels and save it. After downsizing a photo, it can tend to get a little blurred due to anti-aliasing. Applying a sharpening filter can usually bring out the detail that anti-aliasing removed. This method can be applicable to most situations.

Another thing about saving photos for the Web is that using a medium compression ratio will usually suffice. Sometimes this is dependant on the size and content of the photo. Your own eyes will be the best judge.

To see a comparison of how Gifs and Jpgs each handle gradients, go to the Poking the pixel section.

• Which format should I use?
  
  
• Making the Best of Both Formats
  
  
• Poking the Pixel