May 26 2021

Understanding Image File Types

Image File TypesWhether you are a graphic designer or not, it is likely that you have heard certain terms such as JPEG, PNG, or PDF. But what exactly are these files? What are they used for? When is the right time to use one or the other? Is there a difference?

Even if you are not a designer, if you work at a company that deals with digital or print imagery (or simply has a website), it is crucial to have a general understanding of image file formats.

Design formats are separated into two large categories: Raster versus Vector. Let’s break it down:

Types of Raster Images

A raster image is a grid made of individual, colored pixels that form together to create a graphic. Because raster images are pixel-based, they are resolution-specific, meaning that they only exist in one size and one resolution. If you try to expand a raster image beyond its original size, the pixels themselves will also expand and become blurry.

Raster images are typically used for photographs, digital art and web graphics. Although raster images are more common for digital and print, it is important to note that raster images are typically larger files and may take longer to display than vector images.

Within raster image types there are several extensions (some of which you may be familiar with):

  • JPEG/JPG: JPEGs are one of the most common extensions found online. JPEGs can be compressed to decrease file size. Smaller file sizes online can be great for website speed, however, it is important to keep in mind that more compression means more pixilation (or blurriness).

  • PNG: Like JPEGs, PNG files are also very commonly found online. When compressing a PNG the image quality will not be reduced, but PNG files already typically have a lower resolution. Another difference between JPEGs and PNGs is that PNGs can support transparent backgrounds and JPEGs cannot.

  • GIF: GIFs are widely used for animated graphics online, images with transparency and files with a limited number of colors. GIFs can be exported to reduce file size as well.

  • TIFF/TIF: TIFF files are typically more common in print graphics and photos due to their incredible quality.

  • PSD: PSD stands for Photoshop Document. PSD files are original design files that can be edited in Photoshop. PSD files can be exported as other raster image types listed above.

Types of Vector Images

Unlike a raster image, a vector image is not based on pixels, but rather on mathematical equations. It uses color and styling to turn geometric shapes into imagery. Unlike raster images, vector images are not resolution specific. Because vector images are resolution independent they are scalable. If you resize your image, it will not become pixelated or lose any quality. Vector images are typically used for logos and digital illustrations. Like raster images, vector images also have several different types of extensions:

  • PDF: A PDF (Portable Document Format) is most commonly used for displaying documents on the web. Although PDFs are technically vector images, they can hold raster images as well as other formats such as Excel sheets and forms.

  • EPS: Like PDFs, EPS files are vector images, but may hold raster images as well. They can also be converted to other raster or vector image file types such as PDF, JPEG, TIFF, etc.

  • SVG: An SVG is a vector-based image used for two-dimensional graphics. They can be scaled to any size without losing quality, and are a relatively smaller size. This image format is best used on the web.

  • AI: AI stands for Adobe Illustrator. AI files are fully editable files for vector graphics that have multiple layers and objects.

Whether you are looking to print a high-quality advertisement or upload a website banner that will not slow down your site speed, having a basic knowledge of design files will help you to understand and select the best file type for your circumstances. Have more questions or need some design guidance? Contact our Design experts at ZAG today.

  • Website

posted by
Kelsey Dombrosky
Kelsey Dombrosky

ZAG Interactive is a full-service digital agency in Glastonbury, CT, offering website design, development, marketing and digital strategy to clients nationwide. See current job openings.
Related Article
Best Practices for Print Content on your Website