Image Creation Guide

Image Basics ~ Using Photographs ~ Animated Images The Best Image Tools

Images are one of the most important ingredients that make up your page. Though the actual images you use will vary, there are many useful techniques you can apply to them all, making them ideally suited to the World Wide Web. Enhancing Your Page With Images   Colors & Contrast: The most obvious trick to great Web images is to realize that they're an integral part of your overall design. Try to use pleasing colors that match all of your Web page elements well: background, text, images, and extras. GIFs or JPGs: Most browsers display images in both of these image file 'formats'. Both formats use data compression. That means that the file that contains the image when you save it to disk is usually much smaller than the amount of memory the image actually uses when it's displayed. This compression is ideal for the Web since an image can be downloaded from a server as a small compressed file, then decompressed by the browser and displayed on a Web page. JPG images use an adjustable type of compression. This allows you to decide how big the file will be by compressing the image more and more. But there is a serious trade-off if you compress a JPG image too much: loss of image detail. The more you compress a JPG image when you save it, the more detail you'll lose when the image is displayed. GIF images are also compressed, but use a type of compression whereby the image retains all of its original color and detail. Another big benefit of GIFs is the ability to set a particular color as transparent, so that the color is replaced by the Web page background when the image is displayed. The trade-off with GIF's is that you can't (directly) adjust the compression to make the GIF file smaller. Both formats are valuable for Web design, however, all you need to do is take best advantage of the features of each. When To Use JPGs: If you have a large, complex image - like a photograph - the JPG format is usually best. By complex I mean that the image contains many different colors and a lot of detail. JPGs are compressed using a formula based on image illumination, not strictly on the amount of color and detail in the image. You can save a large complex image into a small JPG file by increasing the amount of compression used when the image file is saved. Check the image after saving (you'll have to re-open it) to make sure it retains the amount of detail you want it to. If it doesn't, save it again using less compression. When To Use GIFs: GIF format is by far the most popular format for the Web. This is largely because of the GIF format's ability to display a selected color as transparent, and its ability to meld several GIF images into a single animated image. GIFs are ideal for most of the images you'll use: menu buttons, logos, heading images, animations, and more. The rest of this section deals exclusively with the GIF image format. Controlling GIFs And GIF File Size   Creating Large, Colorful GIF Images That Are Small Files: Because of the way GIF files work, you can have some control over the finished file size simply by designing your image to maximize compression when the file is saved. Your image on the screen is really made up of tiny dots called 'pixels'. Each pixel displays a color, and all of them together make up your image. Instead of simply saving the color value for each pixel to the image file (as bitmap files are saved), in a GIF the pixels are scanned for like-colored pixels that are next to one another. For example, let's say that the value 15 causes a pixel to display the color black, and the first row of 12 pixels in your image are all black. instead of saving each of these values separately as shown below... 15 15 15 15 15 15 15 15 15 15 15 15 ... in GIF format these 12 identical and continuous pixels would simply be saved as...  12 X 15 thus saving a lot of disk space! The group of 12 black pixels represented above is called a run of pixels, meaning they're all side-by-side and the same color. Next Page... Image Basics ~ Using Photographs ~ Animated Images The Best Image Tools Copyright © 1997 by MicroVision Development, Inc.