Workflow: Exporting Images

The final use of a digital image might be either as a print or as an element in a web page. Each of these formats has different requirements and you need to understand how to produce images for both formats.

Image Size DialogExporting for Print

When you export an image for print there are two important aspects to consider. The first is the resolution of the image, which should closely match the resolution of the printer. The second is the size that you want the image to print at. In Photoshop these values are controlled through the Image Size dialog on the Image menu, as shown on the right.

A typical value for the Resolution setting for print is 300 pixels/inch. This will work well with a good inkjet printer, although some photo-quality printers might be able to print at higher resolutions.

In this example, an image 1316x1733 pixels would give a print of 4.4"x5.8" if printed at 300 pixels/inch.

You can find a table with some common size/resolution combinations here...

Rather than get into a lot of details here, let me point you at the Photoshopessentials site, which has a good page about how to use this dialog. You should also check out the second page in the article which describes how resolution affects print quality!

There are a couple of other resources that you might find useful:

Save for Web dialogExporting for the Web

The two main differences you need to remember when exporting an image for use on the web are:

  1. monitor resolution is much lower than printer resolution
  2. web browsers only support a limited number of image formats

So, firstly, the typical value quoted for the resolution of a monitor is 72 pixels/inch. In fact, a good monitor now (2013) will have a resolution of about 90 pixels/inch, but web designers tend to assume that views are not using the best available kit, so 72 is a reasonable value to work with. This means that the same image would appear much bigger on a monitor than it would when printed.

In practice, most web designers aren't actually bothered about the resolution of an image. They are only interested in the actual pixel size of the image. Most web page designs will have a particularfixed space available for the image, and the image must fit into that space. Because web pages are displayed on monitors, web designers typically measure sizes directly in pixels.

To export for the image for the web, you could use the same Image Size dialog as discussed above. However, Photoshop includes a special Save for Web & Devices option on its File menu. A portion of this dialog is shown on the right.

If you are working with a photo, then the best preset to use is probably JPEG High, which gives a high quality JPEG image. You can then set the quality value specifically to a higher or lower value as appropriate. You would also set the Image Size to value that will fit into the web page, as shown near the bottom of the dialog.

This dialog will actually let you display two images side by side, so you can compare the original image with the web optimized version. It will also let you preview the image in a browser to give you an idea of its appearance before you commit to any changes.

Adobe have a video tutorial on this tool.

Photoshopessentials have a very detailed tutorial on saving an image optimized for web display.

The final stage of the workflow is creating backups next

Back back to the workflow overview