Export Zoomable Images for the Web Using Photoshop

The Zoomify feature first appeared in Photoshop CS3. It allows you to publish high-resolution images on the Web that viewers can pan and zoom to see more detail. The nice part about the feature is that the basic size image downloads in the same time as an equivalent size JPEG file. From Photoshop you export the HTML file and the JPEG files that you’ll need to upload to your website. The Zoomify capabilities work with any web browser.

1. In Photoshop, open up a large image that you want your users to be able to pan and zoom around. Although the image can be large in terms of width and height, the resolution still only needs to be 72ppi because it will only be viewed on screen. The image I’m using for this example is 1200x803px at 72ppi.

You’ll convert the flower image into a file that will appear smaller on screen, with a small magnifying box in one corner and zoom controls along the bottom.

2. Choose File > Export > Zoomify. The Zoomify dialog box opens.

Template

Sets the background and navigation for the image viewed in the browser

Output Location

Specifies the location and name of the file

Image Tile Options

Specifies the quality of the image

Browser Options

Sets the pixel width and height for the base image in the viewer’s browser

3. In the Zoomify Export dialog box, click Folder, and select your image. For Base Name, type “Flowers.” Set the Quality to 8; the Width to 400, and the Height to 400 for the base image in the viewer’s browser. Make sure that the Open In Web Browser option is selected.

4. Click OK to export the HTML file and images. Zoomify opens them in your web browser.

5. Use the controls in the Zoomify window to zoom and pan around the flower image.

And that’s it! Easy zoomable images that you can add to your website. You can find out more about Zoomify here.