Add Image cropping guide.

pages/content/image.mdx

@@ -95,3 +95,55 @@ This method is useful for large images that are served as tiles from a IIIF Imag
     <span>The Summons, 1856 by Emanuel Leutze. Harvard Art Museums.</span>
   </figcaption>
 </figure>
+
+### Pan-zoom using a specific region of a IIIF Image API endpoint
+
+In some cases, you may want to display a specific region of a IIIF Image API endpoint. This can be done by adding the `region` property to the `src` URL. The `region` property is formatted as `x,y,w,h`, where `x` and `y` are the coordinates of the top-left corner of the region, and `w` and `h` are the width and height of the region.
+
+To find the region coordinates:
+
+1. Navigate to the [IIIF Crop tool](https://ncsu-libraries.github.io/iiif-crop-tool/) created by NC State University Libraries.
+2. Input the IIIF Image API endpoint URL in the `Image URL` field, for example: `https://ids.lib.harvard.edu/ids/iiif/9013118`.
+3. Draw a rectangle around the region you want to display.
+4. Copy the generated URL and use this as the `src` value.
+
+In this example, the region of `188,650,914,712` is generated for the URL https://ids.lib.harvard.edu/ids/iiif/9013118/188,650,914,712/full/0/default.jpg.
+
+```mdx copy
+<Image
+  height="500px"
+  label="In the foreground of The Summons by Emanuel Leutze, a black-clad, masked figure emerges from behind a decorative screen to present a coin to a startled man in a red tunic, whose defensive posture and alarmed expression underscore the dramatic tension of the unexpected encounter."
+  src="https://ids.lib.harvard.edu/ids/iiif/9013118/188,650,914,712/full/0/default.jpg"
+/>
+```
+
+<figure style={{ margin: "var(--space-6) 0" }}>
+  <div
+    style={{
+      backgroundColor: "var(--gray-3)",
+      height: "500px",
+      position: "relative",
+      zIndex: "0",
+    }}
+  >
+    <Image
+      height="500px"
+      label="In the foreground of The Summons by Emanuel Leutze, a black-clad, masked figure emerges from behind a decorative screen to present a coin to a startled man in a red tunic, whose defensive posture and alarmed expression underscore the dramatic tension of the unexpected encounter."
+      src="https://ids.lib.harvard.edu/ids/iiif/9013118/188,650,914,712/full/0/default.jpg"
+    />
+  </div>
+  <figcaption
+    style={{
+      padding: "var(--space-3) 0",
+      fontSize: "var(--font-size-3)",
+      fontWeight: "500",
+    }}
+  >
+    <span>
+      In the foreground of The Summons by Emanuel Leutze, a black-clad, masked
+      figure emerges from behind a decorative screen to present a coin to a
+      startled man in a red tunic, whose defensive posture and alarmed
+      expression underscore the dramatic tension of the unexpected encounter.
+    </span>
+  </figcaption>
+</figure>