Resize and optimize an image for the Web in Photoshop

Resize and optimize an image for the Web using the Save for Web dialog box in Photoshop.

When you save an image for the Web, you must balance maintaining image quality with minimizing file size and thus download time. The Save for Web dialog box lets you preview different optimization settings. Each preview includes file size and estimated download time. Thus, without altering the original image, you can see the results of various settings and choose the setting that best meets your needs.

Open the image in Photoshop, and choose File > Save for Web.

In the Save for Web dialog box, click the 4-Up tab. The dialog box displays the original image and three previews using different optimization settings.

Click a preview to select it, and then choose a file format preset from the Preset pop-up menu to see the difference in quality. Repeat as needed for each preview. Choose presets based on the file format appropriate for your image:

• JPEG for continuous tone images, such as photographs. JPEG compression preserves a broad range of color and subtle variations in brightness, but does not support transparency.
• GIF for animations, solid-color images, and images with repetitive color, such as line art and logos. GIF supports transparency.
• PNG-8 for solid-color images with sharp detail. Note that many older browsers do not support the PNG format.
• PNG-24 for continuous tone images, such as photographs. PNG-24 preserves transparency, a broad range of color, and subtle variations in brightness. Note that many older browsers do not support the PNG format.

Choose 200% from the zoom pop-up menu at the bottom left corner of the dialog box. Zooming in lets you examine the detail in each of the previews.

If you want to compare other areas of the image, click the Hand tool (on the upper left side of the dialog box) and drag the image. All the previews move together.

If you want to resize the image, click the Image size tab on the right side of the dialog box. Enter the desired dimensions for Width and Height. Click the Apply button in the tab. (When you save the file, Photoshop resizes only the Web-optimized version.)

Select the preview that best meets your needs, and click Save.

In the Save Optimized As dialog box, locate the folder in which you want to save the image, type a name for the file, and click Save.