Image Resolution

Raster vs Vector

There are two different kinds of images: raster images and vector images. Being able to distinguish the two are very important when designing for print. Let's start by first explaining what DPI means.

DPI means Dots Per Inch; these dots are calles 'pixels'. A pixel is a tiny square with an assigned color value. Much like an object is made up of a bazillion itty bitty atoms, an image is made up of thousands of tiny dots. The more dots per ich you have, the higher resolution your image will be. Now, what exactly is a raster and a vector image?

A raster image is an image made up of thousands of pixels. These images can be scaled down, but once it is scaled up it begins to lose resolution.

A vector image is an illustration that is made up of vector data (not pixels), and can be scaled down as well as scaled up without losing any resolution. As long as the illustration is kept as its original file, it can be scaled as much as you want. But, and this is important, once it is saved as a jpg, gif, pdf (print), etc, the vector data turns into pixels and can no longer be scaled up. For example, if you were to draw something in Adobe Illustrator, you can open and close Illustrator and scale the image as many times as you wish and the resolution will never change. But once you save that image as a jpg, you can still open it in Illustrator, but you can no longer scale it up.

Here we have two images, one is a raster image and one is a vector. Neither has been scaled. Can you tell the difference?

How about if we scale them up?

The image on the left is a vector, and the image on the right is a raster. Notice how when it's scaled the pixels in the raster image get bigger, giving it a choppy 8-bit look. The vector image on the left, however, has not lost any resolution because it is still its original Illustrator file, and can be scaled however I wish to scale it.

Out of the numerous file types out there, only a few can hold vector data. Among the few vector types are AI files (Abode Illustrator native file type), EPS files (similar to AI files and can hold vector as well as raster data, but are not always reliable), and INDD files (native InDesign files).

Most of the other types of files are raster files. Among these are JPGs, GIFs, PNGs, PDFs, TIFFs, PSDs (native Adobe Photoshop files), etc. I'm sure you've heard of most, if not all, of these files. Although, I won't go into all the nitty gritty details about each one right now, but each file type is different in its own little way. Some have different resolutions, transparencies, colors, etc. It all depends on what you're saving for.

Checking your resolution is quite simple, especially if you have Adobe Photoshop handy. Open your document in Photoshop and go to 'Image' and 'Image Size', and the Image Size window will pop up. This will tell you the Pixel Dimensions, Document Size, and your Resolution.

Depending on what your image is for (web or print) you can adjust your resolution as you wish. If your document's resolution is at 72, like the image above, and you change it to 300, note that the size of the document gets smaller. This is because Photoshop squishes all the pixels together in order to give it more detail, but at the same time making the picture smaller . Keeping the physical size the same and upping your resolution to 300 is the same as scaling up in size, in that you lose resolution.

For a web image, it is suggested to have the resolution at 72. If you need to change the size of the image, you can do so under Pixel Dimensions. For a high resolution print image, it is suggested to have the resolution at 300, and to change the size, you can do so under Document size. The difference between Pixel Dimensions and Document Size, is when designing for web you don't design by inches, you design by pixels, and vice versa for print.

In order to change your resolution, open the same 'Image Size' window, and uncheck the 'Resample Image' box, which will link your resolution and your document size (so they will change fluidly), and simply type in your desired resolution size.

In Illustrator you can set up your resolution preferences when creating a new document. A majority of the time you probably won't change much in this window other than setting the size of your document and (hopefully) your bleed settings, but it does give you the option to name your document, set a number of artboards, and the spacing between artboards as well.

Illustrator actually gives a couple different areas to change your resolution preferences. Under 'New Document Profile' and under the 'Advanced' tab. In the New Document Profile drop-down, you can select what you are designing for and it will automatically set your profile for you, and under the Advanced tab you can change this profile manually. It's best to just go by the automatic 'New Document Profile' options.

InDesign, on the other hand, does not give you the option to change your resolution preferences. InDesign handles all files from other programs and any drawing done within the program is vector based. It is set to 300dpi and will not change.