diff --git a/web/src/ui/timeline/content/index.css b/web/src/ui/timeline/content/index.css
index 0d20984..7d0de13 100644
--- a/web/src/ui/timeline/content/index.css
+++ b/web/src/ui/timeline/content/index.css
@@ -224,6 +224,14 @@ div.media-container {
 			user-select: none;
 			border-radius: .25rem;
 		}
+
+		& + img {
+			/* In order loading=lazy to work, the image has to be visible,
+			   so put it behind the placeholder instead of below */
+			position: absolute;
+			top: 0;
+			z-index: -1;
+		}
 	}
 
 	> a {
diff --git a/web/src/ui/timeline/content/useMediaContent.tsx b/web/src/ui/timeline/content/useMediaContent.tsx
index 0754df6..ba51cea 100644
--- a/web/src/ui/timeline/content/useMediaContent.tsx
+++ b/web/src/ui/timeline/content/useMediaContent.tsx
@@ -33,6 +33,7 @@ export const useMediaContent = (
 		const style = calculateMediaSize(content.info?.w, content.info?.h, containerSize)
 		return [<img
 			onLoad={onLoad}
+			loading="lazy"
 			style={style.media}
 			src={mediaURL}
 			alt={content.filename ?? content.body}