IIIF Image

Display high-quality images from our IIIF server that automatically adapt.

When to use

Use this pattern when you need to display images from Digital Collections. The pattern will automatically fetch the correct size and quality image to render in browser for you without any extra configuration.

This pattern is available to preview, but is not finalized and in development. If you'd like to try it out and give feedback, it's available in release 1.1.1-dev.*.

How to use

Use the identifier (uuid) of the image. You'll need this as it is a required attribute.

Write meaningful alt text. Describe what the image shows. Use an empty string (alt="") only when the image is purely decorative. See the W3C Web Accessibility Initiative (WAI) Images Tutorial for guidance on writing effective alt text.

Crop and configure as needed. Show just the portion you need, rotate images, or adjust quality using IIIF attributes. See attributes below for all configuration options.

Default

<pennlibs-iiif-img uuid="0a6b5b42-0e4e-4381-91b0-183b1b30e936" alt=""></pennlibs-iiif-img>

Crop

Use IIIF's percentage-based region syntax to crop specific portions of the image:

<pennlibs-iiif-img uuid="0a6b5b42-0e4e-4381-91b0-183b1b30e936" alt="" region="pct:50,31,31,23"></pennlibs-iiif-img>

Center crop images to a specific aspect ratio:

<pennlibs-iiif-img uuid="0a6b5b42-0e4e-4381-91b0-183b1b30e936" alt="" region="4:1"></pennlibs-iiif-img>

<pennlibs-iiif-img
  uuid="f0210189-db76-48af-b835-dd710d66d8b8"
  alt="Two people walking in the snow by a large tree"
  style="max-width: 32rem;"
></pennlibs-iiif-img>

Attributes

Attribute	Description	Type	Default
alt	Alternative text that describes the image content for screen readers and when images fail to load. Use an empty string for purely decorative images.	string
loading	Native browser lazy loading behavior. Use "lazy" to defer loading until the image is near the viewport, or "eager" to load immediately.	"eager" | "lazy"	'lazy'
quality	The IIIF quality of the image. Controls the color delivery mode. default: The server's default quality. color: Full color information. gray: Grayscale rendering. bitonal: Black and white only.	string	'default'
region	The IIIF region of the image to display. Defines the rectangular portion of the underlying image to return. full: The full image is returned, without any cropping. square: A square area where width and height equal the shorter dimension. width:height: Any aspect ratio format (e.g., 16:9, 4:3, 3:2, 21:9) applies a centered crop based on the source image dimensions and sets the CSS aspect-ratio property for layout reservation. x,y,w,h: Absolute pixel coordinates (x, y position; w, h dimensions). pct:x,y,w,h: Percentage-based coordinates of full image dimensions.	string	'full'
rotation	The IIIF rotation to apply to the image. Specifies mirroring and clockwise rotation in degrees (0-360). n: Rotation in degrees only. !n: Mirror the image vertically, then rotate by n degrees.	string	'0'
show-fallback	Whether to display a fallback placeholder image when the IIIF image fails to load.	boolean	true
uuid	The IIIF UUID identifier of the image resource on the Penn Libraries IIIF server.	string

Relevant guidelines

• 1.1.1 Non-text Content - Provide text alternatives for images
• IIIF Image API 3.0 - Technical specification for the IIIF Image API

Where it's used

This pattern is not in use yet.