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.
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 reduces the quality of the image, as information is lost every time you decompress 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.
Let’s have a look at the different image filetypes.
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 this article, we’ll be using a test photo to see just how much each compression technique saves in size and what they do to the quality. We 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. For the purposes of comparison, the raw photo file is 12.4 MB.
JPEG (or JPG) is the Joint Photographic Experts Group standard. It’s possibly the most common image format and is often used for posting photos or images of text online. This 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-quality, medium-quality, 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.
Below is the test photo in high-quality, medium-quality, 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 to medium and low, the quality will suffer significantly. JPEGs tend to be best for photos or drawings, which have fewer sharp transitions than text.
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 decompressions and recompressions. Below is a 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.
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 above, 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 decompressions and recompressions.
At 640px wide, the PNGs in this article aren’t big enough to make the differences between filetypes extremely apparent, but you’ll definitely see it in printed photos, which makes this format ideal for printing 8″ x 10″ photos or larger. And if transparency is something you want as well, PNG is the way to go.
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, but 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.
Because TIFF support isn’t universal in browsers, below are high-quality JPEG screenshots of our 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.
This is an old format that isn’t used very often anymore—in fact, when we tried to upload the test photo to our site, the browser almost crashed and the tab became unusable (though the image was only 1.1 MB, the system thought it was much larger).
Below is a screenshot of a BMP in high-quality JPEG format 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.
For most purposes, PNG is a very safe bet, especially if your image files are large in size and you want to print them. 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-quality or even mid-quality JPEG will 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.
Are JPGs and JPEGs the same? Or something completely different?
About The Author