Image Preparation Overview

1. Before optimizing an image for the web color correct your image and sharpen if desired.
2. You may be working with a large high resolution PSD or TIF file.
3. If the file size in megabytes is too large the File > Save For Web tool will not open the file.
4. To ensure that the File > Save For Web tool will open your file re-size the file to the final web target size.
5. Generally web page images are 600 pixels or less in the longest dimension.
6. If you come from the world of print you think print size in inches.
7. For the web you will need to size images in pixels units, not inches.
8. The Photoshop Image > Size dialog box will show pixels at the top in the Pixel Dimensions area of the dialog box and inches at the bottom the Document Size area of the dialog box. File resolution in pixels/inch (ppi) is also shown in the Document Size area below the Height field.
9. First resize a COPY of your master high resolution file to your desired web pixel dimension. If your image is a high resolution image at 240 ppi or 300 ppi or higher you may leave the resolution as is.
10. The File > Save For Web tool will automatically reduce the higher resolution in the original file to 72 ppi or low resolution for the web.
11. The File Save For Web tool will NOT alter your original image. After you are done optimizing the image the File Save For Web window will close and you will revert back to the original file you performed the optimization routine on.

Why are web images low resolution images?
A computer screen can only display an image at a resolution of 72 ppi ( low resolution). The screen will display a high resolution image however its file size will be huge due to all the data necessary for a high resolution file. Reducing resolution through optimizing a high resolution file reduces the amount of data in the file. It's like putting the high resolution file on a diet. This contributes to faster image downloads over slow Internet connections like dial up or slower broadband connections.

How to save JPG files

Adjust your file width and height to the desired web page display size.

Select File > Save For Web

Click on the Optimized tab at the top of the screen.

This view will show you what your image will look like as you adjust the optimization settings in the Settings area on the right side of the dialogue box.

If you want to compare before and after effects of your web image, click on the "2-up" tab. The original image will appear on the left, and the new optimized image will display on the right. As you adjust image quality settings, you will be able to view the impact of the changes on image quality live in the image on the right.

Locate the Settings area and select JPG from the drop down menu as shown in the next figure.

Adjust the optimization settings

1. Check mark the "Progressive" check box. This will contribute to faster file downloads.
   
   
2. Click on the pointer in the Quality setting filed indicated by the arrow in the next figure. A slide adjuster tool will open. Move the slider between the values of 60 and 100. Normally, you will find an acceptable quality value in this range that provides reasonably fast load time (small file size) with good image quality. However, You may need to go below a setting of 60 for larger images.
   
   
   
   
3. As you adjust the Quality slider look at the image on the right in the Two Up view. Look for pixelation or other artifacts that indicate a degradation in display quality. Generally any Quality value above 60 will maintain high image display quality.
   
   
4. If you don't like the way the image looks, keep adjusting the quality level slider back up towards 100 until you get the quality you want.
   
   
5. In the lower left corner of the Save for Web dialogue box, you will see a set of numbers that tell you how fast your image will load over a modem connection of a given speed. You can change the modem speed by right clicking on the area and selecting a target modem speed from the pop up menu.
   
   
   
   
6. Click on OK and to save the JPG file your destination directory.

Select File > Save For Web

Click on the Optimized tab at the top of the screen.

This view will show you what your image will look like as you adjust the optimization settings in the Settings area on the right side of the dialogue box.

If you want to compare before and after effects of your web image, click on the "2-up" tab. The original image will appear on the left, and the new optimized image will display on the right. As you adjust image quality settings, you will be able to view the impact of the changes on image quality live in the image on the right.

Locate the Settings area and select GIF format from the drop down menu below Settings: The arrow points to this menu in the next screen shot.

Adjust the optimization settings

1. You will want to see Adaptive and Diffusion selected in the two drop down menus below the file format drop down menu where GIF is shown in the above image. You can see this in the image above. These are the best general settings for GIF images.
2. The default for Dither is 75%. This usually produces the best result.
3. Locate the Interlaced check box and click to place a check in it if one is not already there.
4. In the Colors drop down menu, the default setting will be 256, for 256 colors present in the image. Often you can select a number less than 256. This removes colors and also reduces the size of the image for faster loading. Try selecting 128, in most cases it does not appreciably degrade the image but does reduce the image size significantly.
5. If you don't like the way the image looks, you can change it back to 256 colors.
   
6. In the lower left corner of the Save for Web dialogue box, you will see a set of numbers that tell you how fast your image will load over a modem connection of a given speed. You can change the modem speed by right clicking on the area and selecting a target modem speed from the pop up menu.
   
   
   
   
7. Click on OK and to save the GIF file your destination directory.
   

BACK TO THE INDEX