Who knew there was so much to know about images when being used on a web page? Below are some of the many important things you must know to properly use an image on your website.

• Image types
• Image size
• Image file names

Image Types: Though browsers could show other image formats, the standards you should stick to are .gif and .jpg. GIFs are best for graphics (clipart) that have few colors. JPG is most useful for photographs and images that have complex color shadings.

Use of other file types may be utilized, but have several downfall if you include them in your pages.

- Older browsers may not be able to view them.
- They often have much larger file sizes which slows down the time it takes to load a page considerably.

What size is too large, you may wonder? Well, while our software may allow images up to 300kb in size in many instances, it will resize them to a more acceptable size for web browsing automatically. This includes all plugins such as Business Directory, Coupons, Classifieds, Articles, etc. However your page and blocks editor allows you to have more control over the images. This means it is up to YOU to ensure they are not too large. Any image over 50kb in size is considered too large and should be made smaller by any means necessary.

How does a file format effect image size? Click here for an example.

Image Size: If you're creating your own graphic images, you can control many factors that contribute to image file size. In effect, you can "pre-optimize" your images during design:

GIF images:

• Limit the dimensions of the image (smaller is better!).
• Crop out any unnecessary white space or background color.
• Reduce the bit depth in the image (GIFs can use a maximum of 256 colors, but many images can be displayed well with far less).

• Blur the image slightly: JPG compression likes images with few details, subtle color gradations, and few hard edges.
• Save the image with a resolution limit of just 96 dpi. Any higher is wasted file bulk as a browsers display a maximum of 96 dpi.

Don't upload an image directly from your digital camera! The file will be too large.

Carefully sized images make a website more appealing to visitors. Large, unwieldy graphic files often have the opposite effect. Few visitors are willing to stare at an empty screen for 10-20 seconds while your graphic image loads. They're far more likely to leave your site entirely.

Unless you're a professional graphic designer, you'll often use graphics created by others. In this case, you can load the image into a graphics program to modify it yourself. Be prepared to spend some time manipulating your images to get them just right. Always save a copy of the original first!

Our WYSIWYG editor will let you fit a large image into a small space on your web page with a simple mouse click. That may seem easier than learning a graphics program, but will you like the result?

For instance, you can either grab the image with your mouse and stretch or shrink it to whatever size you want or resize it with the Pictures Properties attribute option. While this may seem like a quick and easy solution to page layout issues, don't do it! You really aren't changing your image file size at all! All you're doing is changing the space on your Web browser allocates for the image. That's bad for two reasons: image quality suffers and load time slows considerably.

Though your Web browser is capable of scaling photos to make them bigger or smaller, it's really not very good at it. A graphics editor like Photoshop or Paint Shop will do a much better job of resizing your graphics.

For example, look at the two images below. Both show a picture of a circle that was originally 600 pixels wide and 600 pixels high. The image on the left was resized to be 150x150 pixels using Paint Shop Pro. The image on the right is still 600x600 pixels, but we've used editor to drag the image to 150x150 pixels.

You can see that the left-hand image has a dramatically better quality than the right-hand image. When you resize an image in a graphics program, you'll change both the image's dimensions and its file size. For example, the original 600x600 image shown above had a file size of 8k. The right-handed image still has this file size. The left-handed image is only 3k, nearly a 3:1 difference.

In this example, both versions of the file size are small, so neither has much impact on our page's load time. But image if the original image was 80k: that 3:1 difference would be dramatic!

Image file names: The file names you choose have important ramifications for operating system compatibility, usability, and Web site promotion. In order to choose good file names, follow the below name standards:

- All file names are capital letter sensitive in UNIX and Macintosh systems. An all lower-case format helps to reduce errors, but can makes file names harder to read. As a compromise, you can use the underscore symbol (_) or a hyphen (-) to separate individual words in a file name:

cat_in_cage.gif

- The file name should clearly describe the image content:

cat_in_cage.gif  rather than img2245.gif

- Never, ever use spaces or special characters (quotes, apostrophes, pound, etc) in image file names! Windows operating systems do allow spaces, but UNIX operating systems (which runs our servers) have problems with them. As a general rule of thumb, stick to alpha-numeric characters for safety.