Whether print or digital, images are a major part of our lives. They fill our inboxes, help us quickly gather information, capture our memories, and the list goes on and on. But there is more than meets the eye. Image files come in a variety of formats (.jpeg, .pdf, .png, etc.) that are used for specific projects or instances. Using the correct file formats at the right time will help guarantee that your product image, logo, or selfie is well received by the intended audience. If you’d like to master image file types or have a case of the Monday’s (regardless of the day) this article is for you!

To fully understand image file formats and when best to use them, you have to know the difference between two image groups – vector and raster. The majority of image files fit into one (or sometimes both) of these groups and each group has specific uses, advantages, and disadvantages. Being able to distinguish between vector and raster if the first step of selecting an image file format for your project.

Vector Images

They say a picture is worth a thousand words but in the case of vector images, it can also be said a picture is made of a thousand shapes. Vector graphics are geometric equations that are displayed as shapes e.g. lines, curves, dots, rectangles, etc. Due to the mathematical makeup of vector images, they are rendered exactly the same regardless of the size. This means that you’ll never have to worry about a loss of image quality when resizing.

Vector graphics are the preferred image file type when working with logos, icons, fonts, illustrations or other line art graphics. Common vector software includes:

  • Adobe Illustrator (AI)
  • CorelDraw
  • Inkscape

Vector Image Examples

          Biergarten Brewery Logo DesignHuman Skulls IllustrationProfessional Logo Design

Raster Images

Raster images are comprised of tiny squares known as pixels and range from complex photographs to simple illustrations. They are the most common image file format (e.g. JPG, PNG, and GIF) and are typically used on the web. Resizing raster graphics can be difficult because they have a fixed number of pixels (e.g. 72ppi has 72 pixels, 150ppi has 150 pixels, etc.). If you added pixels to a raster image without changing the image size, pixels would be added at random causing the image to look blurry. Expanding the image without changing the number of pixels will also yield a blurry image. This is because the software is unable to determine missing image data. To avoid this problem it is best to work at the desired scale.

Common raster software includes:

  • Photoshop
  • Gimp
  • PaintShop

Raster Image Examples

White Screech Owl Illustration          Alveoli Illustration          Thumb Muscles Illustration

Bonus Round: Image Color Formats

CYMK

  • Subtractive color mode: cyan, magenta, yellow, and key (aka black)
  • Use when designing printed materials
  • Used by professional and home printers

RGB

  • Additive color mode: red, green, blue
  • Offers the widest selection of colors
  • Use when designing web materials
  • Associated with monitors e.g. televisions, cell phones, tablets, etc.

Let’s get this show on the road and get going with the next lesson. There are three image file formats that will be the focus of this article: PDF, AI, and EPS. Each image format has a handful of pros and cons and it is IMPORTANT to keep these in mind when saving an image.

EPS

EPS (aka Encapsulated PostScript) is a jack-of-all-trades. It is the most versatile vector that can contain any combination of images, text, or graphics. It can also be converted to raster graphics e.g. JPG, PNG, GIF, etc. EPS files are primarily used for printing graphics such as billboards and banners and thus, are not ideal for the web. This file format can also be used to transfer image data between vector and raster software. In summary, an EPS file is great for:

  • Printing and sharing designs internally
  • Resizing a vector file without loss of image quality
  • Creating large graphics e.g. billboards, banners, etc.
  • Transferring image data between vector and raster software

Avoid using EPS is you need to:

  • Working with photographs or complex graphics
  • Upload an image to the web

PDF

PDF (aka Portable Document Format) is arguably the most well-known vector image format. Good for both print and digital distribution, you can’t go wrong with this file format. Although PDF is considered a vector format it is also capable of supporting raster images. This file format is the go-to option for:

  • Downloadable files that can be read on any PDF reader.
  • Sending to your client as a preview of what their final design will look like.
  • Displaying and sharing pamphlets brochures, magazines, posters, flyers, resumes, etc.

On the other hand, PDFs should be avoided if:

  • The design needs to be changed. PDF software is not capable of editing the contents of the document thus; it should only be for the FINAL design.

Adobe Illustrator (AI)

And then there was one. Next up we have AI. No, it doesn’t stand for artificial intelligence, it stands for Adobe Illustrator. Like EPS and PDF, AI is a vector file that can support raster graphics. This file format is very unique and can be considered the universal image format because it can be exported into a vector (EPS, PDF, etc.) and raster graphics (GIF, PNG, JPG, etc.). AI is great for the following:

  • Creating logos or icons. Every vector shape and line created in Illustrator can be blown up to any size, which makes it ideal for images that need to be used in many different ways.
  • Creating promotional materials e.g. flyer, brochures, business cards, posters, etc.
  • Editing a design.

Avoid using AI if:

  • You need to make changes to an image because AI has a limited number of tools that can manipulate photos.

And then there was one. The last lesson for this blog deals with the most popular raster image formats, JPG, GIF, and PNG.

JPG

JPG (aka JPEGs and JPEG) is the most common raster file format. It is compatible with all forms of digital media (colorful images, photographs, patterns, gradients, shadows, etc.). The popularity of JPGs is due to the following:

  • The majority of devices, operating systems, and applications are compatible.
  • The most flexible when it comes to compression and editing.
  • It does not take up much storage space.
  • Image quality ranges from low to high.

Despite the popularity of JPG, there are several cons:

  • Less suitable for working with text or monochrome graphics with clear boundaries
  • Transparency is not supported for designs (drawing templates, logos, buttons, icons, etc.)
  • Image compression degrades the quality of the image.

JPG Examples

         April Fools Day 2017          Comic Book Day          Panther Chameleon Illustration

PNG

PNGs (aka Portable Network Graphic) are a lossless raster format. They are most commonly used for high-quality transparent web graphics. PNGs give users the ability to:

  • Resize an image without affecting the image quality.
  • Create images with transparency or opacity. This is important for sharp edges and smooth background transitions such as logos.
  • Display a range of color depths.
  • Work with 24-bit RGB and 32-bit RGB color.

Let’s bring on the cons:

  • PNGs can have larger file sizes compared to JPG, especially when they have a high resolution.
  • PNGs are optimized for the screen causing printed materials to lose some of its quality.

PNG Examples

Corporate Logo Design          Spa Logo Design          

GIF

Next up we have GIF, the raster format that floods everyone’s social media timeline. Like PNG, GIF is a lossless format that stands for Graphics Interchange Format. GIF is a widely used raster format that is typically used for animated graphics. The pros are as follows:

  • Capable of supporting transparency.
  • Ability to create animations.

The downside of GIFs is:

  • Limited color palette. Colors outside of the 256-color palette will display as the color that is closest to it, yielding low image quality.
  • Flat image format. All edits are saved to one layer and cannot be undone.

GIF Examples

Lachina Creative's Anniversary Animation

Final Thoughts

JPG, PNG, and GIF all have pros and cons and it is important that you know when to use each file format. The general rule of thumb for saving images is as follows:

  • JPGs are ideal for colorful images, photographs, patterns, gradients, shadows, etc.
  • Use PNG for drawing templates, logos, buttons, icons, etc.
  • GIFs are ideal for animations

Keep in mind circumstances can occur that may cause you to negate the general rule of thumb. If such circumstances occur use your best judgment when saving image files.

Rely on an Expert

Don’t feel confident in your abilities to tackle image file formats? Our designers are second to none at creating and optimizing vector and raster graphics. Check out our design services and contact us today; we are always here to help!