Melonbones' Business Builder

How To Optimize Your Graphics

Return to Business Builder
 

\

Optimizing your graphics is perhaps one of the most important things you can do to project professionalism in your web site design.

Have you ever clicked on a link to a new web site and then waited... and waited... and waited for the home page to load? Did you wait, or did you finally give up and leave?

Chances are, had you waited long enough, you would have eventually seen some really great graphics. Regardless of whether you waited or not, there is no excuse for losing the potential visitors because of a slow loading page.

Some web masters do not realize that just using the "handles" to change the size of a picture does not change its file size. I was asked to work on a site once that had scanned an 8"X10" color photo and then shrunk it to 2" wide using the handles. I timed it - the picture took 3 minutes to load because it's file size was 1.6MB. After using Ulead's program PhotoImpact, I got the file size down to 6K - it then loaded in 2 seconds.

Optimizing your graphic only takes a few extra clicks and the right software. I personally prefer PhotoImpact by Ulead, although any good graphics program will allow you to optimize.

First you need to decide which format to save your picture in. If it is mostly text and/or a computer generated image, you should always use the .gif (graphic interchange format). For scanned photos, the best results are usually .jpg (joint photographic group). As a general rule, a picture saved in the .gif format will have a smaller file size than the same picture saved as a .jpg.

Next, change the resolution of your picture. There is usually no reason to use a resolution higher than 72 dpi. You will need to experiment to choose a balance of clarity over file size.

Here is a 120x60 pixel image in .jpg format saved in different resolutions. Can you see the difference?:

Resolution:
 

 File Size

low res

2.3K

med res

3.0K

high res

4.8K

max res

4.8K

Optimize your pictures that are stored on your hard drive here:
Graphics Crunchers

Next, use the "Change Dimensions" feature of your graphics software to change the size to fit your page layout. You should never use a graphic larger than 600 dpi wide or it will not fit on screens set to 640x480 resolution. (There are a LOT of surfers out there with older systems)

Here is our sample graphic in .gif format:


120x60 pixels - 2.8K (2,828 bytes)


Our sample graphic optimized and enlarged.


300x150 pixels - 7.7K (7,746 bytes)


The same graphic as above resized by using the "handles."

120x60 pixels - 7.7K (7,746 bytes)


To see how well you have done in optimizing your graphics, just surf over to your web page and right-click on one of your graphics, then choose "Properties" from the pop-up menu.

Track your ads or lose the race:
Roibot

Return to Business Builder


Choose a melon slice
to navigate Melonbones:

Melonbones Auction

Melonbones Bible Bits

Melonbones Home Page 

Melonbones Playground

Melonbones Free money

Contact Melonbones 

Melonbones Webmaster's Helper

Melonbones Bread and Butter Banners
Melonbones Bread and Butter Banners

Copyright © 2000 Melonbones.com. All rights reserved.