Export Zoomable Images for the Web Using Photoshop

By Jennifer Farley

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.


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.

note:Want more?

If you want to read more from Jennifer, subscribe to our weekly web design newsletter, The SitePoint Design View.

  • Q.E.D.

    Zoomify is alright, but Seadragon by Microsoft kicks its butt quality-wise. Seadragon works with the Microsoft Expression Deep Zoom Composer to create either silverlight or AJAX zoomable images. Any non-MS haters should definitely take a look at Seadragon.

    While you’re at it take a look at Pivot for Windows 7. This stuff has huge potential. Think what our sites would look like with this :-)

  • Magic Toolbox

    Even simpler solution and you don’t need Photoshop… make zoomable images with Magic Touch.

    Upload your image to your website and a smaller version of the same image. Link to the large image from the small one, add a reference to the Magic Touch JavaScript file and you’re done.

  • rmaenza

    That sounds great, I will have to check out Seadragon. Thanks for the tip.

  • nwebsolution

    that’s really great to have such facility,thanks.



Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in Front-end, once a week, for free.