Graphics 101: Printed Images

Visuals are increasingly important, as everything from websites to social media, collateral and traditional media needs images to tell their stories and enhance their visual appeal.

Unfortunately, the technical aspects of the graphics world can sometimes trip a person up. So I asked a graphics expert, Gabriela Martinez of Texto, to explain the practical intricacies of the graphics world for us non-graphics pros.

Since the same image can look different when printed than it does on the screen, I’ll discuss images for the print world first. My next post will discuss images for online use.

But first, some terminology.

Pixels, PPI and DPI

Pixel is short for “picture element.” If you look closely at a computer screen, you’ll see horizontal rows of tiny dots or squares, all the same size, running from the top to the bottom of the screen. Those are pixels. A computer screen might have 1,920 pixels across and 1,200 pixels from top to bottom (1,920 x 1,200). This is considered “high resolution” today.

The number of pixels affects the quality of the image. The more pixels, the better. Too few, and the image will appear “pixelated” with jagged edges. Lots of pixels, and the images will be sharper, with more detail.

Displays are getting better all the time. Some newer Apple products boast “Retina displays,” a marketing term Apple coined to describe devices and monitors with a pixel density so high you can’t see the individual pixels. More on Retina displays later on.

PPI stands for “pixels per inch.” It is the number of tiny squares or pixels in a line one inch long on a computer screen.

DPI stands for “dots per inch.” The term refers to the number of dots printed in a line one inch long. Generally speaking, the human eye cannot discern individual dots when an image is printed at 300dpi.

Although the two terms are not technically the same, PPI and DPI are often used interchangeably these days.

Resolution is the number of pixels on a display monitor, expressed in terms of the number of pixels across (the horizontal axis) and down (the vertical axis).

Selecting High-Resolution Images for Print Media

Graphic artists and reporters will often ask for high-resolution images for printed materials like collateral and magazines. Usually they need a JPEG image that will print at 300 dots per inch (300dpi). However, before sending them anything, check the print size they want.

That’s because the size of the image affects the DPI. This is an important concept. If you enlarge an image, its quality suffers because it is printing fewer dots per inch. If you shrink an image, the quality generally improves because there are more dots per inch. So a 300dpi image will look different if printed as a 2”x 3”, 4”x 6” or 8”x 12” image, even though the number of pixels is the same.

Here’s an analogy. Suppose you have a fishing net with a 4” mesh (strings 4” apart). The two strings are connected in a series of knots. Think of each knot as a dot from a printer. Let’s say the net shrinks to half its previous size. All the knots are still there, but they are closer together. The number of knots does not change, just their location in relation to each other. In the same way, printing an image at half-size makes the dots closer and the image clearer.

Fortunately, much of this is not guess work. Stock photo services often correlate pixel dimensions, resolution and print sizes. Here’s an example from 123RF.com:

 

Alternatively, the following guide can help you identify the number of pixels needed to print high-resolution, 300dpi images in some popular sizes:

• 3”x 5” image: 900 x 1,500 pixels
• 4”x 6” image: 1,200 x 1,800 pixels
• 5”x 7” image: 1,500 x 2,100 pixels
• 8”x 10” image: 2,100 x 2,100 pixels

You math fans can simply multiply the desired height and width by 300 (the dots per inch) to get the required number of pixels.

The point is to consider both resolution and size when supplying images for hard copies.

Resizing Images

You can change the size of an image in a program like Microsoft Word by clicking the image and dragging one corner. However, as noted above, changing the size of an image can affect its quality. Here’s an example. The first image is clear and crisp. The enlarged image is not.

You can also resize images in a graphics program like Photoshop Elements by changing the dimensions but you will have the same quality problems if you try to enlarge it.

And a cautionary note. Some software programs save images to 72dpi by default. If you change the size of an image, you may accidentally save it as a lesser-quality image.

And a JPEG saved at a lower quality cannot regain its former glory. You can save it to a higher DPI number, and the program will “interpolate,” which means it will add dots it thinks should be there. This sometimes works well…and sometimes doesn’t. So always work on duplicates of your images, and keep your originals safe to preserve their quality.

Editing Images

Up to this point we’ve been discussing raster images (e.g., JPEG), which are composed of pixels. Almost all the photos found on the web and in print catalogs are raster images. However, as noted, a raster image cannot be enlarged without jeopardizing its quality. Photos (as opposed to illustrations, a more generic term) are always raster images.

If you want images that can be edited and resized, you’ll need vector images, which are available from stock-photo houses such as 123RF or iStock. You (or more likely your graphic artist) can change the color, size, add and remove elements and the like of vector images. Such images can be scaled to almost any size with little or no loss in quality.

A vector image will have an EPS, AI or SWG extension. However—just to confuse things—not all EPS files are vector files. A photo can be saved as an EPS file.

You can, in turn, save a vector image as a JPEG. However, the resulting image will be “fixed” (it will be a raster image) and you won’t be able to edit it as you could when it was a vector file.

Understanding these differences is important, because vector and raster images are not interchangeable. You won’t find a vector version of a photo. To get a better idea of the difference between raster and vector images, do a search for the two types in a stock-photo site. For example, I searched for raster images for cats and found pictures like these:

I searched for vector images and saw images like these:

In my next post I will explore images for online use – with Gabriela’s help of course.