Getting Started with FrontPage
An Introduction to Images for Web Publishing
By Frontpage Admin
Jun 26, 2006, 17:45

The old cliché, "A picture is worth a thousand words", is very applicable to web pages. However, before you get carried away with putting images on your page, remember they can take up a lot of space which may cause a page to load slower. If photos and graphics are done properly and file size kept small, they will add spirit to your page, and won't have an adverse affect on load time.

There is much more to preparing an image for web publishing than meets the eye. File size is critical, and quality is essential. Currently there are two main graphics file types used on web pages, GIF and JPG.

GIF - pronounced jiff or giff (hard g) stands for graphics interchange format, a bit-mapped graphics file format. GIF supports color and various resolutions. GIF files use 256 colors or less, can be animated, and generally display edges, lines, and details more clearly than JPG files. Use GIF files for images where edge clarity and overall sharpness are needed, for small size images such as buttons for navigation, black and white images, animations, and transparent images. Note: This last feature alone can create some very interesting visual effects on a web page.

JPeG - Short for Joint Photographic Experts Group, and pronounced jay-peg. JPEG is a lossy (it loses quality as it is compressed) compression technique for color images. Although it can reduce files sizes to about 5% of their original size, some detail is lost in the compression. JPG files should be used for photographs, images that should be natural looking, when a large number of colors is needed or great detail, or for images with large dimensions.

In preparing a graphics file for use on a web site, there are several things to keep in mind. How an image is scanned to begin with will help control the overall size of the file. For a photo that will be used strictly on a web page, scanning at 150dpi is sufficient. The higher resolutions only make a difference when printing. Also cropping anything on the edges that isn't essential to the image will make the image smaller in dimensions and file size. Compression when saving the file will also decrease the file size. You may need to experiment with the amount of compression. Note: Save your original image with no compression, and give subsequent tests a new name. Also, remember that each time you make changes and re-save a JPG, additional compression is applied, eventually resulting in very poor quality.

Next take a look at art work or simple graphics. These can be logos, clip art, or combinations of art and text that can be made into a graphic image. Usually these files are GIF images. When wanting to reduce file size, remember that GIF images are saved in horizontal rows. A GIF image with horizontal stripes is generally smaller than one with vertical stripes. So when possible, have the image run horizontally.

When using Front Page remember that dragging the image smaller with the handles only changes display size, NOT file size. You must click on resample to change the actual file size.

There are several image editing programs available, in a wide range of price. Most will allow you to enhance your image with a variety of special effects and deformations, add text, change colors and add drop shadows. But regardless of which program you use, the most effect web graphics, follow an ABC rule - Appropriate, Brief (in loading) and Clear (in quality).