OpenSeadragon On Tumblr

The DigiTiler creates 300+ megapixel images (generally 20,000 x 15,000).  How can we explore such images when our browsers are designed to show images in 4K at best (4096×2160).  After some research I discovered OpenSeadragon.  It’s a Javascript library that creates a “viewer” for high-resolution images; that is, with it you can zoom in/out of any size image.  This should be useful for any large-format photographer who is interested in having their images explored.  Here are some DigiTiler images on Tumblr.  You can also view them at our WP site Digitiler.com

Before you can use OpenSeadragon, you need to slice up the large image into a mosaic of smaller images (tiles) which OpenSeadragaon will feed to the viewer (in the background) as they move around the image and zoom in and out.

The easiest software I found for this is VIPs a freeware, cross-platform, image processor.  I use its “dzsave” function. (You can find other software to create deep zoom collections here; although I love Microsoft ICE, I couldn’t get their Deep Zoom Composer to work)

I open a command prompt in the directory of my image (I already have the path to VIPs set in my environment) and pass VIPs the name of my humongous image file and the folder in which I’d like it to create the deep zoom image tiles.

DigiTiler Image 14,467 x 17,841 Cambo 4×5 and Nikkor W 180

Here I process the file into a deep zoom folder

commandprompt

That folder, “Peppercornsfull_dzi” will have multiple sub-folders 0,1,2,3… with 4,565 tiles.  In my image folder, VIPs will create an XML description “Peppercorns_dzi.dzi” file.

dzi_file

Although there is an Zoom OpenSeadragon plugin for WordPress, I can’t see many people finding my images on this esoteric blog.  So I figured I’d put Tumblr to use, which my daughter told me is cool.  That wasn’t as easy as I hoped; fortunately, Ian Gilman helped out.

But first, where to store the deep zoom images?  My programming friend James Murdza showed me how I could use DropBox, but I discovered that uploading 4,565 images to be very slow.  I tried to get a zip file to upload and unpack through OpenSeadragon but couldn’t (if you’re reading this, and know how, please let me know!).  Anyway, if you don’t have a server you can use Dropbox, just be prepared for slow upload times.

I decided to just upload the deep zoom folder to my server through FTP.  So that’s what I do.  It takes 10 to 20 minutes because copying thousands of small files is not efficient.

After that, I then create a page in Tumblr, modifying a page I know already works 😉

TumblrCode

First, remember to set Tumblr to “HTML” edit mode.   You create a Tumblr post in HTML and create a DIV which will hold the OpenSeadragon deep zoom image control.  I give it a unique name (using the date) so Tumblr doesn’t get confused if someone has multiple posts open on the same page.  The above example is using the “Sunflower” image code.

For Peppercorns, I’d change dziFilesUrl to

//maxotics.com/imagezooms/peppercornsfull_dzi

That’s where I uploaded the files. Then I’d open the dzi file that VIPs created, and copy the Height and Width numbers into the JS code in Tumblr.

You’ll also want to make sure you have a link to Openseadragon’s js files.  I have them in my plugins folder on this site so just re-use them in Tumblr.

Another method for post OpenSeadragon image zooms on an external page is using an iFrame.  You can read about general HTML embedding at the Openseadragon site.

Wrapping up, the general process is

  1. Use VIPs (or other software) to create a deep zoom image collection
  2. Copy the collection (dzi folder and its sub-folders) to a server
  3. Make sure your page has a link to Openseadragon’s JS (or loads it internally).
  4. Tell OpenSeadragon where the deep zoom image collection is and set its parameters (height, width, etc.).
  5. Call the above in a DIV or some other HTML container.

UPDATE 9/7/16

I asked my daughter Alice if she could help me with the Tumblr problem that Openseadragon shows as a gray box in dashboard mode.  Readers would just believe it was a broken link.  This is her solution:

JS in an individual post like you were adding won’t fire in the dashboard because it will slow it all down. If you want to just add text that only shows up in dashboard view, you can just add a style attribute like this:

<span style=”visibility: hidden;”> Some message for only the dashboard </span>

Those weird gray boxes will stay however because they indicate that there’s some script trying to run. If you don’t want the boxes and instead want an ugly JSON object like the two sample posts I’ve done (the kernels and sunflowers) you can use this new method….

In your tumblr’s html theme there’s a section for posts. I’ve updated the text post section to contain your script, and updated the script to look for certain html elements and tumblr tags. To make an OpenSeaDragon post, now all you have to do is add a tumblr tag with some unique id like you were doing with “openseadragon20160830”, then add something like:

<span hidden="">Sorry, zoom-image cannot be viewed in the dashboard. Please click to view. </span>
<div id="openseadragon20160825" style="width: 100%; height: 600px;"></div>
<script type="application/json" id="dzi_openseadragon20160825">
{
	"Image": {
		"xmlns": "http://schemas.microsoft.com/deepzoom/2008",
		"Url": "//maxotics.com/imagezooms/Sunflowercool_dzi_files/",
		"Format": "jpeg",
		"Overlap": 1,
		"TileSize": 254,
		"Size": {
			"Height": 14616,
			"Width": 22701
		}
	}
}
</script>

Ian Gilman also pointed out “Another thought for dashboard view is that you could include an img tag with a thumbnail for the image, so people know what they’ll be zooming into.”

Sigma X3F TIFF Conversion Issues For Blown-out Skies

The Sigma Photo Pro (SPP) software, which must be used to open X3F files, has trouble exporting to TIFF, clipped or blown-out parts of an image, like a cloudy sky, unless you manually adjust exposure and fill.  If you let SPP export in “auto” mode, there is a high risk that you will not be able to recover highlights, from the TIFF, in Photoshop(PS) or other editing software.

A long-time Sigma user pointed out that Foveon sensor files are more diifficult to work with because “They (Sigma) have two problems. (1) The layers have strongly overlapping color response that is not matched to the color theories used for RGB color management. (2) the third layer is very noisy.”

At this writing, there is no X3F to DNG converter and I doubt, for long-winded technical reasons, there ever will be.

If you must have details in the blown-out areas of the image, you must export for that (adjust exposure in SPP for the clouds), then, in PS, bring up the exposure in the part of the image that had it’s exposure reduced to bring out the sky.

Adobe Camera Raw does a significantly better job with bayer sensor images, good enough that one can often use the “raw” TIFF (many even work with JPGs) to post process with little loss of image information.  However, if one can, only usually loads the image into Photoshop through Adobe Camera Raw (ACR)

The root problem is that you can open RAW files in Photoshop from just about any camera but the Sigma.  This means that you have to convert Sigma X3F RAW files to TIFF files first, if you’re going to use other image editing software.  Or put another way, you have to adjust exposure and fill twice.  First in SPP, then in PS.  For Sigma images, the TIFF becomes the “RAW” file for PS.

Although a Bayer / Photoshop workflow is much easier than working with Sigma images, I still prefer Foveon. As nice as the D600 is, there is a 3-dimensional look to Sigma images that, IMHO, it just can’t replicate.  That said, the dp1m is not the best choice for low-light or fast photography.

Here are some images that I hope illustrate these issues.

First, a Sigma DP1M photo.  This is a JPG copy of a TIFF created by Sigma Photo Pro, at its default setting (that is, no auto or manual adjustment)

a01PembertonLong_SPP_AdjustX3F

Second, a photo from a Nikon d600.  A TIFF was created by Photoshop’s Camera RAW filter, again, no adjustments

a02PembertonLong_NEF_TIFF_NoAdjust

Here I reduce the exposure on the dp1m image by 1 in PS.  

a03PembertonLong2_X3F_SkyDown1Exp

Yes, doesn’t seem bad. Now I do the same for the Nikon version (I’m quickly selecting using a wand, so excuse the jaggy nature)

a04PembertonLong2_NEF_SkyDown1Exp

Dropping the exposure doesn’t give me an image I want, for either camera.

Now, here is the Sigma where I have tried to adjust the sky using a curve, to suit my taste.

a08PembertonLong2_X3F_SkyCurveToTaste

Doesn’t get me where I want to go.  Now here I do the same thing with the Nikon TIFF

a09PembertonLong2_NEF_SkyDownCurveToTaste

As you can see, I am able to recover the sky pretty well in Adobe’s default TIFF creation.  The bottom line is the Adobe camera RAW created a much better TIFF in default mode than Sigma Photo Pro did with the X3F file.

What if I try to do this with the X3F generated TIFF?

a07PembertonLong2_X3F_CurvePushedFar

No matter what I try, I can’t get the clouds to look healthy.

However, I can get a good image from the dp1m image, by adjusting the X3F’s exposure in SPP to favor the sky then bringing up the houses with curves in PS (reverse selection to sky).  In the end, I can get to where I want to go, but I can’t sleep-walk through RAW processing with Foveon images like I can do with bayers.  Probably for the best because I should pay attention anyway!

a06PembertonLong2_SPP_AdjNegExpo_BringUpHouseInPS

Here is what the TIFF looked like

a05PembertonLong2_SPP_AdjNegExpo_TIFFoutput

I believe I may be able create better “default” TIFFs by generating two sets from SPP, a normal, and one with the exposure set down 2 stops.  I can then let Photoshop merge the images and get the best of both worlds.  For another day…

In the meantime, here is Ted’s workflow, as explained on a DPReview forum:

I use SPP to produce a neutral image adjusting only the exposure comp. slider to get the histogram as wide as possible, checking each color in turn. Some might leave a little space each end, others might not. Very important, IMHO, to use ProPhoto working space for the review image. Some back off SPP’s sharpening as it does sharpen at zero setting, particularly visible at sharp edges. I also back off the saturation slider a smidgeon. The aim here is produce a neutral image, not one that pleases the eye! Then save as a 16-bit TIFF, still in ProPhoto color space.

So, for me (SD9, SD10, SD14, SD1), all SPP 3.5 sliders at zero, except:

Exposure comp: as required

Saturation: -0.3

Sharpness: -0.7

Any proper editor has much better tools for tone curves, color adjustments, sharpening, re-sampling and conversion to color spaces other than ProPhoto.

If you don’t already, you might want to try editing in PS, but staying in 16-bit ProPhoto, until the time comes to ‘save as’ (for me) sRGB JPEG. A 16-bit neutral TIFF in ProPhoto color space is the best for flexibility, IMHO.

FastStone Image Viewer

If you have a PC, download this software

FastStone Image Viewer

First, it is fast in everything it does. In the time it takes Photoshop to load I have already edited and processing a few photos in FastStone.

It displays and edits RAW photos from Canon AND Sigma cameras.

The more you use it, the more you realize you are in the hands of a software developer who ACTUALLY LOVES photography as much as you do.

My only complaint is I couldn’t find an eye-dropper tool for the color balance. Then I started playing with the Red, Green and Blue sliders and realized I should just grow up and color to my taste, which I now do. Quickly of course–everything in FastStone is fast.

Want to process all your photos in batch mode? Oh it does so many things. I simply love it.