image

A Beginner’s Guide to Image File Formats

As a custom printing service, we see our fair share of artwork in a wide variety of image file formats. While most of the time we will find a way to work with what we are given (and make it look great), there are times when we have to ask our customers to send us something else. Otherwise they won’t be happy with the final product — and we simply can’t have that.

This guide to vector art (our preference for most artwork) has been really helpful for our customers.

To expand on this, however, we wanted to create a resource that explains the many common file formats for all types of images, what they’re intended uses are, as well as the advantages and disadvantages of each. We hope you find it helpful.

Raster vs. Vector

Before we get into the specific formats, we first need to explain the difference between the two major types of images: raster and vector.

Raster vs. Vector

Raster image on the left compared to a vector image on the right when zoomed in.

Raster images contain pixels for detail. Think of pixels as individual dots or points in a two-dimensional array. The more pixels in the image, the more detail that image will have. When you zoom in or blow the image up, however, the quality will eventually degrade and become “pixelated”. Digital photographs like those taken by a digital camera or scanned electronically are raster images.

Vector images do not contain pixels. Instead, they use mathematical formulas to determine the shape and color of lines and areas between points on a 2-dimensional landscape. The detail is determined by the number of points and complexity of the curves between those points. This way, when the image is blown up, the quality is not compromised in any way. Simple graphics such as logos and illustrations are generally created as vector images so they can be blown up to any size without sacrificing quality. This is usually the preferred format for printers (like us) whenever possible.

 

Raster Formats

JPEG – Joint Photographic Experts Group
Extensions:
.jpg, .jpeg, .jpe, .jif, .jfif, .jfi

The JPEG is one of the most common raster file formats. It’s a format often used by digital cameras as it was designed primarily for electronic use. The main drawback with JPEG compression is that it is lossy, meaning each time the file is edited and re-saved in JPEG format, the quality degrades. In fact, images with such JPEG degradation are common on the web today. This degradation, however, is not a result of copying and sharing the file without recompression (a common misconception).

Jpeg Loss

JPEG quality loss from right to left.

While JPEGs can be used for printing, they are best suited for electronic display. And because the compression keeps file sizes small it makes an ideal format for sharing and publishing photos on the web. However, JPEGs do not handle text rendering and other sharper lines such as illustrations as well as other electronic formats.

What it is best used for: Sharing and displaying photographic images electronically and on the web, printing photographs.

Advantages: Compatibility, smaller file sizes, good color range

Disadvantages: Lossy compression degrades image quality when edited multiple times, not great for text, simple graphics, or illustrations

GIF – Graphics Interchange Format
Extensions: .gif

GIF was one of the first formats to be widely used to share images and graphics on the web. Today, the format is still widely used for simple web graphics as it has a lossless compression for simple lines and solid colors for electronic display. Though it is slowly being replaced by the PNG file format, GIFs have remained relevant through its major advantage: support for animations.

Animated Gif

An example of an animated gif…and exemplary dancing.

Animated GIFs are still widely used today to display and share short video clips (obviously without sound) on the web because the file size is much smaller than common video formats. In fact, 2012 has been called the “year of the animated GIF” by some.

What it is best used for: Simple web graphics, animated graphics

Advantages: Lossless compression, smaller file sizes, simple animations/short video clips, wide compatibility

Disadvantages: No transparency, web colors only, short step down from PNG for most graphics

PNG – Portable Network Graphics
Extensions: .png

The PNG was a file format designed specifically for web graphics as an improved non-patented replacement for the GIF. It supports lossless compression as not to degrade when edited as with JPEGs. While this can create larger files for complex images such as photographs, simple images with larger areas of solid color and sharper lines can be compressed to a smaller size with limited loss of quality.

PNG vs JPEG

One of the other major advantages of PNG files is the ability to contain transparency either full or partial (using an added alpha channel). This gives webmasters and designers more flexibility to create dynamic graphics and layouts on the web. Though unlike GIFs, PNG files do not support animation.

What it’s best used for: simple web graphics like logos, illustrations, or raster text rendering

Advantages: Lossless compression, small file sizes for simple graphics, smooth rendering for sharp lines, transparency support

Disadvantages: More complex and larger image files can be large, only supports web colors (RGB), limited compatibility

BMP – Bitmap Image
Extensions:
.bmp,  .dib

In computing a bitmap is quite literally the mapping of bits, or small pieces of information in its simplest form: zeros and ones. A bitmap image generally refers to the array of pixels in any image. If you’re going to be technical about it, other raster formats (when fully rendered) are displayed as bitmaps.

Simplified Bitmap

2×2 pixel bitmap

BMP files, then, are essentially images without compression: containing data for every individual pixel on the image.  And since the file format is so widely compatible, it makes an ideal format for working with in image editing programs. Though some BMP formats support compression (lossless and loss), in raw formats (uncompressed) the biggest drawback is its relatively massive file sizes.

What it’s best used for: Image editing, everything

Advantages: Uncompressed for perfect images, near universal compatibility, efficient compression (ZIP, etc.)

Disadvantages: Massive file sizes

TIFF – Tagged Image File Format
Extensions: .tif, .tiff

TIFF is an image file format generally used to work with raw image data. Unlike JPEG, it has lossless compression which helps maintain image quality when saved. This allows users to make multiple edits in image editing programs without sacrificing the integrity of the image through compression artifacts.

While some digital cameras use the TIFF format, JPEG compression is still more widely utilized. However, many of these cameras also allow raw image file formats to be saved which can be rendered as TIFF files in order to preserve image quality.

What it’s best used for: Working with photographs without image quality loss, printing

Advantages: Lossless compression, high quality digital photographs, color printing pallets

Disadvantages: Large file sizes, not great for web graphics, minor compatibility issues

 

Vector Formats

SVG – Scalable Vector Graphics
Extensions: .svg, .svgz

SVG is a vector graphic format that was created primarily for use in web graphics. Images can actually contain vector & raster images as well as render text. Additionally, SVG supports animation and even interactive features making it an ideal format for the web.

vector art

Vector “line art”

As it is still relatively new, support for SVG files is somewhat limited, particularly with older web browsers, although most modern browsers do have some support. And though SVG files can be used for print, because they can contain features intended for the web, they are not generally the format preferred by printers.

What it is best for: web graphics, particularly for simple interactive features and animations

Advantages: Scalable (vector), interactive while keeping file sizes relatively small

Disadvantages: Support growing but still limited, not intended for print

EPS – Encapsulated Post Script
Extensions: .eps, .epsi, .epsf

Technically EPS files aren’t pure vector graphics. As a “PostScript” file, they can contain vector and raster images and even both in the same file (much like SVG). PostScripts are specifically designed to handle vector graphics for output (printing, etc.) because of the ability to do on the fly rasterization (converting lines to pixels).

As such, EPS files are usually the preferred format for sending vector graphics to print not only because PostScript documents are designed for printing; but it is also widely compatible and flexible. Other vector formats usually require the specific software package they were created in to open them, where EPS files are more universal.

What they are best used for: Sending vector graphics to print; working with vector/raster graphics across platforms/graphic design programs.

Advantages: Compatibility for vector graphics, ideal for printing/output

Disadvantages:  May lose control of advanced vector editing features

PDF – Portable Document Format
Extensions: .pdf

PDF files aren’t necessarily images, though they can be. Scanned documents are often saved as PDF images as the format handles raster text rather well. Otherwise, PDF files may also include text, multiple pages, imbedded graphics (both raster and vector art), and even interactive features like fillable forms. The document format was originally created to send simple forms and documents electronically as a replacement for the fax machine because the files are generally small and widely accepted.

PDF images containing text can also be interpreted by OCR (Optical Character Recognition) and converted from an image to a text based document for easy indexing, searching and manipulation of the copy.

Occasionally, PDF files are used for sending graphics to print — but usually for text heavy graphics such as pamphlets, mailers or something similar — and generally the original artwork needs to be included. Printers sometimes use PDF files to send final proofs back to clients for approval just before going to print.

What they are best used for: Text documents, document scanning, printing proofs, text heavy layout printing.

Advantages: widely accepted format, smaller file sizes (especially for multiple page documents), versatile

Disadvantages: Not a good replacement for PostScript, Not great for complex graphics printing, not really useful as a graphic image

AI – Adobe Illustrator
Extensions: .ai

Adobe Illustrator is the most common vector art editing program in use today. It’s so common, in fact, that printing services may actually prefer the .ai format over the more universal EPS format. Especially if the artwork is 100% vector.

Other vector editing programs, such as Adobe Freehand or CorelDRAW, have the capability to open most .ai files and edit the vector art. In addition to that, .ai files generally include an imbedded PDF version of the image so other image editing or viewing programs can open the file and print (though editing the vector art is not usually done using this method). This wider compatibility makes .ai files the native vector format (that is, not a standard format) of choice for most printers and graphic designers.

What they are best used for: Creating, editing, and printing vector artwork

Advantages: Wider compatibility for a native vector format, most advanced vector format available

Disadvantages: Newer versions may have compatibility issues, not a standard file format

How to convert image file formats

Converting Raster Images

For the most part, just about any modern photo/image editing program can open, edit, and save to most of the popular (above) raster formats. Even Microsoft Paint, which comes standard with Windows, can open and save .bmp, .jpeg, .gif, .tiff, and .png formats. Beyond that, Adobe Photoshop can handle just about any other format you throw at it. But if you are looking for a more economical option, there are a number of free photo editing programs like Gimp that can handle many more image formats for opening and saving.

Just remember, when you open an image file in an editing program and save it (even as the same format), the compression may cause a loss of quality (see lossy compression, jpeg).

Converting Raster images to Vector Art (“Vector Tracing”)

Occasionally, there might be the need to take a raster image and convert it to a workable vector format so it can be scaled without quality loss. This process is called tracing (or sometimes “vectorization”). Complex photos are generally not ideal for this process, because a lot of the finer details will be lost. Simple graphics and illustrations are much more ideal, but even then, details may be lost in the process. Color gradients and other advanced effects are generally not going to come through well via vector tracing.

Todd as vector art

This is what happens when you “vectorize” my profile pic.

Vector tracing by hand can be done with some photo editing software like Photoshop, but it is a tedious process. Luckily there are a few online tools that can handle it instantly, but it can get rather messy, and usually need to be cleaned up afterwords. One such tool is Vector Magic which isn’t free,  but does allow for a free “trial” (very helpful if it only needs to be done once). A free tool (that is still rather powerful) is called AutoTrace. It has a number of options and settings that can be confusing to new users, but are very helpful for fine tuning the process.

Once you have the traced vector art, you can now manipulate it using Adobe Illustrator or a similar vector editing program. Like Gimp, there are free versions of these as well, like InkScape. Though not as powerful as advanced programs like AI, they can get the job done for simple vector art needs.

 We hope that clears some things up for you! Which image file format do you prefer? Still have questions? Sound off in the comments below!

Expand Your Brand!



Todd Heim

Todd is the Digital Marketing Manager for QLP. He has over 10 years experience in marketing and can be a bit of a nerd about it. While Todd enjoys just about all sports, he would much rather be participating than spectating. He's also a bit of a movie buff, particularly B horror... If you want a decent horror/slasher flick to find on Netflix that you've probably never heard of, he's your guy. Connect with Todd on Google+ and Twitter.

Comments

  1. Want the Best Promotional Products? Avoid 10 Common Artwork Mistakes!

    [...] artwork uses mathematical algorithms to make your artwork smooth and not pixelated like standard image files. Make sure you’ve saved your vector art in an appropriate program, like Adobe Illustrator, and [...]

  2. The Top Quality Logo Products Blog Posts of 2013

    [...] A Beginner’s Guide to Image File Formats Not all image files are created equal! What’s the difference between a .gif and a .jpeg? Why do we need a vector file for your promotional product artwork? Those answers and more are explained in this post. [...]

Leave a Comment