Prior to Photoshop 5.5, I used Ulead SmartSaver Pro to compress my image files for the web. The feature that made it all work for me was a side by side comparison between the original and the compressed jpeg. With Photoshop 5.5, Adobe introduced a side by side comparison called "Save For Web". It allows you to view the original file next to the compressed file and make visual comparisons on how much compression an image can take and still look good. With it's 100 levels of compression to choose from (in comparison to the 12 levels of compression using File>Save As), this feature enables you to create good looking smaller file size images for the web.
How to Compress * Using Photoshop * Why Pixel Dimensions * Resources
Photoshop's "Save For Web" gives a side by side comparison between the original file and the compressed jpeg
When Photoshop is first installed, the "Save For Web" filter is set to show only the compressed image by default. Click on the tab marked "2 Up" (white arrow pointer above) to set it to show a comparison between the original file (left) and the compressed JPEG (right).
Step by Step Procedure

Reducing a photographic image for efficient viewing is a five step process. 

1. Open in your image editing program and SAVE AS the proprietary UNCOMPRESSED file format that your program uses - NOT as a JPEG! If you're unsure of which format to use, save as a TIF file. By saving as a new image, the original file will not be compromised and can be archived for future use. For Photoshop users, convert your images to PSD format; for Paint Shop Pro users, convert your images to PSP format.

2. Examine the composition. Crop to remove unnecessary detail. Well balanced, tighter images often have more impact and result in smaller file sizes.

3. **Optimize the image using color, contrast, and density controls. More advanced programs allow adjustment of curves and levels of your image.

4. Reduce the pixel dimensions to a viewable size. For most web applications, an image size between 400 - 600 pixels long dimension will work well. Click here to read why ONLY PIXELS COUNT on the web. After reducing the physical pixel dimension size, your image can be improved by moderate use of Unsharp Mask which brings back the sharpness that was lost by resizing. I never put a picture on the web that is larger than 500 pixels long dimension and I successfully sell my photographs from various web sites. A good looking properly compressed 500 pixel image can easily be under 50K and load immediately. In using the web as a marketing tool, you find that bigger is not necessarily better.

5. Save the image as a COMPRESSED jpeg. Compress the image until it shows obvious artifacts in areas that have strong contrast edges. Then back off a bit by reducing the amount of compression. This is why the side by side comparison feature is so important.

**If you're working on large files, you might find it more efficient to resize before optimizing (reverse steps 3 and 4) to save time and possibly not run out of memory.

Step by Step Procedure Specific to Photoshop 5.5 through CS

1. Do all your image manipulation at full resolution on the uncompressed psd file.


3. Optional but recommended. After reducing the size I add my copyright to every image I post to the web.

4. Use UNSHARP MASK (Filters / Sharpen / Unsharp Mask) to recover the sharpness lost by resizing.

5. Save at the smaller file size. I use the long pixel dimensions in the file name.

6. Optional is to convert to profile choosing sRGB to do your best to guaranty that your image will be seen by others with the same colors and density as you see it.

7. Convert your image into a compressed jpeg using Save For Web (file>Save For Web). Use the side by side comparison between the original psd and the newly compressed jpeg to see how much compression you can get away with.

Why Pixel Dimensions
The only unit of measurement that means anything on the web is pixel dimensions. This is a very confusing concept for people in the print world to accept. DPI, LPI, and other forms of resolution are meaningless on the web. 

A monitor has a screen resolution that can be set to one of the following: 640x480, 800x600, 1024x768 etc. 1024x768 means a monitor has a horizontal pixel width of 1024 and a vertical pixel height of 768. The fact a monitor may be 13, 17, 19, or 21 inches diagonally just means the 1024x768 pixels are spread out over that number of inches. Therefore, a 500 pixel (width) image takes about 50% of the horizontal screen size on any size monitor running at 1024x768, or almost 80% of the screen if the monitor runs at a resolution of 640x480.

Preparing Images For The Web
written for eDigitalPhoto Magazine
an entire web site about image compression and comparison of 20 programs and their ability to create compressed jpegs.
How to protect your images on the web understanding that if the viewer can see it, it's already on their computer.

All photos on this site are available for stock or fine art sales
contact Larry Berman for more information

Slide scanning for ZAPP and other digital jury systems

Jury Slide Photography

1970s ABA and NBA Basketball photographs
specializing in Julius Erving (Dr J) photographs

Order prints from any gallery

Support BermanGraphics

Contact Us

Participate in the Art Shows Forum

Web site content Larry Berman

email Larry Berman - larry@bermanart.com