Check out the image above. First of all, I’m sure you’re stunned by how adorable my cat is, but that’s not why I’ve posted this image. This is a direct export of a very large image from PhotoShop CS3. The beauty of it is that it might look like a low resolution image right now, but hit the PLUS button or drag the small lever at the bottom of the image and you’ll be able to study my cat in high-resolution detail.
This is a technology called Zoomify for Flash, that is only loading the small slices of the image it needs to show you the zoomed in portion you’re looking at. It’s not wasting bandwidth on pieces of the large image you don’t need. Pretty cool, right? (And what cute whiskers!)
How can you do this? First of all, you don’t need Flash, just PhotoShop CS3. You’ll need to find the Export menu under your File menu in PS. There you can set the height and width of the small version of the image. Once you finish the export, you’ll have a folder with an HTML file and another folder that holds all kinds of goodies, like a SWF file, an XML file and a bunch of small chunks of your original large image.
You can simply upload this HTML page to a server and you’re good to go. I discarding the HTML that PhotoShop made and just embedded the SWF file it created in my blog. If you try to do embed the file yourself, you’ll need to adjust the paths so the SWF file can locate XML file and the sliced up photo pieces.