Formatting Photos for Print and Web

There are characteristics of digital photos that are different when used for print vs. web. We discussed many of these differences in the Print vs. Web lecture, so those slides may be useful to review.

These difference affect how photos display, as well as the file size. The goal is having photos the look as good as possible without enormous file sizes:

There are other differences professional take into account, like the color and weight of the paper when printing, or whether web images will be used within mobile apps. But we don’t need to worry about those situational differences.

Saving two versions of each photo goes pretty quickly if you have a workflow, and there are also ways to automate the process in Adobe programs if you’re ever trying to format dozens of photos. For a few photos, it’s best to format them one at a time.

Here is a recommended workflow:

1. Open the original photo in Photoshop and make toning/cropping adjustments.
2. Change the image dimensions and resolution for print, and Save As to save a copy.
3. Go to File > Export > Save For Web to save a copy with the web dimensions. (The Save For Web interface changes the resolution and color mode by default.)

It’s a good idea to use consistent file names or folders to keep the different versions organized.

Here’s one example of how this progression might look:

Here is a demonstration of one process in Photoshop to create different versions for print and web using the Image Size settings. There are additional methods, such as using the Crop tool, to accomplish the same outcome.