10 Golden Rules in Website Design - Rule # 8

When it comes to your website, extra attention should be paid to every minute detail to make sure it performs optimally and serves its purpose. Here is the eighth of ten important rules of thumb to make sure your website performs well.

Optimize Web Images

Generally, all the text on your website will load in a very short time even on a dial-up connection. The culprit of slow-loading sites is mainly large images, and you need to strike a delicate balance between using just enough images to make your site attractive and eye-catching, and not to bog down the overall loading time of your site.

If you take a photo with your digital camera and try to upload it to a website, you'll find it's way too big for the site, even if you have a large size monitor. That's because most digital cameras are designed to take pictures you can print out, rather than pictures for posting online. Pictures straight from the camera have a high resolution.

Resolution is usually expressed in "dots per inch" or DPI. This is the number of pixels (colored dots that make up the picture) for every square inch of photo space. For a nice, sharp, printed photo, the recommended DPI is 300.

The resolution of a computer screen is a fixed 72 DPI. If you upload a 300 DPI picture to a website, the computer is going to compensate for only being able to display 72 DPI by making the picture a very high magnification. This can mean, even with broadband, the picture taking an eternity to load.

You need special software to optimize your pictures for the web - to resize them, and get them in the correct resolution and file format. Adobe Photoshop is the most popular, although there are cheaper (and even free alternatives).

Getting the resolution right is only half the battle, though. You also need to decide what file format to save your images in, and what quality.

The three most widely used file formats for the web are:
.JPEG (also sometimes given the extensions .jpg or .jpe)
.GIF (pronounced both "gif" and "Jif").
.PNG

The technical differences between these file types are much too complex to go into here, but suffice to say that a .jpeg or a .png is better for photographic or highly detailed images as they allow you to have more colors. The trade off for that is they have a larger file size and take longer to load.

A .gif file is limited in how many colors you can use, and aren't as highly detailed - but they do allow you to have transparent areas. They tend to be best for graphics with broad areas of color They have much smaller file sizes, and load a lot quicker.

Personally, I tend to use JPEGs for photos and .GIFs for graphics like "buy now" buttons. Not all web browsers support .PNG files (the most recent versions of Internet Explorer and Firefox do, but some older versions don't) so it's best to use them sparingly.