Back • Home • Next

(To increase or decrease the text size, hold down
the Ctrl key and press the + or – key.)

 

 

Understanding JPGs and Other Image File Formats
 

JPG or JPEG file format

Most of this article will be taken up with an explanation of the JPG file format, since that is the format that most people use for their pictures.

The JPG file format is compressible, meaning that you can shrink the file size of the image.  However, the compression algorithm that JPGs use is "lossy", meaning that information is permanently lost from the image as it is compressed.  In other words, image quality is degraded as the file size is shrunk.  When saving images as JPGs, you must strike a balance between file size and picture quality.  It is my opinion that, with the proliferation of high-speed internet connections, it is preferable to compress your images very little to keep them sharp and clean-looking.

Most people understand that when you reduce the dimensions of an image (i.e., the visible size of the image on the screen), the file size becomes smaller, but I am not talking about that.  I am only talking about compression of the data that composes the image.  Compressing a picture does not change its dimensions.

Here is an example of a photo at different compression levels.  The compression values quoted are from Paint Shop Pro – Photoshop and Photoshop Elements use a different scale.


1% compression – best quality
file size:  55 kb

10% compression – good quality
file size:  26 kb

30% compression – moderate quality
file size:  19 kb

60% compression – poor quality
file size:  10 kb

90% compression – very poor quality
file size:  5 kb

99% compression – worst quality
file size:  3 kb

No one ever uses 90%-99% compression, but you would be surprised how many people use 60% compression.  To my eyes, 60% compression doesn't look very good.

If you look at the pictures above, you will see that 1% is very clear; 10% is almost as clear (it may, in fact, look identical to you); 30% is starting to show blurriness (called "pixelation") around the edges of the beads; 60% is even blurrier around the beads, and the beads themselves don't look quite as good; and 90% is so blurry that the picture has a blocky, jagged quality.  Now, if 30% looks as good to you as 1%, that means one of two things:  either you don't have a good monitor or your monitor is set to a high resolution (1024 x 768 pixels or higher).  Monitors set at high resolutions don't show detail very well.

I personally believe that 10% is the most anyone should compress their pictures.  If you look at the file sizes, you will notice that compressing the picture 10% cuts the file size in half (more than half, actually).  In my opinion, the additional 6 kb you save by compressing the picture to 30% isn't worth the additional blurriness.  If you are trying to sell your jewelry on the internet, you want to have the clearest possible pictures.

Someone on the Jewelry Making board at About.com had a perplexing problem which you might also encounter:  She reduced the dimensions of a picture (i.e., the visible size) and then saved it, but the file size of the new, smaller image was about the same as the file size of the old, larger image.  How could that happen?  If the old image was saved at a compression level of, say, 60%, but the new image was saved at a better compression level, such as 10%, the lesser compression of the new, smaller image would account for the larger-than-expected file size.  Both image dimension and image quality (i.e., compression) determine the file sizes of JPGs.  (Keep in mind that the information that was lost from the image when it was compressed to 60% was not restored when the image was re-saved at 10%.)

Here are some additional facts about JPGs:  (1) JPGs must always be compressed, even if only 1%.  There is no way to have a completely uncompressed JPG.*  This means that JPGs can never have perfect image quality, though the quality at 1% is near-perfect.  (2) I used the term "pixelation" above to describe the blurry swirls that develop in a picture as it is compressed; another common term is "artifacts".  (3) JPGs have 24-bit color depth, meaning that they can contain millions of colors.  (4) Because JPGs have lossy compression, they cannot have any transparent colors that let the background show through.  (5) Color quality (called "chroma sampling") is set independently of overall image quality.  Thus, to keep the colors from changing, you must set the "chroma sampling" to None.  (6) JPGs, along with GIFs, BMPs and PNGs, can be used on web pages.

* There is a new JPG format called JPG 2000 (see below) which has a no-compression setting, but it has not gained wide acceptance.

GIF file format

GIFs generally have small file sizes, and their compression algorithm is "lossless", meaning that no information is lost and the image is never degraded.  However, GIFs have one serious limitation that makes them a poor choice for pictures:  they are limited to 256 colors.  If your image has 256 or fewer colors, then you can save it as a GIF and have a perfect image.  But let's say that your image has 10,000 colors in it:  Using a good image-editing program, you can reduce the colors to 256 and it may look good, but the image won't be perfect because some of the colors have been lost.

Here is the above picture saved as a GIF:

This picture looks almost as good as a high-quality JPG because the colors are limited to whites, dark blues and grays.  But if the picture had a wide range of colors in it, it wouldn't look very good.  A lot of the color detail would be lost, and the the picture would look blotchy.  The GIF file format is mostly used for web graphics which have a limited number of colors (such as the background on this page).

Here are a few more facts about GIFs:  (1) The compression level of GIFs cannot be set by the user; it is automatic.  (2) You can assign one color to be transparent, which allows the background to show through.  (3) GIFs can have more than one layer (I won't get into layers here).

BMP (bitmapped) file format

The BMP file format is an older file format that has no advanced features.  It is not compressible, yet none of the colors can be made transparent.  It can show millions of colors.  It has no layers.  File sizes tend to be large.  It can be used on web pages.

PNG file format

The PNG file format was developed specifically for the web.  Unfortunately, the file sizes tend to be large, so very few people use it.  Here are some facts about PNGs:  PNG images are always perfect (no loss of information as with JPGs).  They can be compressed (lossless compression only), though not as much as JPGs.  PNGs can have more than one transparent color.  PNGs have layers.  File sizes are usually large, although if the image is simple and doesn't have many colors, the file size can be quite small.

TIF or TIFF File Format

The TIF file format is used widely in the world of computers, but it cannot be used on web pages.  Many people use the TIF format to save flawless "masters" of their images (although I personally prefer the PNG format for masters).  Its features are somewhat similar to PNGs in that the image is always perfect and the file sizes are large.  At this point, I am not sure if TIFs have layers or transparent colors, but I will check.  Like JPGs, TIFs can be made to compress using "lossy" algorithms, but no one uses TIFs in that way.

JPG 2000 File Format

The JPG 2000 format was developed to replace the original JPG format.  It solves most of the problems associated with JPGs (poor image quality at high compression levels; no transparent colors).  However, I don't think this format has gained any significant acceptance among computer-users, and I don't know if it can be used on web pages.