HTML Optimization Tips

---

1. Fewer Colors in Images

If an image is simple and has few colors like a button or plain text, try to convert it to use less colors. Use 16 colors (4 bit) if you can, and 256 (8 bit) for everything else. Avoid 16bit and higher because this will dramatically increase image size. Look at this example for a 100x100 image:

4 bit = 0.5 K

8 bit = 1 K

16 bit = 2 K

32 bit = 4 K

2. Use HEIGHT and WIDTH Tags in IMG Tags

Always use HEIGHT and WIDTH tags in all of the IMG tags. Web browsers try to lay out the entire webpage first and then insert the images whenever they get downloaded. Some web browsers will stop laying out the page if an IMG tag does not have the HEIGHT and WIDTH tags. By including the HEIGHT and WIDTH tags, the html part of your page will show up and be viewable, long before all the images load.

3. Code HTML Files by Hand

If at all possible, if you have the experience, code your HTML files by hand using a text editor. Don't rely entirely on a WYSIWYG editor! Coding by hand will give you greater control over your files and will keep them small and fast, just what visitors want.

 

<< Back to HTML Design

Questions? Comments? Share your thoughts on the Discussion Forums...