Design, Print, Website  /  12.1.15  / 6-min read

.WHAT? Image File Formats Explained

Why are there so many image file formats? In truth, each image type is special in its own way, and has its own role to play in the world of design. Some files are better for digital designs, while others are preferred for print projects. Not knowing the difference can dramatically affect the quality of your designs. 

Does the following sound familiar? You’re saving an image on your computer, and suddenly you’re presented with a laundry list of options for file types: .JPG, .PNG, .GIF, .PDF, .TIF—my gosh, the possibilities are endless! You think to yourself, Self, how did I get so lucky to have this smorgasbord of image file extensions to choose from? How will I ever pick just one? I’ll just go ahead and close my eyes and pointWAIT! There’s something you should know. This choice matters.

I would liken it to choosing an outfit in the morning. If it’s freezing outside, you’re probably not going to slip on flip flops and your favorite jorts. Could you still technically walk around in that outfit all day? Sure, but you might not feel and look your best! Images are the same way—you want to choose the file type that is most appropriate for the situation so it will both look and perform its best.

 

Let me walk you through the who’s who of image file types. We’ll start with the two major image groups—raster and vector.

 

1. Raster

Raster images are made up of lots of little different colored pixels that come together to form a complete image. They are capable of displaying many colors as well as light and shading nuances in a single image. Almost all of the photos found on the web and in print are raster images, and JPEGs, GIFs, and PNGs are common raster image types (hold onto your jorts, we’ll get to specifics on those soon). Here’s the downside to raster images: since they have a fixed number of pixels, they can’t be dramatically resized without losing resolution. When you see a photo or graphic that appears pixelated, this is probably because the image has been sized up too far from its original dimensions.

 

2. Vector

Vector images, on the other hand, are constructed using paths that each have a mathematical formula, rather than individual pixels. This makes them infinitely scalable and allows them to retain a crisp appearance regardless of size, since the mathematical formulas dictate how the image is rendered. Who knew there was so much math behind your favorite pictures? Vector images are perfect for things like logos, where you would want to use the same image at many different sizes, from business cards to billboards. Common vector file types include EPS, SVG, and PDF (note: while a PDF is generally a vector file, depending on how it was originally created, it can be either a vector or a raster file). While vector images are generally more flexible for simpler graphics, raster images would better display the natural qualities of something like a photograph.

Raster vs Vector image file 

 

Raster image file types

Now we can get into specifics in each group. Here are some of the most common raster file types:
 

JPG

JPG (or JPEG) is arguably the most ubiquitous file type. It was originally developed by the Joint Photographic Experts Group to be a standard for professional photographers. JPGs were designed to make detailed photographic images as small as possible by removing needless information that the human eye won't notice. They have a huge color palette and are great for photographs, but the loss of data with each compression means they’re bad for simpler graphics and line drawings. It is a great file type to use for photos on the web, where you want the smallest image size possible so your site loads quickly, as well as an image large enough to not appear pixelated. JPGs don’t support transparency so they will always have a solid background. Not the best for sticking your logo on a non-white background, unless you want a white box around it!

Best for: Photographs and rectangular/square photographic images on the web.

 

GIF

GIF stands for “Graphics Interchange Format” and is an older file type. GIFs are even more efficient than JPGs because their file size can be quite small. It comes at a price, though! Their size comes from the fact that they can only have a maximum of 256 colors—the fewer colors and shades contained in an image, the smaller the file size. This makes them ideal for images that use just a few solid colors and don’t have gradients or more complicated shades, but you wouldn’t want to use a GIF for a photograph. GIFs do support transparency, and have the unique feature of supporting animation, so they can display a sequence of images (similar to video) that are linked together to create motion. Almost all of the animated images you’ll find on the web (all those Buzzfeed animated memes!) are GIFs due to their small file size and simple creation process. GIFs are best used for limited-color images (such as simple logos and graphics), but they are not good for full-color photos and other images where having a variety of colors is important.

Best for: Logos, line drawings, and other simple images (buttons, icons, etc.) on the web.

 

PNG

Remember all of that stuff I just said about GIFs? Well, newer format PNG does nearly everything better (sorry, GIF!). PNG stands for “Portable Network Graphics” and includes two different types—PNG-8 and PNG-24. PNGs allow for 5 to 25 percent greater compression than GIFs, with a wider range of colors. They also support variable transparency, where users can actually control the degree to which an image is transparent (neat!). The downside to advanced transparency in PNGs is that not all older browsers support it. Get with the program, guys! Some other downsides with PNG are that it doesn’t support animation like GIF (at least not across the board in all browsers), PNG-8s can only store 256 colors (like GIF), and PNG-24 file sizes can be quite large. The main things to remember about PNGs are that they can have a transparent background, and they are generally higher quality. This makes them ideal for something like a logo on a website because it can be placed over a colored background and remain crisp as well. While the image quality is very high, PNGs are not intended to replace JPG images for things like photographs on a website, as a photograph saved as a PNG-24 will be much larger than the same image as a JPG.

 

Best for: Logos, icons, and other web graphics that need a transparent background.

 

TIF

TIF (or TIFF) stands for “Tagged Image File” and is a large raster file with a very high-quality, so it is primarily used for images that are going to be printed. Because of the huge file size, you wouldn’t want to use a TIF on the web—your website’s load time would be horrendous!

 

Best for: Images and photographs for high-quality print.

 

BMP

This is an old format (Bitmap) that can be saved and resaved without losing image data, but there's not much compression going on, so you get extremely large file sizes. Nobody ever really needs to be using this format, to be honest.

 

Best for: Nada. Other formats just do it better! 

 

Vector image file types

Here are some of the most common vector file types:
 

EPS

An EPS (“Encapsulated PostScript”) file is a vector file of a graphic, text, or illustration. As a vector file, it can easily be resized to any size it needs to be, which makes an ideal file type for a logo. An EPS file can be reopened and edited in a program like Adobe Illustrator, but is not limited to editing in Adobe software. When you’re sending your logo to a vendor to be printed on some t-shirts, this is the file you’ll want to send.

 

Best for: Master logo files, graphics, and print designs.

 

PDF

PDF stands for “Portable Document Format” and is a file format that can be universally downloaded and viewed by any computer that has the Adobe Acrobat plug-in. Like EPS, PDFs can be saved as an editable file but you might need some special software for that. What makes PDFs so great is that just about anyone can open them and they’ll always look exactly how you intended them to look.

 

Best for: Text documents you don’t want anyone messing around with or files that include a lot of pages of photos, graphics, and text.

 

SVG

SVG stands for “Scalable Vector Graphics” and is a standard format to display vector graphics on the web. SVGs are XML-based, meaning they can actually be opened and edited in an HTML text editor and manipulated with code. For example, you could use JavaScript to change the color of an SVG icon on a website from blue to green without having to create a second image. SVG images are very high-quality and don’t lose detail as their size increases, so the same icon on a phone and a giant screen will look just as good.

 

Best for: Icons and graphics on the web that need to be scalable from device to device. 

 

While there are many more image file formats we could cover here, it might be too much excitement for one day. I’ll leave you with these for now, since they’re probably the most common.
So like I said earlier, your file type choice really does matter. You have a voice! You can make a difference! So take a second to think about how you’ll be using that file when hitting that “Save As” button. Check out our creative portfolio to see all of these file types put to work! And if you still find yourself a bit confused when it comes to that ever-important step, you can always give us a call.

 

Words About Pictures (WAP!) is an ongoing blog post series designed to help our clients (that’s you!) better understand the many creative quirks or qualms they might encounter during a project.  


Kelsey Ó Ciardha

Art Director

Kelsey is an art director at Calypso. If you need a new website or branding strategy, you’ll likely work with her. She's an expert in print and digital design, photography, and jazz squares.

Social Media Calendar Spreadsheet

If you’re looking for a way to streamline your efforts, this spreadsheet will help save time and plan your content to maximize your social media presence.

YES, PLEASE

Related Posts

How can we help you?

Talk to us.

white arrow buttom