photoshop

Save and Export

There are two methods to saving a photo in Photoshop, and each has a specific purpose. One way is to use the typical Save As... dialogue, the other is a special feature in Photoshop called Save for Web & Devices... which is used to save your photos in preparation for publication to the Web.

1) Save as: Use this method when saving your photo for archiving or if you plan to work on it later. We recommend saving the file type as a Photoshop or .PSD file, which will also save extra Photoshop-specific information about your photo.

2) Save for Web: Use this when you are ready to export your photo for publication to the Web. While it's possible to save a photo with the regular "save as..." option and still publish it to the Web, the Photoshop built-in "Save for Web" feature specifically prepares your photo for the Web and has added features that allow you to see how it will appear once it's on a Web site. This ensures your photos will show up properly on the Web.

Save As...

Save as... dialogue in photoshop

The Save As dialogue should only be used when saving a photo for archiving, or if you know that you will be opening it up again to work on it some more. This way, you can save you photo as an uncompressed Photoshop file (.PSD), and you will not lose any quality when you re-save it multiple times.

Save for Web...

Save for Web and Devices Dialogue in Photoshop

The Save for Web (found under the File menu) is a special feature in Photoshop that allows you to see how your photo will appear once it's published to a Web site.

There are four tabs along the top of the screen which allow you several different views for seeing how your photo will appear.

Tabs in Save For Web in Photoshop

Original displays your photo as it originally appeared in Photoshop. Optimized will show you how your photo will appear once it's published on a Web site, and 2-up/4-up will show you comparisons so you can see how the different levels of compression will affect your photo when saving.

Let's take a look at the 4-Up display:

4-up display in save for Web of photoshop

The 4-Up display will show you a pane of four comparisons of your photograph. You can select any of the four photos by clicking on it. A light blue box will surround the image and information regarding the compression of each image is displayed below each image. This reflects what the preset is set to when that image is selected.

When an image is selected, you can change the Preset compression methods to see how the varying degrees of compression affect your photo.

Save for Web presets in Photoshop

The top preset selector has varying choices of standard presets:

Possible preset choices in Photoshop

GIF (Graphics Interchange Format): These options are intended for graphics with solid colors. Think about an image of a cartoon character, which is made up of lines and fills. The "dither" options are for graphics that have gradations in color. The higher the dither, the finer the gradients will be, but the larger the image size. GIF is generally not a good format for saving photographs as it will not correctly represent the many levels of color.

JPEG (Joint Photographic Experts Group): This is the standard for saving photographic images. JPEG is one of the most widely used formats for photos on the Web and does a very good job of squeezing file sizes down while maintaining quality. Photoshop offers three quality settings, and within each preset you can further adjust the quality to a higher degree of granularity.

PNG (Portable Network Graphics):PNG was developed to build upon and even replace GIF. The PNG format is best used for graphics, but it is possible to be used for photos. Generally the file size will be considerably larger when used for photos. PNGS are most notable for their ability to display transparency, or invisible areas within a photo. This also allows oddly shaped images like circles, etc.

Compression

The idea of compression is to shrink down the file size of the photo so that it loads on the user's computer quickly, but maintains a certain level of quality. There are no hard-and-fast rules to how large a photo should be, but in general the smaller, the better. If one had to quantify the file size range for photographs one could place them into these categories:

Small photos and graphics: 10k to 20k
Medium photos and graphics: 30k to 70k
Large photos (usually one per page): 100k - 300k

Resizing

One of the nice things about the Save For Web feature is that it will show your image at the size it will appear on a Web site. If you see a gigantic photo, then you will have to resize it. There are two methods to resize photos. One method can be done in the main part of the Photoshop program as outlined here, the other can be done in the Save for Web dialogue by clicking on the image size tab.

Image size feature in Save for Web

To use the image size feature in Save for Web, change either the Width or the Height and if the proportions are constrained, the respective value will also change. Click Apply to see the image size change in real time. Generally, you should only shrink an image, and never expand one, as you will lose considerable quality.

Saving

Click the Save button to save your image. It should be noted however that saving a photo using the Save for Web & Devices feature only saves a copy of your image; similar to an export function. This means you will still have to save your original photo for archiving, or if you intend to reopen it later, use the regular Save As... menu item. Keeping a good organizational structure will help prevent mixing your photos up!