|
||||||||||||||||||||||||||||||
|
JPEGs and JPEG CompressionHello again! This month we’re looking at JPEGs (pronounced “JAY-pegs”). JPEG is one of the two most popular bitmap image file formats used on the Internet (the other being GIF). But what is a JPEG? Well, it’s not something to hang your JCLOTHES on. It’s not even a file format; it’s an acronym for “Joint Photographic Experts Group,” which doesn’t help our understanding of the JPEG at all. What do they do at this Experts Group anyhow? Maybe they meet every second Tuesday of the month in somebody’s shed-cum-darkroom to discuss expert photography. Who knows? First, let’s see what a JPEG is. The JPEG standard was written by the committee known as (guess what) the Joint Photographic Experts Group, and it was designed for compressing full color or grayscale images (in particular, photographs and similar high-quality artwork). JPEG is a “lossy” file format; when the JPEG algorithm compresses the image, it reduces the size by chucking bits of the image away. You may think, “Hey! How does it know what to lose? What if it loses the really cute cat?” Well, it doesn’t work quite like that! JPEG compression plays on the fact that the human eye can only see so much. We have trouble seeing small color changes, so JPEG loses some of this subtle information. More on this later. Second, here’s a shocker: JPEG is not actually a file format, though it is often referred to as one. JPEG is the name of the compression algorithm used to compress the image—the file format is JFIF, which stands for “JPEG File Interchange Format.” (So it really stands for “Joint Photographic Expert Group File Interchange Format.”) As that’s a bit long-winded, I’ll (inaccurately) refer to the file format as JPEG, as this is how it’s commonly known. Bitmap File FormatsJPEG (really JFIF, remember) is a “bitmap image file format.” As you can gather from the name, this means that it’s an image made from a map of bits. Hmmm...not very helpful, though. The best way to describe it is to say that a bitmap image is like a piece of graph paper, where all the squares are lots of different colors. Close up, it just looks like a bunch of squares. From a distance, however, the squares form a coherent image. Here’s an example: It’s like a bunch of squares on graph paper—you’ve got a bunch of x-coordinates and a bunch of y-coordinates. In real computer life though, each square isn’t called “a square on graph paper,” it’s called a “pixel,” which is short for “picture element.” (Well, it’s supposed to be, but where do they get that “x” from?) These bitmap images are made up of a grid of pixels, and each pixel can be a different color. As you can imagine, the more pixels in your image, the better quality the picture, as there is more information given. As a side effect, the more pixels, the bigger the image file. The other factor concerning size with bitmap images is colors. I’ll explain why that is, but first, remember that computers can only count two numbers: zero and one. Let’s imagine a bitmap image that’s 10 pixels by 10 pixels. If we only had 0's and 1s to fill it with, we’d have a maximum of two colors: white represented by 0, and black represented by 1. Here’s what it looks like: In real life, we have images that aren’t just black and white. So how do we get all the extra colors? Imagine our “0 and 1” image above is on a transparent sheet. If we place another image of 0s and 1s underneath, we create extra possibilities. If we look at an individual square on our bitmap image, there are four possible combinations of 0s and 1s. First, our square could have a 0 on both the top sheet and the bottom sheet. Second, it could have a 1 on the top sheet and a 0 on the bottom. Third, it could have a 0 on top and a 1 on the bottom. Finally, it could have a 1 on both sheets. This gives us a total of four possible colors. Hey-now we’re getting somewhere! As you can see, the more transparent sheets we have, the more colors are available to us. Just as image size is determined by the number of pixels, it’s also determined by the number of “bit-planes” (our transparent sheets). An image containing two bit-planes (four colors) contains twice as much information as an image with one bit-plane (two colors). Here’s a quick rundown:
Pictures with 32 bit-planes also show 16.7 million colors, but they use the rest of the “colors” available for what’s called an alpha-plane, which works like a mask and deals with transparency. With any luck, you now understand what a bitmap image is. Now, let’s find out why we need to use JPEGs on the Web. Download SpeedIf you have a homepage, you may wish to put on some photographs of yourself and your family on your site. Maybe you’ve got some scans on your hard drive you’d like to put on your Web site. Have a look at the sizes of them; if they’re Photoshop files and of fairly large dimensions, you may find that they’re very big—maybe 1 MB, 5 MB, 10 MB, 50 MB, or even 100 MB. Imagine viewing a page using a 28K modem when one of the images is a 1 MB picture file; it’ll take some time to download. No one, apart from maybe you and a few understanding friends, is going to wait 20 minutes or more to see a picture of your cat. Sorry if that’s harsh, but it’s true. If you’re producing images for a Web site, they need to download quickly, or you’ll lose people’s interest. JPEG compression, as I mentioned earlier, makes your images smaller by throwing unnecessary information away. The best thing about this is that you can choose how much information is lost. There’s a trade off, as you can imagine. The smaller you make your image (in file size) the poorer quality your image will have. We can understand this more clearly by looking at how the JPEG compression algorithm shrinks images. JPEG CompressionJPEG compression works by playing on the fact that the human eye can only see so much. We have trouble seeing small color changes, for example. Any information that we’re unlikely to notice gets trashed. However, the more the image is compressed, the more noticeable the losses are. You’ve probably seen badly compressed JPEGs, which appear fuzzy and blocky, and have poor colors. If you want to compare different levels of compression on the same image, follow the links below:
As you can see, there isn’t a great deal of difference between the average- and the good-quality image (in terms of apparent quality). Note, however, that there’s a big difference in file size. Let’s have a look at a few types of images that by their very nature don’t compress well using JPEG. The one thing to learn about JPEGs is when (and when not) to use them. JPEGs don’t work very well with high-contrast images (e.g., text, line drawings, and basic cartoons). Another way people often go wrong is by placing high-contrast text onto a photo. It can look very strange-you’ll get a kind of ghostly halo around the text. If you’re unsure about whether to save your Web graphics as a JPEG or a GIF, the best thing to do is save your image as both a good-quality JPEG and a GIF, then see which one is smaller. Saving OptionsThere are lots of different options for saving images as JPEGs. Most of them go unclicked. Here, I’ll go through the most common options and explain them.
These are the most common options you’ll encounter. There are obviously lots more in high-end software like Photoshop, but many of these are unsuitable for Net use. Please remember that you’ll achieve different results using different software. What looks okay saved in GraphicConverter may look even better in Fireworks. It’s worth experimenting in different programs to find out which one gives the best results for your images.
Facts, Hints, and Tips for Working with JPEGs
ResourcesThe following links will provide you with extra information and software:
Okay, that’s it for this month. I hope it’s been useful. Next month, tradition dictates that I should follow a JPEG column with a GIF one. However, I’ll be blowing away this convention and looking at how to design an effective banner advertisement. If you have any comments, queries about anything I’ve covered, or suggestions for things you want me to cover, why not drop me an e-mail?
|
|
||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||
Reader Comments (29)
If yes, my guess is that your Photoshop is somehow defaulted to some off-tilt color profile. Either that, or your camera embeds a color profile designed for PictureViewer, but I doubt that. More likely the other way around.
I'm not an expert on color management (my office, thankfully, pays a local service bureau to keep my monitor calibrated) but try this. Go to the Photoshop Edit menu, select Color Settings, turn off Color Management (I use a US Prepress setting at work, but I leave it off at home), and for good measure, set the RGB working space either to sRGB or, what I think is more preferable, to a Monitor RGB setting that has a description of your display following it. You might also want to set the CMYK space to generic CMYK profile, and the gray and spot to 10 or 20%. Also, turn off the Color Management Policies. As long as you're not planning to do work in Photoshop for use on a commercial press, these settings might cure your problem.
By all means, if another reader is more informed on this topic, please pipe in!
Thank you.
Thank you for this information. I have an additional question. We post Photoshop and Illustrator files to a company Intranet site for our clients. Some of these files are layered PDFs and are huge. We would like to post these as JPEGs, however our only concern is that the text becomes fuzzy and unreadable. Is there a way to save the files to combat this issue, or is there a JPEG reader that will allow an end user to zoom in to read text like a PDF file allows?
PDFs truly are your best option for proofing. I'm not exactly sure what you mean by "layered PDFs" because PDFs don't use layering in the manner you think of with Photoshop and Illustrator. Sure, objects do appear on top of each other, but you cannot turn layers on and off like you do in those graphic programs.
Anyway, what you want to do is distill your PDFs using something like medium or medium high JPEG compression (or it might be worded the other way around and you'd want medium or medium low quality). Also, set the PDF resolution to screen resolutio (72dpi) or bump up to 150 if you need graphics to be a little bit clearer. Distilling this way will dramatically reduce the size of your PDFs while letting your text remain vector and clear when zoomed close or printed.
However, occasionally I must manipulate photos in Photoshop V6.0 Mac before sending. I save as a jpg file. The file no longer appears on the desktop with the Quicktime icon, as does the original. This is fine, except that my colleagues receiving such files cannot read them if they do not have Photoshop. Is there any way I can create, from Photoshop 6, a file that has the Quicktime jpeg format (PICT/JPEG, I have learned from your excellent articles) versus the JFIF/JPEG format which seems to make Photoshop its default application?
For viewing photos, I find it a great more satisfactory to use QT Pictureviewer than opeing each into Photoshop. But for some receipients (without Photoshop), the reality is they cannot view my files at all.
What can I do?
Regards,
Matt Bird
There's simply no substitute for getting a high resolution image in the first place. If you're doing print jobs and using photos from the web, you should re-evaluate your image acquisition policies.
Where I work, I all but refuse web images. I try to not even accept photo-style inkjet printouts even if they're on the proper glossy paper. They still scan horribly. I tell people when they give me such a print that I'd much rather have a copy of the file they used to make that print than the print itself.
If you search VersionTracker or MacUpdate, you'll probably find a plethora of utilities that have better algorithms for enlarging digital photos. You'll have to try a couple and decide which is your favorite. They'll cost anywhere from free to hundreds of dollars.
Personally, if I HAVE to enlarge something a little bit, I just do it in Photoshop. Its algorithm is acceptable for perhaps up to about a 150% enlargement. Maybe even 200% depending on what you're working with. Any more, and degradation becomes much too apparent. And keep in mind that as much as 200% may not be enough to help you. Suppose you have a web photo that is 200 pixels square. That's fairly large on a web page, but is only 2/3 of an inch when redefined as a 300dpi image suitable for press. If you enlarged it to be four inches square at press resolution, you're blowing it up 600% !!
i need more information about jpeg comprssion . if a possible you gave some pdf or books about this way
thanks for your helping for me
Speaking completely literally, you cannot improve the resolution of a bitmap image. Enlarging them will always exaggerate the pixellation you see when you zoom in to a bitmap. The best advice is to always obtain larger digital images to begin with.
Having said that, the only tool I've seen that does better than any other with bitmap enlargements is Genuine Fractals.
Add A Comment