.jpe, .jpg, .jpeg
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.
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.
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.
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.
(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.
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.
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:
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.