Development: Sharp & Clean Web Images

It has often been said that a picture is worth a thousand words. On the other hand, a thousand pictures can a be a lot more confusing than a few choice words.

There are three primary formats used for still images on the Internet. Each of these formats incorporates a degree of compression that makes it possible to send complex images in a relatively short period of time as a small file.

Jpeg, with an extension of jpg or jpeg

IF, with an extension of gif

PNG, with an extension of png

GIF (graphical interchange format) is a patented compression that was originally developed by Compuserve. At one time, Compuserve, which is now owned by AOL, was threatening to sue users of their patented compression technology and this, in part, gave rise to the PNG (portable network graphics) format.

Sunglasses

GIF and PNG are great for compressing what is best known as 'business graphics' that contain large flat areas of color, text and a limited color range.

GIF
Since the introduction and widespread acceptance of the personal computer, from Radio Shack, Apple, IBM and all those who have followed, there have been on-going efforts to improve communications between systems. In the 80s, Scott McNealy, President and CEO of Sun Microsystems went so far as to say 'the network is the computer'.

Anyway, early communications were all restricted to plain text. In part because computer imaging and graphics were in their infancy, many 'terminals' were not capable of displaying graphics — in fact the computers weren't capable of storing and manipulating them either — and the performance level of the communications was such that transmitting graphics was simply out of the question. Snail mail would be faster.

Compuserve, one of the first successful companies to implement a large, consumer oriented network / bulletin board service, created the GIF format graphics file in 1987. Designed to squeeze as much graphical information as possible into as small a file as possible it uses a loss-less compression algorithm (LZW — Lempel, Ziff, Welch) and restricts the number of colors (color depth).

The color limitation wasn't a real concern because, at the time, we were just moving from 16 color capable graphics cards toward and unprecedented 256 colors. These colors were stored in a palette of 256 colors and indexed in the graphic by their location in the palette.

GIF is still widely used today because it allows for 'transparent' colors, interleaved transmission and, for most purposes, provides more than adequate color reproduction.

The Innovative PNG
PNG (originally PNG's Not Gif in the same way that GNU's Not Unix) was developed as an alternative to GIF and is slowly replacing the use of GIF in many cases.

In 1995, Unisys, who owned the patent on the LZW compression algorithm, and Compuserve announced that software implementing the GIF image format would be subject to royalties.

The second problem with the GIF format was that its feature set was limited and the need to compress, store and transmit images of ever increasing color depth was becoming an issue.

Hence the arrival of PNG. PNG supports a more efficient compression algorithm than the LZW algorithm, is patent-free, and capable of storing more image formats. PNG also includes some error-checking features missing entirely from the GIF format. a PNG file of the same image will normally be 5% - 10% smaller than a GIF of the same image.

From the point of view of the artist, GIF and PNG can be considered identical.

JPEG
Here is a typical JPEG image:

Desert Lupine

JPEG was developed specifically for the compression and storing of photographic images where detail and shading are extensive.

JPEG uses a much more complex compression algorithm than GIF and PNG and, to obtain an optimal image result, requires a little more understanding on the part of the graphic designer.

JPEG actually uses a 'lossy' algorithm. This means, in essence, that not all of the detail is stored, but areas of detail are stored and then, upon being restored, the detail is constructed out of the zone information stored.

A mathematical transform known as DCT (discrete cosine transform) is used as the compression algorithm. This algorithm is widely used for picture, DVD and MP3 (sound) compression. It is very flexible in that there are many options and compression ratios that can be tweaked by the artist.

What good, then are GIF and PNG?

Strengths: Speed, sharpness, solid color and transparency.

First and foremost, neither GIF nor PNG use a lossy compression algorithm like JPEG. This means that the image will be decompressed exactly as it was compressed. This is particularly useful in the case of documents / fonts where nice clean edges are important to legibility.

Furthermore, the image can be compressed and decompressed and recompressed any number of times without loss of quality of image.

GIF and PNG perform especially well with solid lines and solid colors. This is great for business graphics such as corporate logos and charts. Colors will be bright and clear and font edges will be sharp.

Able to store / define a particular palette color as 'transparent', GIF and PNG images can allow backgrounds to show through making the overlaid image appear a part of the background, rather than sitting uncomfortably on top of the background.

While GIF images are restricted to 256 colors, PNG images are not. PNG also allows for greater transparency flexibility than PNG, called alpha transparency.

All modern browsers and many other applications provide support for PNG and GIF images.

GIF and PNG images can be 'animated', that is, a series of images that are displayed in sequence as defined within the graphic file itself.

Weaknesses
Because the GIF and PNG formats are not good at compressing complex, natural images, photographs compressed into GIF and PNG formats will typically be larger than the same image compressed using JPEG and may still exhibit banding as a consequence of the low number of colors stored in a GIF palette.

Desert Lupine

Here is a copy of the same desert lupine photograph with incorrect GIF settings: no dither, web safe color palette. Clearly the JPEG image presented earlier is the better choice.

JPEG At A Glance

Strengths: File size, range of color.

JPEG is an extremely good format for compressing photographs and natural images into a very small sized file. The quality level of image and compression ratio can be user selected when the image is being saved allowing for a user determined compromise between file size and image quality.

JPEG uses natural colors, rather than a palette, and is therefore far more suitable for images that contain smooth or natural color. gradients, textures, and patterns, such as those found in real life, than are GIF and PNG.

Weaknesses: Compression artifacts, speed and lack of transparency.

BUT, JPEG compression isn't perfect and image quality is lost each time a file is compressed, decompressed and recompressed. This image provides an example of "artifacting" — slight faults in the decompressed image. These were created by using too high a compression ratio, but could just as easily be created by compressing, decompressing and recompressing the image.

Desert Lupine

PNG Perfection
When selected a compression method, or image file format, you should first decide whether the image you want to compress contains lots of shading and many colors, like a photograph, or rather has large blocks of solid color.

If at all possible, it is better to save an image, especially a simple image, as a GIF or PNG file as this will result in higher definition, the compression method is not lossy, and a smaller file, the number of colors is limited. Sometimes, with dithering, a high degree of color accuracy can be provided with just 256 colors for relatively complex images.

Try it and see
Before you save a copy of the compressed image, make sure you have saved an uncompressed copy. That way, if you don't get acceptable results with the compression, you can start again with the original image and try again.

Try different settings. Many 'paint' and image processing programs will now provide you with a preview of the file image after applying the compression and decompression, before saving. This is a really handy way to determine an acceptable trade-off.

Reducing the number of colors
Sometimes, you will be forced to reduce the number of colors in an image in order to limit the palette size to 256, or 16. Adobe Photoshop and Corel PhotoPaint are both excellent programs for trying different compression levels and testing different color palettes to arrive at an acceptable web safe image.

Dithering, or 'error diffusion' can simulate more colors, but generally this will result in a loss of definition (sharpness), by introducing what amounts to noise in the image.

If you find that you have to use dithering or error diffusion to approach the colors you need, you are probably going to get better results by saving the image in JPEG format.

Pilot Pilot
Pilot Pilot

Here are 4 images. The image in the top left is a 0 compression JPEG. Top right is a 20% compression JPEG, bottom left is a GIF without dithering and bottom right is with dithering. Load these into your graphics programs and zoom in so you can see the differences in artifacting.

Top-down design for GIF or PNG images
Try to design clean, sharp edged images with well defined images and few gradients if you are planning to use a GIF or PNG format. If you want to use gradients, limit the total number of colors to two or three so that the palette can be 'filled up' with the grading, not complete different color.

JPEG — Clearly Stunning Photographs
For photographs, especially larger photographs, or drawings or sketches with a lot of color gradients and a lot of colors, nothing comes close to JPEG.

What's the level of detail?
Photoshop and Corel's Photopaint are both excellent programs for optimizing images for the web. They both allow a great deal of flexibility in controlling the overall compression / resolution of an image.

Are you sure you're using the right format?
Generally speaking, photographs with a high level of detail are going to do much better in a JPEG format than a GIF format. For any image, you can always try both JPEG and GIF or PNG. Compress the image, take a look at it. Use the same level of compression (in JPEG a compression level of up to 20% can have an almost imperceptible impact on the image when viewed in normal size) for all file formats. Compare image quality and file size.

Pilot Pilot

This demonstrates correct usage of the JPEG format. The image on the left looks, while not photographic paper quality (remember it is only 72 dots per inch), quite acceptable, even though, from the 3 times zoom on the right, one can clearly see the artifacting present as a result of the 20% compression employed when saving.

Inspecting Your Final Image
Make sure you review your image with a web browser after saving it to make sure the results are what you wanted, and expected.

Zoom up!
You can look for small details that you can correct by using the ZOOM in a decent image editing program. In a GIF or PNG file, look for banding and diffusion noise. JPEG images will look quite degraded at zoom levels higher than 100% as the compression has been optimized for the 100% ratio

Try other formats
There is nothing wrong with trying alternative formats. Programs like Dreamweaver will estimate download times for you, so you may want to try slightly large files if the download time estimated seems reasonable.