Using Images Properly

by Matt Dessem, OnlineLearning.net/Laureate Education, Inc., updated by Charlie Orchard 1/24/2009

First, a few quick software recommendations to help you easily resize images for sharing online:

Next, three quick Web site recommendations for reducing the size of PowerPoint presentations that include images:

In online classrooms it is important for you to use images that make sense in context.

No less important, is using images that are appropriately formatted for your purposes. If you're planning on including images in a document that will be transmitted over a network (e.g., shared to the Web, sent via E-mail, submitted to an online classroom), it is essential that you understand something about how computers display and store images. We'll split this into four sections:

Fundamentals

You probably know that computers (like televisions, printers, and digital cameras) break images down into discrete pieces called pixels. Pixels are small enough that your eye blurs them, creating a smooth image. In the image on the right, what appears to be an image made up of smooth color gradients is revealed to be discrete chunks. These are pixels.

In a computer monitor, each pixel has three components: one red, one green, and one blue (an RGB monitor). These correspond to actual spots on the monitor which are either illuminated or not. The image below shows the raster grid- the layout of red, green, and blue dots that make up a monitor screen. One group of three dots forms a single pixel.

On a standard monitor, each dot can be set to a whole number intensity between 0 (completely dark) and 255 (completely illuminated). So the minimum amount of information the computer needs to illuminate a single pixel is three numbers, each between 0 and 255, which represent the intensity of the red channel, the green channel, and the blue channel.


Although this appears to be a photograph of a chimpanzee writing a novel, it's actually nothing but a series of grey boxes. Move the mouse over the image to see the animation.

Still visual by www.PDImages.com.
Animation © 2002 Canter & Associates, Inc.

Above: the raster grid. If you could see your monitor in extreme close-up, this is what it would look like.

This gives us 256 × 256 × 256 = 224 (nearly 17 million) possibilities. This is a terrific number of colors.

Unfortunately, it's also a terrific amount of information. If the computer stored separate information for each pixel, and allowed you to use each of the 17 million possible colors, even very small graphics become unwieldy. It takes 8 bits to store a number between 0 and 255 (since 256 is 28). So three numbers between 0 and 255 take 24 bits to store (this is where the term 24-bit color comes from). A screenshot of a typical monitor displaying this tutorial, if stored with the maximum possible information about each pixel, would be about 2.25 MB.  At this rate, a simple PowerPoint presentation could take hours to download. At first glance, then, it looks as though sharing images over a network is impractical. Of course, you know from personal experience that Web pages with images don't always take hours to download (this one didn't, for instance). The secret is file compression, a more efficient way to store the information in an image.

File Compression

Image compression methods vary, but all are based on the following principles:

There are many ways to compress an image file, but for our purposes we're going to only look at the two most common: GIF and JPEG.

GIFs

The pixels outlined in red are all the same color.

GIF stands for "Graphics Interchange Format" and is a file compression technique invented in the late eighties by CompuServe. It takes advantage of the fact that images typically contain many pixels of the same color. For example, in the image to the left, (a close-up from the picture above), the pixels outlined in red are all the same shade. Rather than store separate information for each pixel, a GIF file contains information about one of the pixels, and information about how many pixels of that color there are in a row.

 

A GIF saves more space by limiting the number of different colors an image can have. Rather than use all 17 million possibilities, a GIF is limited to 256. For a greyscale image, this is fine- your monitor can only display 256 shades of grey to begin with. For a color image, things are a little more complicated because you may be significantly reducing the number of colors.

As with any file compression technique, results vary- sometimes a GIF will make an image much, much smaller and sometimes virtually no space will be saved at all. The trick is knowing what images make good GIFs.

Fortunately, it isn't hard to tell if an image would make a good GIF. GIFs are best suited for images that have the following characteristics:

In the real world, this means GIFs are not usually good for photographs (especially color photographs), since these contain many subtle changes in color. GIFs are great for virtually any image that is drawn- cartoons, line drawings, company logos; anything with sharp, clear lines. This includes text- generally speaking, an image that contains text will look best as a GIF (since type features sharp edges).

JPEGs

JPEG stands for Joint Photographic Experts Group, the people who designed the algorithm. As the name implies, JPEG is a compression technique designed explicitly for photographs. JPEG conversion is based on the principle that the human eye is not very good at distinguishing between different intensities of the same color. In other words, you probably can't tell the difference between the two boxes below.

Which is a brighter shade of red?

The shades are different, and if you look very closely you may be able to tell (the image on the left is brighter). But when you're dealing with blocks of color the size of monitor pixels, the difference isn't really that important. JPEG compression works by looking for areas in which the changes in color are not perceptible to the eye and removes the changes. This is lossy compression, which means that some of the information originally in the image is lost when it is converted to a JPEG. The difference is usually not perceptible to the eye, however; so unless you're creating images to be read by machines, you can usually use JPEGs without causing a problem. Furthermore, the compression algorithm has a variable which determines how much information is thrown away (this is usually set in a menu called "image quality" but may vary by program). JPEGs are best suited for images that have the following characteristics:

JPEGs are ideal for color photographs, since photos have many subtle shades of similar colors and rarely have sharp edges. They are a terrible idea for anything that has been drawn, or that features sharp, distinct edges.

There are other file formats and compression algorithms that may be better suited for a particular image, but as long as you're familiar with GIFs and JPEGs you won't go far astray.

Resolution

Nothing causes more slow, frustrating downloads than misunderstandings about image resolution. Resolution is a measure of the amount of information divided by the size (it's the two-dimensional equivalent of density). Usually, resolution is measured in Dots Per Inch (dpi), although some prefer to use Pixels Per Inch (ppi) when describing a monitor or camera (anything that uses pixels) and reserve dpi for print media. In any event, the numbers are equivalent and measure just what you'd think: the number of pixels in a horizontal or vertical line one inch long. Generally speaking, the higher the resolution, the sharper the image (and the more it can be enlarged before individual pixels are visible). Of course, the higher the resolution, the more pixels. The more pixels, the more information, and the larger the file. And here's where things get tricky.

Not all devices can display images at the same resolution.

Printers, for example, work at much higher resolutions than monitors. This is easy to see- if you lean very close to your monitor, you can see individual pixels.  Look closely at one of the "s" letters in this document. Now look at the same letter on something you've printed. See the difference? An average quality printer will print at about 600 dpi. The best monitor money can buy will only display at about 150 dpi (and, for purposes of comparison, an american 27-inch television displays at only 26 dpi). So a $100 printer has four times better resolution than a $2,000 monitor.

This causes problems because most hardware that is used to create images (digital cameras and scanners) assumes that you will be using the images at very high resolution. This is true because resolution can be decreased, but cannot be increased- once you throw away the extra information in a high-resolution image, you can't get it back. So if you just scan a photo and post it to the Web, you're going to be using much too much information, and your file will be much too large.

Fortunately, it isn't hard to avoid problems if you remember one principle:

Consider your audience.

The audience for the electronic documents, slideshows, and Web pages you will be making in this course is your cohort and your mentor- and of course you're familiar with writing for a particular audience. But whenever technology is used to transmit information, your audience also includes the device that is being used to display the image. Unless you are specifically planning on your images being either printed at high resolution or enlarged using image editing software (generally, you will be planning neither of these things), you should not send images at high resolution.

Images with unnecessarily high resolution will take longer to appear when a visitor is viewing your Web page and longer to download when fellow students are viewing documents you have attached to discussion board postings. In addition, if you use them in a Web page offered through a free hosting service, these images may quickly consume all the disk space you were allotted for the page. 72 dpi is the standard resolution for an image designed to be displayed on a monitor or printed with a standard printer. That number is important enough to repeat: 72 dpi.

72 dpi.

If you remember nothing else, remember that number. You can usually set the resolution of the image using the software that comes with your scanner or digital camera; and it's safe to assume that most images you download from the Web are at 72 dpi (if they aren't, you'll know because it will take a long time to download them). If you need to change the resolution of an image, you can use Adobe Photoshop (http://www.adobe.com/products/photoshop/family/) or find free or inexpensive software to do so, such as:

Review

Although there is much more to digital imagery than we've covered here, you should be familiar with the basic principles discussed in this lesson. To restate:

Keep these facts in mind whenever using images online.

chimpanzee