Overview

IIIF is a series of APIs (application programming interface) that work together to enable access for images on the Web.

Wut?

For one thing, it means that content providers can publish high-resolution images that are quickly viewable at great detail.

It also means that IIIF users can read and collaboratively annotate published books.

It means a whole lot of things, and we'll explore some of the possibilities today.

What is IIIF?

IIIF is a series of APIs that allows you to access images on the Web. These APIs are community and use case driven and really were formed out of common needs from organizations delivering images on the Web.

This can be as simple as just putting an image tag in a webpage.

Or as advanced as reading a large book in its entirety.

We can now share images.

We can collaborate on viewer software development.

We can solve common problems together.

IIIF also refers to the community of content providers, software developers, and researchers who are using the technology.

What can IIIF do?

We just saw that IIIF has several applications for using images on the Web. There are many more.

IIIF can be used for georeferencing historic maps

Or work with others to annotatate a manuscript

The API specifications have been driven by community use cases and integration with other Web standards.

As of September 2017 the current IIIF Technical Specifications are:

• IIIF Image API
• IIIF Presentation API
• IIIF Authentication API
• IIIF Search API

The two most established IIIF APIs are the Image and Presentation APIs. Let’s get started with the Image API.

Image API

The IIIF Image API is designed for standardization of requesting and delivering images on the Web. What does that mean beyond the <img> tag?

We saw earlier that you can use it to embed an image in a webpage. Here is that example again.

This example uses the Image API to request an image from a IIIF image server. If you click on “HTML” you can see the URL that is being requested.

This URL is crafted to extract a specific region, at a relative size, from the high quality original image. The original image is measured at 5426 x 3820 pixels and has a file size of 4.7MB. Bad UX for web users! The IIIF Image API allows you to serve out derivative versions of these images in a standardized way, without having to generate derivatives in advance.

Zoomable Images

Several different libraries now exist to use the IIIF Image API to provide a “deep zoom” for the images. The previous slide contains an example of the Leaflet-IIIF. Here you can see the entire image and zoom in with great detail. Using tiled zoom enables viewing of high resolution images without needing to download the full resolution images.

How does all of this work?

The IIIF Image API server knows how to efficiently deliver these images to the viewer client. The viewer client knows what types of images that it can request from the server. The client gets this information from the server through a Image Information request.

Let’s dive into more of how the Image API works.

Image API Playground

The IIIF Image API makes requests to images using a specified URI syntax which changes what image is requested. The syntax consists of a way to identify the image to be requested, as well as additional parameters that can be used to modify the way the image comes back. These request parameters can modify the region of the image, its size, rotation, quality, and the image format. See the API documentation for parameter options you can use.

Image API Region Examples

Image API Size Examples

Image API Playground

Now that we have learned the basics of requesting images, we need to figure out how to request images that are grouped together.

Presentation API

The IIIF Presentation API gives us a specification for “presenting” images. A common example to think about this is a book.

If you want to display a group of images that represent pages in a book, you first need to know a few things about that book:

• Title
• Pages
• Page Order
• Viewing Direction

This and much more can be accomplished using the IIIF Presentation API.

Core Concepts

The Presentation API consists of a JSON-LD server response that specifies how resources (images) should be presented. There are a few base concepts that are used throughout the IIIF documentation and community and are important to understand.

Core Concepts

Manifest

A manifest represents the overall description of the “thing” (object) being presented. This could be a book, a photograph, or an image of a tree.

Manifest Example

{
  "@context": "http://iiif.io/api/presentation/2/context.json",
  "@type": "sc:Manifest",
  "@id": "http://example.org/iiif/book1/manifest",

  "label": "Book 1",
  "metadata": [
    {"label": "Author", "value": "Anne Author"},
    {"label": "Published", "value": [
        {"@value": "Paris, circa 1400", "@language": "en"},
        {"@value": "Paris, environ 14eme siecle", "@language": "fr"}
        ]
    }
  ],
  "description": "A longer description of this example book.",
  "navDate": "1856-01-01T00:00:00Z",

  "license": "https://creativecommons.org/publicdomain/zero/1.0/",
  "attribution": "Provided by Example Organization",
  "service": {
    "@context": "http://example.org/ns/jsonld/context.json",
    "@id": "http://example.org/service/example",
    "profile": "http://example.org/docs/example-service.html"
  },
...
  "sequences": [
...
						

Sequence

The next key concept, is a sequence. A sequence defines the order of view of the object. A manifest can have more than one valid sequence if for some reason it has been reordered.

Sequence Example

...
  "sequences": [
    {
      "@id": "http://example.org/iiif/book1/sequence/normal",
      "@type": "sc:Sequence",
      "label": "Current Page Order",
      "viewingDirection": "left-to-right",
      "viewingHint": "paged",
      "canvases": [
...
						

Canvas

Canvases are used as a container for adding content to the Manifest. For instance, a canvas could contain both an image of a book page and associated transcriptions for that page.

Canvas Example

...
  "canvases": [
    {
      "@id": "http://example.org/iiif/book1/canvas/p1",
      "@type": "sc:Canvas",
      "label": "p. 1",
      "height":1000,
      "width":750,
      "images": [
...
						

Content

Content is used to describe viewable resources that can be placed on a canvas. These could be images that represent a book page, transcription text, or annotation notes.

Content Example

...
"images": [
  {
    "@type": "oa:Annotation",
    "motivation": "sc:painting",
    "resource":{
      "@id": "http://example.org/iiif/book1/res/page1.jpg",
      "@type": "dctypes:Image",
      "format": "image/jpeg",
      "service": {
        "@context": "http://iiif.io/api/image/2/context.json",
        "@id": "http://example.org/images/book1-page1",
        "profile": "http://iiif.io/api/image/2/level1.json"
      },
      "height":2000,
      "width":1500
    },
    "on": "http://example.org/iiif/book1/canvas/p1"
  }
],
...
						

There are some more resource types used in the IIIF Presentation API but lets just focus on these now.

Back to the example

Now that we have somewhat of an idea of what these types are, lets relate them back to our example of the book.

• Manifest - Basic information about the book, including whether or not the images should be viewed as pages
• Sequence - Order of the “pages” of the book
• Canvas - Virtual container of the “page” of each book
• Content - Image of each page, to be added to the canvas

A IIIF client consuming this response would now know how to display the book, associated metadata for the book, and what images represent the pages and their order.