IIIF-enhanced Image Tags

Scenario 1 (client) - regular image tag with progressive deep zoom enhancement

In these examples, the image tag's src attribute is a IIIF Image API URL. It might be a crop, or the full region, at any size.

         
<img src="https://dlcs.io/.../full/400,/0/default.jpg" width="400" class="iiif-image" />

<img src="https://dlcs.io/.../full/600,/0/default.jpg" width="600" class="iiif-image" />

<script>
    $(".iiif-image").iiifImage();
</script>

The image source might have been selected from a IIIF resource in the editorial interface, using a cropping tool.

Click the images to deep zoom.

Scenario 2 (probably server) - responsive images from same IIIF source

In this example, the editor might have chosen a more detailed view for small devices, and two size variants of the full image.
A combination of art-directed cropping by a human and size selection by template logic allows for fully responsive images from a single IIIF source.

Change the screen width to see the different images.

          
<picture>
    <source media="(min-width: 1600px)" srcset="https://dlcs.io/.../120,850,2100,2000/1600,/0/default.jpg">
    <source media="(min-width: 700px)"  srcset="https://dlcs.io/.../250,850,1950,2000/1000,/0/default.jpg">
    <source media="(min-width: 400px)"  srcset="https://dlcs.io/.../250,850,900,1000/500,/0/default.jpg">
    <img alt="example image"               src="https://dlcs.io/.../250,850,900,1000/320,/0/default.jpg">
</picture>
cat