Create Superb Graphics for your Website

- By: Sandra Prior, 2008-05-23


You’ve planned your content, you’ve played with HTML and you’ve selected a color scheme. Now add some graphical spice.

As Internet connections get faster and cheaper, people are beginning to lose their prejudices about web sites that use a lot of graphics. Yet, there are those who will always browse with images turned off, but it is increasingly becoming the case that if you want people to look at your site, then it needs to look good.

There are exceptions, where content is so compelling that design doesn’t matter. Just remember, however good a site looks, it is nothing without quality content.

Ready-Made Graphics

When you decide to add graphics to your site, you have 2 basic options. Either create your own images or make use of the numerous collections of royalty-free web graphics. These can come from many sources, the most popular being direct from the web. If you look at the web graphics section at Yahoo you’ll find a varied selection of free images you can use for your site, including e-mail buttons, background images and horizontal rules. Other popular sources include the clip art collections that come with most graphics packages these days.

There are, however, a couple of caveats. First, the quality of these images can most charitably be described as ‘varied’ – some are pretty good, but some are downright awful. Second, you need to bear in mind that every other novice web designer has access to the very same selection of images, and it does tend to show. On the plus side, the graphics are almost always completely free and you don’t need any artistic skills to use them.

Home-Made Graphics

If you want to create a unique web site, you have to create your own graphics – simple as that. There is an ever-increasing array of software to help you do this, ranging from freeware and shareware to full commercial products. Some of the better packages will cater for every need from start to finish. All you need provide is the talent and imagination.

JPEG Images

Before you start, you need to learn about the two image formats used on the web. First there is the JPEG (Joint Photographic Experts Group). This achieves a high level of compression by separating the colors from the details and processing them separately. When they are recombined, you have a color picture. But this is more than you need to know. What is important is that this works very well for graphics with smooth color transitions and few sharp edges – typically photographic images – and looks terrible for line art and blocks of text. The result is that, when used appropriately, a jpeg image will achieve a very small file size alongside a picture with thousands of colors and little noticeable loss in quality.

GIF Images

The alternative is CompuServe’s GIF (Graphics Interchange Format). A huge image has its colors restricted to its own palette, which can contain up to 256 colors. GIF compression works by looking for repeating patterns within an image – hence large areas of a single color will produce a very small file – but GIFs are also ideal for any line or text where it is vital to retain the image’s detail.

GIFs can also be used to tailor an image to a computer that can only display 256 colors. By limiting an image to the standard palette of 256 web-safe colors, you can be almost certain it will appear the same in any browser. In practice, it is preferable to strike a balance between using web-safe colors and achieving the best image quality – then those users with better displays will not be restricted by the lowest common denominator.

The humble GIF has also a few tricks hidden up its sleeve. The first of these is the ability to set one of the colors in the palette to be transparent – which means that whatever this color appears on the image, the background of the web page will show through, allowing you to make the graphics blend in to a much greater extent.

You can also string a load of images together into one file to create an animated GIF. This means you can have animation on your page without requiring any extra plug-ins. Bear in mind that every frame added to an animation adds to the file’s size, and unless used sparingly, animated GIFS can become very tiresome.

X Marks The Spot

The main use of graphics on any site is usually to form a navigation system. One way to achieve this is to make each option a separate image, but often it can be neater to have your buttons as a single graphic. You can then use an image map to link different areas to different pages. In the past, the only way to do this was to create a server-side image map – the co-ordinates of a mouse click would be sent to the server, which would then redirect you to a specific page. But now any reasonably up-to-date browser supports client-side maps – a few lines of code in the page itself define the hotspots, and the link goes direct to the target page, with no fuss.

PNG Images

Soon you’ll be hearing about another image format – the Portable Network Graphic, or PNG. The file specification was designed with the web in mind, and is already supported by the next generation of browsers. The PNG performs much the same function as a GIF, with two main differences: PNG files are noticeably smaller than GIF, and they can use alpha transparency. In other words, the image can have varying degrees of transparency, so it will blend into any background. But don’t throw away your old tools yet – GIFs will be around for some time to come.

Sandra Prior runs her own websites at USA Computers and http://sacomputers.rr.nu.