How to make your pages scream down the line
Tuesday 02 June 1998
Reduce the colour palette
Take a look at any graphic on the Web and more than likely it is going to be a GIF (Graphic Interchange Format). GIFs work by recording up to 256 different colours to be used in re-creating your graphic. This is called the palette. The file then records where each of these colours goes in the graphic. The thing is that each colour in the palette has to be recorded separately. The more colours used, the more memory it takes to record the palette and the longer it takes to download.
The fact is, though, that many graphics can be displayed just as well with much fewer than 256 colours. There is software on the market, such as Debabelizer (http://www. debabelizer.com), which will help you to optimise your graphics while still keeping the visual quality high. But if you don't have the cash to lay out for one of these, there are steps that you can take while indexing your graphic in a program such as PhotoShop to reduce the number of colours yourself. To prepare your GIF for the Web, I recommend the following process:
1. Index your GIF with an adaptive colour pallet at the 8-bit/pixel colour depth. This maximises the quality of the image while reducing the number of colours. If the image looks good at that colour depth, re-index it at the next level down and see how that looks. Keep reducing the colour depth until you notice that it has reduced the quality of the image. The lower the colour depth, the fewer the colours used in the palette.
2. Now switch the graphic back to RGB and re-index it one final time. This time the palette should automatically default to the exact number of colours needed to render the graphic.
3. Unfortunately for Web designers, PhotoShop shifts your colours when indexing, so that if you were using browser-safe colours, as you should (http://www.independent.co.uk/
net/980203ne/story6.html), they will not stay that way. This is easily remedied, though, by changing the browser-safe colour values back using the colour table.
4. Save your graphic as a GIF.
Use flat areas of colours
As I mentioned above, GIFs work by recording the colours in a graphic and then recording where each of those colours is used in the graphic. GIFs record this information in rows and when a single colour is used repetitively in a row, one way a GIF reduces the file size is by recording which colour is used and then how many times it is repeated, rather than repeating the information for each pixel. The upshot is that long rows of a single solid colour take less memory than a mixture of colours, and will download faster.
When a visitor comes to your Web site, all graphics are downloaded to their computer and then stored in the browser's cache. The cache remembers where each graphic came from - its URL - and when that same graphic is used again, the browser pulls it out of the cache rather than waiting to download it. Obviously, if the graphic is coming from your hard drive rather than the Internet it will load significantly faster. Using the same graphic in different locations on the same page or even on other Web pages means that it will download from the cache, regardless of where it is being used.
Stick with HTML text
This one is pretty straightforward. Graphics take longer to download than HTML code. Unless you have a good reason for needing the text in the graphics (drop shadows, backgrounds, special fonts and so forth), always put your text in the HTML.
Without tables, layout on the Web would be pretty boring. Tables give us control over the width, justification and placement of elements on the screen. But to get the results they want, many designers use tables nested in tables nested in tables. The fact is, though, that tables do take time to prepare and display in Web pages. The more tables being used, the longer the download time. You don't have to give up on tables entirely, but try to use one or two tables to create your layout, and avoid nested tables if at all possible.
E-mail your comments or questions to Jason Cranford Teague at indy_webdesign @mindspring. com
TV review Nick Hewer, the man whose eyebrows speak a thousand words, is set to leave The Apprentice
Film The critics but sneer but these unfashionable festive films are our favourites
TV We're so close to knowing what happened to Oliver Hughes, but a last-minute bluff crushes expectations
Arts & Ents blogs
- 1 Nigel Farage: Me vs Russell Brand on Question Time – he's got the chest hair but where are his ideas?
- 2 Harry Potter fans can apply to the Hogwarts-inspired College of Wizardry
- 3 Jessica Chambers: 19-year-old woman 'doused with lighter fluid and burned alive' in the US
- 4 Russell Brand calls Nigel Farage 'poundshop Enoch Powell' in BBC Question Time debate
- 5 Orange Wednesdays are no more
Peter Lik: The self-proclaimed 'fine-art photographer' whose work sells for millions
The best underrated Christmas movies from Love, Actually to While You Were Sleeping
Grace Dent on TV: The Lost Honour of Christopher Jefferies was a beautifully shot, immensely considered drama
The Lost Honour of Christopher Jefferies, review: Jason Watkins is brilliant, but real victim Joanna Yeates is reduced to a footnote
Marilyn Manson denies involvement in shocking Lana Del Rey rape video
Disgruntled RBS worker writes hilarious open letter to Russell Brand after anti-capitalist publicity stunt leaves him hungry
Shock poll shows voters believe Ukip is to the left of the Tories
Nigel Farage's approval rating hits 'record low' as popularity suffers in wake of Ukip sex scandal
Nigel Farage defends Kerry Smith 'ch***y' comment: 'If you are going for a Chinese, what do you say you’re going for?'
Ukip candidate jokes about 'shooting peasants' in racist and homophobic rant
Pakistan school attack live: Taliban kill at least 132 children in 'horrifying' massacre