Go to advertiser website.
Go to advertiser website.
Using Zoomify to display big pictures on the Web  
Tuesday, December 19, 2006 | by Rob Galbraith

Think Big: The Zoomify Export dialog in the Photoshop CS3 beta for Mac.

One of the secondary features in the Photoshop CS3 beta that's of interest to us is the new Zoomify exporter, because it makes light work of presenting high-resolution photos in a web browser.
We've used Zoomify previously, courtesy of the free converter available on the Zoomify website, and it works fine. But, Zoomify's free converter is limited in several ways: there's no control over the degree of JPEG compression, it doesn't wrap up the resulting image pieces and Flash-based viewer in the html code necessary to post a Zoomified picture on the Web (instead, a code template and instructions for manually editing it are included) and the viewer itself is a bit clunky: the control bar overlays the picture and sometimes too easily blends into image content, it's possible to scroll past the edges of the picture and the loading of new picture segments, while fast, lacks the smoothness we're accustomed to from Flash content these days.
None of these things are deal-stoppers, but the Zoomify experience has been just clumsy enough to limit our desire to use it regularly. The paid-for Zoomify converter that removes some of these limitations is an add-on to a full-fledged Macromedia/Adobe Flash application like Flash Professional 8, which itself is more expensive than we've been able to justify to date.
Enter the Photoshop CS3 beta. It goes a long way towards making Zoomify ready for prime time, at least for how we want to use it. The Zoomify exporter built into the CS3 beta enables the selection of a JPEG quality (the 0-12 settings increments are identical to those found in Photoshop's standard JPEG Options dialog), it automatically creates the html wrapper for the Zoomify viewer and the viewer itself is better: its controls sit outside the picture area, it's not possible to move past a picture's edges and the loading of new picture segments is seamlessly silky.
The example below, which is a full-resolution, uncropped Canon EOS 5D photo taken from helicopter height over downtown Calgary, Canada, shows how slick Zoomify can be at displaying big pictures inside a little window on the Web. Zoomifying was done with the Photoshop CS3 beta.

For our purposes, there are only two things that we really want to see changed when Photoshop CS3 ships.
  • First, the ability to set a minimum display magnification, as is possible using Zoomify's own converter. That way, we'd set it so that the picture fills the viewer frame, instead of the tiny thumbnail shown in the viewer above. We've tried manually adding the minimum display magnification parameter into the html code, but the Zoomify viewer that comes with the Photoshop CS3 beta appears to not recognize this or other optional parameters that are recognized by the Zoomify viewer that comes with Zoomify's own free converter (and as we've already noted, we prefer overall the viewer that comes with the Photoshop CS3 beta).

  • Second, there's an apparent bug in the Photoshop CS3 beta's Zoomify exporter that sometimes causes the top and bottom portions of the image to not be rendered at full resolution, as you'll see if you scroll all the way up or all the way down in the skyline aerial above.

The bug will almost certainly be fixed (the current release of Photoshop CS3 is called beta for a reason), and we're hoping that Adobe will see fit to add a minimum display magnification preference to the Zoomify export dialog.

Other things to note:
  • Judging by the html code created by Photoshop CS3 beta's Zoomify exporter, Flash Player 9 or later is required to use the included Zoomify viewer.

  • Though not shown above, it's possible to include a small navigator version of the photo in the upper left corner.

  • The viewer supports various methods of zooming beyond moving the magnification slider left and right. Other ways to zoom include:

    • Click inside the photo to zoom in. One click will increase the magnification several increments.

    • Hold down the spacebar while dragging the cursor inside the photo. Dragging the cursor up will zoom in, dragging the cursor down will zoom out. The starting position of the cursor will be the centre point of the zoom.

    • Press the Command (Mac)/Control (Windows) key to zoom out. One press of the key will zoom the picture one increment. Mac users, look out: pressing the Command key immediately after this page has loaded makes the Zoomify thumbnail picture disappear. The cure seems to be to reload the page. We don't know if this is a Zoomify viewer bug or a general Flash Player 9 bug, but it does trip up both Safari and Firefox in OS X 10.4.8 on an Intel Mac here.

    • Press the Shift key to zoom in. One press of the key will zoom the picture one increment. Windows users, look out: pressing the Shift key five times fairly rapidly may bring up the operating system's StickyKeys dialog. If this happens, click on Settings to access a dialog in which you can turn off this shortcut, if desired.

  • Web geeks viewing the source code of this page will see that that the Zoomified picture above is placed there courtesy of Javascript. This is NOT mandatory. We've done it this way only to work around a quirk unique to the content management system powering this site.
The final version of Photoshop CS3, complete with Zoomify Export, is expected to ship in the spring of 2007.
Send this page to: Twitter Twitter Facebook Facebook Google Bookmarks Google Bookmarks Email Email
Go to advertiser website.
2000-2013 Little Guy Media. Not to be reproduced without written permission.