Making the M-Space Logo

My brother Magnus has his own website, which I wanted to create a link to. Since the other sites I was linking to on that page had logos, I decided to create one to represent his site. He liked it so much that he asked if he could use it.. and so I did it again more carefully. This page shows some of the lessons about image file formats that can be drawn from that exercise.

Choose background: Green | White

MSpace: 128x128 gif (128 colours anti-aliased)

Anti-aliased .gif

The original image was created in the GIMP's .xcf format but for display on the web it had to be converted to either .gif (grapics interchange format), .jpg (photographic experts group) or .png (portable network graphic). Only the first two options are considered here as .png is not yet widely supported.

This version is a .gif file with a 128 colour palette and looks almost as good as the original. It blends perfectly into the green background of Magnus' page - on a white background, you can see a thin green line around the edge, particularly around the word 'space'.

MSpace: 128x128 gif (128 colours, not anti-aliased)

Non Anti-aliased .gif

Unlike the first image, this one has not been anti-aliased to a green background. This makes it look a little bit ragged. Anti-aliasing is the effect of blurring the distinction between two colours by making some of the pixels on the border into an intermediary colour.

In the diagram above, the circle on the left is not anti-aliased - it looks less smooth than the one on the right. Zooming in close shows that the left hand circle is painted only in black and white - the right hand one uses shades of grey as well.

.jpg Image

The other common web image format is .jpg. This compresses the information that makes up the picture so that it can be tranmitted more quickly but some of the quality is lost as a result.

It is a good format for photos (unsurprisingly, since it was dreamt up by the Joint Photographic Experts Group) but when applied to the logo it makes the whole thing look a bit blurry. The leafy background to this webden is a .jpg image because it contains many subtly different shades of green and it works much better there.

Also, .jpg images don't support transparency, so the whole image is saved on a green background. This is very noticeable on the white, but will also be seen on the green on some combinations of monitors, video cards and display colour depths.

Conclusions

At the moment, web designers need to stick with .gif and .jpg images - unless you know that your target audience can view .png files. As a general rule of thumb, .gif images work better for logos and other things that require a relatively small range of colours - and they are essential if you want any kind of transparency (although for the best effect you still have to anti-alias for the chosen background of the page). .jpg images work best where you want to portray lots of colours, the prime example being photographs.

Even more importantly, you need to experiment with different factors within those formats. .jpg files can be compressed and smooth to a variable degree, balancing image quality against reduced size. .gif files can be made smaller if the colour palette is reduced. I did try a 64 colour version as opposed to the 128 colour one on this page, but that looked a lot rougher.

When designing graphics, I tend to work in a high resolution format called .xcf (similar to Photoshop's .psd) which captures all the subtleties of transparency, colour and even working on multiple layers. Once the source artwork is saved, I then try rendering in different ways in the .gif and .jpg formats, noting the trade off between size and quality. When I reach a happy medium, I then commit to my final choice (keeping the .xcf file for future reference).

Web Resources

Anti-aliasing, Transparency & the World Wide Web: Some nice clear diagrams showing what antialiasing does.
Anti-aliasing: Creating Graphics for the Web: Some even clearer diagrams!
Creating Killer Websites: A page from the website that accompanies David Siegel's Creating Killer Websites. There are many other useful tips to be found on this site so it is worth a visit.
Anti-aliasing Links from About.com: About.com is a very rich resource of human moderated information on a wide variety of topics. The link above goes straight into the HTML section, but there are many other areas to explore as well.
A Guide to Optimising Images for the Web: An illustrated article explaining more about the factors between .gif and .jpg files, and explaining how to make the image files as small as possible for maximum download speed.