truly understanding

resolution
in photoshop
b y PETER HOBBS

December 14, 2009

To understand Resolution is to understand the heart of Photoshop itself. It has to be our first port of call in assessing an image. Acquiring a true understanding of pixels and resolution transforms us from the shadows of doubt and confusion into the light of competence and confidence. Our quest begins with a visit to Photoshop's Image Size panel. Herein lie 2 sections: Pixel Dimensions and Document Size. We will become more than familiar with both. Now, to transform a distant acquaintance into our new best friend ... Resolution.

Let's go

Open up any image in Photoshop and then go: 'Image' - 'Image Size'.

Wooah!

Here it is, that confusing panel, filled with terms like dimensions, resolution, resampling, proportions, bicubic, sizing and more ... "Wooah!" Not to worry - we will methodically approach each section step by step.

Pixel Dimensions

Let's pause for a moment and go back to basics. Images are made up of 'squares' of color called pixels. They exist together as a rectangular grid with horizontal and vertical dimensions. In the above example, we are able to identify each pixel. To see this more clearly, let's lay a grid over our image to better identify each pixel and assess the dimensions.

So, we have a width of 24 pixels and a height of 20 pixels (giving us a total of 480 pixels) that make up our dog image. The Pixel Dimensions are shown on the very top section of the Image Size panel as follows:

The file size is also shown in the Pixel Dimesion section (in our case, our dog file is 2.81KB). So, the Pixel Dimensions do not refer to the physical size of the pixels in any way, but rather to the total number of pixels (that make up the width and height) in our image.

Document Size
How big is a pixel? What is its physical size? The answer, "However big (or small) you want it to be". So, the number of pixels in an image is definitive, the size of each pixel is fluid. Okay, let's try sizing the pixels. Let's make each pixel of our dog image say, 1/6" x 1/6". What would that look like? Well, with each pixel dimension being 1/6", it would take 6 pixels to make up each inch of the image. See below:

In the world of Photoshop, we don't really refer to pixel size or pixel dimension, but rather, the number of pixels that we size into each inch. This is called resolution, the number of 'pixels per inch (ppi)'. So, we have assigned a resolution of 6ppi to our dog image. This means (with some basic math) we can determine our overall width and height as follows: Width: 24 pixels at 6ppi gives us a total width of 4" Height: 20 pixels at 6ppi gives us a total height of 3.333" Good news! Photoshop executes these calculations for us. The overall print width and height is determined and displayed in the Document Size section. All we need do is type in the resolution (ppi). See below:

Let's experiment a bit more ... Let's try typing in another resolution value. How about 14ppi. Each and every pixel would now have a width and a height of 1/14" as shown here:

As we make each pixel smaller (with a higher resolution), we create a much smaller image of our dog: 1.714" x 1.429". Note that the number of pixels has not changed. Also, our file size remains the same.

Let's see how this looks in the Document Size section:

And so, we can type in higher and higher values for our resolution (see c and d below):

Note 2 very important characteristics as we increase the resolution: 1. We will get smaller and smaller image sizes (with our smaller sized pixels) 2. The image becomes clearer and clearer (with less and less evidence of the pixelation) Tiny pixels all sitting closely together form a beautifully smooth image. So, our dog in example d above is the smoothest. However, in order to be so, it had to become the smallest in size (the reverse being true for our dog in example a). What's the right resolution for viewing an image? At what point do we get that silky, smooth look? Well, it depends on how we wish to display the image - as a printed image or on a computer screen: For printing: the number is 300ppi. This is a number that we all need to know. It is the resolution at which the pixels themselves are not noticed

individually. In some situations, however, this number may vary. For example, if the viewing distance of a print is unusually far, we can lower the resolution as the eye would be unable to read the pixelation from a distance (an extreme example would be a billboard). Some hi-definition printers require a higher resolution than 300ppi. If you own an inkjet printer, use 300ppi. If you are taking an image in for printing, check what they recommend. More often than not, it will be 300ppi. For web (computer): the number is much lower at around 72ppi or 96ppi (depending on the quality of the computer screen). A few important things to remember: Typing in a resolution (in pixels per inch) changes the physical size of each and every pixel and therefore, the overall size of the image The number of pixels always remains the same (assuming we keep the Resample button unchecked) A larger resolution value give us a smaller image size with better clarity (less evidence of pixelation). A smaller resolution value give us a larger image size with less clarity (greater evidence of pixelation)

With this understanding under our belt, we are now ready to set image sizes for both web & print. To discover how, read our article.

Share
Found this article helpful? Share it with friends.

Comments
We look forward to hearing from you. Comments are kept private at this stage.

Visit our Website

Discover how we can empower your business and website: Add vitality to your photography Capture attention with images in motion Create interaction on your website