When surfing
Web, you will have noticed web sites where
images load very slowly whereas other images don't match with
theme of
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
Web (www.isitebuild.com/imageoptimization1). In this article (Part
2), we will discuss how to optimize your images for
Web.
Image optimization is
art of making your images suitable for
Web. There is a large difference in preparing your graphics for print compared to
Web. In print you have to have as much data as possible to get a good graphic. The main factors that influence
display of graphics for
Web, are
size of
file and
screen display quality of
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
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
extra colors necessary to create
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
number of colors in an image or
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
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
Setting/Control Panel/Display option, then select
Settings tab/256 color option.