Images: Best Practices

INTRODUCTION

Whenever you hear talk about computer images, the subject of graphic formats rears its ugly head. Let us just say right off the bat that as a beginning web designer there are only a few things you need to know about graphics formats. Most importantly, no one except graphics programmers truly understand what they are talking about, so you should never let the format flap intimidate you. Everything else you need to know we will tell you in a few short lines below.

Whether you are looking to build an image database, to illustrate a point, or even simply to liven up your page with some graphics, two initial concerns should guide all your subsequent decisions: 1) How large and detailed does my image need to be, and 2) What browser capabilities does my intended audience have. It is important to keep in mind that even though network technology is pushing new boundaries with download speeds and browser magic, a large part of your potential audience has neither the financial resources nor the technical know-how to keep up with the latest innovations. Although most users probably have moved beyond the gopher stage of information retrieval technology, there are still a great number of pre-pentium computers and 14.4 bps modems out there. Furthermore, not everyone is as concerned with keeping up with the latest browser updates as some of us. Even the most informative image or graphic, dazzling in Netscape Communicator 4.61, can be quite incomprehensible, or even unviewable, in Microsoft's Internet Explorer 1.0, which is the browser that was included in brand new, state of the art computers as late as 1996. That being said, however, you should not sacrifice too much for download speeds and browser capabilities either, as this may counter the whole point of using images in the first place. The best way to go is to strive for a balance between download speeds/browser capabilities and image quality and size.

All right, so how do you find that balance? To answer this, we must first return for a second to graphics formats. We said earlier that you didn't need to know much about these formats (indicated by the extension on your image's file name, such as "logo.gif" or "kennedy.jpg"), and we meant it. For while there are literally dozens of these graphics formats, current web browsers can display only a few, and of the few browsers will display, only two or three make any sense in terms of download speeds. They are: JPG (pronounced jay-peg), GIF (pronounced jif), and PNG (pronounced ping). Your choice between them should depend on 1) the number and complexity of colors in your image, and 2) the complexity of the image itself. Unlike many graphic formats in standard use in computers, these particular formats (JPG, GIF, and PNG) were all developed for transmission over networks. Therefore, in order to reduce transmission times over lines much slower than the internal circuitry of a computer (such as telephone lines), programmers had to work out ways of compressing the data contained in these files. But just as you would probably handle the packaging and shipment of a bicycle according to different criteria than you would the packaging and shipment of your ant farm, different types of images require different methods of compression for effective reassembly. A detailed explanation of the considerations behind the various compression schemes is beyond the scope of this guide, though some of the most important ones will be mentioned below under the introductions to the different web formats.

GRAPHIC FORMATS FOR THE WORLD WIDE WEB

JPG: If your image is a photograph, JPG is almost always the best solution. The format was specially developed for photography, and will give you by far the best file size to image quality ratio of any format in use today. JPG handles smooth transitions and subtle variations in brightness and color very well, in part because it doesn't limit the number of colors an image can contain. If your original image, say a photo of Indian immigrants in traditional garb at a Hindu wedding in Michigan (click here to see the image), contains two million and two colors, two million and two colors is what the JPG scheme will allow you to use. If you are working with JPGs, however, it is important to be aware of the reason for its efficiency. JPGs compression scheme is, as they say, lossy. This means, quite simply, that in order to decrease file size, data is thrown out when the image is saved. The image loses information, and there is no way of retrieving that information. But before you panic and swear off JPGs forever, let us hasten to say that the amount of data to be discarded is up to you, and that you can usually throw out a considerable chunk without a decrease in quality perceptible to the human eye. When you go to save a scanned photo as a JPG in an image manipulation program like Adobe Photoshop, a dialog box will pop up and ask you what quality you want to save it as. Newer versions of Photoshop and a few other programs let you choose on a scale from 1 to 10 (this scale is not linear, i.e. level 6 is not simply twice as good quality as level 3), but older versions and most other programs only give you "low", "medium", and "high" options. Saved at the highest quality in Photoshop, the image above is 243 kilobytes. Saved at medium quality (level 5), however, the image still looks fairly good, and is no more than 64 kilobytes, only a fourth the size of the file at the highest quality setting. Even at the low quality setting (level 1), at 42 kilobytes, the image is not horrendous, though colors, brightness and detail now are perceptibly inferior. (Click here to see the images on the same page.) For ordinary images that do not require extreme detail (which you will not achieve with a scanned photograph anyway) it is seldom necessary to save the image at a higher setting than 6 or 7, though you should usually not go any lower than this either. For your reference, the first version of the image that you saw was saved at 6 in Photoshop. The size of that file is 86 kilobytes, one third of the highest quality setting, but most people would be hard pressed to find much difference between the two. (Click here to compare. If you have already seen all the images above, they will be in your computer's cache, so you will not have to wait for them to download again.)

Be aware, however, and always keep in mind when you are working with your images, that you lose information every time you save a JPG, even if you save it at the highest possible setting. Level 10 is not 100 per cent of the original image data, as level 6 is not 60 per cent of it. Your editing program rewrites and recompresses the file every time you save it, and each time you lose a little information, and subtle changes are introduced (usually too subtle for the human eye to notice). Therefore, if you anticipate editing your images further in the future, it is a good idea to save the original in a different, lossless, format. A good old standby has been the TIFF format, but proponents of the new PNG format say this is a very good alternative as well. We will go further into this in the PNG section below, as well as the section on building image databases. Note: You must save the file for loss to occur. Simply opening or closing it, or transmitting it from one computer to another as with web pages will not affect it.

GIF: One of the most effective ways of reducing the size (and thus the download time) of an image file is to reduce the number of colors required to display the image. The GIF format does this by limiting you to a palette that, at most, allows your image to contain 256 different colors. But the fewer colors you need, the better, of course, and the GIF compression scheme will allow you to use a palette as few as eight colors. Furthermore, image areas with the same color are efficiently compressed, and take up less space in your file. Thus, files for images such as logos, navigation buttons, separation bars, etc., that commonly use few colors and contain large areas of continuous color, are usually smaller as GIFs than as JPGs, and may also look better because GIFs handles abrupt changes in color and contrast better than JPGs do. (Click here for a look at the Matrix logo as a GIF and as a JPG.) GIFs can also be made partly transparent, allowing your page background to show through your image. (Click here for an example.) JPGs can not be made transparent. Unlike JPGs, GIFs can also be animated, transparent or non-transparent, allowing you to add some life to your page (click here for an example), and the format is lossless, meaning that no information is discarded from your image file when you save it. Compared to JPGs, however, GIFs are not well suited to photography. Even at 256 colors (the maximum a GIF can have), photographic images saved as GIFs are perceptibly inferior to JPGs saved at no higher than medium quality levels, in spite of needing files often twice the size or more. (Click here for a comparison.)

Having said all this about GIFs, however, we need to point out that this format most likely is on its way out. GIF's compression method is under patent, and the company that owns the patent (Unisys) decided in 1995 to start charging royalties for the use of their scheme. Web designers and others were outraged, and immediately intensified work on patentless replacement formats. One of these formats have risen above the others, and has come to be the first graphic format officially recommended by the World Wide Web Consortium, the nonprofit organization that works to ensure that users can take full advantage of the Web's potential. That format is PNG.

PNG: The PNG format has been around for a few years now, though most people who use the web only casually or are not particularly interested in graphic formats probably have not heard of it. It is intended to replace the GIF format, which, according to experts, was showing signs of aging even before the sudden Unisys demand for royalties. PNG is emphatically royalty-free, the result of an informal, web-based designer group's efforts. It is a lossless format, and it gives you the option to store images either as pallette-based (up to 256 colors; 8-bits per pixel) like GIFs, or as truecolor images of up to 48 bits per pixel. Again, of course, the more colors in complex patterns, the more space your file will take. Therefore PNG will usually not be a better alternative than JPG for photography. Without any color reduction (left as a truecolor), the image of the Indian immigrants used above requires 352 kilobytes as a PNG, while the maximum-level JPG version makes do with 243 kilobytes for the same quality. As an indexed-color image, however, the the PNG file is, at 8 bits per pixel, 109 kilobytes where the GIF version is 113. Generally, the PNG scheme compresses the same data somewhere between 5 and 25 per cent better than the GIF method, resulting in only slightly smaller files (click here for a comparison), but the PNG format has other advantages over GIF. The three main ones for web use are: 1) Variable transparency. Pixels in the image can be made partially transparent, which combined with a background image can yield a composite image. With GIFs there is only full transparency or no transparency. 2) Gamma correction. Image brightness tends to come out differently on Macintosh systems and PC systems. PNG has the ability to correct for this, so that images come out with the same brightness across platforms. 3) Two-dimensional interlacing. With progressive-display images, PNGs become legible faster than GIFs. Progressive display will be covered briefly below.

One GIF feature that PNG does not have is multiple-image support, or animation for short. The creators of PNG do not intend to include this in the future either, but a closely related format called MNG (ming) that is specially constructed for this purpose is under development.

Keep in mind, though, that only recent versions of web browsers are able to read and display PNG images, and few, if any, have implemented support for all the features of the format. Full support is under way, however, and all the major browsers can already handle most types of PNGs, in particular simple, non-transparent images, which is the kind most people are likely to use anyway. Still, it may be wise to keep using GIFs until such time as you can be sure the vast majority of your audience has browsers that can display PNGs. That stage may be a few years away, but it is on the way.

GENERAL TIPS

Progressive display: Chances are that on most of the web pages you have seen, images have come in from top to bottom, line by line. If you have a slow modem connection, it may take a long time for such images to load, but you may have to stick around for them to finish, particularly if they are navigation elements or some other type of image that holds information you need to see before moving on. A good way to minimize this wait for the users of your web site is to use progressive display images. (Graphics software will give you the option to save images for progressive display.) In such images the information from which your browser builds the image you see on the page is stored in an interlaced manner, allowing your browser to quickly display a very crude version of your image which then is refined as the browser receives more information. It takes no more time to load progressive images than the non-progressive, line-by-line kind, but the user waiting for the image at the other end of a slow modem connection will be able to make out the image sooner, and move on if the image is of no interest, or, in the case of navigational elements, the text or symbol on the image is legible before the image is fully loaded. JPGs, GIFs, and PNGs all have progressive display capabilities now, but a further advantage of PNGs over GIFs is that PNGs interlacing method is such that the image becomes legible sooner than with GIFs. A note of caution concerning progressive JPGs is also in order. The feature is relatively new with this format, and older browsers may not be able to display JPG images saved in this manner.

Copyright: There are many myths about copyright and the Internet. Most importantly, it is not true that anything found on the Web is copyright-free, it is not true that you can freely use copyrighted text and images as long as it is for educational use, and it is certainly not true that you can use an image as long as you manipulate it enough that it is clearly distinguishable from the original image. In general, copyright law applies to the Internet as to any other form of distribution. Not only that, but the extraordinary ease of reproduction that the electronic environment facilitates has in fact led to increased vigilance on the part of copyright holders to see that their property is not unfairly exploited. For more information on copyright see our special section on that subject.

BUILDING AN IMAGE COLLECTION

File size: The first thing you need to realize if you are considering building an image collection is that image files are, in technical terms, hogs. If you are going to build an image collection, you are going to need lots of disk space. There is simply no way around this. If you have a computer that is more than three years old, forget about it. Go buy a new computer with sevaral gigabytes of disk space. If you are going to use your allotted space on the university server, be prepared to clean out your five years worth of old e-mail. Then get ready to beg for more space. Have a good plan for your collection, and bring some presents. Doughnuts are good.

Master images: Making provisions for the space necessary to build an image collection frees you up to go about the next step more professionally. As mentioned above, JPGs are wonderful for network transmission, but since the format's compression method is lossy, they are not well suited as master images. Every time you decompress and recompress them they lose information. A poor editing decision can ruin them forever, and if you save them at a too low quality-level you can never retrieve the discarded information. What you need is a master image saved in a different, lossless format, which you can then copy, manipulate, and save as a smaller-size JPG. The TIFF format has traditionally been used for this purpose, but the PNG format is now touted as a good alternative to replace TIFFs also. GIFs are already lossless, and as such do not really need special master images, but it is never a bad idea to keep backups in different locations. Given that PNGs actually compress better than GIFs, and have both indexed-color and truecolor support, using this format for all your master images and backups may be a very intelligent way to keep things simple.

Thumbnails: You may deem every single image in your collection a prize, but your audience may not always agree. A splendid way to save a visitor to your site some valuable time is to provide a jumping-page of minimized versions of your images for the visitor to decide for him- or herself what may be worth waiting for. These images should not be so small that they can not be made out, but should also be no larger than what is necessary to understand what the image contains. Dimensions between 50x35 and 100x70 will usually suffice, depending on the complexity of the image. Saved as JPGs, you can also reduce the image quality significantly for your thumbnails, thus reducing the download time for the thumbnail page. These images are only meant as hints to what the full-size image contains anyway, and do not need to be of high quality. Usually a thumbnail image can easily be made less than 10 kb, and some work quite well as small as 3 or even 2 kb. Furthermore, if your collection is large, consider categorizing your images and creating more than one thumbnail page. You might also want to inform the user how large the full-size file is, in both pixels and kilobytes. A simple set of numbers next to the thumbnail (ex. 500x375; 95 kb) tells the user what to expect. (Click here for an example.)

File names: While your collection is still small, file names made up on-the-fly may be just fine, and you may have no trouble remembering what name you assigned to a certain image file. But the larger your collection grows, and the longer it becomes between each time you see the individual images, the more difficult it will be to associate file names with particular images, no matter how much sense the name made at the time, and the more difficult it will become to keep your collection organized. If you know your collection is going to become large, it is a very good idea to decide on a file-naming system, and to stick to it. Starting the file names of a certain category of images with the same letter(s), for example, will not only help you stay on top of what goes where, but will also, most relevant in the case of very large collections, ease computerized management of that collection. What's more, should you for some reason become unable to manage the collection yourself, stewardship (as well as your particular vision ) can more easily be passed on if your files and file names are well categorized.

Image text: Many times you will want to add comments to an image. There are several ways of doing this. The most common is simply to put the image on a web page (insert the image file into an HTML file), and write on the page as you would on any other page. This is unproblematic as long as the image stays on the page, but as you surely know by the time you are getting so adept at using the Web that you are considering building your own image collection, images can be saved from a web page without including the text around them (click on the right mouse button and chose "Save Image As"). In fact, this is the only way you can save an image. Chosing "Save As" from the file menu only gets you the HTML file, which uses source tags to incorporate separate image files. But if you have already collected images from the Web yourself, you know how quickly you can forget where the image came from, and even details about what is of. With most images you can avoid this, however. Both JPGs and PNGs give you the option to save text right along with the image, embedded in the image file itself. With the right software, whoever downloads your image can then access this text and retain the pertinent information about it, even if they remember nothing about where they got it from in the first place. Which, believe us, will happen. If you are going to embed text, however, let your audience know about it.

FURTHER READING

For more information on graphic formats and work with images, see: