JPEG, GIF, or PNG IMAGES?

JPEG, GIF, or PNG? Image Filetypes Explained and Tested

Written by Dann AlbrightFebruary 11, 2016

Do you know the differences between JPEGs, GIFs, PNGs, and other image filetypes? Do you know when you should use one instead of the other? Or which is best for storing your photos? How about the difference between lossy and lossless compression? If the answer to any of these is “no,” you might be using the wrong image filetype! Here are the basics you need to know.

(If you don’t want to know the specifics, and just want to know which filetype you should use, skip to Which Image Filetype Should You Use? at the bottom.)

Lossy vs. Lossless Compression

An important distinction that you’ll need to understand is lossy vs. lossless compression. In lossless compression, the file size of an image is reduced, but the quality remains the same. This is true no matter how many times the file is decompressed and recompressed—the same amount of visual information will always be present, and the quality of the image remains stable.

Lossy compression, as you might expect, reduces the quality of the image, as information is lost every time you de- and recompress the file. The big advantage of lossy compression techniques, however, is that files can be made much smaller (you’ll see just how much smaller as we work our way through the filetypes).

The amount of detail that you need to retain in your image should determine whether you use a lossy or lossless compression format. For storing your photos, lossless will definitely be better, as you won’t lose information when you open them back up for editing. On the other hand, lossy has advantages for sending them via email or posting online.

RAW

You get RAW files straight from your DSLR. The RAW file is exactly what it sounds like—the raw picture file, with no compression applied. Every piece of information that your camera captured is contained in the raw file. For this reason, these files are huge—they can easily top 25MB each. And while that’s great for photo editing, it’s not so great for photo storage, which is why image compression exists.

For the purposes of this article, I’ll be using a test photo to see just how much each compression technique saves in size and what they do to quality. I can’t display the raw photo in the browser, but looking at the high-quality JPEG or PNG photos should give you an idea of what the original looks like. Also, for the purposes of comparison, the raw photo file is 12.4 MB.

JPEG

Possibly the most common image format, JPEG (or JPG) is the Joint Photographic Experts Group standard, and is often used for posting photos and images of text to the Internet (most of the images you’ll see on MakeUseOf are JPEGs). The format supports 24 bits per pixel, 8 each for brightness, blue, and red, making this a “truecolor” format that can display over 16,000,000 colors.

Although it can create very high-quality images, JPEG can be disadvantageous in that it’s a lossy compression format. This is why you’ll often see low-, medium-, and high-quality options when you export an image as a JPEG. Each option decreases the amount of compression applied and increases the quality of the photo.Here’s the test photo in high-, medium-, and low-quality JPEG formats, with their respective sizes:

JPEG high quality (quality set to 100) size: 471 KB.

JPEG medium quality (quality set to 50) size: 68 KB.

JPEG low quality (quality set to 20) size: 32 KB.

In general, a high-quality JPEG is usually a good compromise between size and quality. Once you get into mid- and low-quality JPEGs, though, quality will suffer significantly. Also, JPEGs tend to be best for photos or drawings, which have fewer sharp transitions than text.

GIF

The Graphics Interchange Format allows for 8 bits per pixel, three each of red and green, and two for blue. This makes 256 colors available for GIFs, though it is possible to get more colors into the image using multiple color blocks with different 256-color palettes. Using lossless compression, GIFs are able to reproduce their limited color palettes perfectly over multiple de- and recompressions.

Here’s the test photo encoded as a GIF:

GIF size: 194 KB.

As you can see, the size is relatively small, but the lack of color depth really hurts the quality of the image (it’s especially evident in transitions between light and dark, such as inside the rim of the blue pot with the yellow flower on the right side of the photo).

The other important thing to know about GIFs is that they can be animated, which has all sorts of cool uses. Using multiple image frames drawn in order, the appearance of motion can be generated. Beyond creating animations, the GIF format is rarely used due to its limited color space.

PNG

Designed as a replacement for GIF, the Portable Network Graphics filetype is another lossless format, but it includes significantly more information than its predecessor: it can contain either 24 or 32 bits per pixel. The 24-bit version contains RGB information, while the 32-bit version uses the RGBA color space. The “A” in RGBA stands for “alpha,” which allows for different levels of transparency in the image (when you see a checkered background like the one below, it usually indicates transparency).

Because it contains so much more information, a PNG file will be quite a bit larger than a JPEG or GIF (though there’s an increase in quality, as well).

PNG size: 1.5 MB.

Using the example photo, the PNG doesn’t look any better than the high-quality JPEG, though it’s important to remember that lossless compression will maintain the quality of the photo over multiple de- and recompressions. Also, if transparency is important, PNG is the way to go.

TIFF

The Tagged Image File Format was originally developed for use in scanners, and has gotten increasingly complex as scanners have moved from binary to greyscale to full-color. It’s now a commonly used full-color filetype. TIFFs can be saved either compressed or uncompressed, and the compression used can be either lossy or lossless. In general, if they’re compressed, they’ll use lossless compression, though if size is an important factor, lossy can be used.

Because TIFF is technically a file wrapper or container, and not a filetype, it can save images with a variety of different bits per pixel, giving you the option of having a very high number of colors, as you would with JPEG or PNG. (Note: because TIFF support isn’t universal in browsers, I’m posting high-quality JPEG screenshots of the TIFF files.)

Uncompressed TIFF size: 2.2 MB.

Compressed TIFF size: 1.6 MB.

Again, these lossless image files are quite a bit larger than JPEG or GIF formats, but they retain a great deal more information. Although you don’t see TIFFs online as much as other formats, they’re very widely used, and can be opened by just about any image editing program.

BMP

This is an old format that isn’t used very often anymore—in fact, when I tried to upload the test photo to our site, my browser almost crashed and the tab became unusable (though the image was only 1.1 MB on my hard drive, WordPress thought it was much larger). I’ve posted a screenshot of the BMP in high-quality JPEG format below so you can see what it looks like, and in case you come across one, here’s what you need to know.

BMP (bitmap) is primarily a Windows-based format, and the standard is maintained by Microsoft. Like TIFF, it can store an arbitrary number of bits per pixel, up to 64, meaning it can retain a lot of image information. This format can store transparency data, but some Microsoft applications don’t allow the reading of it. In short, if you have a BMP, convert it to something else. Everything will work better.

BMP size: 1.1 MB.

Which Image Filetype Should You Use?

After all of these details, you still might be asking which filetype is the best. The short answer is that for most purposes, PNG is a very safe bet. It’s an especially good choice if your image files are large in size, such as the ones you’ll need to print 8″ x 10″ and larger photos. At 640px wide, the images in this article aren’t big enough to make the differences between filetypes extremely apparent, but you’ll definitely see them in printed photos. And lossless compression means quality will be maintained over multiple compression cycles.

If you need a greater degree of compression, such as for sending photos via email, a high- or even mid-quality JPEG will likely be just fine. TIFF is mostly useful if you know how to tweak specific settings, and both GIF and BMP should be avoided (unless you’re creating animated GIFs). It’s a good idea to keep RAW files around so you can always edit your photos directly from the source.

Do you agree with this assessment? Which image filetypes do you use most often? What advantages and disadvantages do you find you come across? Share your thoughts below!

Image credits: Alexandru Nika via Shutterstock.com, ed_g2s via Wikimedia Commons.

Source: www.makeuseof.com

 Share  Tweet  Pin  Stumble  Bookmark  Mail