How to Prepare Images for Your Web Site – Part 1

Written by Herman Drost


You are staring atrepparttar your monitor waiting forrepparttar 134534 image to download. It finally appears but it has blurry edges. You go torepparttar 134535 next page but can't readrepparttar 134536 text because ofrepparttar 134537 dark image inrepparttar 134538 background. The next page has animated images, that don't seem to stop. The spinning globes keep spinning. The last page has a large graphic on it, which is a link. You click on it for more information but it goes nowhere. You leaverepparttar 134539 site in frustration.

Images are an essential ingredient for Web Site design. You want visitors to have an aesthetically pleasing experience. Properly preparing your images is necessary to enhancerepparttar 134540 appearance of your web site. In Part I of this article I will explain:

When to use images for your web site. What image file formats should you use onrepparttar 134541 Web.

When to use images for your web site - Navigation Graphical buttons can link to other pages or resources.

Image Maps – this is a graphic that contains several links on it. It has several "hot spots" or invisible buttons, you can click on. For example you could have a photograph of your family and put a hot spot on each person's face that links to that person's web site.

Logos and Trademarks – your business or organization's trademark are crucial for name recognition and branding.

Thumbnails – this is a small, "thumbnail-sized version of an image. When you click on it, you jump to another page with a larger version ofrepparttar 134542 same image. The visitor can see many different, small images onrepparttar 134543 first page without having to wait for larger files ofrepparttar 134544 larger images to load.

What arerepparttar 134545 different image file formats? Web graphics can be categorized into two file formats: bitmap and vector. Bitmap – these are composed of individual values for each color displayed. The largerrepparttar 134546 dimensions ofrepparttar 134547 image,repparttar 134548 largerrepparttar 134549 associated file size will be forrepparttar 134550 same graphic. When viewed with magnification, a bitmap resembles a series of little squares, each of which has a color value that contributes torepparttar 134551 overall shape. Bitmaps have a very rough appearance when viewed closely but form images when viewed from a distance.

Bitmaps are best suited for photos, drop-shadow effects and soft, glowing or blurry edges.

Vector – these store information aboutrepparttar 134552 image in mathematical instructions that are then interpreted and displayed.

Vector graphics are best suited for line art, shapes and illustrations.

Image File Formats Graphic file formats used onrepparttar 134553 Web are GIF, JPEG and PNG

Graphics Interchange Format (GIF) GIF is a platform-independent file format that is limited to a display of 256 colors. GIF has been adopted by most developers because of its small file size.

GIF is considered a "lossless" format. This means that asrepparttar 134554 image is compressed, no information is lost.

How to Prepare Images for Your Web Site – Part 2

Written by Herman Drost


When surfingrepparttar Web, you will have noticed web sites whererepparttar 134533 images load very slowly whereas other images don't match with repparttar 134534 theme ofrepparttar 134535 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 onrepparttar 134536 Web (www.isitebuild.com/imageoptimization1). In this article (Part

2), we will discuss how to optimize your images forrepparttar 134537 Web.

Image optimization isrepparttar 134538 art of making your images suitable forrepparttar 134539 Web. There is a large difference in preparing your graphics for print compared torepparttar 134540 Web. In print you have to have as much data as possible to get a good graphic. The main factors that influencerepparttar 134541 display of graphics forrepparttar 134542 Web, are repparttar 134543 size ofrepparttar 134544 file andrepparttar 134545 screen display quality ofrepparttar 134546 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 decreasesrepparttar 134547 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 ofrepparttar 134548 extra colors necessary to createrepparttar 134549 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 torepparttar 134550 number of colors in an image orrepparttar 134551 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 onrepparttar 134552 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 usingrepparttar 134553 Setting/Control Panel/Display option, then selectrepparttar 134554 Settings tab/256 color option.

Cont'd on page 2 ==>
 
ImproveHomeLife.com © 2005
Terms of Use