IMAGE FORMAT MATTERS – THE ULTIMATE BREAKDOWN OF WHAT FILE TO USE WHEN

Your printer says, “I need that in vector.”

Your web designer says, “Can you get me a low-res jpeg of that image?”
Your social media marketer says, “Do you have your logo in a transparent PNG?”

And you’re like…

In a world of JPEG, PDF, PNG, EPS and GIF (wait… is it GIF or JIF?), things can be super confusing! Let me try to explain them all and hopefully next time someone is asking you for a certain file format, you’ll be able to respond with “No problem – Here you go!”

Raster vs. Vector

Raster images are made up of a grid of pixels, or blocks of color that all come together make an image.  Think Minecraft. Each pixel has certain proportions, so the image looks great – crystal clear. But if you stretch or shrink that image from its original size, you often end up with a pixelated look – blurry or blocky looking.  Raster files are typically photographs, animation, video, and web graphics.

All raster images can be saved in one of two primary color models: CMYK and RGB.  CMYK is a four-color printing process that stands for cyanmagentayellow and key (black). These colors represent the four inks that are used during the printing process. Files saved in this format are meant primarily for printing. RGB is a light-based color model that stands for redgreen and blue. These are the three primary colors of light that combine to produce other colors. Files saved in this format are ideal for anything that will be viewed on a screen – computers, mobile phones, video games, television, etc.

Vector files, on the other hand, are made up of points, lines, curves in a specific proportion that is calculated by the computer – instead of using blocky pixels like in raster images. In the more sophisticated vector format, all of the equations that make up a graphic can be adjusted in size infinitely without losing resolution.  You can make create billboard-sized graphics or make them tiny enough to be printed on a pen and the image would look equally clear on both.

So let’s jump into the different file formats!

Description:

  • Most common image file
  • Go-to, cover-your-bases kind of file

Use For: 

  • Proofing and sharing work-in-progress
  • Web
  • Web banners/ads
  • Social Media
  • Email
  • Print (ensure you have high resolution files!)

Do Not Use For:

  • Transparent backgrounds
  • Versatile pieces where resizing is needed

Description:

  • Common image file
  • Smaller file size without a loss in quality
  • Less blur than JPGs when resized
  • Supports transparent backgrounds

Use For: 

  • Web
  • Email

Do Not Use For:

  • Print

Description:

  • Supports transparent backgrounds (but not as well as PNG)
  • Widely used for animated graphics like for social media or texting
  • Smaller file size

Use For: 

  • Web
  • Social Media
  • Animation

Do Not Use For:

  • Print

Description:

  • Highest-quality image files
  • Scanned documents
  • Professional digital camera

Use For: 

  • Print
  • Photography
  • Large format

Do Not Use For:

  • Web
  • Email

Description:

  • Unprocessed data from a digital camera or scanner’s sensor
  • High-quality image containing both processed and non-processed data

Use For: 

  • Use program, like Photoshop, to adjust color, tints, brightness, etc.
  • Then it is saved as a JPEG or TIFF because it has been processed.

Do Not Use For:

 

Description:

  • Fully editable design file
  • Can be exported (saved) as a JPEG, PNG, PDF, GIF, TIFF, etc.

Use For: 

  • Creating and editing raster file types

Do Not Use For:

  • Logo design
  • Illustrations

 

Description:

  • Designed to be easily shared between computers, programs, people
  • Contains text and raster & vector images
  • Retains look (font, images, etc.)
  • Can be editable

Use For: 

  • Digital
  • Print
  • Multiple pages

Do Not Use For:

  • Photography

 

Description:

  • One of the most preferred formats by digital designers
  • Resolution-independent and infinitely scalable (looks good at any size)
  • Supports transparent background
  • Fully editable
  • Can be exported/saved to various formats (jpg, png, etc.)

Use For: 

  • Print
  • Illustration
  • Logo Design

Do Not Use For:

  • Web
  • Email

 

Description:

  • Resolution-independent and infinitely scalable, (looks good at any size)

Use For: 

  • Web
  • Email

Do Not Use For:

  • Print
  • Sharing files (not well known)

 

Description:

  • Fully editable design file
  • Can include embedded or linked raster images
  • Can be exported/saved to any format (EPS, PDF, JPEG, PNG, GIF, TIFF, etc.)

Use For: 

  • Logo design
  • Large format design

Do Not Use For:

  • Photography

 

Did you ever realize there were so many different file formats for images?  Hopefully, this helps you understand the various image files, and in turn, what formats you can ask for to help your next project!