Graphic File Formats

by Joe Gillespie — Dec 1, 1998

We have been through quite a few generations of Web browsers in the past five years or so and have seen many promising new technologies come and go. No matter how good they are, or how useful, technologies based on plug-ins seldom last long. Apart from a handful, most of them fall by the wayside because of lack of adoption.

For a while, the PNG format (pronounced Ping) seemed to hold a lot of promise, but because the main browsers didn't support that format natively, and the compression never managed to better that offered by GIF and JPEG formats, its future is now in question. It is used as the native format for MacroMedia's FireWorks, just as Photoshop uses its own .PSD format, but needs to be converted to GIF or JPEG before being introduced into a Web page. Even though some of the newer browsers can handle PNG format, many can't. What is the point of using a format that a large proportion of people will not be able to view when you can use ones that they can?

The GIF and JPEG formats have, in fact, gone from strength to strength with programmers using various tricks to squeeze files increasingly smaller and to improve on the perceived image quality.

The next major step in Web graphics is likely to be a scalable vector format (SVG). Vector graphics tend to be a lot smaller than their bitmap counterparts because, instead of having to describe a picture on a pixel by pixel basis, they just provide the computer with a set of instructions to draw the image using co-ordinates. Also, vector images are scalable, there is no quality loss if you zoom in on them on the screen. See the World Wide Web Consortium's (W3C) SVG Requirements page.

This is fine for relatively simple shapes. Buttons, type, even cartoons are all highly suitable for vector drawing, but not photographic images where there is lots of subtle shading and complex shapes. Examples of vector formats in other areas are .WMF (Windows Meta File), .EPS as produced by Adobe Illustrator, MacroMedia FreeHand and many other PostScript-based applications and .CDR, the CorelDRAW native format.

MacroMedia's Flash has cornered the market for Web animation using a vector-based format. A number of other vector formats for still Web images are under development by companies like Adobe and Xara, but they need to reach a certain 'critical mass' or they will go the same way as all the other 'nearly-made-its!' Even bundling the plug-ins or integrating the code into new browsers, still leaves the vast number of legacy browser users high and dry.

But, in the end, getting Microsoft and Netscape to agree on a common vector graphic format would be like trying to mix oil with water.

Making Smaller GIFs by Ben Summers

It's a point which is made time and time again, but a slow web site effectively turns users away and the thing which slows pages down the most ? The graphics!

This point hasn't escaped the notice of software companies, and a whole mini-industry has sprung up selling packages and add-ons to help the web designer produce small, yet high quality graphic files. All the major players have such an offering, as well as many smaller companies. The problem is not, as it was a year ago, that the tools are not available, but that you've got to know how to use them effectively.

Most will give you good results with the minimum of work, but you should be prepared to spend a bit of time and effort fine-tuning the settings to produce really small files. Don't expect to simply export your image once from the program you used to draw the image - most won't give you enough control, and some, like PhotoShop, tend to shift colors away from those you've used when reducing them to indexed color.

The first step is always to choose the right format, and this month, we'll look at GIF files. The other format you could use is JPEG, which has very different properties to GIF, but more about that next time.

If the image has large areas of solid color, or many sharp edges, then using a GIF file is essential to ensure good quality - the lossy compression in JPEG can introduce spots and blemishes on your clean colors and smudge edges. These are called compression artifacts.

For photographic images, GIF isn't so useful, but those which are predominantly shades of just one color are good candidates for GIF since the limited range of colors in the image can be adequately described within the limited range of colours. Make sure you use a full adaptive palette, and not a 'web safe' palette to get the full range of color to take advantage of 24 bits per pixel (bpp) screens.

chart

GIF files can be saved in all bit depths from 1 to 8 bits per pixel. This is a measure of how much 'space' a single pixel takes in your file, and the total number of different colors you can use in it. Make sure your web graphics tool can save GIF files in all of these settings as you will need this fine control to get those really lean files. Older programs only have a limited range, and nearer the high end of the scale one bit difference can significantly increase the size of the file.

After you've chosen a suitable depth, a useful trick is to NOT use all the colors available - 7 bpp may offer 128 colors, but try only using 96. This may give higher compression since the individual colors are used more, yet have little effect on quality.

Always use an Adaptive Palette for your images to ensure that you don't ever include colors in the image which aren't used. This simply wastes space and can increase the bit depth

Web safe colors are still important at the moment, even with hardware tending away from low-end 256 colour displays. A simple adaptive palette will create problems with non-web safe colors appearing, but your web graphics software should be able to produce palettes which 'pull' colors towards web safe colours. You can control how near to web safe a color must be for it to be pulled, which allows you to adjust the trade-off between quality on a 24 bpp colour depth screen and predictability on a 256 colour screen.

However, always try to use a web safe color on large blocks of color to minimise potential dithering problems. If the web safe palette, with only 216 colors, is too restrictive for your design you could use a checkerboard pattern of two very similar web safe colors. This gives the visual effect of a color in-between the two you've used and will be almost indistinguishable from a solid color.

orange palette

Here, patterns of web-safe red, oranges and yellow give a useful range of intermediate hues with no noticable dithering.

Unless you're using a very low bit depth, the size of the file will be little more than if you'd used a solid color. Some web graphics software will even produce and use these patterns automatically for you, and provide swatches of these 'extra web safe' colours for use in applications like PhotoShop to help when you're drawing the image.

The main principle is to use the least number of colors possible for your image, but another option worth experimenting with, if it's available, is the amount of dithering applied to the image. Less dithering means more repeated patterns or solid colours in your image, which compress well.

Producing small GIF image files is a bit of a black art. The 'best' settings all depend on the image you're compressing. So be prepared, at least at first, to play around with settings to see the entire range of results.

Ben Summers is a UK developer specialising in providing dynamic web solutions for interactive online applications and developing web graphics software. Ben's company Fluffy Clouds has just launched a new web graphics optimisation program called Ignite, currently in public beta and available for download from the Ignite Web Site.

Del.icio.us Digg Technorati Blinklist Furl reddit Design Float