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.