How to Prepare Images for Your Web Site – Part 2

How to Prepare Images for Your Web Site – Part 2



Copyright 2002 Herman Drost



When surfing the Web, you will have noticed web sites where the images load very slowly whereas other images don't match with the theme of the site or appear blurry. Presenting a professional image for your business means your web site design must be professional also.



Part one of this article discussed when to use images for your web site and what image file formats to use on the Web (www.isitebuild.com/imageoptimization1). In this article (Part 2), we will discuss how to optimize your

web site



Image optimization is the art of making your images suitable for the Web. There is a large difference in preparing your graphics for print compared to the Web. In print you have to have as much data as possible to get a good graphic. The main factors that influence the display of graphics for the Web, are the size of the file and the screen display quality of the graphic.

Factors Affecting Web Graphics



1. File Size

When you design web pages you need to create a balance

between visual appeal and page download time. If your

page has too many images on it, it will take too long too load and visitors will not stay around to wait.



2. Cropping

This means cutting out unwanted areas of your image.

It decreases the file size and helps visitors to focus on your

image.



3. Anti-aliasing

Jagged edges of an image can be prevented by anti-aliasing.

This creates a blended edge around an image.

Because of the extra colors necessary to create the blend, file

sizes of anti-aliased GIFs are a little larger. Use

anti-aliased graphics in almost all cases, except when creating

very small type as graphics.



4. Bit Depth and Screen Resolution

Bit depth refers to the number of colors in an image or the

number of colors a computer system is capable of displaying.

To calculate bit depth, one bit equals 2 colors, then multiply

2 times 2 to arrive at each higher bit depth. Quality and file

size decrease as bit-depth decreases.



New computers support thousands or millions of colors (32-bit),

but many older color systems can only show up to 256 (8-bit)

colors at a time. This reality imposes limits on the size of

files and number of colors that can be included in Web

graphics.



Check how your image appears with a 256-color monitor and a

true-color monitor. Do this on your PC using the

Setting/Control Panel/Display option, then select the Settings

tab/256 color option.



5. Image Resolution

Monitors typically display data at 72 dpi (dots per inch).

Therefore, always save your files on the Web at 72 dpi.

Always resize your image in your graphics software

before you insert it onto your web page. If you resize its

dimensions when it's already on your site, it will look

distorted.



6. Browsers

Someone viewing your site is subject to a completely

different result depending on which browser he is using. Your

images may appear harmonious in Internet Explorer (IE) but may

be broken up in Netscape Navigator (NN). Therefore check your

image for differences with Internet Explorer (IE) and Netscape

Navigator (NN) browsers. Your images should appeal to all

users.



Unfortunately AOL has its own browser, which filters sites

through its own AOL proxy system. This means all graphics are

converted from JPEG and GIF to the ART format.



Most AOL users also use their browsers with the default

"compressed graphics" checked, so what normally looks good in

IE or NN, will look blurry or distorted on AOL. To change this,

AOL users need to go to preferences and check "never compress

graphics".



7. Caching

This is a temporary storage area of your hard drive where

browsers keep files while they display them. You can

create a consistent look and feel to your Web Site, by reusing

another graphic on another page. You will be retrieving it from

the cache. The more graphics that you reuse, the faster your

pages will load.



Testing

To test load times of your pages you need to first

publish them and then clear the cache in your computer before

loading them, and timing them, from the Internet. Put the url

in your browser address box, start timing when you hit Go and

stop when the word 'Done' appears in your status bar.



Images are the main factor that contributes to slow loading of

your web pages. By implementing these techniques for optimizing

your images, visitors will have a far more pleasing experience.



Part 3 of this article will discuss other methods for creating

fast loading images when creating a professional web site.