One tough thing about posting family photos to the web is that you need to decide which resolution to post your photo at. If you have a high resolution photo that you’d like to post on a web page, you basically have two choices:
- Option A: Resize the photo (make smaller) so that it fits on the screen
- If you do this, you’ll lose the detail that you had in the higher resolution version.
- Option B: Post the higher resolution version as is
- If you post your original high-res photo, it may take a very long time to download and appear in the browser. It will also be too large to display in the browser and won’t let you see the entire photo at the same time.
But what if we had a way to do both of these things at once? What if we could post a lower resolution version that allowed the user to see the entire image, but also allow zooming into the photo to see more detail? And what if we could zoom in not just a little bit, but deep into the photo to see fine details?
Well, Microsoft has a new technology, called “Deep Zoom”, that helps us do exactly that.
Background: Pixels, Pixels, Pixels
Spoiler: If you’re just here to see the demo, jump ahead a few sections to read about how I posted a “deep zoomable” family photo and then click on the link that takes you to the demo. But if you’re curious about some of the background concepts, read on.
What do we mean by “high resolution” or “low resolution”?
To start with, when we talk about resolution, we generally talk about pixels:
Pixel – The individual colored dots in a digital image.
We can think about pixels in the context of digital images that we take with a digital camera (e.g. an 8 “megapixel” image). We can also think about pixels in the context of knowing how many pixels wide and tall our computer monitor is.
Let’s start with your monitor. When you’re working on your Windows-based PC or your Macintosh, your monitor is displaying everything that you see at some resolution. In other words, your monitor can display a certain number of pixels horizontally and vertically. For a typical 20″ LCD monitor, this might be 1600 pixels wide by 1200 pixels tall. Or, if you’re using a MacBook, it might be 1280 pixels wide by 800 pixels high.
The more pixels that your monitor or laptop can display, the sharper the image, and the better/higher the resolution.
Back to digital images. When you take a digital image, the image is of a particular resolution, based on the camera and the current settings. For my 8MP (megapixel) camera, the images are 3264 pixels wide by 2448 pixels high. (If you multiply these two numbers together, you get something close to 8 million total pixels, hence the term “8 megapixel”).
How do these two resolutions, monitor vs. digital image, relate? If you want to display that 8MP image on your MacBook, and you don’t do any special scaling of the image, the entire image won’t fit on the screen. That 8MP photo was 3264 pixels wide and your screen is only 1280 pixels wide, so you can see at most about 40% of the picture’s width.
Normally you don’t notice this. If you open an 8MP image on your computer, the photo viewing application normally shows you the image exactly filling the screen. What happens is that your photo viewing software actually shrinks the image down so that you can see the entire thing, “squishing” it into fewer pixels. Naturally, when you do this, some detail is lost. No matter how hard you stare at that 1280×800 image, you won’t see as much detail as existed in the 3264×2448 version.
But most photo viewing applications allow you to zoom in and out of the image. As you zoom in, you do see more detail, because the software is re-scaling the portion of the image that you want to see to the screen. It’s actually going back to that original 3264×2448 image and resizing it again.
When you use a photo viewing application on your PC or Mac, everything works great. You are able to zoom in and out of the image and you can see all of the detail present in that original 8MP image. Images stored on the web, however, are a different matter.
Photos on Web Pages
When you post a photo on a web page, you need to pick a single resolution and post the photo at that resolution. Let’s look at our previous example. Say you have this gorgeous 8MP digital photo and you want to display it on a web page (or upload it to Facebook). If you want viewers of the page to be able to see the entire photo, you’ll want to scale it from 3264×2448 down to something like 800×600 pixels. The basic idea here is that you want the photo to fit into their web browser, which means that you need to think about how many pixels wide (and high) their web browser is. If they are running a browser on a MacBook and the browser is not maximized, it might only be 1000 pixels wide, or less. So you’d size the original image down to something like 800×600 pixels.
The problem with doing this is that web browsers don’t normally have a mechanism for zooming into photos. And if they do (like Firefox’s zoom feature), they’ll never be able to display any more resolution than was present in the original 800×600 image. The detail from your original 3264×2448 image isn’t available.
One workaround for this problem is to post several variants of the same photo—one at the lower resolution and then several at higher resolutions, showing some section of the photo at a higher resolution. But this is clumsy.
Resolution and Scanning Family Photos
Let’s talk a bit about how resolution comes into play when you scan a photo. When scanning, you typically select a particular DPI, or “dots per inch”, to scan at. The higher the DPI, the higher the resolution of the resulting digital image.
So let’s say that you scan a 4×6 print at 300 dpi. The resulting image would be 1200×1800 pixels, or roughly 2 megapixels.
It’s important to remember that high-quality negatives or film prints have much higher resolution. (The available detail is actually based on the size of the individual grains of the silver halide crystals on the film). A high quality 35mm negative might have a resolution equivalent to something closer to 4000 dpi.
If you actually scanned that 4×6 photo at 4000 dpi, you’d end up with a digital image that was 16000×24000 pixels, or 384 megapixels. This is an image that is as wide as about 15 20″ LCD monitors! That’s a lot of detail. Stored as a typical .tif file on your hard drive, you’d end up with something like a 2GB file.
So what resolution should you use when scanning? The general rule is that it depends on what you’re going to do with the digital image. If you’re going to display it on a web page, there’s no need to scan at a very high resolution. If you’re planning on printing the photo, you’d typically print at about 150 dpi. So if you’re not going to enlarge the photo, you’d also scan at 150 dpi.
Because there is so much detail available in that original print, you may sometimes want to scan at a much higher resolution. For example, you might scan just someone’s face from a larger photo and then post that scan on a web page. For example, if you scan a 1″ square area of the photo and you want to display it as a 600-pixel high image, you’d scan at 600 dpi.
Deep Zooming a Family Photo
Let’s go back to our original premise. When we post a photo on a web site, there’s no way to zoom into the photo and see more detail, right?
Well actually, there is now a way to do this, using a new technology from Microsoft called “Deep Zoom”.
Here’s a sample family photo, inserted into this post at roughly 600×480 pixels.
There’s nothing special about this photo. If you use the browser’s zoom functions to zoom into the photo, you’ll quickly see how coarse the picture is.
Here’s the same photo, posted on my web site, as a “deep zoomable” photo:
Click on the link to go play with the image. Try zooming in and out and notice that as you zoom in, the photo starts off very grainy, but quickly sharpens up. Note that you can also pan the photo using the mouse. You’ll need to install a small browser plug-in called Silverlight, but the install goes fairly quickly.
How Did They Do It?
The basic idea of Deep Zoom is that you start with a very high resolution image, capturing the detail that you want to see when you are all the way “zoomed in”. You then use some software to generate a lot of other images, which are all chunks of the original image at various resolutions. The basic idea is to pre-generate all of the different resolutions of the image that you’ll be seeing as you zoom in and out.
In my case, I started with an 8″x10″ image and scanned it at 800 dpi. This resulted in a digital image that was roughly 6400×8000 pixels, or 51 megapixels. Another way to think about this is that to display the image at the original resolution, it would cover a grid of 20″ LCD monitors that was 5 monitors wide and 5 monitors high. I saved the original photo as a TIFF image, and the file was about 145MB.
Here’s the amazing part. When I ran this photo through the Deep Zoom software, it generated just over 1,100 new images from the original image. The new images are various chunks of the original photo, at many different resolutions. Coincidentally, the size on disk of all of these photos also adds up to about 145MB.
I then posted the “deep zoom” collection of photos on my web site, along with some pretty straightforward programming. (Microsoft has done most of the work here). The result is what you saw above—a single image that you can zoom into and out of, made possible by 1,100 separate images that are automatically loaded at the proper time as you zoom or pan.
The Deep Zoom technology is very exciting for family historians. We are no longer limited to posting photos merely as static images on a web site. Instead, we can post collections of “dynamic” images, allowing us to preserve all of the detail that is present in the original film-based copies that we started with. And the experience for the user is nothing short of phenomenal. The first web page loads very quickly and new chunks of the photo load only when they need to.