We’re going to divert ourselves here for a moment and discuss images. Netscape Composer does not itself edit images. You will need a separate application for working with images. You can find very good shareware or open source image editors (I like GraphicConverter and GIMP) or you can use commercial image editors such as Adobe Photoshop.
Always work from an original, high quality image. Some image formats are “lossy”. They’re like a video tape that’s been recorded from another tape, that’s been recorded from another tape, etc., for every time you’ve edited the image. If your image editor has a native format, such as Adobe Photoshop does, use that format. Otherwise, the PNG format is a very good format for storing your original files.
Always work from your original, and then save the original down to your web format.
Different image formats are optimized for different kinds of images. The different formats “compress” the image to give it a smaller file size. Smaller file sizes mean faster download times.
I’ll be giving some examples of what image compression formats do to images, using one cartoon-style image and one photographic-quality image. Here are the originals:
The cartoon is 25.3 kilobytes in memory. The photo is 195 kilobytes in memory.
GIF compression is optimized for “cartoony” images, images that have only a few colors and that have sharp gradations of color. A cartoon drawing of a landscape might well have only four colors: blue for the sky, white for the clouds, green for the grass, and maybe black for an outline. GIF uses this to make the image’s file size far smaller than the image itself. There might be two hundred pixels all of the same blue, then fifty pixels all of the same white, then another fifty pixels of the same blue, and so on. The GIF-compressed version of the image will not list all three hundred pixels. It will simply say “200 blue, 50 white, 50 blue”. What takes up about three hundred “slots” on the screen will take up about six in the file.
You can see that lots of gradations would break down this method. Because of this, GIF doesn’t even work with images that have more than 256 colors. If the image has more than 256 colors, saving it as GIF will merge as many colors as it needs to, to bring the number of colors down to 256.
GIF can do our cartoon in 16 colors, and bring the file size down to 2.4 kilobytes. Our photo has to be brought down to 256 colors and has a file size of 31.6 kilobytes. It looks somewhat okay, but has a distinct graininess.
GIF files can also be made transparent. You choose one color and tell your image editor to set that one color as the transparency color. When a web browser displays that image, it will not display that color. Wherever that color appears in your image, whatever color is behind it will show through. For example, if your background color is white, and you set “blue” to be the transparency color in the above cartoon, you’ll end up with a white sky. If your background on your page is a photo of your friends, then your friends will show where the sky is.
Only one color can be made transparent, and everywhere that color appears will be transparent, no matter where it is in the image. This means that you will usually want to choose a color that does not appear anywhere else in the image, and “fill” your desired transparent area with that odd color. It also means that if your GIF has subtle variations, you will end up with a “glow” around the borders where your transparency ends. In the above cartoon, for example, if instead of sharp border between the blue sky and the white cloud there was a gradation of color from blue, to light blue, to lighter blue, to white, only the blue would be transparent. The light blue and the lighter blue would not be transparent, resulting in a light blue glow around our cloud.
I’m not going to say much about it here, because it’s a topic in itself, but you can make very simple movies with GIF images. If you remember seeing flipbooks as a kid, where you flipped the pages really fast to see a cartoon image start moving on the bottom of the page, that’s what a GIF movie is. You draw a series of simple images and tell your image editor to put all of the images together in the same GIF file. When a web browser displays that file, it will display your images in sequence, in the speed your image editor set. The images can also be set to repeat.
JPEG compression is optimized for photographic-quality images. If you try to use JPEG on a cartoony image, the image will look horrible and it will be larger than a corresponding GIF image. But JPEG’ed photographs will look far better as a JPEG than as a GIF. Photographic quality images have many colors.
Where a blue sky in a cartoon drawing may only have one or two different blues, a real blue sky has millions of blues. A real cloud has millions of shades of white and gray. GIF’s compression format quickly falls apart with this many colors. When there is only one pixel of white, another pixel of off-white, and another pixel of off-off-white, GIF will end up using more space to store the image than the image takes up in memory!
JPEG uses that quality of nature to compress the image differently. It looks at a small square of the image and examines some colors inside that square. If the colors are all close enough to each other, JPEG stores that block with a single color. If the colors are not close enough to each other, JPEG makes smaller square until they are. If you try to JPEG-compress a cartoony image, you can often see these squares, because cartoony images are not (by our current definition) made of slight gradations of color. But photographs are, and JPEG’s compression method works great for them.
If we try to save our cartoon as a JPEG image at 2.4 kilobytes, the image quality suffers considerably. To get the same quality as our original, we need to save at a high quality and 27.6 kilobytes--larger than the original, uncompressed image!
Our photo, however, has none of the graininess that it did when we saved it as a GIF, and it only takes up 9.8 kilobytes. It looks better, and it takes up a third of the file size that it did as a GIF.
One nice advantage of JPEG’s compression scheme is that it allows you to trade off quality for file size, or trade off file size for quality. You can affect what JPEG thinks of as “close enough”. Give it more leeway and it will create smaller files. Give it too much leeway and your images will be severely degraded. Any good image editor will let you view the image as you trade off (usually with a slider) between file size and image quality.
Once you have reduced the quality of your image, you cannot get it back! When working with JPEG images, you must keep an original high quality version of your image!
PNG is mostly a higher-quality replacement for GIF. Like GIF, it is a non-lossy format. But it can be “non-lossy” in higher resolutions than GIF can. It can save both photo-quality and cartoony images. It does not have the ability to trade quality for file size, however, at least as normally implemented.
Our cartoon is only 975 bytes (that’s less than a kilobyte) as a PNG file, with no loss of quality. Our photo is 82.3 kilobytes. While there is no loss of quality (which you probably won’t even be able to see on paper), the file size is still significantly larger than the corresponding JPEG file. If you’re willing to put up with a slight loss of quality, the JPEG compression format is currently unparalleled for compressing photographic-quality images for the web. Because PNG is non-lossy, however, it is a very useful format for storing your original images.
PNG images can also be transparent. You will need to follow the instructions in your image editor, but PNG files have an alpha channel. Instead of specifying which color is transparent, you add transparency to the part of the image that needs to be transparent. This means that the same color can be transparent in some areas and not transparent in others. Transparency in a PNG image can also be less than 100%. This means that you can make the transparency fade in or out from the area that you need to be transparent. This solves the “halo” effect that some transparent GIF images have.
Transparency is not completely supported among web browsers, however, so if you do choose to use transparency in your PNG image, take care that the image remains acceptable if the transparency is ignored.
You should keep the file size of your images as small as is reasonable. The smaller your image file sizes, the faster your page will load. When you are working from your hard drive, even extremely large images will appear to load quickly, because your hard drive is very fast. If you are testing your pages on a high-speed Internet line, that is close to the server, large images may also appear to load quickly. But for people on slower connections or far away from the server, large images will drastically increase the time it takes a page to load.
You want to keep your entire page well under a hundred kilobytes, unless you’ve got a very specific purpose where people coming to the site expect longer download times. Keeping your entire page under forty kilobytes is even nicer.
The trick to keeping your images small is to use the correct image format, use the smallest number of colors you need, and to keep the image itself as small as you can on your page.
An image that is 200 pixels wide by 200 pixels tall has a total of 40,000 pixels. If the image uses eight bits for color, that brings it to 320,000 bits. Compression will bring that down drastically, But if you do nothing but reduce the image to 180 by 180 pixels, that will reduce the image “file size” by over a hundred thousand to 204,800 (these numbers are drastic oversimplifications).
Dropping the width and height of an image by half will reduce the file size of an image to a quarter of its previous size. If you can drop the number of colors by half, that will also half the previous size. A graphics program such as GraphicConverter or Adobe Photoshop can assist you making these choices of image size and quality vs. file size.
You can get images for the web by scanning in photographs that you have, by drawing them yourself, or by getting them from free image sites on the web. You can do a search for “free clip-art” or “free images” on http://www.google.com/ to find free image sites. If you find a free image on the web that you wish to use, move the mouse over the image. Control-click the image (on Windows, use the right mouse button) until a menu pops up. Choose “Save image as...” and save it in the same directory as your web page. Or, if you expect a lot of images, you might save it in a folder within the same folder as your web page to keep them separate.
Now that you know about images, it is time to insert some images into your web page. You should have your PNG, GIF, or JPEG file sized correctly and ready to go. Place the image in the same folder as the web page you want to place it on. If you have lots of images, you may want to make an “images” folder in that folder, and place all of your images in that folder. But one way or another the image must be “inside” the same folder that the web page file is inside.
Go back to Netscape Composer and put the cursor where you want the image to be. Try putting it to the left of your main headline. Pull down the “Insert” menu and choose “Image...”. Click on “Choose File...” and choose the correct image.
The “Image Preview” will now show a thumbnail of your image. You now need to type some “alternate text” for your image. The alternate text is displayed if, for whatever reason, the image is not loaded. It might not be loaded because the user is on a slow connection, or it might not be loaded because the browser they are using does not display images (it is difficult to display an image in a voice-based browser, for example).
If it makes no sense to include alternate text, you can click on “Don’t use alternate text”.
If the image contains formatting you don’t want (for example, if it has a dashed underline beneath it), you can pull down the “Format” menu and choose “Remove All Text Styles”.
You can change the vertical alignment of the image by double-clicking it and going to the “Appearance” tab. Here you can change the alignment from “bottom” to “top” or “center”. (Skip the other two options for now.)
The options for “At the top”, “At the bottom”, and “In the center” all treat the image as if it were a standard character. Generally it will be a very large single character, but it’s still just a character in the line of text. If the text wraps to another line, it must clear the bottom of the image. For example, if we decide to put the image to the left of our paragraph instead of to the left of our headline, we will see a lot of white space in our paragraph that we probably do not want.
Sometimes this behavior is what you want. But sometimes it is not. For those times, we have the option of aligning the image to the left or to the right.
Alignment means something different with images than it does for paragraph-level tags. For paragraph level tags, aligning to the left or right simply sets where the text “falls”. Aligning an image to the left or right, however, completely detaches it from the text and allows the text to wrap around the image.
Double-click on your image and change the alignment to “Wrap to the right”. The text will now use the right edge of the image as its left margin, until it reaches the end of the image where it will once more wrap to the left side of the browser window.
Netscape Composer allows you to change the size of your image right in the image attributes window, on the “Dimensions” tab. Normally, you don’t want to do this. If you change the size of the image so that it’s larger than it “really” is, the quality of the image will suffer considerably. If you change the size of the image so that it’s smaller than it really is, you are foregoing considerable savings in file size. As long as the image only appears once on your web page, you should use your image editor to change the dimensions of any image you use.
If the same image appears twice, and you want it to appear with different dimensions each time, then it makes sense to use the larger version and re-dimension it to display the smaller version(s) also. Since it is the same image with the same URL, web browsers will only download it once.
When you resize the image in Composer, you almost always want to keep the “Constrained” button checked. This keeps you from accidentally resizing the image more in one direction than the other. It keeps the image proportional. Without this, your images will likely end up too tall (making everyone look thin) or too wide (making everyone look wide).
When you insert an image into a web page, you are not really inserting the image. You are inserting a link to the image. This means that when you upload your web page, or if you copy the web page onto a disk to give to someone else, the image will not come along with it unless you upload it or copy it yourself. This is different from most word processors, where inserting an image inserts the image into the actual file. The easiest way to give someone a complete copy of your web site is to copy the folder that contains your local copy, and make sure that all of your images and files are in that folder.