Images are an important part of training and learning in any medium, and especially in the online learning experience. The way a developer handles images online
influences the learner’s experience in three ways:
- The fidelity of the image as presented affects learning value;
- The subjective appearance of the learning product, including the images, affects perceived value and user confidence; and
- The speed of downloads — determined by image file size — affects the probability that the user will complete the learning event.
These results are obtained through choices the developer makes when images are selected and acquired, by the file formats used to store images, and by the way the information in the files is optimized.
In this article, we will review some basic concepts about these choices, the file formats, and ways to make sure that the net results of your decisions are what you wanted.
Basic Concepts
As the developer, you have several ways to achieve the outcome you want, but it takes an understanding of the basics to get there. Your challenge overall is to capture as much information about the images as possible, and then to select, store and display as little of that information as you can to achieve the result.
You want to capture the maximum amount of image information so that you are working from the best possible material. This information, whether it comes from a scanner, digital camera, or paint program, is going to be stored in files that can be used during the editing process. Such files can be huge, even for a small graphic or photo. They are generally too large to include in e-Learning applications.
What determines the size of this raw data file? Three factors: the physical dimensions of the image (expressed in “X by Y” terms for the number of pixels wide and high), the resolution of the image (expressed in terms of pixels per inch), and the bit depth used to store the information about the color of each pixel. Another way to think about bit depth is that it describes the number of colors an image can contain:
1-bit = 2 colors (black and white) 4-bit = 16 colors 8-bit = 256 colors 16-bit = Thousands of colors (216, to be exact) 24-bit = Millions of colors (224)
An image 200 pixels by 200 pixels at an 8-bit depth (one byte per pixel) will require 40,000 bytes to store with no compression. The same image at a 16-bit depth (two bytes per pixel) will require 80,000 bytes. At a resolution of 72 dots per inch (the normal monitor resolution), this image would be a bit larger than 2.78 inches square. At 300 DPI resolution, it would be 0.67 inch square.
When an image is first created or captured, the resolution may be 300 DPI or more and the bit depth may be anything from 4-bit to 16- or 24-bit. These parameters depend on choices made by the person who creates the image. This image information will be stored as a large file on your hard drive and will be used as a “master.” In order to start getting the image file down to a size that will download quickly, you will edit the master file and save it in a different format.
There are two things you can do in editing the master file that will result in a smaller file. You can reduce the physical size of the image, by cropping. You can reduce the bit depth, meaning there will be fewer colors in the image. Or you can do both, using image editing software such as PhotoShop or Paint Shop Pro.
Once this is done, the image file can be compressed in various ways to make it smaller, similar to the way in which a text file can be compressed into a “Zip” file.
To make it possible to increase the amount of compression, the way in which the image information is organized can be changed so that it will compress more efficiently. In addition, image data can be further optimized in certain ways as part of the compression process.
The developer generally makes one critical decision that handles both of these requirements: the image file format.
Image File Formats
There are many different image formats, but most are not useful for online learning. The formats discussed here are best suited for Web browsers and do not require an external plug-in to view them. Plug-ins are additional software that must be installed (sometimes through online download) and maintained on each learner’s computer. This can create licensing, user, and support issues. Examples of common plug-ins are Macromedia’s Flash! or Adobe’s Acrobat Reader.
These are the six issues that affect selection of image file format for
e-Learning:
- Can any Web browser open the file, or only certain ones?
- How large will the resulting image files be?
- Are there any licensing issues around use of the format?
- Will the image look the same in any Web browser on any platform?
- How flexible is the format with respect to color depth? Does it permit any optimization?
- Does the format lose any image information?
Of the many image file formats, most Web browsers can only open three: JPEG (Joint Photographic Experts Group), GIF (Graphic Interchange Format), and PNG (Portable Network Graphics). Even though all three are widely used and considered “standard” formats for the Web, each has its advantages and limitations.
Other formats, such as TIFF (Tagged Image File Format), PCX (Z-Soft), and IMG (GEM Paint), have various drawbacks. Some are proprietary and may be excellent for editing or for storing image information — but Web browsers cannot display them. Apart from browser support, the critical item on this list is file size. Visuals (images) will only be one element of the application, and they must be optimized to effectively reach the audience without a long delay. For any given image (photo, diagram, illustration), the file formats will each result in a different size file even without any optimization. This directly affects the time required to download the image. One must look at the download speeds of the low-end systems of the audience and calculate a “reasonable” amount of time for all the media components to stream in. Long delays while media download will result in losing the audience quickly.
The answer is not always as simple as choosing the format that will give the smallest file size and fastest download. Quality must always be considered and it is almost always at odds with file size and download speed.
JPEG
JPEG (pronounced “jay-peg”) format is best suited for compressing images with many (thousands of or millions of) colors. JPEG is a nonproprietary standard. No company owns the standard and there is no fee for using it. It was developed for use with photographs or photo-like images.
The software you use when you create or save a JPEG image file will ask you to choose the quality of image you want. The higher the quality, the larger the file. JPEG compression is “lossy” — it removes information from the image in order to get a smaller file size. The standard includes 29 different ways, or algorithms, to compress the image data to these different levels of quality. Your software may not use all 29 of them. Part of the coding in each JPEG algorithm determines the information to leave out of the final file. This is information that will not be restored when the file is displayed.
The chosen algorithm will take the palette of the raw file and “average” the colors to minimize the file size. When there are thousands or millions of colors, this procedure will reduce the palette size (the number of colors), and retain the image quality at the level set by the developer. This process is very effective with photographs or illustrations with gradients, but it creates some problems in other cases. If you have seen screen captures on the Web that have a “blurry” look to them, chances are they were saved as a JPEG with an averaged palette. The averaging produces the blurry effect. (See Figure 1.) With many of today’s image editing tools you can adjust the optimization level of the file in the JPEG format, and this will be discussed at the end of this article.
FIGURE 1 JPEG averaging can result in a degraded image. The left-hand figure was saved using the PNG format, the right is from a highly compressed JPEG file.
GIF
GIF (pronounced either “jiff”, or “giff”, with the former preferred) is a format standard produced with a proprietary compression algorithm called LZW that is owned by Unisys. The GIF standard was designed for images with less than 256 colors. This would include software screen shots, illustrations and clip art of cartoon-like images — generally anything other than photos. GIF is a “lossless” compression method, meaning it does not remove any information from the image. This format allows the artist to keep the palette “exact,” unlike the JPEG format that “averages” the colors.
One reason GIF is a popular format is its transparency feature. The developer can make one palette entry transparent, so that the background behind the image can be seen. This is tremendously useful. (See Figure 2.) GIF also allows storing multiple images in a single file and playing these back as an animation. This is a unique feature that results in an animation file much smaller than, for example, a FLASH movie. These animated GIFs can sometimes be used to advantage in online learning applications.
FIGURE 2 One palette entry in a GIF file can be made fully transparent so that the background shows through.
Many of the features of the GIF format reflect its age. For example, take the 256-color palette. At the time GIF was developed, PC systems could handle only a maximum of 256 colors at a time. Today, systems are much more capable and a screen shot with more than 256 colors in it saved as a GIF will suffer some degradation when displayed.
Another limitation of GIF shows up in the way it interlaces images. Interlacing is a way to display images as they are received such that the image is more easily viewed. In the days when a fast modem clipped along at 2400 baud, it could take a long time to see an image if you had to wait until every bit of the data had been received, or if (as JPEG does) the image was displayed one horizontal raster line at a time. So GIF transmits images in four passes. It sends every eighth raster line in the first pass, every fourth line in the second pass, every second line in the third, and the remaining lines in the last pass. This one-dimensional interlacing makes the graphic file slightly larger than a non-interlaced file (like JPEG), but the benefit of not forcing the viewer to wait a long time was worth it in the days of glacially slow file transfers. This is still an advantage when delivering images to people on dial-up connections to the Internet.
There is one additional factor to consider before using GIF. GIF was developed for CompuServe (now owned by AOL) by another company that was later bought by Unisys. In its original use, GIF was considered a public standard. However, Unisys claims that GIF, because it uses a patented compression method, is a proprietary standard to which Unisys owns all rights. In addition, Unisys has from time to time indicated that it would like to charge users of GIF a licensing fee. You can read what Unisys has to say on the subject at http://www.unisys.com/unisys/lzw/. Technically, anyone who creates GIF files and posts them on the Web or uses them in commercial applications could at least be required to show that the publisher of the editing software that created the files has a license from Unisys. Failure to do so could mean the user must pay a fee to Unisys. This has been the source of a great deal of controversy. There are serious questions as to whether Unisys could actually collect fees, but many developers prefer to avoid the issue completely and simply do not use GIFs at all. In practice, Unisys has never required users of GIF images to obtain a license, and in any case the Unisys patent on the underlying technology expires in 2003.
PNG
The Portable Network Graphics (PNG, pronounced “ping”) format is relatively new and is intended to provide key advantages in use on the Web and for image editing. It was designed to replace the GIF format, to avoid patent and ownership issues, and to be the format of choice for storing and editing images.
PNG, like GIF, is a lossless format but with better compression. An image in a PNG file can be up to 30% more compressed than in GIF format. PNG offers four additional features that are improvements
over GIF:
- The developer can make one color transparent, as with GIF, and can control the degree of opacity. This is sometimes referred to as “alpha channels.”
- PNG uses a two-dimensional interlacing approach that is faster in developing the image than the GIF interlacing method.
- Gamma correction allows tuning the image color brightness, so that an image looks more nearly the same when displayed on different systems, platforms, and monitors.
- PNG can save images using true-color as well as with the palette and grayscale formats to which GIF is limited.
PNG does not support storing multiple images, so it won’t “do” animation. There is a variation of PNG (MNG, or “ming”) that addresses this, although it is not widely adopted yet in software. Not all browsers and graphics editors implement PNG in a way that supports all of its features, and some implement it in a way that results in the loss of some image information.
PNG is not a direct competitor to JPEG. The files are larger than JPEG and the developer cannot trade off between file size and image quality. JPEG is still the format of choice for transmission of finished true-color images and especially photographs. This is because of the savings in file size.
However, PNG supports a large range of bit depths all the way up to 64 bit. In addition, the PNG standard does not allow for variations, so that a PNG image saved in one application is going to be readable by any other PNG-supporting application. This makes PNG a very useful format for the intermediate stages of editing. Saving, restoring, and re-saving a PNG image will not result in quality degradation, which is not the case with JPEG.
Optimization Issues
Graphic editing software such as Adobe Photoshop, Macromedia Fireworks, and Paint Shop Pro allows you to control image optimization by selecting percentages (JPG) or palette sizes (GIF). With JPG images, changing the percentage from 100% (best quality) downward determines how the software will “average” the colors. An optimization of 40% with photographs will retain acceptable quality and minimize the file size so that users on dial-up connections can receive the image quickly.
In the case of GIF images, the software reduces the palette to 256 colors or less as set by the artist or developer, selecting the closest colors to the original within the smaller palette. The artist or developer also determines whether the GIF image will be interlaced or non-interlaced. Interlaced files are slightly larger. A separate operation after saving the image is generally required in order to make one of the palette colors transparent; this sometimes results in a smaller file as well.
Procedures for optimizing PNG image files are similar to those for optimizing GIFs. You set the palette size and choose whether to make the file interlaced (the preferred choice) or non-interlaced. The software does the rest. In separate operations, the color depth can be increased or reduced, or changed to grayscale, and a single palette entry can be set to any desired level of opacity.
PNG files can be further reduced in size by using either of two utilities. For images with 256 colors or less, pngrewrite reduces large palettes and transparency chunks. The pngrewrite home page is located at http://home.mieweb.com/jason/imaging/pngrewrite. For other PNG images, pngcrush will reduce the size of the file. The code is Open Source and is available, along with the executable file, at http://pmt.sourceforge.net/pngcrush/index.html. In general, PNG is a better choice than GIF. Because all PNG features are not fully supported by all software, some developers avoid it. But the actual case is that
PNG can be used successfully almost anywhere GIF is used today, and with smaller-sized files for the same color depth. The only exception is those cases in which learners will be using versions of Microsoft Internet Explorer or Netscape Navigator earlier than Version 4, or where an animated graphic is wanted.
Example: Macromedia Fireworks
In Macromedia Fireworks, files are saved in the format of choice by using the EXPORT feature. The Export Preview Window allows you to select (via drop-down windows and fields) the optimization level desired, with a preview of the image before you save the file. The Export window also gives you an estimated download time with various modem speeds. (See Figure 3.) Depending on what your limitations are, you can adjust this value to adhere to your specifications.
FIGURE 3 The Fireworks Export Preview Window.
