I frequently see other photographers struggle in preparing their files for the Internet. Some make files that are ridiculously big and take forever to download. Others accidentally resize or flatten layers during the process and damage their files. But I understand, you probably didn’t study to be a web developer.
Fortunately, Photoshop provides a powerful command for compressing images and previewing the results: the Save For Web & Devices command.
1. Open an image in Adobe Photoshop.
2. Choose File > Save For Web & Devices.
3. The Save For Web & Devices dialog box offers several important options for optimization and preview:
- Tools. If you can’t see the entire image, you can use the Zoom tool to make the image more visible. Additionally, you can use the Hand tool (or hold down the spacebar) to drag and navigate around the image.
- Optimization tabs. By clicking the four tabs at the top, you can choose to view the Original image, an Optimized view, 2-Up for two versions of the image side by side, or 4-Up for four versions of the image side by side. Being able to compare optimized images helps you choose the right format and compression settings.
- Image Optimization Info. The area below each image in the Save For Web & Devices dialog box gives you optimization information. You can see the current optimization applied, the projected file size, and the estimated download time based on a selected modem connection speed.
4. You’ll likely need to further reduce the file size for Internet delivery. The first area to tackle is the actual image size in pixels. In the Image Size field type in a Height of 600 pixels, so the image can integrate easily into the Web page (even with a screen resolution of 1024 x 768, a height of 600 would allow the image to display without scrolling up and down). Press the Tab key to exit the field and apply the resize value.
5. The file size has been reduced, but it’s hard to see the effects of the compression. Set the image magnification view to 100%.
6. Change the amount of Compression by either changing the preset (from High to Medium, for example) or adjusting the Quality amount.
7. Click Save to specify a location for the saved file and then write a compressed Web-ready version. The original file will remain untouched, and its resolution and quality will be identical to its state when you launched the Save For Web & Devices command.
For more on mastering Photoshop, check out my book Understanding Adobe Photoshop.