Photography Lesson 4:
Optimizing Images for the Internet

Displaying images on a computer screen via the Internet is a process where image files are transmitted through phone and cable lines and assembled by your browser software [Internet Explorer , Safari, Firefox, Netscape Navigator] into an image on your screen. Images are complex computer files that take a lot more time to transmit than these words that you are now reading on your screen. Thus, file size and transmission time of an image are critical aspects of understanding how to make and use images on your web pages.

TRANSMISSION TIME: A key characteristic of the Internet is transmission time. The trick in image display is to create an image that transmits reasonably quickly [e.g., 15 seconds or less] while still lookiing good.

IMAGES:

Computer images are made up of 100s or 1000s or 1,000,000s of small squares called 'pixels'.

The image to your left is 500 pixels wide x 302 pixels high or a total of 151,000 small squares [pixels].

Each of the 151,000 pixels have a color assigned to them. Some of the pixels have the same color and some have different colors.

Image by Louise Larsen Linville

EYE->BRAIN TRICKS:

To make an image, your computer browser software assigns a color to each pixel and displays it on your screen. Your eye/brain process sees these colored squares and tricks you into seeing something that looks real - a smooth image that almost looks as if you are there looking at the real thing -- seeing a baby on a beach -- even though you're really only looking at 151,000 tiny colored squares!

To demonstrate the pixel structure of the above image, here's a closeup of the baby in the image -> CLICK HERE #1

Here's an even closer look at the pixel structure of the image of the baby's head -> CLICK HERE #2

Note that each pixel is a solid color -- but the different pixels have mostly different colors. Note also that your eye->brain process is still trying to make those little squares look like an image, but it's having a much harder time because the squares are bigger and the colors are more distinct.

SIZE and OPTIMIZATION OF IMAGES FOR TRANSMISSION SPEED:

Images are described in terms of the number of kilobytes [kb] of information they contain. The more kilobytes, the longer to transmit them via telephone and cable lines.

To optimize an image for internet transmission, the key is to minimize the kilobytes without affecting the quality of the image on the computer screen. There are three ways to do this:

• REDUCE THE SIZE: the smaller the image's width and height in pixels, the fewer number of pixels [small squares of colors ] to transmit and tthe faster the transmission time.
• REDUCE THE DENSITY: the smaller the number of pixels per inch, the fewer pixels to make up the image, and the the faster the transmission time.
• REDUCE THE # OF COLORS: the smaller the number of colors that the image is made from, the faster the transmission time.

SIZE OPTIMIZATION: Unless you are willing to have very high transmission times, you should not use images much larger than 600 pixels x 500 pixels in width and height.

DENSITY OPTIMIZATION: Computer images should be made at 72 pixels per inch [ppi]. When you scan an image, you will often get an image with a larger number of ppi and it's very important to resize the image to 72 ppi. The reasons not to make images any larger than 72 ppi is that computer screens only display either 72 ppi [MacIntosh] or 96 ppi [IBM type PC].

COLOR OPTIMIZATION: It's tricky to optimize with respect to the number of colors used to display your image. However, most imaging software does this automatically for you. For example, PHOTOSHOP allows you to put the image into a program called IMAGEREADY which provides you with optimization settings ranging from 0 to 100, or settings of low, medium, high and maximum. IMAGEREADY works by selecting the fewest number of colors necessary to convey the image on the screen. A low setting results in the use of fewer colors and thus a lower number of kilobytes and a faster transmission time. However, the image is also of lower quality and may lose shapness [blur] or pixelate [patches of jagged edges, large areas of the same color].

IMAGE TYPES: TIF, PSD, BMP, PICT, PNG, JPG and GIF Image files.

When you scan an image, you will get a TIF or PSD [Photoshop Document] file or some other image file format such as BMP, PNG, PICT or possibly even a JPG or GIF. Like a photo negative,TIF and PSD image file formats contain sufficient information to make a good print of the image. However, they contain far too much information [far too many pixels, far too many colors, far too dense in terms of pixels per inch] to make transmission time reasonable for someone who has only a 28.8 or 56.6 modem.

When you optimize an image, you not only set the height, width, and ppi, you also change the image into a format called JPEG or JPG which is designed to shorten transmission time through the Internet. GIF images are also optimized images, but they should be used only for graphic images that use few colors and that use mostly web friendly colors, and not for complex photographic images where a large number of colors is required to trick the eye into believing. A JPG image gets rid of unnecessary information, while maintaining image realism for the computer screen.

When you convert from a TIF or PSD or other file format image to a JPG image, your computer file loses information -- which is good because information takes time to transmit, but which is not good if you lose too much information because the imae will become blurry and what is called pixelated [large areas of the same color]. So, optimizing an image for the internet requires as a first step converting it to a JPG image, but as a second step, further optimizing it.

You can set the JPG image at a variety of optimization levels, usually described as low, medium, high or maximum and/or which range from "0" [low] to "100" [maximum]. The higher the optimization setting, the larger the image in kilobytes and the longer the transmission time.

In sum, a TIF or PSD image will take a very long time to transmit on the internet because it has so much information about the image structure in terms of numbers of pixels and colors. A JPG image will take less time because 'extra' information not required for display on your computer screen is eliminated. But, in addition, the same JPG image can be further optimized at various levels making the Kilobytes lower and transmission time even faster.

To give you a feel for how different optimization levels of the same image look on the Internet, I've optimized the above image at 5 settings: 10, 30, 50, 70, 90. The number of kb used to describe these images runs from 6.72 to 81.8 and the transmission time if you have a 28.8 modem runs from 3 seconds to 30 seconds. So, don't click on the last two images if you have a slow modem unless you have some time.

When you look at #1, you will note that the image has lost much of its sharp quality. That's because the computer has eliminated too many colors in order to reduced kilobytes and savetransmission time. Somewhere around the optimization levels for #3 and #4 is a reasonable compromise for speed vs. image quality.

STEPS FOR OPTMIZING YOUR INTERNET IMAGES:

Step 1: Scan the image at a high resolution [pixels per inch], and high width and height.

Step 2: Save the scanned image as a .tif or .psd formatted file.

Step 3: Make a copy of the image and work with the copy. Once you've changed a .tif or .psd file into a .jpg, you have lost some of the information that the computer uses to make the image. Although your software will allow you to rename an image in the .jpg format to a .tif or .psd type, ou can not go backwards and capture the lost information. That's why you're saving the original. It contains all the information.

Step 4: Crop or Resize the image to somewhere between 300 pixels and 600 pixels in both height and width and 72 ppi. Save this as a .tif or .psd image- not as a .jpg, and rename the file, e.g., childatbeach-500x300.tif. Converting to .jpg format comes later.

Step 5: Alter the image in any way you wish. Photoshop allows you to manipulate the hue, saturation, contast, brightness, etc.

Step 6: Now save the image as a .jpg and rename it to suit, e.g, childatbeach-500x300.jpg. In whatever software you are using, when you try to save as a .jpg, you will see a dialogue box. That allows you to set the optimization level between 0 adn 100. Alter the level until you have an image that is about 28 kb in size ... why? Transmission time for a 28.8 modem, which is what much of the world still uses, is between 8 and 14 seconds. If you get pixelation, too much image sharpness is lost, then resize your image dimensions [say from 500 x 500 x 72 to 450 x 450 x 72] and try the optimization levels again.

Step 7: Continue until you have an image size and optimization level that suits your eye ... then save as a .jpg image and in the image name put the information needed to identify the quality of the image: e.g., childatbeach-500x300x70.jpg = 500 pixels width, 300 pixels height, 72 ppi, 70 optimization level.

Step 8. Put the image on a webpage or send it as an attachment to an email message. Open the image in your internet browser [internet explorer or netscape navigator] and see what it looks like.

Do you have any Questions?