Most Common Image File Types: Your Ultimate Guide
Did your designer send you a whole bunch of files after you approved the design, but you don’t know why?
While the design may look the same in all those files, there are subtle differences that can ruin the quality of your work if you use the wrong format.
That’s why in today’s post, I'm going to tell you everything you need to know about common image file types, their usage and the terminology surrounding them.
Well, not exactly everything…
I won’t bore you with a history lesson or all the technical intricacies involved. On the contrary, I’ll only share practical information that will help you choose the right format for your needs.
Nothing more, nothing less.
Sounds like a fair deal? Let’s jump right in.
A Little Bit of Terminology
Before we get into all the different file types, there are few terms you should know. But don’t worry, I’ll make this quick.
1. Raster vs Vector
All image files generally fall into one of these two categories.
A raster file is made up of plain old pixels. That means it has fixed dimensions and hence can’t be scaled. Well, technically you can change its dimensions, but that usually results in a pixelated mess brimming with blur.
A vector file, on the other hand, is made up of pixels tied to mathematical equations. That means a vector file can be scaled up or down to any size without any loss in quality whatsoever. However, vector files generally lack the details of a photograph.
2. Lossless vs Lossy Compression
Most image file types use compression to reduce the size.
One way to do that is by optimizing against redundancy by storing repeated pixels more efficiently. That way none of the original details are lost when the image is uncompressed. And that’s lossless compression in a nutshell.
However, that can only get us so far. That’s why some formats include another process where the finer details of the original image are eliminated to reduce its size as much as possible. And that’s known as lossy compression.
The 8 Most Common Image File Types
With basic terminology out of the way, let’s talk about the most common types of image files you should know about:
1. JPEG
| Full Name:⠀ | Joint Photographic Experts Group |
| Type:⠀ | Raster |
| Compression:⠀⠀ | Lossy |
| File Size:⠀ | Small |
JPEG is the most common image file type on the internet as it can be compressed significantly, thus reducing the loading time. Plus, it also supports progressive loading, which means the image starts blurry but gets clearer as it loads up.
However, depending on the level of compression you use, the quality may suffer significantly. On top of that, every cycle of compression and decompression worsens the quality, which makes it a bad fit for any editing.
Good For:
- Photos and artwork
- Embedding images in documents
- Banners and other large web graphics
2. GIF
| Full Name:⠀ | Graphics Interchange Format |
| Type:⠀ | Raster |
| Compression:⠀⠀ | Lossless |
| File Size:⠀ | Small |
GIF is the name of the game if you’re looking for an image format that supports both animation and transparency. It’s been around for so long that pretty much every device and browser supports it.
Plus, it offers one of the most customizable compression as you can reduce colors, image information and so much more — thus allowing you to adjust the size based on your needs.
Unfortunately, GIFs only support a maximum of 256 colors. While that may seem like a lot, the average image contains thousands of colors.
Good For:
- Animated banners
- Good old memes
3. PNG
| Full Name:⠀ | Portable Network Graphics |
| Type:⠀ | Raster |
| Compression:⠀⠀ | Lossless |
| File Size:⠀ | Medium |
PNG is also popular on the internet as it offers adjustable transparency, which means you get more control than just an on/off switch. If your image is made of simple graphics such as a logo or an icon, you should give PNG a shot.
While PNG can technically store photos and complex illustrations for the web, it’s generally not a good idea because its lossless compression will bloat up the file size.
Good For:
- Illustrations with limited colors
- Logos, icons, and other simple graphics
4. EPS
| Full Name:⠀ | Encapsulated PostScript |
| Type:⠀ | Vector |
| Compression:⠀⠀ | Lossless |
| File Size:⠀ | Small |
EPS is the first vector file on our list so far. Its purpose is perhaps the simplest as it was made to store a single design element to be included in a larger design later. However, it can also be used to store text, raster images, illustrations, and vector artworks as well.
Many printers prefer the EPS format for high-quality documents and marketing materials.
As far as cons are concerned, most computers can’t open an EPS file by default. You’ll to install special editing software to do so.
Good For:
- Icons, logos, and other small graphic elements
- Printing high-quality documents and marketing materials
- Any vector artwork
5. SVG
| Full Name:⠀ | Scalable Vector Graphics |
| Type:⠀ | Vector |
| Compression:⠀⠀ | Lossless |
| File Size:⠀ | Small |
SVG is the format of choice for responsive website and application designs. It’s so widely used in web design that you can add it to the HTML code directly and apply all sorts of CSS styling to it.
Fun fact: You can actually open an SVG file using a text editor and see all the draw commands in it.
As with all vector formats, SVG doesn’t offer the high color depth necessary for many images.
Good For:
- Displaying icons, logos, and other small elements on the web
6. RAW
| Full Name:⠀ | RAW |
| Type:⠀ | Raster |
| Compression:⠀⠀ | None |
| File Size:⠀ | Large |
As the name suggests, RAW images contain unfiltered data directly from the sensors of your camera. There is no compression or touching whatsoever and hence even the tiniest of the details remain intact.
Unfortunately, that’s where the good news ends. For starters, any image in its raw form is massive in size. In fact, it’s usually 5 to 6 times larger than a good quality JPEG.
Secondly, this is a non-standardized format so there are many different extensions such as CRW (Canon), NEF (Nikon), and ERF (Epson).
Good For:
- Editing photographs using Adobe Photoshop
7. BMP
| Full Name:⠀ | Bitmap Image File |
| Type:⠀ | Raster |
| Compression:⠀⠀ | None |
| File Size:⠀ | Large |
BMP is a processed version of RAW images that is independent of the display device. It was made by Microsoft for Windows OS as a standard format for RAW bitmaps but is no longer relevant.
Good For:
- Nothing. It’s an obsolete format that serves no purpose anymore.
8. TIFF
| Full Name:⠀ | Tagged Image File |
| Type:⠀ | Raster |
| Compression:⠀⠀ | Lossless |
| File Size:⠀ | Huge |
TIFF is a high-quality image format that is used by most scanners and professional digital cameras. Not only do TIFF files offer lossless compression, but you can actually edit them countless times without affecting the image quality.
One major drawback of TIFF files is their size, as they can even get larger than RAW files in some cases.
Good For:
- Photo editing
Printing enormous photos
Storing scanned documents
Let's Talk About Source Files
Did you read through the entire list of common image file types above but still couldn’t find the format your designer has sent you?
Odds are, you’re looking at a source file.
A source file is usually a proprietary format used by a specific digital design program. As such, you can only open a source file using the program that created it in most cases.
The great thing about source files is that you can scale and export your project to any supported format using them. Their biggest appeal, however, is the ability to directly edit the designs instead of recreating from scratch.
That’s why you should always request a source file when a project is completed. That way you won’t be locked to the original designer and may hire someone else to make any edits later.
Now that you know why source files are important, let’s talk about the four most common ones:
1. PSD
A PSD is a proprietary file type used by Adobe Photoshop to create and store layered images. Plus, it’s fully editable as you can change any element from any layer.
You’ll most commonly run across a PSD when working on a project that involves retouching photos, editing artwork or designing mockups.
2. AI
AI is used by Adobe Illustrator to create and store vector images. While many people think it can only contain vector files, the truth is that you can also link or embed raster images in it.
This format is most common in vector design projects such as logos, icons, and illustrations.
3. SKETCH
To open a SKETCH file, you need the vector drawing application Sketch, which is pretty much the only non-Adobe design program on this list.
This format is commonly used in vector-based UX and UI projects.
4. XD
Yet another proprietary format by Adobe that is used by their prototyping tool called Adobe XD.
This format is commonly used by user experience and interaction designers to create wireframes and prototypes for web, mobile, and desktop applications.
Conclusion
With the common image file types and source files covered, you now have a great practical understanding of each. You know when to use each format and which program to open it with. Heck, you even understand enough terms to discuss image types with a professional designer.
But the thing is:
If you’re like most people, you’ll probably forget all of this by next week — if not the next morning.
I know because that’s something I struggled with when I was getting started. Plus, I’ve seen the same pattern repeat countless times with others as well.
And that’s why I’ve been collecting some of the most common design terms in a neat little document on my computer. I call it the “Design Terms Cheat Sheet”.
If you’ve ever struggled with following a design tutorial or communicating your ideas to a professional designer, my cheat sheet is exactly what you’re looking for.
It contains a super concise explanation for all the essential design terms wrapped in an easily accessible structure. So once you download it, you’ll never have to sift through headache-inducing articles stuffed with technical jargon — just to find the right term.
Sounds like something you could use? Click here to grab your copy today!
Cheers to your next great looking design!
Want more tips like this?
Get them, resources, and more delivered to your inbox: