How do I... Use Zoomify to improve my digital images in Photoshop CS3?

If you own a digital camera, you know this experience well: You’ve just taken a fantastic photo of your kids in front of the Grand Canyon or you’ve caught your friend or brother-in-law in a moment of infamy that he will never live down. This photo simply must make its way to the Internet so that it can be shared with all of your friends and relatives.

But by the time you extract the photo from your digital camera and decrease the resolution so that Aunt Millie’s AOL e-mail inbox won’t reject it as an attachment, your photo has lost a lot of its zip, simply because downsizing it for the Web strips it of a lot of the fine details. However, Photoshop CS3 has a way to put your photo online and it will still download quickly with all of its high-resolution glory intact. It’s a dirty little secret called the Zoomify function.

The Zoomify function actually creates a finished Flash file from within Photoshop. This Flash file slices the high-resolution file into many small JPEG files that load on the fly as the viewer zooms into that area of the photo in the Web browser. This creates the illusion of being able to magnify a low-resolution file while retaining an enormous amount of detail.

This blog post is also available in PDF form as a TechRepublic download, which also includes an example Zoomify image.

Zoomify works best with high resolution photos. If you are going to follow along with this demo, I recommend downloading a picture directly from your digital camera into Photoshop CS3, or you can download a free high-res photo from http://www.morguefile.com like I’ve done here in Figure A.

Figure A

The hi-res photo that’s about to get the Zoomify treatment

Once you have the photo open in Photoshop CS3, go to the File menu and from the Export option, choose Zoomify. A dialog box will appear as shown in Figure B.

Figure B

The Zoomify dialog box

Your first option in the Zoomify dialog box lets you choose a template for the final presentation. For this example, I’m going to choose the Zoomify Navigator with a Black background. The Navigator is an optional feature that will let the viewer quickly move to any part of the larger photo using a thumbnail-type map.

The next option lets us choose an output folder location. Zoomify is going to generate an HTML page with an embedded Flash file, so choose a folder that is named something relevant and can be copied to your server without any fuss (no special characters).

The third option asks you for a base name for the HTML and Flash files. The default base name is the name of the photo, which, if it came from your digital camera, won’t mean too much. Again, it’s best to make this name as simple and relevant as possible. I’ll enter the base name “pottery.”

Your fourth option wants you to select a file compression quality for the individual tiles that will make up the final Flash picture. From the pull-down menu, select High.

Browser Options are the final category in the dialog box. Let’s leave the width and height dimensions of the browser window at their default for now, and make sure that the Open In Browser option is checked. This will open the Zoomify file in a Web browser automatically once Photoshop has exported the file.

The Zoomify dialog box should appear as it does in Figure C.

Figure C

The final Zoomify settings

Click OK to export the Zoomify file. The dialog box will close and your default Web browser will display the HTML page with the Zoomify Flash file, as you can see in Figure D.

Figure D

The Zoomify Flash file in IE7

The controls at the bottom of the Zoomify file are pretty self-explanatory. Click the plus and minus buttons to zoom in and out, respectively. You can also use the arrow buttons to move around the magnified photo. Or, since we created this Zoomify file with the Navigator option, you can click and drag the blue box in the thumbnail in the upper-left corner to move around the picture, as in shown in Figure E.

Figure E

Navigating around the enlarged photo

To put this on the Internet for all to see, you just need to upload the contents of the export folder and make sure that the HTML document and the supporting _img folder are in the same directory, as shown in Figure F.

Figure F

The files generated by the Zoomify export function

That’s about all there is to using Photoshop’s Zoomify function. Once you get the hang of it, you can easily create your own fast-loading hi-res online gallery of your digital photography.

John Lee is a consultant specializing in design and illustration and a freelance technical writer. You can visit his Web site at johnleestudio.com.