Easy image alignment with IIIF


Digital Media
August 23, 2017

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.

Silk taffeta evening dress, Balenciaga. © Victoria and Albert Museum
Silk taffeta evening dress, Balenciaga. © Victoria and Albert Museum
Silk taffeta evening dress, Balenciaga. X-ray © Nick Veasey, 2016.
Silk taffeta evening dress, Balenciaga. X-ray © Nick Veasey, 2016

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.

Before restoration. © Victoria and Albert Museum, London
Before restoration. Full-Scale Study for The Hay Wain, John Constable, about 1821, England. Museum no. 987-1900. © Victoria and Albert Museum, London
After restoration. © Victoria and Albert Museum, London
After restoration. Full-Scale Study for The Hay Wain, John Constable, about 1821, England. Museum no. 987-1900. © Victoria and Albert Museum, London

Or the process of artists themselves through their preparatory sketches.

Constable's preparatory sketches of Willy Lott's house.
From left to right: oil on canvas; oil on paper; oil on paper, reverse side. All of Willy Lott’s House near Flatwood Mill, John Constable, about 1811. © Victoria and Albert Museum, London

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

The Miraculous Draught of Fishes, drawing, Raphael, about 1515 © The Royal Collection
The Miraculous Draught of Fishes, drawing, Raphael, about 1515. © The Royal Collection
The Miraculous Draught of Fishes, cartoon, Raphael, about 1515 © The Royal Collection
The Miraculous Draught of Fishes, cartoon, Raphael, about 1515. © The Royal Collection
Tapestry © Vatican Museums
The Miraculous Draught of Fishes, tapestry, about 1517. © Vatican Museums
Woodcut © Victoria and Albert Museum
The Miraculous Draught of Fishes, woodcut, Ugo da Carpi, about 1518. © Victoria and Albert Museum, London

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.

We use third-party platforms (including Soundcloud, Spotify and YouTube) to share some content on this website. These set third-party cookies, for which we need your consent. If you are happy with this, please change your cookie consent for Targeting cookies.

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.

We use third-party platforms (including Soundcloud, Spotify and YouTube) to share some content on this website. These set third-party cookies, for which we need your consent. If you are happy with this, please change your cookie consent for Targeting cookies.

IIIF logo
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.

Requesting part of an image with the IIIF Image API
Requesting part of an image with the IIIF Image API

 

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.

We use third-party platforms (including Soundcloud, Spotify and YouTube) to share some content on this website. These set third-party cookies, for which we need your consent. If you are happy with this, please change your cookie consent for Targeting cookies.

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.

We use third-party platforms (including Soundcloud, Spotify and YouTube) to share some content on this website. These set third-party cookies, for which we need your consent. If you are happy with this, please change your cookie consent for Targeting cookies.

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.

We use third-party platforms (including Soundcloud, Spotify and YouTube) to share some content on this website. These set third-party cookies, for which we need your consent. If you are happy with this, please change your cookie consent for Targeting cookies.

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!

About the author


Digital Media
August 23, 2017

Lead front-end web developer for the V&A's Digital Media department, focused on optimised code, web standards, usability and accessibility.

More from Luca Carini
5 comments so far, view or add yours

Comments

Boisterous he on understood attachment as entreaties ye devonshire. In mile an form snug were been sell. Hastened admitted joy nor absolute gay its. Extremely ham any his departure for contained curiosity defective. Way now instrument had eat diminution melancholy expression sentiments stimulated. One built fat you out manor books. Mrs interested now his affronting inquietude contrasted cultivated. Lasting showing expense greater on colonel no.

Add a comment

Please read our privacy policy to understand what we do with your data.

MEMBERSHIP

Join today and enjoy unlimited free entry to all V&A exhibitions, Members-only previews and more

Find out more

SHOP

Find inspiration in our incredible range of exclusive gifts, jewellery, books, fashion, prints & posters and much more...

Find out more