Easy image alignment with IIIF

This blog post is an edited version of a presentation I originally gave at the 2017 Summer IIIF conference at the Vatican.

The V&A holds many of the UK’s national collections and houses some of the greatest resources for the study of a wide range of art and design subjects. As such, it is a place where comparisons are both inevitable and encouraged, and there are various contexts where we would like to present sets of images together for close comparison.
For example, when we have different types of imaging techniques revealing hidden details, as with x-ray photography.

Or when we would like to show how a restoration process can change the appearance of important works in our collection, such as Constable’s oil sketch of The Hay Wain.

Or the process of artists themselves through their preparatory sketches.

And the different techniques, such as drawing, painting, tapestry and woodcut printing, employed by artists, as with Raphael’s The Miraculous Draught of Fishes.

One of the ways we would like to present images for comparison, or indeed, details of those images, is to overlay them and provide an interactive control for contrasting each layer in place.

For example, a user could effectively look through an image to reveal an x-ray of the subject, as in our article on x-raying Balenciaga.

Our objective is not to make images match each other in perfect alignment if they don’t naturally. Scaling and cropping is sufficient for our needs and we would not want to deform images in order to make all details neatly line up. Take some of Constable’s preparatory sketches, for example. By aligning the main tower as a consistent focal point, with birds attached, we can spot more transient details changing. It is interesting to note that in some of Constable’s studies we can see him shifting fixed objects, or removing them entirely.

IIIF (International Image Interoperability Framework) provides the perfect solution to a number of the problems we face in wanting to present the kinds of image comparisons I’ve just mentioned.
The uptake of IIIF amongst community-minded organisations opens up the possibilities for us all to collect our works together, freely. This becomes particularly beneficial to everyone when it enables curators to reunite objects which are related in various contexts, or perhaps simply to complete collections which have been dispersed over time.

Another thing IIIF enables us to do easily, and on the fly, is to chose a specific region of an image to display, depending on the context.

I wanted to make a simple tool that could be embedded in our main site CMS (content management system), that would make it even easier for our content editors to prepare images visually, particularly for aligning relative to each other when overlaid.
I didn’t have to be Einstein to realise that positioning and sizing a clip region (as in the figure above), would be the same as moving and scaling an image layer behind a fixed clip region (all things being relative), and that was the basis for the UI (user interface).

The video below shows how only basic gestures are needed, such as using the mousewheel or scroll to resize, and click and drag to reposition.

The next fundamental control is the slider, which takes the user through the layer stack, with opacity fading to facilitate the alignment of the layers visually. The image source input field updates dynamically to indicate the name of the layer currently being operated on.

After adding a few other handy controls (sparingly) for a lean, uncluttered interface, I ended up with something reasonably intuitive that I hope anyone can put to good use – despite its basic design.

The output produced is all fluid, scaling to the available space, and serves the prepared images from IIIF using responsive image tags for optimal performance and efficiency.

In the simplest use case, this tool can be used for re-framing single images for embedding in articles but another bonus application is for use in producing interactive animations.

For my next project I’m planning to re-animate some of Eadweard Muybridge’s famous pioneering work (where he captured motion in frames for the first time) to reanimate his studies of movement and make them interactive for all.

If you want a closer look, or just to have a play, you can try out the demo for yourself.

And please join the IIIF community. You could start here at the V&A where we are hosting a IIIF Showcase on Thursday 2 November. Hope to see you there!