How to know which image files you should use

By Holly Kosec on March 18, 2014

By Holly Kosec on March 18, 2014

When you’re working with a web designer or trying to do things on your own, there might be some confusion about all the different file types you see for images. It’s understandable, there are a ton of different image file types.

I’m here to take the mystery away and give you some easy guidelines for knowing which file types to use when. Hopefully it will make your conversations with web designers and the work you do on your own a little less stressful.

A menagerie of wonderful acronyms

As with most technology things, the world of images is filled with acronyms: PDF, EPS, PNG, JPEG, ESPN, HBO, ABC Family.

OK, The last three are actually TV channels. The point is there are a lot of letters to keep track of and that can definitely be confusing.

But the good thing is, you don’t have to know what they all stand for to be able to use them.

Image files are split between two major families, rasters and vectors. Knowing what these terms mean will help a lot with making decisions about what image files to use.

Rasters

A raster image is comprised of a fixed collection of pixels, or points of color, that make up a larger image. If you try and resize a raster image, it won’t look nice, because each of the pixels will be stretched to fit the new size.

This is why sometimes when you upload something that is too small somewhere, the image looks blurry or, what designers call pixelated.

Some examples of a raster image types are JPEG, GIF, BMP, PSD, and TIFF.

Vectors

Vector images are a bit fancier than rasters. Instead of being built of pixels, they’re built out of math. A vector image is a big math problem that tells your computer what to show on the screen.

Since vectors are based on numbers instead of pixels, they can be resized without losing quality. If you resize a vector image, your computer will just make “more” of the image, instead of stretching it out.

Some examples of vector image types are AI, EPS, SVG, and PDF.

You want to print something?

The main file types for print are PDF, EPS, and TIFF.

I often save print work as a PDF file to send to printers or to clients. PDF is a universal file type that can be opened on any modern computer. Using PDFs helps make sure all the details, images and fonts look the same, no what computer they’re being seen on.

I save logos as an EPS file. Since EPS is in the vector family of images, we can resize the image without losing any quality. And logos are usually resized a lot to fit on all sorts of different media.

It’s important to get a vector version of your logo. It’s the only way to ensure you’ll get a crisp, high-quality logo on your business card or billboard.

TIFF files are the only non-vector image type in this group. TIFFs are mainly used for printing photography and hold onto a lot of photographic detail that’s lost by using some of the other file types. Since photos that come from a professional camera are normally “big” to start with, resizing is less of a concern.

You want to put something on the internet?

JPEG and PNG are the file types you’ll most likely be using online. Both are in the raster family, so you’ll need to be careful when resizing to make sure they don’t look blurry.

File size is important for images on the web, because you probably want your images to load quickly for the person visiting your website. JPEGs can be compressed to smaller file sizes than most images, so they’re great for displaying photos on your website, but you do lose some quality if you compress them too much.

PNGs are the alternative for web graphics. They should be used to retain the quality of non-photo images like digital illustrations and logos. The other thing that sets PNGs apart is the ability to have a transparent background.

Get your source files

Now that you have a better idea of what file types you need, you may have an easier time working with your designer or finding what you need online. For each project you’ll want to make sure you keep your original, or source, files.

Even if your current designer has done a ton of stuff for you so far, you may need to make edits or pass along the source files to a future designer or printer. It’s important to get the source files for this reason. The most common source file types are AI (Illustrator) and PSD (Photoshop). These are uncompressed, and contain all the info that was used to create the design.

Photoshop files are raster-based and usually contain some sort of finished product like a flyer, banner, or edited photograph. Illustrator files are vector-based and usually contain a logo or vector design.

If nothing else, always make sure you get a vector version of your logo. You’ll use it on almost every project and having a resizable vector version will make sure your logo looks great at any size and will save you a lot of time and hassle.

Ready to get started?

Ready to take your digital marketing to the next level? We're here to help. Let's talk.

3 Comments

  1. Avatar Matt on March 18, 2014 at 7:40 am

    Great article, Holly!

    • Holly Titus Holly Titus on March 20, 2014 at 2:58 pm

      Thanks, Matt! Hope you found it helpful. 🙂

  2. Avatar Dawna on March 25, 2014 at 3:22 pm

    Very helpful!

Leave a Comment