This post was written by Andrew Gearhart, Web Developer in the Libraries’ Publishing and Curation Services department.
The International Image Interoperability Framework (IIIF) was created by a group of technical pioneers who are working to standardize the availability of images, making them accessible from multiple types of image stores to be used in variations that need not be pre-created. IIIF allows for dramatic flexibility in content delivery in multiple application contexts.
To give you an example, let’s take a digital image, scanned from a photograph in the Penn State Campus History collection, an archive of architectural renderings, documents, and aerial imagery. At upper left is a photo of Beaver Stadium showing the structure as it existed following the move from the northwest side of campus. With fewer than half of the number of seats of the current stadium, the older venue accommodated a total of 46,284 fans. It’s a great photo for folks who are interested in the history of Penn State football.
IIIF: Saving Our Data Plan
The photo, at its largest file size is about 450 KB and 1496 x 1199 pixels. This isn’t huge, but in terms of data, it would be a relatively large image to deliver to a device on a mobile (cellular) network. In terms of the iPhone 6, this would more than fill the entire screen. Since the goal usually isn’t to fill the entire screen, however, the image should be displayed as a smaller size. In most web page scenarios, this means that the code in the page (the HTML) will be told to show a smaller rendering. This doesn’t make the amount of data smaller; rather, it just makes the device show the image as smaller. Ideally, we would want to display the image at the same size that it’s being transferred. If the size were 500 x 500 pixels, then we would want that to be the size it is displayed, so that we’re not wasting data on the user’s data plan (or unnecessarily putting bandwidth load on the servers). In the past, to do this the user was presented with a small image option to preview the image. When the user was sure that they wanted to see a bigger image, they had the option to download the larger size. This works in some situations, but as screen sizes have become so variable, it is difficult to guess adequately what size the user would consider a good preview. What is needed is a way to determine dynamically the correct size of the image that should be downloaded. Determining the appropriate size can be done through modern browser viewport detection techniques. Unfortunately, there isn’t a standard method for delivering a dynamic image – or hasn’t been, until now with IIIF.
IIIF: Delivering Focus
One of the other uses of IIIF is the ability to serve the image with a menu of available adjustments that can be performed on the image, including cropping and rotation. This allows the user to highlight what is being shown with the image without the need to edit it with an image editor. IIIF can dramatically help content creators as it gives them the ability to specify an area of an image to be highlighted without the need to manipulate the image and create derivatives. Instead, the image derivatives are cached copies that are held by the image server and require no more extra effort than the change made to the URL of the image as it is being requested from the image server. As an example, our digitized image of Beaver Stadium from 1960 could highlight the roads (all dirt), or the open south-end of the stadium, or the seating variances that occurred on the 50-yard line. With IIIF, this can be done with simple changes to the URL, instead of downloads and edits of the image.
IIIF: Delivering Exposure
Finally, IIIF allows for one additional element – the delivery of greater exposure to collections. One of the great aspects of open source software and open application programming interfaces (APIs) is the ability to stand on the shoulders of giants and create derivative works where the original creator perhaps had never anticipated them. IIIF allows for these types of works in image viewing tools such as OpenSeaDragon, Leaflet-IIIF, and Mirador. These tools allow for the deep exploration of high resolution images (e.g., OpenSeaDragon and Leaflet-IIIF) as well as quick browsing across multiple image collections (Mirador).
These tools are just starting, but they are the beginning of delivering a richer and more efficient Internet that reaches into the depth of digital collections around the world.