Save Photoshop Images as JPEG for Web and Mobile Devices

By Jennifer Smith, Christopher Smith, Fred Gerantabee

Saving files for the web or mobile devices in Photoshop Creative Suite 5 creates a smaller version of your image so it will load quickly. The idea is to make the image as small as possible while keeping it visually pleasing.

JPEG (Joint Photographic Experts Group) is the best format for continuous-tone images — those with smooth transitions from one color to another, as in photographs.

The JPEG format is lossy (it loses data when the file is compressed in this format), so you shouldn’t save a JPEG and then open it, edit it, and save it again as a JPEG. Because the JPEG compression causes data to be lost, your image will eventually look like it was printed on a paper towel.

Save a copy of the file as a JPEG, keeping the original image in PSD format if you need to edit the image later, open the original PSD, make your changes, save the PSD, and then save a copy of the edited file as a JPEG.

The JPEG format does not support transparency, but you can cheat the system a little by using matting.

Images with smooth transitions from one color to another are good candidates for the JPEG file form

Images with smooth transitions from one color to another are good candidates for the JPEG file format.

A good image to save in the JPEG format is a typical photograph or illustration with lots of smooth transitions from one color to the next. To save an image as a JPEG, follow these steps:

  1. Choose File→Save for Web & Devices and then click the 2-Up tab to view the original image (left) at the same time as the optimized image (right).

  2. Choose one of the JPEG preset settings from the Settings drop-down list.

    You can choose Low, Medium, or High or customize a level between the presets by using the Quality slider.

  3. Leave the Optimized check box selected to build the best JPEG at the smallest size.

    The only issue with leaving this check box selected is that some very old browsers don’t read the JPEG correctly (not likely an issue for most viewers).

  4. Leave the Embed Color Profile check box deselected unless you’re in a color-managed workflow and color accuracy is essential.

    Checking this box dramatically increases the file size, and most people aren’t looking for exact color matches from an image on the monitor.

  5. If you have to have the file size even smaller, use the Blur slider to bring down some detail.

    One JPEG that has exactly the same pixel dimensions as another may vary in file size depending on the level of detail in the image. So, an image of lots of apples will be larger than an image of the same size with lots of clear blue sky. The Blur feature blurs the image (surprise!), so you may want to use it for only a low source image in Dreamweaver.

  6. (Optional) Choose a matte color from the Matte drop-down list.

    Because JPEG doesn’t support transparency, you can flood the transparent area with a color you choose from the Matte drop-down list. Choose the color you’re using for the background of your Web page by choosing Other and entering the hexadecimal color in the lower portion of the Color Picker.

  7. Click Save.