Get business trends, tips & design ideas straight into your inbox!
All our subscribers stay ahead of the game with exclusive content and updates. Join the community!
You’ve probably come across different image formats online, such as PNG, JPEG and GIF. Although these graphic file formats do differ in size, function, and appearance, they ultimately belong to one of two categories: raster or vector.
In this article, we’ll be covering all the things you need to know about the two image file types and the differences between them. Additionally, we’ll also be listing all of the specific file formats that belong to each category.
First of, let’s get started with raster images.
A raster image is any image that is captured with a camera or created using a pixel-based program. Raster graphic file formats allow for a subtle and complex transition in color and are often used for painting. For example, if the image were to have a lot of shadows, a raster image file format should then be used.
Furthermore, raster images are also popularly used in order to share images online.Although normally detailed and photorealistic, raster images can become blurry or develop jagged edges when enlarged. This is because each raster image contains only a limited number of pixels. Enlarging a raster image will require the program in which we view it in to add in extra pixels, resulting in a blurry picture.
Another downside of raster images would be their large file size. To offset that, raster images often use a “quality” setting that allows you to lower the quality through compression. By doing this, you’ll be able to get a smaller file. However, today, that is typically not a problem, unless you’re handling literally millions of files.
JPEG (or JPG) – Joint Photographic Experts Group
Initially developed in 1992 by a consortium of large tech companies, JPEG is the most popular image file format online. This is due to it being the default way in which digital cameras save images. JPEG images use what is known as a “lossy compression” to approximate image details and reduce the file size by up to 90%. However, image quality may suffer tremendously as a result.
PNG – Portable Network Graphics
Originally envisioned by a group of graphic enthusiasts in 1997, PNG wasn’t widely used as file format until 2004. PNG has the feature of “lossless compression” that perfectly preserves the details but may shrink, enlarge, or maintain the file size depending on what’s shown in the image. The main upside of PNG files is the ability to have transparency channels, giving it great flexibility for layered images.
GIF – Graphics Interchange Format
Pronounced with a hard ‘G’ and not a ‘J’, this animated image file format was created way back in 1987 by CompuServe, the first US-based ISP. It excels in portraying low-quality animated slideshows, which serve as extremely portable video files. Yet, GIF is a fairly limited format in terms of color as it is only able to display at most, 256 different colors at a time. Similar to PNG, GIF files also use lossless compression, resulting in varying file sizes depending on the image content.
TIF (or TIFF) – Tagged Image File Format
This well-established graphics format was created in 1986 and is now widely used by professionals for everything, all the way from printing to faxing. Compared to the other file formats, TIFF is more akin to an image archive. It is capable of storing both raster and vector image data in a single file using lossless compression.
PSD – Photoshop Document
PSD is a proprietary image file format that belongs to and is maintained by Adobe since 1988. PSD allows for nuanced color, layer, text, transparency and other types of editing. While it is still considered as a raster file format, it is perhaps the richest of them all, allowing resolutions up to 30,000×30,000 pixels and files of up to 2 GB in size.
Vector image files are those that are created using drawing or graphic design programs. Essentially, a vector is a line that connects two points. In graphic design, vectors are used for drawing clear outlines that do not become blurry when magnified.
Compared to raster file formats, vector file formats do not have the same amount of richness in terms of colors and shadows. For this reason, they are mostly used for simple shapes that don’t require much photorealism, such as logos. Vector images do not have the jagged edges that raster images tend to have when displaying spirals and rounded edges. Additionally, they greatly support gradients, which are overlapping areas of color that allow for a smooth color transition.
What’s good to take note of is that it is actually possible to transform a raster image into a vector image and vice versa. However, some quality loss will be inevitable either way.
PDF – Portable Document Format
EPS – Encapsulated Postscript
This file format combines vector graphics and text into a single file. It’s most commonly used by Adobe Illustrator, AutoDesk, CorelDRAW and other vector-based graphics programs. The file itself is designed to be used along with printers, hence why it contains printing commands. Today, the EPS file format is considered to be well beyond outdated.
AI – Adobe Illustrator Document
Here’s another proprietary file format made by Adobe. However, this time, it was created specifically for Adobe Illustrator in 1985 from EPS. Over time, Adobe added graphics improvements that EPS inherently didn’t have, and this was how AI file format came about. The AI file format actually contains proprietary versions of data that can be worked on in Adobe Illustrator and another in PDF, which can be turned off to reduce file size. However, if this is done, the file will lose its compatibility with other graphics programs.
INDD – Adobe Indesign Document
Adobe’s INDD file format is used for mainly used for brochures, e-books, and other publications. Yet at the same time, it also supports coding through XML and markup. The idea behind INDD was to create a universal standard for both PC and Mac. This way, publishers are able to use these files across all devices. Similar to AI, INDD file format is in essence a PDF file with improvements. However, in this case, they are more used for texts rather than images.
JPG, GIF, PNG and other file formats try to represent an image using a bunch of data. However, they still take advantage of how the human eye works to cut down on colors shown and reduce file size. On the other hand, RAW image formats are actual (raw) data captured by a camera or some similar device, without any processing or approximation.
There are up to a hundred RAW image file formats, with each hardware company having its own. The idea behind using a RAW format is that the hardware creating the image removes some defective pixels before storing the image as JPG, PNG or any other common format. By working with RAW file formats, we get the chance to work with those “defective” pixels and are able to get much richer image editing options.
Each file format has its own strengths and weaknesses that only come into play when you want to start editing images. For a regular user that snaps 1-2 pictures a week and shares them online, image file formats make very little practical difference. However, for a professional who edits hundreds of images a day for a living, using a particular format matters a whole lot.
Choosing the right file format will depend on the kind of effect you are most interested in. For example, PNG excels in transparency, so if you want to create 2D images that appear layered as if they’re 3D, you should definitely use PNG. If you’re working with photos, then you can use JPG, but if you’re the ones taking the photo, you should consider using RAW formats so that whoever works with them later on has the full range of editing options.
Finally, the hardware you’re using will matter too. If it happens that you cannot afford Adobe Creative Suite, you can use whatever that works for you across all devices. In short, the file format you choose to use should be whichever one that makes your life and work the easiest.
JPG images work best when there’s a rich color and object variety in the scene. This way, any blurriness and jagged lines are easily overlooked by the average observer. However, if you want to make the image larger, resizing it will diminish its quality. In this case, you would have to go back to the initial steps and use a better camera. However, this will not be necessary if you’re trying to decrease the size of the image.
In contrast, PNG file format is best used when cropping photos and layering them on top of one another, which is commonly termed as “photoshopping”. All JPG images have a solid white background but PNG images have a transparent background, which allows for a much nicer fit of different elements.
JPG can present an image with some compression, which offers you a lot of flexibility when uploading thousands of them to a website. 1% compression on a JPG will result in a negligible quality loss but may reduce the file size by 4-5%. When you’ve got millions of images, using JPG can save you a lot of money and bandwidth. Of course, if you’ve got the budget, that might not matter. However, it is still an important factor to consider when working with these image files.
The main advantage of PNG is in its transparency, however this might not be fully supported by all browsers. Keep in mind that outdated software and hardware are common, meaning that a fancy PNG image might not appear as you expect it to be to all users.
A PNG file can get quite big, especially while you’re still working on it. If size and compatibility isn’t a concern to you, PNG files should always be your first choice, but only until the editing process is finished. Once the image is completed, you should probably use some other format that’s more suited to whatever it is you want to accomplish.
The GIF file format is great for simple, quickly consumed animated content that doesn’t require any user input to play around with. GIF was originally a static image format but was soon adapted to behave like a video file in the early days of dialup internet that was both slow and expensive.
Granted, GIF files have poor image quality but the format is extremely well supported by both hardware and software. Nonetheless, be careful not to combine text and GIFs on the same page. Either go with just text or with GIFs but avoid the combination since the two together can be too distracting.
Whenever you have high-quality raster images for printing, TIFF is often the most suitable file format. It’s also the best format for storing HD images without taking up too much space. TIFF file format’s compatibility with various software and hardware is superb and the flexibility in terms of editing options is astounding. Only graphics professionals and experts who deal with HD images on a daily basis should only ever concern themselves with TIFF.
Photoshop is a part of Adobe Creative Cloud’s group of programs that are meant to work together. This means that you’ll most likely be using it alongside all the other Adobe graphic design programs, such as Illustrator. Although the PSD file format does have an admirable level of compatibility with programs outside the Adobe suite, you should still only try to use it with Photoshop. In other words, use PSD only when you’re using the Adobe Creative Cloud suite of programs.
RAW file formats typically require proprietary software for editing, but it will provide you with complete control over every pixel in the image. Everything from sharpness to contrast and saturation can be altered in any way that you want without the loss of image quality. However, unless you are a professional photographer or a designer that deals directly with them, it’s unlikely you’ll ever have to deal with RAW file formats.
PDF file format is best known for text documents but the format actually allows for all sorts of rich multimedia additions, such as hyperlinks and images. If you want to create a detailed presentation or a fancy report with graphs, texts, images and hyperlinks, consider using PDF.
EPS file format is largely outdated and there’s no need to ever use it unless absolutely needed. However, plenty of big companies has at least one department with outdated hardware and software where the only image file format that makes sense to use is EPS. Simply put, it’s only used in situations where no other file format works.
When to use AI
Being another file format from the Adobe Creative Cloud, AI is best used when you’re searching for the highest degree of cross-compatibility (a.k.a when you’re already using the rest of Adobe products). Although it is still possible to use a third-party program for AI files, simply opening and editing an AI file across the Adobe suite will make it much easier for you. This will help cut down all the time needed to work on your project.
All in all, we hope that this article has been helpful in understanding the differences between all the raster and vector image file formats as well as figuring out when to and when not to use a certain file type. Some file types will be better for specific purposes, hence be sure to take note of all the information given. If you are a professional designer, this can save you a lot of time and hassle when working on your next design project!
Besides having grown up in the design Industry, Christiaan has advised some of the world’s largest companies on their branding & packaging designs. Has been the resident judge for design awards, and has spoken at numerous global design & marketing events. Christiaan founded the London office of the award-winning Cartils agency, and has founded the DesignBro.com platform.
All our subscribers stay ahead of the game with exclusive content and updates. Join the community!