Exit tutorial
 Web Design - Good and Bad Practice |
| Part Eight |
| Images Don't present high quality images such as art or photographs against a background that is textured, overly dark, or garishly coloured Stick to white, a light shade of gray or, if you must use a coloured background, try one of the earth tones. Visit your local museums and see how they present art. Don't use an image compression technique that isn't supported by all browsers. At the present time, GIF and JPEG formats are universally recognized. A JPEG image may compress to a smaller file than a GIF, taking less time to download, but it may take longer to decompress and display, thus making your effort for naught. This is especially true on older, slower machines. JPEG compression also imposes a loss of image quality, which may (depending on the settings in your image-conversion program, and your visitor's hardware) be quite noticeable. But JPEG compression will probably give the best results with photographs or other images with lots of colours or fine detail. With drawings or line art work, the GIF can actually end up smaller than the JPEG. With line art, a GIF may appear sharper than a JPEG since there is no loss of quality in GIF format.. However, GIF images can only show a limited range of colours, and may not be suitable for images such as colour photographs. The best answer is to try both compression techniques for each of your images and see which gives the smallest file size, the best image quality, and the best performance in downloading and viewing. And don't forget to design your pages so that they still are usable if a visitor has the image loading turned off. Use the "Alt" attribute to provide text alternatives for your images. Animated Images Please, please, please don't put animated images on your page. They're the closest thing the web has to computer viruses. They make the page load slower -- they use big files, slowing down the loading and viewing of the rest of the page. Your page might just sit there for a considerable time, totally blank, while the first animated image loads. Because they have much larger file sizes than regular images, animated images hog a lot more of the Internet's precious bandwidth. Yet another factor in slowing down the web. Animated images cause the page to load improperly -- the little red light on the browser doesn't go out, so there's no way to tell if the page has finished loading. If the visitor clicks the 'Stop' button, it may turn out that the page hasn't fully loaded, so it has to be loaded again. They can also keep you from being able to scroll the page while it's loading. They're distracting and annoying, making it harder for the visitor to concentrate on the other things on your page. (Try reading something over here while an animated mailbox is flipping open and closed over there.) And although it may look cute the first time you see one, after you've seen it repeat again and again and again and again and again and again and again and again... you want to kill someone. What were they thinking to put something like this on their page? And if you switch to another application, the browser now sits in the background, chewing up processor cycles doing animation. The animation runs at different speeds, depending on the visitor's hardware, and what else it's doing at the same time -- crawling on slower machines, and flickering between images on fast machines. And lastly, a number of folks have reported browser crashes on leaving a page that had an animated image. When the browser crashes, it can mess up things like the browser's history list, tables of cached items, and your bookmarks file. That said, there is a use for these things in providing a simple and affordable form of animation. One site used this to show the progress of a hurricane as it approached land. But give the poor visitor a choice: "Click here to see the hurricane in action." Suggestion for the browser manufacturers: How about adding an option to turn these things off? Standalone Images The most common use of standalone images is on a page with a lot of little images where clicking on one of them loads a larger version. If you just link to the image file, it ends up in the upper left corner of the browser window, all by itself. Use an HTML page to hold the image. This will let you centre the picture and put in a page title and other information. |