10 Types of Image File Extensions and When to Use Them

 Have you ever wondered when you should use a JPG instead of a PNG? Or maybe you're just trying to figure out which program opens an INDD.

Unless you're a graphic designer by training (like me), chances are you've never needed to understand things like what separates a TIF from a PDF or a PSD. While the large variety of image formats may seem overwhelming, there is a method to the madness.

Get 386 ready to use marketing design templates right now.

We've put together a useful outline to help you understand the difference between each file format, and when they are appropriate to use.

Vector vs. Raster

First things first: What is the difference between vector and raster?

Raster Image Files

Raster images are constructed by a series of pixels, or individual blocks, to form an image. JPEG, GIF, and PNG are all raster image extensions. Every photo you find online or in print is a raster image. Pixels have a defined proportion based on their resolution (high or low), and when the pixels are stretched to fill space they were not originally intended to fit, they become distorted, resulting in blurry or unclear images.

In order to retain pixel quality, you cannot resize raster images without compromising their resolution. As a result, it is important to remember to save raster files at the exact dimensions needed for the application.

Vector Image Files

Vector images are far more flexible. They are constructed using proportional formulas rather than pixels. EPS, AI and PDF are perfect for creating graphics that require frequent resizing. Your logo and brand graphics should have been created as a vector, and you should always have a master file on hand. The real beauty of vectors lies in their ability to be sized as small as a postage stamp, or large enough to fit on an 18-wheeler!

If you're not sure whether you have a vector version of your logo, here's a little trick for you: Call the company that printed your business cards or the vendor that embroidered your logo on a shirt. Often they'll have a vector file of your logo that they can send to you for your records.

High Resolution vs. Low Resolution

Have you heard your designer talk about DPI or PPI? DPI stands for "dots per inch" and PPI translates to "pixels per inch." These units of measure are essential for determining if the density of pixels in an image is appropriate for the application you are using.

The biggest thing to note when determining what DPI or PPI you require is if you are using an image for print or web. Websites display images at 72dpi, which is low resolution; however images at this resolution look really crisp on the web. This is not the case for print. Best practices for printing an image will require it to be no less than 300dpi.

Don't try to trick the system. A lot of magic can happen in Photoshop, but creating pixels out of thin air isn't one of them. Pulling an image off of the web and trying to get it to fit the dimensions of your print project just won't work. You will end up with a pixelated image that appears stretched and distorted.

Types of Image Files

  1. JPEG (or JPG) - Joint Photographic Experts Group
  2. PNG - Portable Network Graphics
  3. GIF - Graphics Interchange Format
  4. TIFF - Tagged Image File
  5. PSD - Photoshop Document
  6. PDF - Portable Document Format
  7. EPS - Encapsulated Postscript
  8. AI - Adobe Illustrator Document
  9. INDD - Adobe Indesign Document
  10. RAW - Raw Image Formats

1. JPEG (or JPG) - Joint Photographic Experts Group

JPEGs might be the most common file type you run across on the web, and more than likely the kind of image that is in your company's MS Word version of its letterhead. JPEGs are known for their "lossy" compression, meaning that the quality of the image decreases as the file size decreases.

JPEG image file icon

You can use JPEGs for projects on the web, in Microsoft Office documents, or for projects that require printing at a high resolution. Paying attention to the resolution and file size with JPEGs is essential in order to produce a nice-looking project.

JPG vs JPEG

There is no difference between the .jpg and .jpeg filename extensions. Regardless of how you name your file, it is still the same format and will behave the same way.

The only reason that the two extensions exist for the same format is because .jpeg was shortened to .jpg to accommodate the three-character limit in early versions of Windows. While there is no such requirement today, .jpg remains the standard and default on many image software programs.

2. PNG - Portable Network Graphics

PNGs are amazing for interactive documents such as web pages but are not suitable for print. While PNGs are "lossless," meaning you can edit them and not lose quality, they are still low resolution.

PNG image file icon

The reason PNGs are used in most web projects is that you can save your image with more colors on a transparent background. This makes for a much sharper, web-quality image.

3. GIF - Graphics Interchange Format

GIFs are most common in their animated form, which are all the rage on Tumblr pages and in banner ads. It seems like every day we see pop culture GIF references from Giphy in the comments of social media posts. In their more basic form, GIFs are formed from up to 256 colors in the RGB colorspace. Due to the limited number of colors, the file size is drastically reduced.

GIF image file icon

This is a common file type for web projects where an image needs to load very quickly, as opposed to one that needs to retain a higher level of quality.  

4. TIFF - Tagged Image File

A TIF is a large raster file that doesn't lose quality. This file type is known for using "lossless compression," meaning the original image data is maintained regardless of how often you might copy, re-save, or compress the original file.

TIFF image file icon

Despite TIFF images' ability to recover their quality after manipulation, you should avoid using this file type on the web. Since it can take forever to load, it'll severely impact website performance. TIFF files are also commonly used when saving photographs for print.

5. PSD - Photoshop Document

PSDs are files that are created and saved in Adobe Photoshop, the most popular graphics editing software ever. This type of file contains "layers" that make modifying the image much easier to handle. This is also the program that generates the raster file types mentioned above.

Comments

Post a Comment

Popular posts from this blog

The Biggest and Most Authoritative Library of Open-Source UX Design Resources

Open-Source, Open-Access Literature The democratization of design knowledge is at the very heart of our mission. That’s why—over 19 years after we started—we will never stop bringing leading designers, bestselling authors, and Ivy League professors together to create open-source, free-to-access textbooks on UX design. This is the world’s most comprehensive compendium of design knowledge, made available to everyone around the world. The Encyclopedia of Human-Computer Interaction, 2nd Ed. The Encyclopedia of Human-Computer Interaction, 2nd Ed. Free textbooks written by more than 100 leading designers, bestselling authors, and Ivy League professors. We have assembled our textbooks in a gigantic encyclopedia, whose 4,000+ pages cover the design of interactive products and services such as websites, household objects, smartphones, computer software, aircraft cockpits, and what have you. Name an item of design interest, and you'll probably find it discussed inside. Table of Contents 1 In
Read more

Top Presentation Design Trends of 2021, According to Creative Experts

  In early 2020, the world as we knew it was flipped upside down. Businesses were forced to pivot in the face of the pandemic, and as a result many companies adopted a remote work culture. Remote work changed the way organizations and teams worked — and even how companies communicated to prospective customers and acquired new business. Employees leaned into virtual designs, presentations, and events to communicate both internally and externally. The graphic design landscape, as a result, has changed dramatically over the past year. Now, presentations need to work harder than ever to connect, engage, and inspire audiences into action. In fact, over 35 million PowerPoint presentations are given each day to over 500 million audiences — but 79% of those audiences believe most presentations they see are boring. To help you crush your next presentation deck, we've rounded up the top presentation design trends of 2021, as predicted by creative industry experts and presentation power-users
Read more

6 Steps to Optimize Your Website With Data-Driven Design

  Data-driven. It’s a term you’ve likely heard applied to many different areas, from   marketing   to   sales   to   customer success . Data helps us make better decisions based on past results, and we can apply this philosophy to website design as well. The concept of “data” may seem impersonal, like just numbers in a spreadsheet. At its core, however, data-driven design is all about building empathy and understanding with your online visitors and customers. This approach helps separate effective designs from ineffective ones, ushering in a more ideal user experience, more conversions, and more growth. So, let’s unpack data-driven website design — what it means to take this approach, why it’s valuable to any online business, and how to integrate this methodology with your own design process. Free Workbook: How to Plan a Successful Website Redesign What is data-driven design? Data-driven design is an approach to web design that is informed primarily by user data. The purpose of data-dr
Read more