Understanding Image Formats, Part 1: Vector vs. Raster
Several times a month, I find myself writing to a client to ask whether they can supply me with a specific image in a different format. Sometimes they not only are confused as to why I’d need another format, but they didn’t even know that there were different formats for images.
You’re probably already familiar with JPEG images, but today I’m going to tell you about some of the other formats web designers use (such as GIF, TIFF, PNG, EPS, PSD, AI, PDF, and SVG), and why we use them.
What Are Vector and Raster Images?
Here’s a piece of terminology that a lot of people find confusing. Often I’ll receive an image in a “raster” format and request it in a “vector” format instead.
A raster image is what you’re accustomed to seeing. It is made up of a finite number of colored pixels arranged in a grid. If you try to make a raster image larger, it ends up looking either pixellated or blurry. Here’s an example of a circle in a raster image format. 1) original size; 2) zoomed in so you can see the pixels; 3) quadrupled in size without smoothing; 4) quadrupled in size with smoothing:
(Click to see full size.)
A vector image is actually described by mathematical equations that trace out curves. A vector image can be enlarged to any size and still look good. Here’s an example of a circle in a vector image format. 1) original size; 2) the mathematical points and curves that are used to describe it; 3) quadrupled in size without smoothing; 4) quadrupled in size with smoothing.
(Click to see full size.)
JPEG, GIF, PNG, and TIFF are raster formats, while EPS, SVG, and AI are vector formats (although they can include raster images inside them). PSD is a raster format that sometimes includes vector images inside it. PDFs can contain raster or vector data, or a combination of the two.
Vector images are usually more flexible both in terms of resizing and in terms of being able to edit them to create new images.
Additionally, vectors can be handier to have because usually it is possible to convert a vector image into a raster image of whatever size is needed; however, it is much more difficult (often impossible) to convert a raster image into a vector image of good quality without losing detail.
This is because if you already know the curves you can easily estimate what shade each pixel should be, but (as you can see in the zoomed-in image above) the pixel data doesn’t do a very precise job of indicating what the curves are.
Vector formats are strongly preferred over raster images for logos, and often for print design: file sizes for rasters with enough pixels to print cleanly at more than a few inches per side are often unwieldy. The exception to this rule is for photos, which are almost never available in vector format.
When your designer requests a vector format, see if you can find a copy of your image in EPS, AI, SVG, or PDF format.
You may have noticed that the formats you’re most familiar with (JPEG, GIF, TIFF, PDF) are all raster (or optionally-raster) formats.
If vectors are so much more flexible than rasters, why do we ever use rasters? Well, there are a number of reasons. For instance, it’s not really feasible to take a photograph in vector format, because the camera only understands what color light is hitting it where, not the curves that make up the objects in the photo.
In addition, highly detailed images such as photos and hand sketches can usually be stored more efficiently (i.e. with smaller file sizes) in raster format.
Without using plugins such as Flash or Acrobat Reader, web browsers only began supporting the display of some types of vector images (particularly SVG) in the past few years. Some versions of Internet Explorer that are still widely used do not have native support for any vector formats.
Finally, a vector may take more computing power to display than a raster of the same image, especially for complex images or at smaller sizes.