Image formats

Where are we?

You learned how computers show images on a display. But how they’re stored in files is different. That’s what this lesson is about.

This lesson’s goals

By the end of this lesson, you should:

• Know what an image format is.
• Know the three main image formats used on the Web.
• Know what transparency and translucency are.

What is an image format, anyway?

It takes a lot of pixels to make a big image. And each pixel needs three different numbers to represent it. The result? Lots of data, and long download times over the Internet, especially for slow connections.

An image format is a way of storing an image in a file. The most obvious format is simply to store all of the numbers for all of the pixels. That’s what a raw image file is, as it comes from the image sensor of a digital camera.

Computerists have come up with clever ways of compressing images, so that they can be stored in smaller files. An “image format” is a way of encoding image data to store in a file.

There are about a bazillion image formats out there. But the vast majority of Web images use only three formats.

The JPEG format

A raw image will contain many more colors than your eye can differentiate. Here are two objects:

Figure 1. Two colors

They are different colors. One is (255, 159, 99). The other is (255, 159, 100). So one has slightly more blue. I can’t tell the difference. Can you?

JPEG reduces file size by dropping colors from images, and averaging colors in adjacent pixels.

Let’s be clear what is happening. In the previous lesson, you saw programs like this one for computing a tip at a restaurant:

Get the meal cost from the user.
tip = meal cost * 0.15
total = meal cost + tip
Show tip and total to the user.

This is an algorithm. An algorithm is a set of steps for performing some task. “Algorithm” and “program” mean more-or-less the same thing.

What does this have to do with JPEG?

JPEG stands for the Joint Photographic Experts Group. A bunch o’ dude/ttes got together, and agreed on an algorithm to compress pixel data. They came up with something like this:

Convert from RGB to YCbCr.
Reduce the resolution of YCbCr chroma data.
Split the image into blocks of 8×8 pixels.
...

Got it? No, neither do I. But that’s OK. It works.

So the JPEGers agreed on this algorithm. Then some programmers got to work. They wrote two types of programs.

1. Encoding programs, that use the JPEG algorithm to encode raw RGB. The encoded data is written to a file, which is smaller than a file with unencoded data would be.
2. Decoding programs, that read JPEG encoded data from a file, and convert it back into RGB data that the computer shows on the display.

When your Web browser shows a JPEG image, it downloads the encoded file from the Internet, decodes it, and gives the decoded data to your computer’s operating system (Windows, OSX, Linux) to show on your display. Your browser has a JPEG decoder built into it, or has one that it can call on.

JPEG files almost always have the extension .jpg.

JPEG is a lossy format, that is, it compresses by throwing away information. Usually that’s OK, because your eye can’t see all of the colors in the raw image anyway. But it can be overdone. Compare these two images.

4.0K

0.7K

Figure 2. Compressed too much

The good news is that the second file is tiny, even though the image itself ls larger. Too bad it’s junk.

JPEG is best for photos, which have thousands of colors. Throw some away, and your eye won’t notice.

The GIF format

The GIF format is lossless, that is, it doesn’t throw away information. At least, it tries not to. The trouble is that it limits each image to 256 different colors. The set of colors in an image is called its palette.

256 sounds like a lot, and it is for most structural images, like buttons and dividers. But the GIF format is lousy for photographs, which can have thousands of colors.

GIF also has problems with heavily anti-aliased images. As we saw earlier, anti-alias works by adding colors to an image. If an imagine has lots of different color boundaries that need to be anti-aliased, GIF might not be able to handle it.

GIF files have the extension .gif.

The GIF format can do two things that JPEG cannot. One is animation. Here’s an animated GIF.

Figure 3. Animated GIF

It’s made of a bunch of still images shown in a loop. Here are the frames:

Figure 4. Animated GIF frames

Use animated GIFs sparingly. Many Webers view their overuse as the mark of an amateur.

The other feature that GIF has that JPEG does not is transparency. One of the colors in a GIF image’s palette can be set to transparent. Your GIF decoding software simply skips transparent pixels, not showing them at all. That lets anything underneath show through.

Here’s a GIF of a cow on different colored backgrounds.

Figure 5. Transparent GIF

The PNG format

The portable network graphics (PNG) was designed to replace GIF. PNG is lossless, can put thousands of colors in a single image, and supports translucency. PNG does not support animation. PNG files have the extension .png.

I said that PNG supports translucency, while GIF supports transparency (actually, PNG supports both). I’m using the terms in different ways. Not all Webers define them this way, but some do.

A transparent pixel is either all on, or all off. That’s what GIF does. The cow in Figure 5 has a transparent background.

A PNG can add an optional fourth channel for each pixel. So there’s a red channel, a blue channel, a green channel, and an alpha channel. The higher the value in the alpha channel, the more of the color is used.

Here’s a flamingo:

Figure 6. PNG flamingo

Here’s a blue spot:

Figure 7. Blue spot

The spot’s pixels get more translucent around the edges the of the spot.

You can see the translucency when you put the spot on top of the flamingo:

Figure 8. Blue spot on the flamingo

This isn’t a different image. It was made by overlaying the two images above.

When the spot’s pixels are not translucent (in the center of the spot), they hide the flamingo’s pink pixels. But when the pixels are translucent (at the edges of the spot), your computer blends the blue with the pink.

Here’s another example. Suppose I wanted a searchlight effect in an ad.

Figure 9. Searchlight

I wrote some JavaScript to move the searchlight over the text. The pixels in the searchlight have some translucency, so the text underneath always shows through.

Other formats

There are other graphics formats, but they don’t impact the Web as much as the Big Three. We won’t talk about them.

Which format should you use?

Use JPEG for photos, but don’t overcompress. Use PNG for everything else. There are lots of existing GIF images you can use on your sites. There’s no need to convert them to PNGs. Just use them as is.

Movies and animation

We’ve been talking about still images. There’s also movies and animation.

The easiest way to show a movie is to upload it to YouTube. Then you can put some HTML code into your page to embed the movie in your site. YouTube gives you the code, so you can just copy-and-paste.

Flash is the top dog of animation technology. Flash could be a CoreDogs book in its own right. See Adobe’s site to get started with Flash.

Apple doesn’t support Flash on iPhones or iPads. These are popular devices. Some people think Flash is on the way out. Time will tell.

Summary

In this lesson, you learned about the Big Three formats: JPEG, GIF, and PNG. You learned about transparency and translucency.

What now?

Let’s talk about where you can get images for your pages.