JPEG
JPEG at a Glance
- Stands for
- Joint Photographic Experts Group
- Pronounced
- JAY-peg
- File extension
-
.jpe, .jpg, .jpeg - Inventors
- Eric Hamilton, Joint Photographic Experts Group, Tom Lane, Independent JPEG Group
- Created
- 1990 (JPEG), 1991 (JFIF)
- Standards
- ISO/IEC 10918
- Colors
- 16,777,215
- Transparency
- None
- Optional Goodies
- Progressive rendering
- Compression
- Lossy - JPEG compression (lossy discrete cosine transform followed by Huffman coding). Other file formats (e.g., compressed TIFF, some Adobe PDF documents) also use JPEG compression. Virtually every file you see called "foo.jpg" will actually be a JPEG File Interchange Format (JFIF) file. Impress your friends with this useless information!
- How it works
- JPEG compression is designed to reduce things that don't make a noticeable difference in the picture. It's based on studies of human perception, and it throws away data you won't notice.
- Links
-
- Wikipedia article about JPEG
- JPEG Image Compression FAQ - Besides the usual technical babble, part 1 has a lot of practical advice about making JPEG images.
- Gordon Richardson's article at photo.net goes from elementary to highly technical. Stop and skim wherever you like. Some images in the "comments" section show "JPEG rot" so clearly that we didn't bother to illustrate it here.
- Independent JPEG Committee - responsible for the JPEG standards
JPEG Is Good For
Photographs
Well, you might have expected that. JPEG, after all, stands for Joint Photographic Experts Group, so you figure it'd be good for photographs. And sure enough, when you've got an image that looks mostly like a photograph, JPEG will nearly always do the best job for you. For instance, the image below (shot by Bob and our son Robert) has 306,000 pixels, each with a 24-bit color, and yet the JPEG file isn't 900K, it's only 38K.
"Looks mostly like a photograph"? Sure. Raytraced images like the one below (a demo file in POVRay updated for version 3.5 by Ken Tyler) aren't photographs, but they almost always work pretty well as JPEGs.
Images with more than 256 colors
The image below, raytraced from Drew Wells's scene "Not a Trace of Reality" (another POVRay 3.5 demo file) certainly isn't photorealistic, but the 256-color PNG (either to the right of the JPEG file or below it, depending on the width of your window) just doesn't have enough colors to do the job. Notice the highlights on the blue beads, the harshness of the highlights on the "cactuses" and lack of depth in the shadows on the marble spirals in the PNG. The PNG is 3 times bigger, too. We also made a GIF (not shown). It looks the same as the PNG, but it's even bigger (54K vs 45K).
But those two images are pretty close, and on another image with fewer colors, a GIF or PNG file might be good enough quality, so it's often worth turning computer generated images into 256 color PNGs just to see if they'll work.
Making smaller files (usually)
GIF compression averages 5:1, JPEG images at 10:1 to 20:1 often have no noticeable loss, and even greater compression is possible, 30:1 to 100:1, but high compression files are, as you might expect, lower quality. The JPEG file below (raytraced from another POVRay 3.5 demo file) looks pretty good. It's 9,000 bytes in size, while the PNG file it was converted from is 180,000 bytes. On a 56K modem, the JPEG will download in 1.6 seconds, the PNG will take more than 30 seconds.
JPEG Is Bad For
Text
Here's our "Bob & Kelly" example from our GIF section. First, here's the original.
Now here's the same image, saved as a JPEG. Take a close look.
It looks smudged, like somebody forgot to wash their hands before they touched it. Let's zoom in.
First, we didn't cheat. We didn't enhance the contrast or play with the image in any way. That image was saved with a quality level of 50 on the IJG scale (see below), enough that the effect would show up without your having to squint to see it, but by no means an unusual amount of compression.
These little grey artifacts are part of the way JPEG compression works. The very thing that helps make photographs look more realistic at high compression sticks out like a sore thumb when you save a text or clip art image as a JPEG file.
But wait, it gets worse. Our text is a 72-point headline. If it were normal text, say, from a newspaper or book you scanned, it would be almost unreadable. Add in a little dirt and age on the original and add a little noise from the scanner and it would be unreadable.
Now that scanners are everywhere, the internet is filling up with JPEGs of text that and engineering drawings that are so hard to read that nobody will ever read them. Don't add your images to this landfill. Use GIF or PNG.
Images with sharp edges, especially vertical edges
(awnings, fields of wheat). Advanced graphics programs will let you turn off chroma downsampling, and while you'll pay a price in image size, you'll get sharper edges.
Line drawings, CAD drawings
Transparency
Most scans from books and newspapers
Watch out for 16-bit colors
JPEG Quality
You can adjust JPEG quality. Most people don't know that, and even fewer actually use that control. Find it on your graphics program, use it, and you'll be miles ahead of most people. For example, on the "Save As" dialog in the excellent free graphics program for Windows, IrfanView, there's an "Options" button. Click it, and you'll find this control.
What quality do you start at? Most experts advise you to start at 75 on the Independent JPEG Group (IJG) scale from 1 to 100. Gee thanks, Bob and Kelly, what does that mean? For Photoshop, it's halfway between 3 and 4. Paint Shop Pro uses the IJG scale, but backwards, so your starting setting for PSP should be 25. As you can see in the screen grab just above, IrfanView uses the IJG scale the right way.
Some of the better graphics programs have JPEG, GIF, and PNG wizards that will let you play with quality and all sorts of other settings. There are also third party programs that optimize graphics files. Those wizards and programs make it a lot easier to get the maximum bang per byte out of your image files. Here's what Paint Shop Pro's JPEG Optimizer looks like. The "before" and "after" pictures make it easy to pick the right compression level, and you can zoom in to check details.
About the stuff on the bottom of that control, if you think we know what "Chroma subsampling: YCbCr 2x2 1x1 1x1" is, you're crazy. But sometimes we play with things like that anyway, just to see what happens. What? Are the JPEG Police gonna arrest us? Besides, we paid for those controls, so we're gonna use them. We actually do know what EXIF data is, but it isn't important here.
Quality is not a number! Use your own eyeballs. You can tell the difference between just enough compression and too much. At first you'll be unsure (which is why we've been giving you all these rules of thumb) but as you gain experience you'll see what your graphics program is telling you, and you'll be able to zoom in on areas where the "gotchas" are likely to occur and where detail matters.
Resizing Tips
You'll probably resize your photographs in your graphics program. Well, you'd better! Some of the JPEGs from our camera go bigger than 2MB, and that's a substantial fraction of the space we're allowed for our whole website, to say nothing of bandwidth. Here's a couple of tips:
- If you can't live without showing your visitors your humongous image, at least show them a civilized image that you've resized to 50K or smaller, never wider than 800 pixels, and make them click to get the big one.
- The fewer resizing steps you do, the happier you'll be. Every resizing step takes a little away from your image.
- Some graphics programs offer a choice of resizing algorithms ("Smart Size", "Bicubic", "Pixel Resize"). You don't have to know what they mean. But if you aren't happy with the results of a resize, try a different algorithm and see what it does.
- When you resize, following it by "sharpen" will make it look better. Except when it makes it look worse. Try it and see what you get. If you can come up with a golden rule for when to use sharpen, you're smarter than we are.
JPEG in the News
Forgent Technologies announced in 2002 that they have a patent that applies to JPEGs and they intend to charge for licenses for programs that create JPEGs. IBM and a host of companies told Forgent, "bite me", and in 2004 Forgent sued them. The patent expires in 2006, and Forgent will be remembered as just one more corporate weasel that tried to manipulate our broken intellectual property system to screw things up for people who are actually creating something.