Web site graphics. Design tips!

Adding graphics to web pages? Our design tips can help you decide when and how to use web graphics, and also how to optimise your graphics files for use on your web pages.

Optimisation of web site images only concerns one thing, download speed. To achieve the fastest possible download speed, you need to reduce the size of the site image files. You now have a few choices to achieve this:

• You can either make the image physically smaller
• You can reduce the number of colours in the image
• you can compress it running the risk of loss of quality.

Showcasing.

If your site is showcasing your graphics, reducing the number of colours is defeating the point. In this case, make a thumbnail of the image with reduced colour depth, and link it to a page containing the image at full size, and with the full colour compliment. This way you can tell your visitors the file size, giving them the option to view it if they wish. People will appreciate this.

Background images

Background images are a great way to customise your site, and produce a consistent look to your viewers. Using a graphic in this way means that the surfer only has to download it once, as it remains in the cache, and is instantly available to other pages. Try to keep these to as small a number of colours as possible to aid download speed. If you use a large graphic in this way, be sure to set a background colour for the page, so that text can show while you are waiting for the background to appear.

Tiles

If you use tiles, fade them out so that they don't clash with the text. The bigger the tile the better, as the repetition will be less obvious. The tiles on our Free tiles pages, come in large and small sizes, and are at full colour. This so you can manipulate and fade them yourself to suit the feel of your page. Small patterned tiles, can be used to good effect as backgrounds for tables, especially if they contain transparent areas that allow the background colours/images to show.

Colour reduction

Here's a simple tip. Use gifs for logos and text graphics, use jpgs for photo's and any other images that contains graduations in light, tone or colour.

Gifs are normally set to a 256 colour palette, but are easily reduced. Using the above 'rule' there are few gif graphics with a 256 colour palette, that cannot be reduced to 16 colours. This can make a dramatic difference to file size.

This is Important!

When you have finished your multi-layer graphical masterpiece, save it in it's original file format. THEN save it in the file format you wish to use on the web. This means that if you want to add text to it later you won't be reoptimising the already optimised image, thereby distorting it further. Yes this may be obvious, but it's a good habit to get into. Hmm. Unfortunately, I speak from experience on this one.    :@(