For those of you who have used iPhoto ‘08, you’ve probably noticed the slick new UI feature that allows you to preview what photos are in an album by just moving your mouse back and forth across the album’s thumbnail. It’s pretty slow, but here’s a sample web gallery (created by iPhoto) showing this idea.
Steve, The Big Dumb Developer (his title, not mine), did some technical analysis showing why Apple’s implementation isn’t very efficient. The core improvement he offers up is that you can cut down on the hundreds of HTTP requests (for the individual photos) by building a “filmstrip” of the album’s thumbnails. That is, one long and skinny image with every image stitched together. This is a sort of super-sized version of the well known CSS image rollover technique. Not only do you cut the HTTP overhead down to a fraction of the requests, but you avoid the flickering problem you see when swapping in not-yet-ready images.
So this is the method I used recently on a project I’m working on with the fellas at EdgeCase. The application deals with searching for rental properties and the results are presented as little “tiles” (or the backs of baseball cards) like this:
As a user, you want to be able to get as much information from these search results as possible without having to drill down to deeper levels. The photos of the properties are one of the most important pieces, so how can we display more photographic information than we really have room for? Exactly, with the photoscanning technique. Here’s a prototype of how this works.
