Text doesn't seem to handle everything, does it? Have no fear, images are here!

1. When To Use
2. A Few Tips
3. Imagemaps
4. Animation
5. Anti-Aliasing
6. Optimization

• Layered Effects - One of the limitations of HTML is the fact that there are only two layers you can use, the background (usually a color or image) and the foreground (all the other elements).
        However, images have no such limitation (especially if you're using Adboe Photoshop). I used this in both the Quantum Physics home page and the Lepton page for the main titles. This is very effective for text effects.
• Subtle Effects - There are just some subtle effects that you can't even do with Cascading Stylesheets. If there is no other option, then an image is the way to go. But use your discretion; subtle effects often need subtle colors, avalible in JPEG format; and JPEGs usually produce large files; only do it if you a) have memory to spare or b) when it's absolutely necessary.
• In-Line Quotations - Don't you just love how newspapers put important quotes into larger text and put them into the normal text? This effect is hard to do in HTML (tables are the only choice), so it's time to use an image. If you keep the image size small, and don't use it liberally, then this can be an effective emphasis technique.
• Drop Caps - A drop cap is the first large letter that drops below the sentence. This is essentially the same thing as the In-Line Quotation, except put in the beginning.
• Placement - Do you just have something you need to place right next to something else, and you just can't seem to do it with normal HTML? Then you could use an image. However, with Cascading Stylesheets and JavaScript, you can do it without an image, thus reducing memeory.
• Animation - Although animation is not a good idea, if you do require it, then an image is a way to do it. However, with Java(Script), you can create better dynamic effects without the large file sizes.
• Graphics - And of course, if you need to display a graphic, such as a photograph, chart, logo, icon, you need to use an image. Text just won't do it.

            An imagemap is a single image with different links in different locations (see Chapter 8 of HTML Is Your Friend). Generally speaking, imagemaps have the "wow" factor. Imagemaps also allow for extremely complex images with complex links. For example, you could have an image of a desk, where papers on the desk led to one page, and pens to another page. This effect would be impossible except for imagemaps.
      However, imagemaps have their downsides, typically being their large size. Images for imagemaps tend to be larger than 200x200 (can you have an image of 20x20 pixels with 15 different links?). And typically, these images tend to be JPEGs (so you can have a more impressive imagemap). Is the large size really worth it? Your reader will be annoyed that they have to wait for such a long time to see the links (another reason for text-links).
      A common application for the imagemap is the navigation bar. You don't really need an imagemap for the navigation bar, as demonstrated in the Quantum Physics page.
      Finally, imagemaps require more work. For pseudo-imagemaps (basically a jig-saw puzzle), you have to make the image, cut it up, and meticulously position each piece. For server-side imagemaps, you have to contact the webmaster for the Common Gateway Interface (CGI) program; and you'll have to learn a bit about another language. Client-side imagemaps, possibly the best of all three, takes up memory on the reader's computer and may not be compatable with older browsers.
      But if the benefits outweigh the weaknesses, by all means use imagemaps.
Animation

      A similar dillema arises with animated GIFs. An animated GIF is simple a GIF that plays like a movie; there are multiple frames, and each frame is displayed in succession.
      First, the technical woes for the reader: animated GIFs are large. Most GIFs are 20KB, 19 KB too large. Not only does it take longer to download a site with an animated GIF, the GIF will sap memory. It takes a bit of memory to run the dumb thing over and over. If the reader likes to multitask, he/she won't appreciate the drop in speed.
      I'll be blunt: Animation is very ANNOYING. Although the actual concept of animation is all good and fine, many people out there abuse motion. Most of the animated GIFs on the web are small little things that loop ad nauseam and add nothing to the overall effectiveness of the site. Animated GIFs are also quite distracting; out of basic predatory instinct, we're more attracted to moving objects, as those might be trying to eat us. Can you concentrate while Sisyphus is rolling his stone eternally? Although this is clever, it's pretty distracting. There are even worse animations out there. I've tried to go easy on you, after that unfortunate background incident.
      What's worse than an animated GIF? A whole lot of them lined up together! If you must put in an animated GIF, do it with class.
      And if you must use an animated GIF, have the courtesy not to set the thing to loop INFINITELY! Eventually, the reader will get annoyed, no matter how cute the animation is. Set the image to loop 5 to 10 times; that will give the reader enough time to see the effect, and won't drive them to bomb your email.
      There are a few tricks to make your animation more realistic (so it won't bug me as much). If you look at real film, you'll notice that each frame is slightly blurred. Do this to each frame of your GIF (using a Photoshop filter), and it'll looks smoother. Another trick is asynchrony; nothing looks more contrived than a GIF that is predictable. Prolong your reader's attention (a stifle that kill-the-programmer instinct) by making parts of it seemingly random. If you are going to waste memory on an animation, at least make it good.
      (By the way, if you even think of saving the Sisyphus GIF, I will come to your house with a sledgehammer and destroy your computer. And don't think that I won't do it.)
Anti-Aliasing

      Anti-aliasing is a simple process used to make images look better. Essentially, anti-aliasing smooths out jagged lines by introducing intermediate colors. Whenever you have curves or angles other than 45°, 90°, 180°, you should anti-alias. Although this adds a bit of bullk to the file size, it is worth it. The only time you would not use anti-aliasing is for text; to avoid fuzzy looking text, don't anti-alias. However, that is up to you.
Optimization

      Now that you've got your award winning image, you've got to put it on your page. You do so, only to find that it takes 15 minutes for you to download the thing. Later you go to see that it's 500KB large! That's just unacceptable.
      And that is why you need to optimize your images. Try in every possible way to reduce the file size of the image without compromising too much quality.
      There are several ways to optimize your image. First, decide which image format you want to save, GIF or JPEG. GIFs are restricted to 216 colors, while JPEGs have millions of colors. GIFs tend to be smaller. The only types of graphics that require to be saved as JPEGs are photo-quality images. Most other images can be rendered quite well in 216 colors. Of course, it's all a matter of discretion; try out both formats, and decide on the one that looks best, for the file size.
      Moving on, when you save JPEGs, you will find that there is a quality option. If you are using Photoshop, there is a slider bar from 1 to 10, 10 being highest. I've found that there is not much difference between 5 and 10 in quality, while in file size there is a jump. The levels 3 to 5 are all you really need in terms of quality. The Creating Killer Sites website has a good comparison guide.
      Anti-aliasing will also increase the memory. Many times, this technique is need to smoother edges. Some images don't require anti-aliasing, such as text, squares, any shape that doesn't have complex curves or angles; but almost everything needs anti-aliasing.
      When dealing with GIFs, there is a process called dithering. This is the process of simulating colors by placing colors together. For example, a blue bunch of pixels next to yellow ones simulate green. Although dithering makes transisitions between colors smoother, dithering adds to the file size.

      When you are creating images, start off with a lower quality value. That way, you won't be surprised when you go to optimize, and you are able to adapt the image to the quality during the creating process; that saves time and is less frustrating than going to a high quality image and trying to modify it.

      Images can be a versatile tool. But versatility is not meant to be abused. Now that you've learned to restrain yourself, go on to learn about tables vs. frames as the best choice for webpage layout.
Top