 |
|
This tutorial has been designed to help acquaint one with the idea of proper compression for images and more ideal size for display on web pages. Hopefully once you have finished reading this page, you will understand how compression works and how to compress images properly for better display and quicker download time. After all, if your image takes "forever" to load, how many people are going to stick around to actually view it? Do you know that if your page takes more than 8 seconds to download, that you may lose 1/3 of your visitors? Keep in mind, your page is BY you but it's FOR them! You've got to get the visitor interested THEN you can show extras.
I wish a page like this had existed BEFORE I made this site or that I'd have found it. If I had known then (a couple years ago) what I know now, many of the "screenshot" images on this site would not only be of better quality, but they would have been smaller in file download size.
To see many of the effects shown on this page, it may be necessary to have your computer set to "true color" display.
JPEG (pronounced "jay-peg") is a standardized image compression mechanism. It stands for Joint Photographic Experts Group, the original name of the committee that wrote the standard. JPEG is designed for compressing either full-color or gray-scale images of natural, real-world scenes. It works well on photographs, naturalistic artwork, and similar material; not so well on lettering, simple cartoons, or line drawings. The image at the top of this page is in "JPEG" format.
It is one of the largest used methods of image display used on the web today. The image will usually end with the extension:
For the purpose of this tutorial, "JPEG" will be used when referencing any of the above extensions.
JPEG is "lossy," meaning that the decompressed image isn't quite the same as the one you started with. JPEG is designed to exploit known limitations of the human eye (more about this later), notably the fact that small color changes are perceived less accurately than small changes in brightness.
A useful property of JPEG is that the degree of lossiness can be varied by adjusting compression parameters. This means that the image maker can trade off file size against output image quality. You can make *extremely* small files if you don't mind poor quality. Conversely, if you aren't happy with the output quality at the default compression setting, you can jack up the quality until you are satisfied, and accept lesser compression.
There is one very good reason:
Making image files smaller is a plus for transmitting files across networks and for archiving libraries of images. Being able to compress a 2 Mbyte full-color file down to, say, 100 Kbytes makes a big difference in disk space and transmission time! And JPEG can easily provide 20:1 compression of full-color data. If you are comparing GIF and JPEG, the size ratio is usually more like 4:1. It's worth noting that when network transmission is involved, the time savings from transferring a shorter file is a must for today's "I want it now" mentality. Besides, why make someone wait to view an image that's 300 kb when you can compress it and they can see practically the same image but only have to download 40-60 kb?
 JPEG with little to no compression. This file is 47823 bytes in size. |
 JPEG with a slight amount of compression added. This file is 15975 bytes in size and is virtually the same in appearance as the image to the left, thus it would provide practically the same visual impact AND your visitor didn't have to wait the extra ~32000 bytes for it. |
 JPEG with a moderate amount of compression. This file is 10658 bytes in size. Notice in this image that some compression "artifact" is beginning to become visible. Artifact can be described as a "wrinkled" appearance between colors. Depending on what you are trying to convey, small amounts of "artifact" can be entirely acceptable. |
 JPEG that is way over compressed. The object is barely distinguishable. This file is 4371 bytes in size. This image serves as a representation that you CAN over compress an image. Just be sure to have your uncompressed (usually .bmp for Windows) file handy so that you can try a different compression if the image has lost clarity due to its compression. |
Another advantage of JPEG is that it stores full color information: 24 bits/pixel (16 million colors). GIF, the other image format widely used on the net, can only store 8 bits/pixel (256 or fewer colors). GIF is reasonably well matched to inexpensive computer displays. JPEG is far more useful than GIF for exchanging images among people with widely varying display hardware, because it avoids prejudging how many colors to use. Hence JPEG is considerably more appropriate than GIF for use as a World Wide Web standard photo format.
A lot of people are scared off by the term "lossy compression". But when it comes to representing real-world scenes, *no* digital image format can retain all the information that your eyeball can see. By comparison with the real-world scene, JPEG loses far less information than GIF.
The real disadvantage of lossy compression is that if you repeatedly compress and decompress an image, you lose a little more quality each time.
JPEG is *not* going to displace GIF entirely; for some types of images, GIF is superior in image quality, file size, or both. One of the first things to learn about JPEG is which kinds of images to apply it to. Generally speaking, JPEG is superior to GIF for storing full-color or gray-scale images of "realistic" scenes (like your Bryce renders). Any smooth variation in color, such as occurs in highlighted or shaded areas, will be represented more faithfully and in less space by JPEG than by GIF. The more complex and subtly rendered the image, the more likely that JPEG will do well on it.
JPEG, this image is 15975 bytes in size. |
 GIF, this image is 75279 bytes in size. ~60000 bytes more than the JPEG! |
GIF does significantly better on images with only a few distinct colors, such as line drawings, simple cartoons, and some screen shots. Not only is GIF lossless for such images, but it often compresses them more than JPEG can. For example, large areas of pixels that are all *exactly* the same color are compressed very efficiently indeed by GIF. JPEG can't squeeze such data as much as GIF does without introducing visible defects. Computer-drawn images, such as ray-traced scenes, usually fall between photographs and cartoons in terms of complexity.
 GIF, this image is clear and is 6803 bytes in size. |
JPEG, this image shows a considerable amount of "artifact". Also even though it has a considerably high degree of JPEG compression, it is still 14951 bytes in size. |
Icons that use only a few colors are handled better by GIF. JPEG has a hard time with very sharp edges: a row of pure-black pixels adjacent to a row of pure-white pixels, for example. Sharp edges tend to come out blurred unless you use a very high quality setting. Edges this sharp are rare in scanned photographs, but are fairly common in GIF files: consider borders, overlaid text, etc. The blurriness is particularly objectionable with text that's only a few pixels high. If you have a GIF with a lot of small-size overlaid text, don't JPEG it.
Plain black-and-white (two level) images should never be converted to JPEG; they violate all of the conditions given above. You need at least about 16 gray levels before JPEG is useful for gray-scale images. It should also be noted that GIF is lossless for gray-scale images of up to 256 levels, while JPEG is not. If you have a large library of GIF images, you may want to save space by converting the GIFs to JPEG. This is trickier than it may seem --- even when the GIFs contain photographic images, they are actually very poor source material for JPEG, because the images have been color-reduced. Non-photographic images should generally be left in GIF form. Good-quality photographic GIFs can often be converted with no visible quality loss, but only if you know what you are doing and you take the time to work on each image individually. Otherwise you're likely to lose a lot of image quality or waste a lot of disk space ... quite possibly both.
Most JPEG compressors let you pick a file size vs. image quality tradeoff by selecting a quality setting. There seems to be widespread confusion about the meaning of these settings. "Quality 95" does NOT mean "keep 95% of the information", as some have claimed. The quality scale is purely arbitrary; it's not a percentage of anything. In fact, quality scales aren't even standardized across JPEG programs. But you do need to keep in mind that quality scales vary considerably from one JPEG-creating program to another, and that just saying "I saved this at Q 75" doesn't mean a thing if you don't say which program you used. In most cases the user's goal is to pick the lowest quality setting, or smallest file size, that decompresses into an image indistinguishable from the original.
This is the compression option dialog for Corel Photopaint. |
 This is the compression option dialog for Adobe Photoshop. |
This setting will vary from one image to another and from one observer to another, but here are some rules of thumb. For good-quality, full-color source images, the default IJG quality setting (Q 75) is very often the best choice. This setting is about the lowest you can go without expecting to see defects in a typical image. Try Q 75 first; if you see defects, then go up. If the image was less than perfect quality to begin with, you might be able to drop down to Q 50 without objectionable degradation. On the other hand, you might need to go to a *higher* quality setting to avoid further loss. This is often necessary if the image contains dithering or moiré patterns.
Except for experimental purposes, never go above about Q 95; using Q 100 will produce a file two or three times as large as Q 95, but of hardly any better quality. Q 100 is a mathematical limit rather than a useful setting. If you see a file made with Q 100, it's a pretty sure sign that the maker didn't know what he/she was doing. If you want a very small file (say for preview or indexing purposes) and are prepared to tolerate large defects, a Q setting in the range of 5 to 10 is about right. Q 2 or so may be amusing as "op art". If your image contains sharp colored edges, you may notice slight fuzziness or jagginess around such edges no matter how high you make the quality setting.
Images that are in around 640 x 480 pixels in size usually should be between 40-80 kb in size. ONLY RARELY SHOULD THEY BE LARGER IN FILE SIZE!!!
For images being used on the World Wide Web, it's often a good idea to give up a small amount of image quality in order to reduce download time. Quality settings around 50 are often perfectly acceptable on the Web. In fact, a user viewing such an image on a browser with a 256-color display is unlikely to be able to see any difference from a higher quality setting, because the browser's color quantization artifacts will swamp any imperfections in the JPEG image itself. It's also worth knowing that current progressive-JPEG-making programs use default progression sequences that are tuned for quality settings around 50-75: much below 50, the early scans will look really bad, while much above 75, the later scans won't contribute anything noticeable to the picture.
Many people don't have full-color (24 bit per pixel) display hardware or they don't have it active...or worse yet, they have it active, but its over-ridden by a browser setting (AOL).
Inexpensive display hardware stores 8 bits per pixel, so it can display at most 256 distinct colors at a time. To display a full-color image, the computer must choose an appropriate set of representative colors and map the image into these colors. This process is called "color quantization". It turns out that for most images, the details of the color quantization algorithm have *much* more impact on the final image quality than do any errors introduced by JPEG itself (except at the very lowest JPEG quality settings). Making a good color quantization method is a black art, and no single algorithm is best for all images. Since JPEG is a full-color format, displaying a color JPEG image on 8-bit-or-less hardware requires color quantization. The speed and image quality of a JPEG viewer running on such hardware are largely determined by its quantization algorithm. Depending on whether a quick-and-dirty or good-but-slow method is used, you'll see great variation in image quality among viewers on 8-bit displays, much more than occurs on 24-bit displays. On the other hand, a GIF image has already been quantized to 256 or fewer colors.
JPEG's full color image can be quantized to precisely match the viewer's display hardware. Furthermore, you will be able to take advantage of future improvements in quantization algorithms, or purchase better display hardware, to get a better view of JPEG images you already have.
With a GIF, you're stuck forevermore with what was sent. A closely related problem is seen in many current World Wide Web browsers: when running on an 8-bit display, they force all images into a pre-chosen palette. (They do this to avoid having to worry about how to allocate the limited number of available color slots among the various items on a Web page.) A GIF version of a photo usually degrades very badly in this situation, because it's effectively being forced through a second quantization step.
A JPEG photo won't look wonderful either, but it will look less bad than the GIF equivalent because it's been quantized only once. A growing number of people have better-than-8-bit display hardware already: 15- or 16-bit/pixel "high color" displays are now quite common, and true 24-bit/pixel displays are no longer rare. For these people, GIF is already obsolete, as it cannot represent an image to the full capabilities of their display. JPEG images can drive these displays much more effectively. In short, JPEG is an all-around better choice than GIF for representing photographic images in a machine-independent fashion. It's sometimes thought that a JPEG converted from a GIF shouldn't require color quantization. That is false; even when you feed a 256-or-less-color GIF into JPEG, what comes out of the decompressor is not 256 colors, but thousands of colors. This happens because JPEG's lossiness affects each pixel a little differently, so two pixels that started with identical colors will usually come out with slightly different colors. Considering the whole image, each original color gets "smeared" into a cluster of nearby colors. Therefore quantization is always required to display a color JPEG on a colormapped display, regardless of the image source. The same effect makes it nearly meaningless to talk about the number of colors used by a JPEG image. Even if you tried to count the number of distinct pixel values, different JPEG decoders would give you different results because of roundoff error differences.
To understand how JPEG works, you need to understand a little about your computer display.
An image generated on you computer can be thought of as a table. This table consists of cells, along with the standard rows and columns associated with any table.
Columns |
|||||||||||||||||||||
| Rows |
|
These cells are filled with what your computer display calls "pixels". So if you have your display set at 640 x 480, you have 640 columns and 480 rows of pixels being displayed. For uncompressed images, your computer assigns values for EACH pixel. For instance, pixel 1-1= color 00000001, pixel 1-2= color 00000002, pixel 1-3= color 00000034,....pixel 640-480= color 00000085.
At true color, your computer monitor displays ~24million colors. So I arbitrarily assigned numbers 00000001 - 24000000 to these colors. Your eye is unable to distinguish...let's say color 00100000 from color 00100001. Compression attempts to make noticeable differences the only change visible. For instance, why should a computer display color 000000001 and 00000002 when you can't see the difference? If it displayed 00000001 for both pixels, you most likely would not be able to tell the difference.
JPEG compression attempts to make this display change through the use of a mathematical formula. It obtains a grid from your image and tries to display the grid in a compressed manner. So instead of the above display information, it uses information like pixel 1-1 through pixel 10-10 are color 00000001.
The actual calculation is far more advanced. For those that care it's here.
This is far less information to be downloaded for the image to display. This also explains the "grid" visible when JPEG images are over compressed.
The trick is to reach a happy compression just slightly above the point that the grid (as in the image above) begins to appear. This provides for a faster download which will make your site's visitors happy AND in more visitors which will make YOU happy.
Another thing to keep in mind when doing your web graphics is actual image resolution. If you provide an image that is fully visible to the viewer WITHOUT scrolling, your visitor will be much happier. If you wish to have images that are of high resolution (over 640 x 480), it's a good idea to have a separate link to that high resolution image (perhaps with the use of thumbnails). This makes your site more user friendly...and THAT'S what you want! Make them happy and they will return! I can't count the times that I just stopped a download because the image was just too big to be interesting. After all, I wasn't going to print it...why should I have to download such a high resolution image?
A reminder, a thumbnail IS NOT just the original image with html indications of smaller dimensions. You create a smaller version (for example an image that is 100 x 75 pixels) of the original image and link the larger image to it. If you simply reduce the size in the html, the viewer is still downloading the same file size which is not what is meant by "thumbnail".
A demonstration:
This is the exact same image as the one to the right only with html coding forcing a smaller display. However it is the same file size. Hold your mouse over the images to see the file sizes. |
The idea is to link a thumbnail to the larger image, this allows your visitor a chance to CHOOSE WHAT THEY WANT to see. Once they click a thumbnail, they will expect to wait for the larger image, but remember that they don't expect to wait for an image that is unreasonable in file size for its resolution. |
This is a true thumbnail. It is a different image entirely from the one to the left. |
AOL users, you have an option on your system that will severely detract from your viewing of images. I sincerely suggest that you UNCHECK THIS OPTION!!! It recompresses images (even though they were already compressed) and destroys the quality! If you find that you have this option checked, UNCHECK IT!
| Go to My AOL then to Preferences: |  |
| Once in Preferences, go to WWW |  |
| You will now be in AOL Internet properties, from here select the "graphics" tab. |  |
| UNCHECK THIS THING!!! If it was checked, you will have to clear your temporary internet files because all images recently seen are cached there. (I'll assume you know how to do that because its something everyone should do occasionally. If you don't know how, it's in the "internet options".) Once you have done that, you will notice a STARTLING difference between what you have been viewing...and what the image was supposed to look like! |
 Would you believe this little box can make gray appear pink? |
Let the web do the work for you! Check out GifBot. This little program will not only show you your image status for a page, but will generate various side-by-side compression previews for images on a page AND allow you to choose which one you want! Sadly, many servers may refuse to let you use this service, for instance Xoom and 50megs.
Good luck!
Sources:
Post your images on the web and get advice and/or win awards
Bryce Forum | Digifad | Renderosity | 3D Commune
You are visitor No. to this page.
