Specifying image resolution for the web

or… Why dpi is meaningless

The problem

People need to supply images for websites, or some other digital medium, such as a CD-ROM. The question is asked “What resolution is required?” One answer might be “As high as possible.” Fair enough; you can always reduce (or ‘downsample’) a high-resolution image, but trying to enlarge a low-resolution image produces an image that’s blurry and/or jagged (like a mosaic of blocks):

But, it would be a waste of bandwidth to send a 10 megabyte file if the final image was only going to be ‘thumbnail-sized’.

Another answer might be: “300 dpi”.

Why dpi is a meaningless measurement of resolution for the web

Dpi (dots per inch) is a measurement of resolution for print. It measuresd how many pixels (or ‘dots’) will fit along an inch when printed. It is a property of printers and computer screens. So, a printer working at 300 dpi will fill every square inch (= approx. 6.45cm2) with 90 000 (=300 x 300) pixels. And a screen with a resolution of 72 dpi will fill every square inch with 5 184 (=72 x 72) pixels.

Let’s say we have an image that’s 600 x 600 pixels. In Photoshop, let’s set the resolution to 300 dpi (while maintaining the number of pixels). It will print out at 2″ x 2″:

PhotoShop image Size dialog box

Now set the resolution to 100 dpi (but again, maintaining the number of pixels). It will now print out at 6″ x 6″, but not so clearly:

PhotoShop Image Size dialog

But both images (assuming they are saved as JPG, GIF or PNG) will be identical on a web page (or, in general, on a computer screen).

So, how should image resolution be specified for the web?

The only meaningful measure of image resolution for the web is the number of pixels.

If you are a website editor

The size of the image you ask for depends on:

  • The quality (sharpness) of the image that you believe will be available. (If in doubt, request more pixels.)
  • How much cropping, if any, will be required (eg to create a headshot from a full-length portrait). The more cropping required, the more pixels you should ask for.
  • The dimensions of the space you need to fill on the web page. (Width is usually more critical than height.)

Scenario 1

You need to fill a space 200px wide with a headshot. An original, sharp headshot is available (ie no cropping is needed).

Request an image at least 300px wide.

Resize in Photoshop to 200px (ignoring dpi).

Resizing a headshot in Photoshop

Save for Web: JPEG, 30 – 50% quality.

Scenario 2

You need to fill a space 200px wide with a headshot, but the image available is a half-length portrait with a fair deal of background. The sharpness is unknown, but is probably OK.

An image of comedian Marty Murphy

Request an image at least 500px wide.

Crop in Photoshop

Resize and save for web, as above.

If you have been asked to supply an image for a web page

Ask for dimensions in pixels of the final image, as it will appear. Also, confirm what the image will be used for, and whether any cropping will be necessary.

Do a generous crop and resize if appropriate, so that each dimension (width, height) is at least 150% of the final, published dimension. Eg if the final, published image is to be 250px wide by 150px high, the image you supply should be at least 375px (= 150% of 250px) wide by 225px (= 150% of 150px) high.

Leave a Reply

Your email address will not be published. Required fields are marked *