Save Photos For Web & Mobile Devices

Creating files for special uses often requires special processing. The creation of specialized formats for the Internet and mobile electronics requires a mastery of one useful command: Save For Web & Devices.

Preparing images for the Web or mobile devices is all about compromise. You must learn to balance appearance with file size. If a Web page takes too long to load, people will leave—which defeats the purpose of running the site.

Let’s give the Save For Web & Devices command a try:

1. Open a file and choose File > Save For Web & Devices.

2. 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. Alternatively, you can click the Zoom Level menu in the lower-left corner and choose a magnification level. Viewing at 100% makes it easier to gauge the effects of compression.

• 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. I recommend that you choose 2-Up.

• 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. Choose the JPEG High preset, and you’ll notice that the file has been reduced for a significant savings. You can also see a download time estimate (right-click to change the modem speed).

3. 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 you’ll see that the image often much bigger than a typical Web page that can be displayed on most monitors. Try using a Height of 600 pixels or so, this way 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 file and apply the resize value.

4. The file size has been significantly reduced, but it’s hard to see the effects of the compression. Set the image magnification view to 100%.

5. Change the amount of Compression by either changing the preset (from High to Medium, for example) or adjusting the Quality amount. You can manually enter a number or click to access a slider (you will need to release the slider for the image to refresh).

6. Toward the lower-right corner you have the ability to choose to preview the image in a Web browser. If you don’t see your browser of choice, just choose Edit List, and then choose Find All to add all Web browsers on your computer.

7. Click Save to specify a location for the saved file. Choose your desktop and click Save in the new dialog box to process the image and save 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.

8. Experiment with other file formats such as GIF and PNG to see their benefits and limitations. JPEG does tend to work best for photographic sources however.