Image File Types and Some of Their Quirks
There are many things to learn and adapt to as a designer. Whether it be the latest software and updates of software, design techniques, or the newest design trends, these are the among the things that we as designers tend to flock to learn throughout our careers. However, there is one thing that we designers tend to leave out on our quest for staying relevant and up-to-date: knowledge of the different image file types available for us to use and how to leverage them in a way that is powerful and beneficial to our general workflows as designers.
The first thing that you as a designer should recognize about the different image file types available out there in the wild, wild Web is that there are a lot of them. For example, you have PNG, PSD, JPEG, SVG, RAW, GIF, and TIFF, just to name a few. And all of these different file types have different purposes within the image exporting process, and covering the nuances of each and every one of these would make for a very extensive article. Because of this, I will cover what, in my experience, have been the most important and useful insights from my own foray into the 4 most common image file types on the web.
1. JPEG
Ah, the JPEG. Perhaps the most common type of image out there on the Internet. The term JPEG is short for Joint Photographic Experts Group, and the file type itself is considered lossy — which means that whenever you save and export this file type, information is lost from the image, resulting in image quality degradation.
The JPEG’s lossy quality allows its file sizes to be quite small, which is great for an environment like the Web, where download speed is the factor that can make or break a person’s online experience. Also, nearly every digital camera out there — from smartphone cameras to DSLRs — can shoot in the JPEG format, which adds to its near omnipresence on the web.
Pros:
- 24-bit color, all with up to 16 million colors
- Colors are rich, which is great for photography that requires fine color detail
- Most used and widely accepted image format on the Web and beyond
- Compatible with Macs, PCs, and Linux
Cons:
- Tends to lose a lot of image information/data
- After compression, begins to create artifacts (pixelation)
- Does not support alpha-transparency
2. GIF
Oh, GIF (jiff?). The source of much of the fighting and quarreling that exists on the great web today. GIF is short for Graphics Interchange Format, and the file format itself is limited to an 8-bit palette with 256 colors. It has become one of the most widely used formats on the internet today due to its small file size.
The GIF compresses images in two ways: first, it reduces the number of colors in color images, which reduces the number of bits per pixel. Second, the GIF replaces large patterns with just one pattern — this means that instead of storing 50 different shades of grey, it only stores one. Awesome. This algorithm for image compression, and the fact that it is lossless, makes the GIF most suitable for graphics, diagrams, cartoons, and logos that involve relatively few colors. The GIF can also be animated, which has paved the way for many beautiful animations on the Web that don’t require a huge file size.
The GIF image format also has a neat feature known as interlacing, which gives the illusion of a GIF image loading quickly. While being loaded in a browser, the GIF image first appears blurry or fuzzy, but as more data is downloaded, it becomes clearer until the entire image is downloaded, resulting in the final, beautiful GIF image.
Pros:
- Supports transparency
- Can be animated
- Lossless in nature — although it still only contains 256 colors
- Fantastic for images with limited colors, or with large regions of one color
Cons:
- Only supports up to 256 colors
- The file size may sometimes get larger than a PNG file
3. PNG
The PNG — otherwise known as the Portable Network Graphic — is a format that was introduced as a web-standard image format in 1996. It is an image format that was specifically designed for use on the Web, and is, in a sense, the superior version of the GIF image format. In fact, the PNG was actually created to replace the GIF — who knew?
The PNG can 24-bit RGB color and greyscale images, all with and without alpha channels. These alpha channels are what pave the way for alpha transparency, which allows the image to behave like the image below. It is also important to note that the PNG format was not designed for use in print, thus it cannot support CMYK color spaces.
Pros:
- Lossless, so it does not lose any image information/data
- Supports alpha channels for alpha transparency
- Often creates smaller file sizes than the similar GIF format
Cons:
- Not too great for large images — large images tend to create a large file size upon export that exceeds those of the JPEG
- Cannot be animated
4. TIFF
The TIFF, also known as the Tagged Image File Format, was developed by Aldus — although it is now being developed by Adobe Systems. It was originally creating for desktop publishing, which has allowed it to flourish in the fields of graphic design, publishing, and photography.
The TIFF’s design makes it quite easy to use with software that deals with page layout, photo manipulation, and publishing — such as Adobe’s Photoshop and Illustrator. It is also a format that is very flexible in use due to its ability to be compressed into several formats, like JPEG, LZW, and ZIP, and its ability to be either lossy or lossless. Additionally, it can record halftone image data with different pixel intensities, which allows it to be great for printing.
Pros:
- Extremely flexible format
- High-quality, lossless format
- Can be exported with layers — useful for editing in software like Photoshop
Cons:
- Very large file size
Well, there you have it. The most important aspects of image formats that I can think of, all in a concise manner for your pleasure to read through. I hope that the information in this article has been helpful and has taught any of you readers something new.
