Export Zoomable Images for the Web Using PhotoshopBy 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.
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.
If you want to read more from Jennifer, subscribe to our weekly web design newsletter, The SitePoint Design View.
- 1 Create Your Own Yeoman-Style Scaffolding Tool with Caporal.js
- 2 How to Improve Site Performance (and Conversions) with Dareboost
- 3 Why You Need to Know About Sketch's New File Format
- 4 An Alternative Laravel Package Development Workflow
- 5 Make Your Own Social Network, Game Server, or Knowledgebase! - Sourcehunt