In a recent design post, I discussed different file types and how to know what type to use for your Photoshop file. If you know you are using your file in a low, resolution, on-screen capacity (for web or email) you should be using Photoshop’s “save for web” feature.

I’ll be explaining Photoshop’s “save for web” feature in detail here.

This is a tutorial for beginner level users of Photoshop. I am using Photoshop CS2, a.k.a. Photoshop 9.0.2.

Assuming you just made a great document in Photoshop and it is unsaved, I would first encourage you to save the file as a .psd so future changes can be made to the layers and blending modes. If you save only as a .jpg or .gif file, you will not be able to edit the layers of the file anymore.

After you save as a .psd, choose File – Save for Web from your menu. The Save for Web window appears. Here is my window, and because I have used it before the default options that appear may not be the same as yours:

Images saved for use on-screen, such as images on the web or perhaps a logo embedded in an email, are typically low resolution and have small dimensions. (If you place a 37-inch wide image on a web site, no one will be able to fit the whole image on their screen at one time — unless their PC is hooked up to a 54 inch flat screen monitor, but that’s not usually the case.) If your image is just slightly too large to view in this window, and that is on purpose, you can use the hand tool on the top left of the Save for Web screen to bring another area into view. Select the Hand tool  (or hold down the spacebar), and drag in the view area to pan over the image.

Notice across the top left of the Save for Web window their are 4 tabs. If you select the optimized tab and the preview of your image is HUGE and would not be appropriate for your usage, you should double check the image size before saving. You also have the option of resizing the image here. In the right-hand middle of the Save for Web window, click the “image size” tab, highlighted below.

Let’s talk about what you see on this tab.

I am being shown (in pixels) the size of my smiley face file.

I have the option to change the size of the file by lowering or raising a percentage or adding and removing pixels. I can keep the proportions locked or I can change the width and height independently of each other.

Next, under Quality, I can choose an interpolation method. Most users skip this because they do not understand it. That’s fine. But Photoshop’s Help will tell you: When an image is resampled, an interpolation method is used to assign color values to any new pixels that Photoshop creates, based on the color values of existing pixels in the image. (Pixels are added or deleted based on a computerized mathematical equation.) In the General Preferences dialog box, you can specify which default interpolation method to use whenever you resample images using the Image Size or transformation commands. The Image Size command also lets you specify an interpolation method other than the default. Bicubic Sharper generally produces better results when you are reducing image size.

Now that your image is sized correctly, you need to decide what file type to save as. That is done above the image size tab in an area that looks like this:

My previous post: .gifs, .tifs, and .jpgs Oh My! Using the correct file types in Photoshop can help with this a bit. Gifs are often used for line art, vector items and text heavy items. JPG is a better choice when you have many colors, gradients or a photograph. WBMP is the standard format for optimizing images for mobile devices, such as cell phones. WBMP supports 1‑bit color, which means that WBMP images contain only black and white pixels (not shades of grey). PNG produces much larger files than JPEG format, however it can preserve up to 256 levels of transparency in an image. I am going to focus on .jpg and .gif files because those are the most commonly used files.

Under the word “Preset” is a drop down box. You can easily switch between .jpg and .gif here and see which file type looks better for your artwork. When checking to see which looks better, start with the highest file settings first to easily tell if you want a .gif or .jpg. In other words, if you select .jpg choose Very High or Maximum from the drop down below that selection. If you select .gif, choose 256 from the drop down to the right that is labeled “Colors”. Then you can compare “apples to apples”, a great looking GIF to a great looking JPG. This is usually enough to help you figure out which file type you want. One will look crisp in the preview window and one will look fuzzy. (If they both look great, look at the bottom left corner of the preview screen as you go back and forth between JPG and GIF, and you can choose the option with the smallest file size because it will load faster.)

The reason I suggest starting with a high file size is because it is estimated that 60-70% of US home internet users are on broadband internet connections. GONE are the days of web pages loading so slowly that your viewers wait 25 seconds for one image to appear.  (Source: Nielsen//NetRatings)

Let’s look at the JPG and GIF screens individually so you can decide on the settings for your saved file.

SAVE AS JPG FOR WEBA: Assuming you have already selected JPG here… B & D - Quality: Determines the level of compression. The higher the Quality setting, the more detail is preserved. A high Quality setting results in a larger file size. You can view the optimized image at several quality settings to determine the best balance of quality and file size. If the image looks just as good at a quality of 60 as it does at 90, the file saved at 60 will load faster.
Optimized: Creates an enhanced .jpg with a slightly smaller file size. The Optimized .jpg format is recommended for maximum file compression; however, some older browsers do not support this feature.
Progressive: The image is displayed progressively online. Viewers see a low-resolution version of the image before it downloads completely. The Progressive option requires use of the Optimized JPEG format. Note: Progressive JPEGs are not supported by some browsers.
Blur: Specifies the amount of blur to apply to the image. This option applies an effect identical to that of the Gaussian Blur filter and allows the file to be compressed more, resulting in a smaller file size. A setting of 0.1 to 0.5 is recommended.
ICC Profile: Preserves the ICC profile of the artwork with the file. Some browsers use ICC profiles for color correction. This option is available only after you saved an image with an ICC profile—it is not available for unsaved images.
Matte: If your file has a transparent background, this specifies a fill color for those pixels. Click the Matte color swatch to select a color in the color picker, or select an option from the Matte menu: Eyedropper (to use the color in the eyedropper sample box), White, Black, or Other (to use the color picker). Pixels that were fully transparent in the original image are filled with the selected color; pixels that were partially transparent in the original image are blended with the selected color.

SAVE AS GIF FOR WEB

A: Assuming you have already selected GIF here…

B: Specifies a method for generating the color lookup table and the number of colors you want in the color lookup table. You can select one of the following color reduction methods:
Perceptual: Creates a custom color table by giving priority to colors for which the human eye has greater sensitivity.
Selective: Creates a color table similar to the Perceptual color table, but favoring broad areas of color and the preservation of WEB colors. This color table usually produces images with the greatest color integrity.

Adaptive: Creates a custom color table by sampling colors from the predominant spectrum in the image. For example, an image with only the colors green and blue produces a color table made primarily of greens and blues. Most images concentrate colors in particular areas of the spectrum.
Restrictive (Web): Also called the web-safe palette. Uses the standard 216‑color color table common to the Windows and Mac OS 8‑bit (256‑color) palettes. This option ensures that no browser dither is applied to colors when the image is displayed using 8‑bit color. Using the web palette can create larger files, and is recommended only when avoiding browser dither is a high priority.
Custom: Uses a color palette that is created or modified by the user. If you open an existing GIF or PNG‑8 file, it will have a custom color palette.

C: Dithering Method and Dither: Dithering refers to the method of simulating colors not available in the color display system of your computer. A higher dithering percentage creates the appearance of more colors and more detail in an image, but can also increase the file size. For optimal compression, use the lowest percentage of dither that provides the color detail you require. Images with primarily solid colors may work well with no dither. Images with gradients may require dithering to prevent color banding. Honestly, I think I have strayed from the default on this 2x in 4 years.

You can select one of the following dithering methods:
Diffusion: The dither effects are diffused across adjacent pixels. Applies a random pattern that is usually less noticeable than Pattern dither.

Pattern: Applies a halftone-like square pattern to simulate any colors not in the color table.
Noise: Applies a random pattern similar to the Diffusion dither method, but without diffusing the pattern across adjacent pixels. No seams appear with the Noise dither method.

E: Lossy: Reduces file size by selectively discarding data. A higher Lossy setting results in more data being discarded. You can often apply a Lossy value of 5–10, and sometimes up to 50, without degrading the image. The Lossy option can reduce file size by 5% to 40%.
Note: You can NOT use the Lossy option with the Interlaced option or with Noise or Pattern Dither algorithms.

F. Transparency and Matte: Determines how transparent pixels in the image are optimized.
To make fully transparent pixels transparent and blend partially transparent pixels with a color, select Transparency and select a matte color.
To fill fully transparent pixels with a color and blend partially transparent pixels with the same color, select a matte color and deselect Transparency.
To select a matte color, click the Matte color swatch and select a color in the color picker. Alternatively, select an option from the Matte menu: Eyedropper (to use the color in the eyedropper sample box), White, Black, or Other (to use the color picker).

G. Interlace: Displays a low-resolution version of the image in a browser while the full image file is downloading. Interlacing can make downloading time seem shorter and can assure viewers that downloading is in progress, however interlacing also increases file size and is not needed in most cases.
H. Web Snap: Specifies a tolerance level for shifting colors to the closest web palette equivalents (and prevent the colors from dithering in a browser). A higher value shifts more colors.
I. Color Table: The maximum number of colors supported by a .gif is 256. As you change the desired number of colors saved with your file on the “Colors” drop down, the swatches of the colors being saved appear in the Color Table. You’ll find that line art with few colors does not need to be saved with 256 colors. You can roll your mouse over a color swatch and see more information about that swatch.

Last but not least is the animation player. This is used to preview the settings of an animated gif.

The final step in saving your image is to click “Save” at the top of the Save for Web dialogue box. Then navigate to where you would like the file saved and click Save again.

If there are additional areas of the Save for Web dialogue box you need assistance with, please comment and I’m happy to help you out.