Image File Types Explained 2016 | Lunamik FaceBook Twitter
Sign up to the Newsletter!

For the latest news on film,
branding, photography and design.

Blog

All You Need to Know About Image File Types

By lunamik / May 18, 2016
Industry

When saving or exporting your images, you’ll find that there’s a number of different file types out there: some work better for print, some work better for web and others work better for illustrations. If you’re puzzled about which ones to use and when then you’re definitely not the only one. That’s why Lunamik is has created a simple, no-nonsense guide for you to follow!

Before we jump straight in, it’s important quickly grasp the concept of image compression. Some image file types are capable of becoming smaller, which makes them load quicker on the web and will allow them to fit within emails for easy transfer. However, to achieve this small file size, some file types will have to sacrifice things like colour range and image quality. This type of compression is called ‘lossy’ — think of it as the image ‘losing’ something when it sizes down. On the other hand, we have ‘lossless’ file types. As you may have guessed, these file types don’t compress the image. Instead, they retain the image as you originally found it. Great for print designs and illustrations, but not so great when you want your images to load quickly — more on this later.

Regardless of compression, all image file types fall into two main categories: Raster and Vector.

Chart that compares Raster and Vector

Unless you’re a graphic designer, odds are that you’re going to be working with raster image types a lot more, so let’s start with them. (Sorry Graphic Designers!)

JPG (JPEG)
JPG is most ideally used for photographs on the web as this file type supports a range of 16 million different colours, which means that your photos will always be colour accurate to what you captured. In addition, JPG uses a lossy compression method, meaning that you can optimise your photos to achieve a perfect balance between small file sizes and high quality. This is especially important if you’re wanting to upload images to your website, as you’ll want your images to load as fast as possible while retaining a decent, crisp quality.
However, a JPG can’t have a transparent background so they will always assume the shape of a rectangle, no matter what you do to it.

Summary:

Best used for: Rectangular photographs and website images.
Not so good for: Lettering, simple cartoons and illustrations, or black-and-white line drawings

PNG
PNG is another raster image type. Unlike a JPG, PNG is a lossless format, so it will retain much higher quality graphics. Plus PNG supports transparency which means you can create different shapes with your image. This makes it perfect for logos and icons. However, an important thing to remember is that PNG will often output larger file sizes which means if you save digital photographs as a PNG they will result in unnecessarily large files which aren’t so great for web optimisation. So it’s best to use PNG formats when your image contains few colours and sharp edges, like an illustration, cartoon or icon.

Summary:

Best use for = logos, icons and other images where a transparent background is preferred.
Not so good for: Digital photos with varying colour changes.

GIF
As of late, GIF has been more commonly associated with moving pictures. You’ve most probably seen them in the form of memes or looping images. However, animating GIFs isn’t the only thing you can do with this image format. Similar to PNG, GIF is a lossless file type, however, it only supports a very limited colour range of 256 colors. This makes it the go-to choice for buttons, icons and any graphic with very few colours and no gradient. But you should steer well clear of GIF’s if you intend to save digital photos and complex illustrations as its limited colour scope will limit it from replicating natural shading and colour changes. You wouldn’t want to use a GIF for a photograph.

Best to use for = simple web graphics such as web buttons, charts and icons.
Not so good for: digital photos and photo editing

TIF (TIFF)
A TIF is a large raster file — think of it as the JPG’s big brother. Like PNG a TIFF is a lossless format and is great for editing digital photos as it retains all the original quality of the image. However, due to their larger file sizes, TIFF isn’t so web-friendly and their load times may turn painfully slow, so it’s best to use TIFF on projects designed for print.

Best to use for = images and photographs for high quality print.
Not so good for: Online images and online graphics

Great! So you’ve already covered the fundamentals of raster images. Now onto vectors. Even though you may not use vector images nearly as much, it’s important to have a basic understanding of how they work so you can design your own graphics, or properly collaborate with a designer when the time arises.

Put simply, vector files are designed to be edited or to retain crisp edges within a graphic. With the right editing tools, you can change everything within a vector, it’s colour, shape, size, line, curve and beyond. That’s why they are commonly used to create logos and custom shapes. If you’re having your website redesigned, your designer will most likely ask for you to transfer them your logo via a vector format. This will allow them to seamlessly adjust the size, quality and placement of your logo or further refine the design.

Here are the different file types for vector images:

EPS
An EPS file is solely used for graphics, text and illustrations, and cannot be used for photos. As vectors are designed to be malleable, an EPS can easily be shaped to any size it needs to be. Plus, an EPS is compatible with most graphic editing software.

Best use = master logo files and graphics and print designs.
Don’t use for:

AI
Unlike EPS, AI file is a proprietary vector type created by Adobe which means this file can only be created or edited with Adobe Illustrator. Like an EPS, AI vectors are commonly used for creating logos, illustrations, and print layouts.

Best use = creating logos, graphics, illustrations.

When you export your vectors into PNG and GIFS etc. It’s important to keep in mind that raster files can’t be edited like vectors can. So be sure to keep a copy of your original vector files when designing and exporting graphics.

Lunamik loves educating our reader base on the itty-bitty technicalities that accompany digital media, because when you’re starting out, there can be an overwhelming amount. Now that you’ve got a handle on Image File Types check out our artcile on Video File Types.