WPDFD Issue #25 - April 01, 2000

Web Graphics Optimisers

The products tested were:- Adobe Photoshop 5.5 (Mac version used) using the Save for Web feature. BoxTop Software's plug-ins for Photoshop (Mac versions used) PhotoGIF and ProJPEG (there isn't a PNG one) Ignite 2.0 (PC only at present) Macromedia Fireworks 3.0 (Mac version used) PaintShop Pro 6.02 (PC only) Ulead SmartSaver Pro 2.0 (PC only)

Conclusion

As you can see, no one program is best for every type of Web graphics file. In fact, the differences between the programs was not huge when it came to file sizes and some would perform better with some images than others. In terms of usability, Photoshop and Fireworks both give multiple previews, so you can directly compare what a file will look like with different formats and compression techniques.

The File Formats

GIF tests Big Deal could be saved in 4-bits (16 colours) with no perceptible loss of quality. It was saved with perceptual or adaptive palettes and no dithering in each program. The three photographic images are more efficiently saved as JPEGs, but I also tried saving them as GIFs with 6-bit (64 colours) with dithering switched full on, again with perceptual or adaptive palettes. The only real reason to save a photograph as a GIF file like this, is if you need transparency or animation.

The Images

Red Dog A studio shot on a plain white background that was originally intended to be a cut-out vignette half tone. The large area of plain white and the soft shadow to the right are challenges for the JPEG format because any compression artefacts will start to show up there first. The restricted palette makes low bit-depth GIF or PNG a possibility and allows the background to be transparent although the file size will be larger than with JPEG.

The Programs

Fireworks 3 (Macromedia) Now, very similar to Photoshop 5.5 with its multiple previews and comprehensive palette controls. Fireworks also adds PNG-32 format to its armoury allowing multi-level transparency for those who can handle it. Fireworks consistently beat Photoshop on file sizes in every format. Fireworks product information Ignite (Fluffy Clouds) Once you've got to grips with Ignite's odd-ball interface, you will find that it's Web graphics optimisation is hard to beat and puts most of the big names to shame.

Palettes

The next couple of pages are about palettes. Colour palettes were very important in the early days of the Web when most people used monitors that could only display 256 colours or less. These systems are now becoming increasingly rare and the dithering problems associated with restricted palettes are gradually disappearing. Popular statistics sites now show that the instance of 8-bit monitors has dropped below 10% of total Web users.

Where do I start?

A very good question. But, as with any set of directions, it helps to know where you are starting out from. The answer to this question will be quite different for someone who has trained in graphic design and someone who hasn't, because their skills and expectations will not be the same. Let's make it easy to start with by assuming no specialist knowledge about anything. You know what a Web page looks like, you've seen hundred or thousands of them.

Web Graphics

Then there are the pictures. You know the old saying that a picture is worth a thousand words? It's true, but in a different way from what you think. The data that makes up a Web page has to travel along telephone lines character by character, and that takes a certain amount of time. A page that just contains text will load relatively quickly, put a small picture of about two or three inches square, can easily require as much loading time as a thousand words.

The Tools

I'm not going to start explaining the finer workings of HTML here, there are lots of other sites and books that do that. You can create a Web page in any text editor, and a lot of people prefer to do it that way. But HTML is like a magic spell, get the spell right and you get magic, get the words wrong and instead of a handsome prince, you get an ugly toad. Nearly right, is not good enough! To make things easier, there are WYSIWYG editors (What You See Is What You Get), except that, where the Web is concerned, what you see is seldom what other people get.

Web Graphics programs

You will need some program for producing Web graphics. Web graphics, as mentioned above, are compressed to reduce their size for transmission over the phone lines. There are three types of Web graphics. The GIF file is used for pictures that have large areas of flat colour, such as headlines, buttons and other interface elements. A GIF image can only have a maximum of 256 different colours in it, but to be certain that the picture looks right in all browsers and computers, you have to stick to a maximum of 216 Web-safe colors.