Stormy  Weather  Soft Ware

GIFs and JPEGs

Generally speaking, JPEG is superior to GIF for storing full-colour or gray-scale images of "realistic" scenes; that means scanned photographs and similar material. Any continuous variation in colour, as happens in highlighted or shaded areas, will be represented more faithfully and in less space by JPEGs than by GIFs.

"Stormy Weather" by Tim Wright

GIF does significantly better on images with only a few distinct colours, such as line drawings, icons and logos. Not only does a GIF lose less for such images, but it often compresses them more than a JPEG can. For example, large areas of pixels that are all exactly the same colour are compressed very efficiently indeed by GIFs. JPEGs can't squeeze such data as much as GIF does without introducing visible defects. One implication of this is that large single-colour borders are quite cheap in GIFs, while they are best avoided in JPEGs.

As an example, compare our logo, top left, and the photo of "Stormy Weather" by Tim Wright, our favorite marine photographer. They were both prepared using software from Alchemy Mindworks. The results? The logo is a GIF in 16 colours only, compressed 73% to 2251 bytes. The photo is a JPEG in 256 colours, compressed 89% to 4392 bytes.Given their relative sizes, this works out to about 7 pixels per byte for the GIF and more than 8 pixels per byte (and more colours!) for the JPEG.

If you are wondering how we put a gold frame (not in the JPEG) around the photo, try <FONT COLOR="#hexnum">. If you don't see a frame, or it's black, try Netscape Navigator

Transparent and interlaced GIFs

Transparent GIFs are useful because they appear to blend in smoothly with the user's display, even if the user has set a background colour that differs from that the developer expected. They do this by assigning one colour to be transparent, if the web browser supports transparency, that colour will be replaced by the browser's background colour, whatever it may be.

Interlaced GIFs appear first with poor resolution and then improve in resolution until the entire image has arrived, as opposed to arriving linearly from the top row to the bottom row. This is great to get a quick idea of what the entire image will look like while waiting for the rest. This doesn't do much for you if your web browser doesn't support progressive display as the image is downloaded, but non-progressive-display web browsers will still display interlaced GIFs once they have arrived in their entirety.

To create transparent and interlaced GIFs, check out Alchemy Mindworks Graphic Workshop and GIF Conctruction, programs which can manipulate those options and many more aspects of your GIF file (plus just about any conversion, transformation and much more of nearly all graphic formats - definitely our most used graphics software).

A document explaining transparent GIFs is available on a page that contains a wealth of hot tips.

JPEGs do a better job with realistic images such as scanned photographs, but some browsers have problems handling inline JPEGs, so it is prudent to link to them as external images using a regular <A HREF...> instead of <IMG SRC...>. GIFs do a better job with crisp, sharp images, such as those typically used to construct buttons, graphs and the like. All browsers that can display graphics at all can display GIFs inline.