Fast Loading Graphics For Your Web Site!
A study has found that 1/3 of visitors will leave a Web site that doesn’t load within 7 seconds.
Everyone wants their Web page to look fantastic with fancy flashing graphics that are sure to attract and 
captivate viewers. However this can also have the opposite effect. Internet users are becoming impatient and haven’t got seconds to spare on waiting for your page to load. By the time your dream page loads today’s internet user will already be browsing to the next page.
1. Use the correct file format
2. Specify the size of your picture
3. Reduce the size of the file
4. Don’t make the graphic too large
5. Split your content
1. Use the correct file format
There are three types of image files that are supported by most web browsers. jpeg, gif, and png. jpeg and gif are most commonly used as png does not work in older browsers.
Gif format is best used for text, line drawings, screen shots, cartoons, and animations. Gif is limited to a total number of 256 colors or less.
Jpeg format is used for color photographs, or any pictures with many blends or gradients. It is not good with sharp edges and tends to blur them a bit.
2. Specify the size of your picture
Always specify the height and width of your graphic in your HTML. The browser cannot load text on screen until it has figured out the exact size of the graphics. However if you have set the size, the text will be layed out quickly, while the graphics are still loading. Here is an example below:
(The writing in bold above is specifying the size of this gif image.)
3. Reduce the size of the file
First thing to remember when editing your graphic is to keep your original file intact. This is just in case you totally ruin your graphic and have to start again.
GIF and PNG files can often be reduced in size by selecting less than the standard 256 colors (referred to in some software as 8-bit). If your graphic does not use that many different colors, change to a lower number.
When you convert a file into a JPEG, most good graphic programs allow you to select the quality of your image. By selecting a lower quality, this in turn reduces the file size. A picture that was 10k could be reduced to 5k and still look ok.
f you are looking for programs to help with resizing or converting a graphic you should try LView Pro , Paint Shop Pro or Pain.net The best and most expensive program available is probably Adobe Photo Shop
4. Don’t make the graphic too large
Also consider the different screen resolutions people use. Older computers still use 800 x 600 and even 640 x 480. The size of your image will look different on all resolutions.
5. Split your content
Instead of having all of your information crammed into a few pages, it is better to create more smaller pages that load quicker. Therefore your graphics will be spread over more pages.
Leave a Reply