diff --git a/package-lock.json b/package-lock.json
index 3941e89a..1db611db 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -32,6 +32,7 @@
         "react-dom": "^18.3.1",
         "react-error-boundary": "^4.1.2",
         "react-i18next": "^15.1.1",
+        "react-lazy-load-image-component": "^1.6.2",
         "sanitize-html": "^2.13.1",
         "swiper": "^9.0.0",
         "uuid": "^9.0.1"
@@ -10892,6 +10893,11 @@
       "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==",
       "dev": true
     },
+    "node_modules/lodash.debounce": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
+    },
     "node_modules/lodash.get": {
       "version": "4.4.2",
       "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
@@ -10905,6 +10911,11 @@
       "dev": true,
       "peer": true
     },
+    "node_modules/lodash.throttle": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
+      "integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ=="
+    },
     "node_modules/log-update": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/log-update/-/log-update-6.1.0.tgz",
@@ -13581,6 +13592,18 @@
       "dev": true,
       "peer": true
     },
+    "node_modules/react-lazy-load-image-component": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/react-lazy-load-image-component/-/react-lazy-load-image-component-1.6.2.tgz",
+      "integrity": "sha512-dAdH5PsRgvDMlHC7QpZRA9oRzEZl1kPFwowmR9Mt0IUUhxk2wwq43PB6Ffwv84HFYuPmsxDUCka0E9KVXi8roQ==",
+      "dependencies": {
+        "lodash.debounce": "^4.0.8",
+        "lodash.throttle": "^4.1.1"
+      },
+      "peerDependencies": {
+        "react": "^15.x.x || ^16.x.x || ^17.x.x || ^18.x.x"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.14.2",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz",
diff --git a/package.json b/package.json
index 6087434a..267d4896 100644
--- a/package.json
+++ b/package.json
@@ -95,6 +95,7 @@
     "react-dom": "^18.3.1",
     "react-error-boundary": "^4.1.2",
     "react-i18next": "^15.1.1",
+    "react-lazy-load-image-component": "^1.6.2",
     "sanitize-html": "^2.13.1",
     "swiper": "^9.0.0",
     "uuid": "^9.0.1"
diff --git a/src/components/Viewer/Media/Thumbnail.tsx b/src/components/Viewer/Media/Thumbnail.tsx
index 7428fe04..b6bb19ce 100644
--- a/src/components/Viewer/Media/Thumbnail.tsx
+++ b/src/components/Viewer/Media/Thumbnail.tsx
@@ -14,6 +14,7 @@ import { Label } from "src/components/Primitives";
 import React from "react";
 import { convertTime } from "src/lib/utils";
 import { getLabel } from "src/hooks/use-iiif";
+import { LazyLoadImage } from "react-lazy-load-image-component";
 
 /**
  * Determine appropriate icon by resource type
@@ -69,7 +70,13 @@ const Thumbnail: React.FC<ThumbnailProps> = ({
     >
       <figure>
         <div>
-          {thumbnail?.id && <img src={thumbnail.id} alt={label as string} />}
+          {thumbnail?.id && (
+            <LazyLoadImage
+              src={thumbnail.id}
+              alt={label as string}
+              loading="lazy"
+            />
+          )}
 
           <Type>
             <Tag isIcon data-testid="thumbnail-tag">