In a previous article published on our blog, we saw how important a bitmap image’s dimensions in pixels are when you want to display the image on a screen, and how important the image’s resolution is when it comes to printing it out. The greater the number of pixels per inch, the greater the image resolution. Additionally, a higher resolution image will, in general, produce a better quality print. Bitmap image definition and resolution information can be accessed in Photoshop via the Image > Image Size menu.
Reducing the dimensions of an image for web use
The Image Size dialog box displays the dimensions of the image in pixels. This is very useful information to have when you want to resize an image to reduce its dimensions. Let’s imagine you’ve purchased this image of Manhattan in high definition on Fotolia. In XL format it measures 3724 pixels wide by 2095 pixels high.
If printed at its highest quality, the image would be perfect on the cover of your company brochure. But you also want to use a smaller version on your blog, where there is an 800 pixel maximum width limit for displayed images. The best thing to do, therefore, is create a copy of the image file and resize it in Photoshop. By doing this you will use less disk space for your blog and, most importantly, the smaller sized image will display faster online.
In the Image Size dialog box, make sure the aspect ratio (1) is locked to ensure the image’s Width/Height ratio remains the same. Type the value 800 into the Width field (2). The image gets automatically resized in terms of both height and width, changing in size from 3724×2095 pixels to 800×450 pixels. You have just “resampled” the image by removing some of the pixels.
Finding out what size an image will be when printed at 100%
To find out the size of an image in inches or centimeters rather than pixels, use the drop-down lists located to the right of the Height and Width boxes. The indicated size in inches or centimeters will depend on the value contained in the “Resolution” box (72 ppi in the example below).
Want to find out what size this image (here downloaded in XS format from Fotolia) would be if you were to print it at 300 dpi? Uncheck the “Resample” checkbox and change the value in the “Resolution” box from 72 to 300.
Because the Resample checkbox is not checked, Photoshop does not alter the dimensions in pixels, but instead calculates that this small, 425×283 pixel image, were you to print it at 100% and 300 dpi, would measure 1.4 inches wide by 0.95 inches high. There is nothing to stop you printing this image at a larger size (three inches wide for example) in your desktop publishing software (e.g. InDesign), though there is a risk it will turn out pixelated.
Let’s consider another example, this time in centimeters. A 600×900 pixel image printed at 100% in 10×15 cm format will have a resolution of 150 dpi, which is acceptable enough. However, you will achieve greater sharpness by using a smaller, 5×7.5 cm print format, which equates to a resolution of 300 dpi.
How can you find out whether your image is suitable for a poster?
Let’s return to our photo of New York, which you now wish to print as a 60×40 cm poster. Will its definition of 3724×2095 pixels be enough, bearing in mind that printing at resolutions below 100 dpi is not recommended with your particular model of printer?
By changing the resolution from 300 to 100, the calculated size becomes 94.5×53.2 cm; the image will therefore be perfectly acceptable printed as a 60×40 cm poster.
Should images be upsampled?
You can also adopt the opposite approach with Photoshop and get the software to resample the image, i.e. change its dimensions in pixels. In order to do this, first ensure the Resample checkbox is still checked. If you now change the height, width or resolution, Photoshop will automatically recalculate the image’s dimensions in pixels.
If you set a resolution lower than that initially displayed – changing it from 300 to 200 ppi for example – you are downsampling the image by removing some of the pixels.
If you increase the initially displayed resolution, you are upsampling the image by getting Photoshop to add more pixels. Photoshop offers several approaches to “inventing” the pixels it adds in this way, but the resulting image will suffer a loss of detail and sharpness.
You can see below that it is not a good idea to oversample our small image by changing the resolution from 72 to 300 ppi: Photoshop has actually increased the definition from 424×283 pixels to 1767×1179 pixels, but the image has become blurry. As a general rule, it is better not to oversample images.
To learn more about the Image Size dialog box options, visit the Photoshop online help on the Adobe website.