BLOG

Common Image File Formats and When to Use Them

File-Format-Challenge-shutterstock_108312266-480x360Why do I need to know image file formats?

Whether you are a junior designer or a non-designer charged with exchanging files with a design staff, web development staff and/or commercial printer, knowing the basics will help you quickly get the right kind of file into the right hands. This will reduce the wasted time and frustration of unnecessary back and forth, costly printing errors and poor-quality images that demonstrate a lack of professional standards.

The following is an introduction to image file formats without getting into all the overwhelming technical detail.

What are common image file formats and how do they relate to their content?

Image file formats are a standardized way of storing graphic digital information. Digital graphics can be split into two categories: raster and vector.

Raster graphics employ a rectangular grid of pixels with assigned colors. Raster graphics are optimal for photography, web graphics and images for the MS Office Suite.

Vector graphics employ scalable elements (points, lines and shapes) with assigned properties to represent information. Vector graphics are optimal for printing crisp logos, type, computer illustration and large-scale graphics like tradeshow signage.

Image file formats are optimized for one category or both.

Common raster image formats are:

• JPEG

• PNG

• GIF

• TIFF

Common vector and compound (containing both vector and pixel data) are image formats are:

• AI

• SVG

• EPS

• PDF

What is image resolution?

Raster graphics cannot scale without some loss of quality. They have a property called resolution that specifies the level of image detail. A higher resolution has a larger amount of detail and vice versa.

What resolution do I need?

Resolution standards in pixels per inch are as follows:

• 72 ppi for web graphics (LOW resolution)

• 144 ppi for MS PowerPoint and retina screen graphics (MEDIUM resolution)

• 300 ppi for print graphics (HIGH resolution)

Low-resolution web images will print poorly at 100% of their original size. Even images saved at print quality will show degradation when scaled past 130% of their original size. Best results are achieved by scaling down an image rather than scaling up; removing detail vs. adding in “fake” detail with random pixels. Therefore, it is recommended to supply designers with either vector graphics or raster graphics at the highest resolution and at the largest dimensions available in your archive. If you lack the software to open graphic files, a general rule of thumb is that the larger the file size, the more likely a raster graphic will have a high resolution and large dimensions.

Applications

Which image file format is best for web?

• PNG

• JPEG

• GIF

Which image file format is best for print?

• PDF

• EPS

• AI

• TIFF

Which image file format is best for Microsoft Word?

• TIFF at high resolution (for printable docs)

• JPEG, PNG and GIF (for docs to be viewed on screen)

Which image file format is best for Microsoft PowerPoint?

• JPEG at medium resolution

Armed with these simple basics, you can help your client and your creative team get the best results possible!

Post by Claire Holroyde, Senior Designer