Introduction to the International Image Interoperability Framework (IIIF)

IIIF Slides

Why IIIF?

Fast, rich, zoom and pan delivery of images
Manipulation of size, scale, region of interest, rotation, quality and format.
Annotation - IIIF has native compatibility with the W3C annotation working group’s Web Annotation Data Model, which supports annotating content on the Web. Users can comment on, transcribe, and draw on image-based resources using the Web’s inherent architecture.
Assemble and use image-based resources from across the Web, regardless of source. Compare pages, build an exhibit, or view a virtual collection of items served from different sites.
Cite and Share - IIIF APIs provide motivation for persistence, providing portable views of images and/or regions of images. Cite an image with confidence in stable image URIs, or share it for reference by others–or yourself in a different environment.

Uses

Digital rebinding
Annotate and share/embed image regions
Compare across collections/institutions
Co-locate dispersed materials

The IIIF Image API provides:

Consistent way to access image derivatives
Publish once, reuse often - one source of “truth”
Standard URL structure for accessing images
Supports rights/access management
Supports tiling for faster loading and super zoom of hi-res images

Examples:
https://iiif.io/api/image/2.1/#image-request-uri-syntax

http://www.e-codices.unifr.ch/loris/cma/cma-1955-74/cma-1955-74_000b.jp2/100,100,1000,750/full/45/default.jpg

Web Annotation Data Model {scheme}://{server}{/prefix}/{identifier}/{region}/{size}/{rotation}/{quality}.{format}

crop percent or pixel, s

Pyramids - how IIIF enables Deep Zoom

http://tomcrane.github.io/presentations/tile-exploder.html

You can pretile your images.

Image Information (info.json)

Essentially: what can we do with a particular image
- how far we can zoom in
- possible transformations
- available services (e.g. auth, physical dimension info) https://iiif.io/api/image/2.1/#image-information

{
  "@context" : "http://iiif.io/api/image/2/context.json",
  "@id" : "http://www.example.org/image-service/abcd1234/1E34750D-38DB-4825-A38A-B60A345E591C",
  "protocol" : "http://iiif.io/api/image",
  "width" : 6000,
  "height" : 4000,
  "sizes" : [
    {"width" : 150, "height" : 100},
    {"width" : 600, "height" : 400},
    {"width" : 3000, "height": 2000}
  ],
  "tiles": [
    {"width" : 512, "scaleFactors" : [1,2,4,8,16]}
  ],
  "profile" : [ "http://iiif.io/api/image/2/level2.json" ]
}

Image API Compliance Level

Something like a “grade” for an image server
Per-image
Tradeoff between feature richness and code complexity / performance
- Optimal compliance level depends on use case https://iiif.io/api/image/2.1/compliance/

Image API Clients

Enables an interactive viewing experience according to what the image server can provide (defined by info.json)

Leaflet-IIIF: https://showcase.iiif.io/showcase/leaflet-iiif-viewer/
OpenSeaDragon: https://openseadragon.github.io

Hands-on: Getting started with Cantaloupe

Login to C9.io Clone workspace Explore our IIIF environment README.md ; cantaloupe-images ; start servers Open IIIF Image API Endpoint ; Cantaloupe admin Request an image ; image info

Hands-on: Image API clients

Start static server in C9.io (see README.md)
Open and inspect the leaflet.js file
- How would we display one of our hosted images?
- Open the viewer with your hosted image in a browser
Open and inspect the openseadragon.html file
- What are some options we can configure?
  - https://openseadragon.github.io/docs/OpenSeadragon.html#.Options
- Open the viewer in your browser

The IIIF Presentation API

The IIIF Presentation API provides:

A model for describing digital representations of objects - “just enough metadata to drive a remote viewing experience”
A standard for software -- viewing environments, annotation clients, websites

Presentation semantics rather than descriptive semantics

Info about the images, audio, video, text and other content so we can display, search, reuse them
Info about the structure of the object to navigate it
Info about pagination, orientation, reading direction and other hints at how to present the content

Anatomy of a manifest: basic resource types

Manifests for Things

Represents the object - a book, painting, manuscript, map, collection, etc.
The manifest contains all the presentation metadata that drives the viewing experience
Can also contain descriptive metadata, but ...
A manifest is made up of Canvases which have content annotated on to them

Canvases for Views

A Canvas ≠ an image
Think of it as a blank canvas onto which we “paint” content
A Canvas has height, width, and aspect ratios which can be used to precisely position content to create viewing experiences
Using Canvases allows for multiple representations or views of the content

Annotations for Content

Content can be images, audio, video, text, links to other resources, etc. Association of content with a canvas is done by Annotation IIIF Presentation API is built on the W3C Web Annotation Data Model In IIIF, the image itself is one just of the pieces of content annotating the abstract canvas. There may be multiple images, there may be no images at all.

jsonld

We can link to our images to other peoples' annotations et cetera
ld- linked-data

https://json-ld.org/

{
  "@context": "https://json-ld.org/contexts/person.jsonld",
  "@id": "http://dbpedia.org/resource/John_Lennon",
  "name": "John Lennon",
  "born": "1940-10-09",
  "spouse": "http://dbpedia.org/resource/Cynthia_Lennon"
}

Bodleian's Digital Manuscripts Toolkit

Manifest Editor : Metadata Transformation Tools : Docker Images

Let’s build a manifest with the Bodleian Manifest Editor! https://digital.bodleian.ox.ac.uk

Image

http://iiif-kirschbombe.c9users.io/iiif/2/kabuki%2Fucla_bib1987273_no001_rs_001.jpg/full/full/0/default.jpg

`info.json`

http://iiif-kirschbombe.c9users.io/iiif/2/kabuki%2Fucla_bib1987273_no001_rs_001.jpg/info.json

{"@context":"http://iiif.io/api/image/2/context.json","@id":"http://iiif-kirschbombe.c9users.io/iiif/2/kabuki%2Fucla_bib1987273_no001_rs_001.jpg","protocol":"http://iiif.io/api/image","width":2000,"height":2350,"sizes":[{"width":125,"height":147},{"width":250,"height":294},{"width":500,"height":588},{"width":1000,"height":1175},{"width":2000,"height":2350}],"tiles":[{"width":1000,"height":1175,"scaleFactors":[1,2,4,8,16]}],"profile":["http://iiif.io/api/image/2/level2.json",{"formats":["jpg","tif","gif","png"],"maxArea":400000000,"qualities":["bitonal","default","gray","color"],"supports":["regionByPx","sizeByW","sizeByWhListed","cors","regionSquare","sizeByDistortedWh","sizeAboveFull","canonicalLinkHeader","sizeByConfinedWh","sizeByPct","jsonldMediaType","regionByPct","rotationArbitrary","sizeByH","baseUriRedirect","rotationBy90s","profileLinkHeader","sizeByForcedWh","sizeByWh","mirroring"]}]}

{  
   "@context":"http://iiif.io/api/image/2/context.json",
   "@id":"http://iiif-kirschbombe.c9users.io/iiif/2/kabuki%2Fucla_bib1987273_no001_rs_001.jpg",
   "protocol":"http://iiif.io/api/image",
   "width":2000,
   "height":2350,
   "sizes":[  
      {  
         "width":125,
         "height":147
      },
      {  
         "width":250,
         "height":294
      },
      {  
         "width":500,
         "height":588
      },
      {  
         "width":1000,
         "height":1175
      },
      {  
         "width":2000,
         "height":2350
      }
   ],
   "tiles":[  
      {  
         "width":1000,
         "height":1175,
         "scaleFactors":[  
            1,
            2,
            4,
            8,
            16
         ]
      }
   ],
   "profile":[  
      "http://iiif.io/api/image/2/level2.json",
      {  
         "formats":[  
            "jpg",
            "tif",
            "gif",
            "png"
         ],
         "maxArea":400000000,
         "qualities":[  
            "bitonal",
            "default",
            "gray",
            "color"
         ],
         "supports":[  
            "regionByPx",
            "sizeByW",
            "sizeByWhListed",
            "cors",
            "regionSquare",
            "sizeByDistortedWh",
            "sizeAboveFull",
            "canonicalLinkHeader",
            "sizeByConfinedWh",
            "sizeByPct",
            "jsonldMediaType",
            "regionByPct",
            "rotationArbitrary",
            "sizeByH",
            "baseUriRedirect",
            "rotationBy90s",
            "profileLinkHeader",
            "sizeByForcedWh",
            "sizeByWh",
            "mirroring"
         ]
      }
   ]
}