Small Business Internet Guide-SBOguide

Multimedia Web Video Graphic Choices - What's Best for Your Web Site
Graphic Choices - What's Best for Your Web Site
Multimedia

One of the mistakes I see new website builders making is selecting the wrong graphic type or resolution when putting images on their site.

Selecting the right graphic type is fairly straight forward. As a general rule you will want to use the GIF format for graphic elements that depict lettering, items with transparency, simple animation, or line art such as logos and drawings; and choose the JPEG format to display photographs. The PNG format is another option.

PNG was originally developed as an Open Source replacement for the GIF format when the patent owner (UNISYS) decided to try and exercise their right to collect royalties for its use. The patent has since expired, so this no longer seems to be a concern. There are even some situations where the PNG format might offer some advantages, but for the most part GIF does the job and avoids the problem of compatibility, especially with transparency, on older browsers. PNG support was also problematic with Microsoft’s Internet Explorer (IE). Since IE has managed to become the most widely used browser on the planet, it seems prudent to stick with the GIF format and avoid PNG, at least for now.

The other mistake I see related to imaging, is using a graphic with a resolution that is greater than required. Graphics on a web browser display at around 72 to 80 ppi (pixels per inch). So what does this mean to you when you prepare a graphic or photo to be displayed on a web page? It means that a graphic with a resolution greater than required will simply degrade the download time of your page without improving the appearance of the image you have prepared.

One of our goals as a web builder should be to try and achieve a fast download time for our pages. Bloated graphic files, especially when they come as the result of a poor format choice or resolution are unnecessary. In fact, they will serve to drive your site visitors elsewhere. Especially for those using a slow dial-up connection to access the Internet, which currently accounts for about 30% of your visitors in the US.

To illustrate the point, let’s assume we are using a modem with a speed of 56kbs (thousand bits per second) for dial-up. Keep in mind that this is a best case scenario, as actual speeds typically are less than rated due to phone line noise and other inefficiencies. It would require one full second to download a 7000 byte graphic (8 bits equal 1 byte). Imagine a site where you have added three 20,000 byte images, and you’ve increased your download time by a minimum of 8.6 seconds (60,000/7,000).

The lesson here is that it pays to analyze the file size of all the graphic elements that you place on your website. A simple way to check the file size of your graphics is to use the properties inspector in your web browser. Use the compression tools that come with your graphics software to reduce a graphics’ file size to the minimum possible while still maintaining the degree of legibility that you require.

If you use a graphic to illustrate an article - make sure it has a caption that expalins what the graphic is about. This is good for your reader and will help search engines properly catalog the image as well.

Please note that the this is a rapidly evolving topic, so updates to this discussion will appear in future articles. Support for the PNG format is improving.

 

Search SBOguide