There is no question as to how important images are on the internet. There is nothing more frustrating than to have to wait for images to load when visiting a website. It might be said that such a problem is a thing of the past with the advent of broadband internet service; however, web masters have abused this privilege of speed to use larger images.

Just because the bandwidth is available does not mean you have to use it. Fast loading sites are still a preference to visitors. There are a few simple things you can do to optimize the load time of a web page. A big part of this is using the right file format.

The JPEG format:

Perhaps the most common internet graphic format found to date is the JPEG format (.jpeg and .jpg files). This format is true color and most commonly used in photos taken by digital cameras. The use and application of this image format falls under any context that requires graphic detail, clarity, and high color count; however, the format does not support image transparency.

It is extremely important to resize images to the exact size you require them prior to using them on a website. Most cameras create files that are easily in excess of 7MB file sizes. Before uploading or posting photos from cameras use a resize tool and cut the file dimensions down to something like 640x480 pixels, or if used in an article or blog post a size that suits the content. Never, I repeat Never resize an image with HTML/CSS height and width attributes.

The PNG format:

Should you require the photo quality and clarity of jpeg images and at the same time require transparency then the PNG format (.png file) is the right choice. These files tend to be a little larger than JPEG files, but the expense is worth the benefits. PNG files can be used in contexts that require background images, or overlay graphics in a website design. A good example is a website that has a drop shadow content container over a graphical background.

It should be noted that the use of PNG files is not supported by Internet Explorer 6.0 (IE6). Often designers encounter this issue. Use of another transparency format can be substituted at a loss of clarity and image quality, or a PNG fix hack can be used to force support from IE6. However, PNG Hacks severely reduce loading time as they are often JavaScript based and can impact the visitors experience. It would be better to modify an IE6 style sheet to produce a more basic version of the website without as many transparency effects.

The GIF format:

Any image that is used with minimal color (256 colors or less) and very basic transparency features should be saved in a GIF format (.gif files). This format is quite small in file size and very fast loading. Simple objects like menu separator graphics, solid or simple pattern background images and other basic graphics should be saved in this format.

The transparency support of GIF files is not high quality and it does not take well to fading transparency. Should a partial transparency be used a filter will be applied to the image known as a dither to help simulate fading transparency. These often look horribly grainy and should be avoided. If you really need a smooth fading transparency then use the PNG format.

Conclusion:

The trick here is to use file formats that suit the graphics you use, and resize the images to the exact size they are required. Following these simple rules will guarantee lower load times and happier visitors.

About the Author

Kennith Nichol is the CEO of Net Relief Solutions, a website design company. With over 10 years of design and development experience Kennith offers affordable, quick, and pain free service packages. To read more or review our service packages please visit our website. http://www.netrelief.ca/packages/

? Copyright - Kennith Nichol. All Rights Reserved Worldwide