翻译：宋杰
原文地址：https://iiif.io/api/cookbook/recipe/0232-image-thumbnail-canvas/

用例

本实施讨论描述了使用缩略图属性在 IIIF 清单中指定资源的缩略图的几种方法。

虽然声明缩略图不是必须的，但有几种情况下 Presentation API 3.0 推荐使用缩略图。

  • 为集合或清单提供一个代表性的图像
  • 当Canvas有多个资源组成视图时
  • 当一个内容资源是资源选择中的一个选项时

Presentation API 3.0 并未明确推荐画布使用缩略图，因为大多数查看客户端都会从资源中渲染缩略图；不过，在画布上声明缩略图会有好处，以提高缩略图在查看器中的加载效率。这在有许多Canvases的Manifest中特别明显，比如有许多高分辨率图像的书籍和手稿。在这些情况下，当缩略图被加载到查看器中时，查看器会同时请求所有的源图像，这对图像服务器来说是一个资源密集型的任务。

缓解这些性能问题的一个选择是配置缩略图属性，为查看器客户端提供更明确的指示，说明如何处理缩略图。本实施讨论的重点是概述在Canvases上声明缩略图的最有效方法，以优化处理和渲染。这里的建议是为了指导Manifests的发布者和查看客户端的开发者。虽然这里的例子是为了优化画布上的缩略图的处理，但它们同样适用于其他IIIF资源类型（Manifest、Collection等）。关于缩略图的一般介绍，请看Manifest的图像缩略图配方。

注意：还有其他缓解此类性能问题的选项，例如预先缓存选定的图像尺寸，以便使用CDN或其他快速访问策略提供 “预热 “的缩略图；然而，这超出了本实施讨论的范围。

实施说明

最小的缩略图要求

至少，缩略图thumbnail属性需要id和type属性。强烈建议也包括格式format、高度height和宽度width属性。

  1. "thumbnail": [
  2.   {
  3.     "id": "https://fixtures.iiif.io/video/indiana/donizetti-elixir/act1-thumbnail.png",
  4.     "type": "Image",
  5.     "format": "image/png",
  6.     "width": 640,
  7.     "height": 360
  8.   }
  9. ]

这种配置在大多数情况下并不理想，因为它没有为客户提供尺寸选择。如果提供的尺寸太小，不能满足客户的缩略图要求，调整尺寸可能会带来伪影，看起来像像素一样。在这种配置下，缩小图片的尺寸比要求完美的尺寸更可取。

上述配置最适合用于缩略图的图像不是IIIF图像的情况，如A/V材料的缩略图，出版商可能没有专门用于缩略图的IIIF图像服务器。

带有 IIIF 图像服务的缩略图

对于缩略图来自于IIIF图像的情况，建议包括一个IIIF图像API服务，以允许客户完全灵活地选择适合其界面的缩略图。关于这种方法的一个例子，请看Manifest的图像缩略图专题。

这种方法可能是集合或清单缩略图的一个很好的选择，但对于画布来说，这种方法仅仅是重复了画布资源的图像服务，而且在客户端忽略给定的缩略图尺寸而选择图像服务的情况下，我们在性能方面没有任何收获。

缩略图与IIIF图像服务+JSON图像响应尺寸

由于单独添加一个服务并没有给我们带来任何好处，我们可以更进一步，从JSON图像响应中包括所有或选择预缓存的尺寸，并将配置文件设置为0级。广告适当的预缓存尺寸为查看客户端提供了一个可用的尺寸选项列表，它可以检索而不是使用图像服务，从而优化了缩略图的生成和交付。

  1. "thumbnail": [
  2.   {
  3.     "id": "https://fixtures.iiif.io/other/level0/Glen/photos/gottingen/full/max/0/default.jpg",
  4.     "type": "Image",
  5.     "format": "image/jpg",
  6.     "width":252,
  7.     "height":189,
  8.     "service": [
  9.       {
  10.         "id":"https://fixtures.iiif.io/other/level0/Glen/photos/gottingen",
  11.         "profile": "level0",
  12.         "type": "ImageService3",
  13.         "sizes":[
  14.           {
  15.             "width": 126,
  16.             "height": 95
  17.           },
  18.           {
  19.             "width": 252,
  20.             "height": 189
  21.           },
  22.           {
  23.             "width": 504,
  24.             "height": 378
  25.           }
  26.         ]
  27.       }
  28.     ]
  29.   }
  30. ]

在这个配置中，我们可能期望客户端首先尝试给定的缩略图尺寸（252x189），然后如果太小，就使用图像服务中的一个预缓存图像（252x189或504x378）。由于我们使用的是0级，客户最好选择最合适的尺寸，可能只是大一些，然后根据需要缩小图片，以最适合视图。

另外，我们可以将图像服务配置文件改为1级或2级。在这种情况下，如果预先缓存的尺寸都不合适，那么客户仍然可以在需要时请求一个自定义的尺寸。在这里，我们给客户提供了一些选择，让他们在求助于自定义图片请求之前进行尝试，但最终客户可能还是会请求自定义图片，在这种情况下，缩略图属性基本上又是在重复Canvas资源的服务；不过，这个选项可以确保在提供的尺寸对缩略图视图来说不是最佳的情况下，选择合适的缩略图尺寸。

限制

未知。

示例

下面的两个Manifest演示了Canvases上缩略图属性的使用：第一个指定了一个视频文件的缩略图，遵循最小缩略图要求选项；第二个是一个图像文件的缩略图，使用IIIF图像服务+JSON图像响应尺寸选项。注意：这里的图像缩略图指定的是0级配置文件，但如果希望为自定义尺寸留有余地，可以改为1级配置文件。

JSON-LD | 在 Mirador 中查看 | 在Uinversal Viewer中查看

  1. {
  2.   "@context": "http://iiif.io/api/presentation/3/context.json",
  3.   "id": "https://iiif.io/api/cookbook/recipe/0232-image-thumbnail-canvas/manifest-av.json",
  4.   "type": "Manifest",
  5.   "label": {
  6.     "en": [
  7.       "Video recording of Donizetti's _The Elixir of Love_"
  8.     ]
  9.   },
  10.   "items": [
  11.     {
  12.       "id": "https://iiif.io/api/cookbook/recipe/0232-image-thumbnail-canvas/canvas/donizetti/1",
  13.       "type": "Canvas",
  14.       "label": {
  15.         "en": [
  16.           "The Elixir of Love, Act 1"
  17.         ]
  18.       },
  19.       "duration": 3971.243,
  20.       "width": 640,
  21.       "height": 360,
  22.       "thumbnail": [
  23.         {
  24.           "id": "https://fixtures.iiif.io/video/indiana/donizetti-elixir/act1-thumbnail.png",
  25.           "type": "Image",
  26.           "format": "image/png",
  27.           "width": 640,
  28.           "height": 360
  29.         }
  30.       ],
  31.       "items": [
  32.         {
  33.           "id": "https://iiif.io/api/cookbook/recipe/0232-image-thumbnail-canvas/donizetti/1/1",
  34.           "type": "AnnotationPage",
  35.           "items": [
  36.             {
  37.               "id": "https://iiif.io/api/cookbook/recipe/0232-image-thumbnail-canvas/donizetti/1/1-video",
  38.               "type": "Annotation",
  39.               "motivation": "painting",
  40.               "body": {
  41.                 "id": "https://fixtures.iiif.io/video/indiana/donizetti-elixir/vae0637_accessH264_low_act_1.mp4",
  42.                 "type": "Video",
  43.                 "duration": 3971.243,
  44.                 "width": 640,
  45.                 "height": 360,
  46.                 "format": "video/mp4"
  47.               },
  48.               "target": "https://iiif.io/api/cookbook/recipe/0232-image-thumbnail-canvas/canvas/donizetti/1"
  49.             }
  50.           ]
  51.         }
  52.       ]
  53.     },
  54.     {
  55.       "id": "https://iiif.io/api/cookbook/recipe/0232-image-thumbnail-canvas/canvas/donizetti/2",
  56.       "type": "Canvas",
  57.       "label": {
  58.         "en": [
  59.           "The Elixir of Love, Act 2"
  60.         ]
  61.       },
  62.       "duration": 3307.224,
  63.       "width": 640,
  64.       "height": 360,
  65.       "thumbnail": [
  66.         {
  67.           "id": "https://fixtures.iiif.io/video/indiana/donizetti-elixir/act2-thumbnail.png",
  68.           "type": "Image",
  69.           "format": "image/png",
  70.           "width": 640,
  71.           "height": 360
  72.         }
  73.       ],
  74.       "items": [
  75.         {
  76.           "id": "https://iiif.io/api/cookbook/recipe/0232-image-thumbnail-canvas/donizetti/2/1",
  77.           "type": "AnnotationPage",
  78.           "items": [
  79.             {
  80.               "id": "https://iiif.io/api/cookbook/recipe/0232-image-thumbnail-canvas/donizetti/2/1-video",
  81.               "type": "Annotation",
  82.               "motivation": "painting",
  83.               "body": {
  84.                 "id": "https://fixtures.iiif.io/video/indiana/donizetti-elixir/vae0637_accessH264_low_act_2.mp4",
  85.                 "type": "Video",
  86.                 "duration": 3307.224,
  87.                 "width": 640,
  88.                 "height": 360,
  89.                 "format": "video/mp4"
  90.               },
  91.               "target": "https://iiif.io/api/cookbook/recipe/0232-image-thumbnail-canvas/canvas/donizetti/2"
  92.             }
  93.           ]
  94.         }
  95.       ]
  96.     }
  97.   ]
  98. }

JSON-LD | 在 Mirador 中查看 | 在Uinversal Viewer中查看

  1. {
  2.   "@context": "http://iiif.io/api/presentation/3/context.json",
  3.   "id": "https://iiif.io/api/cookbook/recipe/0232-image-thumbnail-canvas/manifest-image.json",
  4.   "type": "Manifest",
  5.   "label": {
  6.     "en": [
  7.       "Gänseliesel-Brunnen, Göttingen"
  8.     ]
  9.   },
  10.   "items": [
  11.     {
  12.       "id": "https://iiif.io/api/cookbook/recipe/0232-image-thumbnail-canvas/canvas/p1",
  13.       "type": "Canvas",
  14.       "label": {
  15.         "en": [
  16.           "Photo of the Gänseliesel-Brunnen taken at the 2019 IIIF Conference"
  17.         ]
  18.       },
  19.       "width": 4032,
  20.       "height": 3024,
  21.       "thumbnail": [
  22.         {
  23.           "id": "https://fixtures.iiif.io/other/level0/Glen/photos/gottingen/full/max/0/default.jpg",
  24.           "type": "Image",
  25.           "format": "image/jpg",
  26.           "width": 252,
  27.           "height": 189,
  28.           "service": [
  29.             {
  30.               "id": "https://fixtures.iiif.io/other/level0/Glen/photos/gottingen",
  31.               "profile": "level0",
  32.               "type": "ImageService3",
  33.               "sizes": [
  34.                 {
  35.                   "width": 126,
  36.                   "height": 95
  37.                 },
  38.                 {
  39.                   "width": 252,
  40.                   "height": 189
  41.                 },
  42.                 {
  43.                   "width": 504,
  44.                   "height": 378
  45.                 }
  46.               ]
  47.             }
  48.           ]
  49.         }
  50.       ],
  51.       "items": [
  52.         {
  53.           "id": "https://iiif.io/api/cookbook/recipe/0232-image-thumbnail-canvas/page/p1/1",
  54.           "type": "AnnotationPage",
  55.           "items": [
  56.             {
  57.               "id": "https://iiif.io/api/cookbook/recipe/0232-image-thumbnail-canvas/annotation/p0001-image",
  58.               "type": "Annotation",
  59.               "motivation": "painting",
  60.               "body": {
  61.                 "id": "https://iiif.io/api/image/3.0/example/reference/918ecd18c2592080851777620de9bcb5-gottingen/full/max/0/default.jpg",
  62.                 "type": "Image",
  63.                 "format": "image/jpeg",
  64.                 "width": 4032,
  65.                 "height": 3024,
  66.                 "service": [
  67.                   {
  68.                     "id": "https://iiif.io/api/image/3.0/example/reference/918ecd18c2592080851777620de9bcb5-gottingen",
  69.                     "profile": "level1",
  70.                     "type": "ImageService3"
  71.                   }
  72.                 ]
  73.               },
  74.               "target": "https://iiif.io/api/cookbook/recipe/0232-image-thumbnail-canvas/canvas/p1"
  75.             }
  76.           ]
  77.         }
  78.       ]
  79.     },
  80.     {
  81.       "id": "https://iiif.io/api/cookbook/recipe/0232-image-thumbnail-canvas/canvas/p2",
  82.       "type": "Canvas",
  83.       "label": {
  84.         "en": [
  85.           "Gänseliesel-Brunnen at Night"
  86.         ]
  87.       },
  88.       "width": 3024,
  89.       "height": 4032,
  90.       "thumbnail": [
  91.         {
  92.           "id": "https://fixtures.iiif.io/other/level0/Glen/photos/fountain/full/max/0/default.jpg",
  93.           "type": "Image",
  94.           "format": "image/jpg",
  95.           "width": 189,
  96.           "height": 252,
  97.           "service": [
  98.             {
  99.               "id": "https://fixtures.iiif.io/other/level0/Glen/photos/fountain",
  100.               "profile": "level0",
  101.               "type": "ImageService3",
  102.               "sizes": [
  103.                 {
  104.                   "width": 95,
  105.                   "height": 126
  106.                 },
  107.                 {
  108.                   "width": 189,
  109.                   "height": 252
  110.                 },
  111.                 {
  112.                   "width": 378,
  113.                   "height": 504
  114.                 }
  115.               ]
  116.             }
  117.           ]
  118.         }
  119.       ],
  120.       "items": [
  121.         {
  122.           "id": "https://iiif.io/api/cookbook/recipe/0232-image-thumbnail-canvas/page/p2/1",
  123.           "type": "AnnotationPage",
  124.           "items": [
  125.             {
  126.               "id": "https://iiif.io/api/cookbook/recipe/0232-image-thumbnail-canvas/annotation/p0002-image",
  127.               "type": "Annotation",
  128.               "motivation": "painting",
  129.               "body": {
  130.                 "id": "https://iiif.io/api/image/3.0/example/reference/918ecd18c2592080851777620de9bcb5-fountain/full/max/0/default.jpg",
  131.                 "type": "Image",
  132.                 "format": "image/jpeg",
  133.                 "width": 3024,
  134.                 "height": 4032,
  135.                 "service": [
  136.                   {
  137.                     "id": "https://iiif.io/api/image/3.0/example/reference/918ecd18c2592080851777620de9bcb5-fountain",
  138.                     "profile": "level1",
  139.                     "type": "ImageService3"
  140.                   }
  141.                 ]
  142.               },
  143.               "target": "https://iiif.io/api/cookbook/recipe/0232-image-thumbnail-canvas/canvas/p2"
  144.             }
  145.           ]
  146.         }
  147.       ]
  148.     }
  149.   ]
  150. }

相关专题

  • 支持深度查看，基本使用IIIF图像服务
  • 清单的图像缩略图