diff --git a/web/src/postprocess_content.ts b/web/src/postprocess_content.ts
index 24007dd72d..954c61890b 100644
--- a/web/src/postprocess_content.ts
+++ b/web/src/postprocess_content.ts
@@ -150,6 +150,51 @@ export function postprocess_content(html: string): string {
                 "message-media-preview-image",
             );
             message_media_image.classList.add("media-image-element");
+            message_media_image.setAttribute("loading", "lazy");
+
+            // We can't just check whether `inline_image.src` starts with
+            // `/user_uploads/thumbnail`, even though that's what the
+            // server writes in the markup, because Firefox will have
+            // already prepended the origin to the source of an image.
+            let image_url;
+            try {
+                image_url = new URL(message_media_image.src, window.location.origin);
+            } catch {
+                // If the image source URL can't be parsed, likely due to
+                // some historical bug in the Markdown processor, just
+                // drop the invalid image element.
+                message_media_image.closest(".message-media-preview-image")!.remove();
+                continue;
+            }
+
+            if (
+                image_url.origin === window.location.origin &&
+                image_url.pathname.startsWith("/user_uploads/thumbnail/")
+            ) {
+                let thumbnail_name = thumbnail.preferred_format.name;
+                if (message_media_image.dataset.animated === "true") {
+                    if (
+                        user_settings.web_animate_image_previews === "always" ||
+                        // Treat on_hover as "always" on mobile web, where
+                        // hovering is impossible and there's much less on
+                        // the screen.
+                        (user_settings.web_animate_image_previews === "on_hover" &&
+                            util.is_mobile())
+                    ) {
+                        thumbnail_name = thumbnail.animated_format.name;
+                    } else {
+                        // If we're showing a still thumbnail, show a play
+                        // button so that users that it can be played.
+                        message_media_image
+                            .closest(".message-media-preview-image")!
+                            .classList.add("message_inline_animated_image_still");
+                    }
+                }
+                message_media_image.src = message_media_image.src.replace(
+                    /\/[^/]+$/,
+                    "/" + thumbnail_name,
+                );
+            }
         }
 
         // To prevent layout shifts and flexibly size image previews,
@@ -217,51 +262,6 @@ export function postprocess_content(html: string): string {
         }
     }
 
-    for (const inline_img of template.content.querySelectorAll<HTMLImageElement>(
-        ".message-media-preview-image img",
-    )) {
-        inline_img.setAttribute("loading", "lazy");
-        // We can't just check whether `inline_image.src` starts with
-        // `/user_uploads/thumbnail`, even though that's what the
-        // server writes in the markup, because Firefox will have
-        // already prepended the origin to the source of an image.
-        let image_url;
-        try {
-            image_url = new URL(inline_img.src, window.location.origin);
-        } catch {
-            // If the image source URL can't be parsed, likely due to
-            // some historical bug in the Markdown processor, just
-            // drop the invalid image element.
-            inline_img.closest(".message-media-preview-image")!.remove();
-            continue;
-        }
-
-        if (
-            image_url.origin === window.location.origin &&
-            image_url.pathname.startsWith("/user_uploads/thumbnail/")
-        ) {
-            let thumbnail_name = thumbnail.preferred_format.name;
-            if (inline_img.dataset.animated === "true") {
-                if (
-                    user_settings.web_animate_image_previews === "always" ||
-                    // Treat on_hover as "always" on mobile web, where
-                    // hovering is impossible and there's much less on
-                    // the screen.
-                    (user_settings.web_animate_image_previews === "on_hover" && util.is_mobile())
-                ) {
-                    thumbnail_name = thumbnail.animated_format.name;
-                } else {
-                    // If we're showing a still thumbnail, show a play
-                    // button so that users that it can be played.
-                    inline_img
-                        .closest(".message-media-preview-image")!
-                        .classList.add("message_inline_animated_image_still");
-                }
-            }
-            inline_img.src = inline_img.src.replace(/\/[^/]+$/, "/" + thumbnail_name);
-        }
-    }
-
     // After all other processing on images has been done, we look for
     // adjacent images and videos, and tuck them structurally into galleries.
     for (const elt of template.content.querySelectorAll(
diff --git a/web/tests/postprocess_content.test.cjs b/web/tests/postprocess_content.test.cjs
index 0623c14fe7..728c150fbb 100644
--- a/web/tests/postprocess_content.test.cjs
+++ b/web/tests/postprocess_content.test.cjs
@@ -124,12 +124,12 @@ run_test("inline_image_galleries", ({override}) => {
             '<div class="message-thumbnail-gallery">' +
             '<div class="message-media-preview-image">' +
             '<a href="/user_uploads/path/to/image.png" target="_blank" rel="noopener noreferrer" class="media-anchor-element" aria-label="image.png">' +
-            '<img data-original-dimensions="1000x2000" src="/user_uploads/thumbnail/path/to/image.png/840x560.webp" class="media-image-element portrait-thumbnail" width="1000" height="2000" style="width: 5em;" loading="lazy">' +
+            '<img data-original-dimensions="1000x2000" src="/user_uploads/thumbnail/path/to/image.png/840x560.webp" class="media-image-element portrait-thumbnail" loading="lazy" width="1000" height="2000" style="width: 5em;">' +
             "</a>" +
             "</div>" +
             '<div class="message-media-preview-image">' +
             '<a href="/user_uploads/path/to/image.png" target="_blank" rel="noopener noreferrer" class="media-anchor-element" aria-label="image.png">' +
-            '<img data-original-dimensions="2000x1000" src="/user_uploads/thumbnail/path/to/image.png/840x560.webp" class="media-image-element landscape-thumbnail" width="2000" height="1000" style="width: 20em;" loading="lazy">' +
+            '<img data-original-dimensions="2000x1000" src="/user_uploads/thumbnail/path/to/image.png/840x560.webp" class="media-image-element landscape-thumbnail" loading="lazy" width="2000" height="1000" style="width: 20em;">' +
             "</a>" +
             "</div>" +
             "</div>" +
@@ -137,7 +137,7 @@ run_test("inline_image_galleries", ({override}) => {
             '<div class="message-thumbnail-gallery">' +
             '<div class="message-media-preview-image">' +
             '<a href="/user_uploads/path/to/image.png" target="_blank" rel="noopener noreferrer" class="media-anchor-element" aria-label="image.png">' +
-            '<img data-original-dimensions="1000x1000" src="/user_uploads/thumbnail/path/to/image.png/840x560.webp" class="media-image-element portrait-thumbnail" width="1000" height="1000" style="width: 10em;" loading="lazy">' +
+            '<img data-original-dimensions="1000x1000" src="/user_uploads/thumbnail/path/to/image.png/840x560.webp" class="media-image-element portrait-thumbnail" loading="lazy" width="1000" height="1000" style="width: 10em;">' +
             "</a>" +
             "</div>" +
             "</div>",
@@ -198,7 +198,7 @@ run_test("message_inline_animated_image_still", ({override}) => {
         '<div class="message-thumbnail-gallery">' +
             '<div class="message-media-preview-image">' +
             '<a href="/user_uploads/path/to/image.png" target="_blank" rel="noopener noreferrer" class="media-anchor-element" aria-label="image.png">' +
-            '<img data-original-dimensions="3264x2448" src="/user_uploads/thumbnail/path/to/image.png/300x200.webp" class="media-image-element landscape-thumbnail" width="3264" height="2448" style="width: 13.333333333333334em;" loading="lazy">' +
+            '<img data-original-dimensions="3264x2448" src="/user_uploads/thumbnail/path/to/image.png/300x200.webp" class="media-image-element landscape-thumbnail" loading="lazy" width="3264" height="2448" style="width: 13.333333333333334em;">' +
             "</a>" +
             "</div>" +
             "</div>",
@@ -216,7 +216,7 @@ run_test("message_inline_animated_image_still", ({override}) => {
         '<div class="message-thumbnail-gallery">' +
             '<div class="message-media-preview-image">' +
             '<a href="/user_uploads/path/to/image.png" target="_blank" rel="noopener noreferrer" class="media-anchor-element" aria-label="image.png">' +
-            '<img data-original-dimensions="100x200" src="/user_uploads/thumbnail/path/to/image.png/300x200.webp" class="media-image-element portrait-thumbnail" width="100" height="200" style="width: 5em;" loading="lazy">' +
+            '<img data-original-dimensions="100x200" src="/user_uploads/thumbnail/path/to/image.png/300x200.webp" class="media-image-element portrait-thumbnail" loading="lazy" width="100" height="200" style="width: 5em;">' +
             "</a>" +
             "</div>" +
             "</div>",
@@ -234,7 +234,7 @@ run_test("message_inline_animated_image_still", ({override}) => {
         '<div class="message-thumbnail-gallery">' +
             '<div class="message-media-preview-image">' +
             '<a href="/user_uploads/path/to/image.png" target="_blank" rel="noopener noreferrer" class="media-anchor-element" aria-label="image.png">' +
-            '<img data-original-dimensions="1x10" src="/user_uploads/thumbnail/path/to/image.png/300x200.webp" class="media-image-element dinky-thumbnail extreme-aspect-ratio portrait-thumbnail" width="1" height="10" style="width: 1px;" loading="lazy">' +
+            '<img data-original-dimensions="1x10" src="/user_uploads/thumbnail/path/to/image.png/300x200.webp" class="media-image-element dinky-thumbnail extreme-aspect-ratio portrait-thumbnail" loading="lazy" width="1" height="10" style="width: 1px;">' +
             "</a>" +
             "</div>" +
             "</div>",
@@ -253,7 +253,7 @@ run_test("message_inline_animated_image_still", ({override}) => {
         '<div class="message-thumbnail-gallery">' +
             '<div class="message-media-preview-image">' +
             '<a href="/user_uploads/path/to/image.png" target="_blank" rel="noopener noreferrer" class="media-anchor-element" aria-label="image.png">' +
-            '<img data-original-dimensions="3264x2448" src="/user_uploads/thumbnail/path/to/image.png/300x200-anim.webp" data-animated="true" class="media-image-element landscape-thumbnail" width="3264" height="2448" style="width: 13.333333333333334em;" loading="lazy">' +
+            '<img data-original-dimensions="3264x2448" src="/user_uploads/thumbnail/path/to/image.png/300x200-anim.webp" data-animated="true" class="media-image-element landscape-thumbnail" loading="lazy" width="3264" height="2448" style="width: 13.333333333333334em;">' +
             "</a>" +
             "</div>" +
             "</div>",
@@ -272,7 +272,7 @@ run_test("message_inline_animated_image_still", ({override}) => {
         '<div class="message-thumbnail-gallery">' +
             '<div class="message-media-preview-image message_inline_animated_image_still">' +
             '<a href="/user_uploads/path/to/image.png" target="_blank" rel="noopener noreferrer" class="media-anchor-element" aria-label="image.png">' +
-            '<img data-original-dimensions="3264x2448" src="/user_uploads/thumbnail/path/to/image.png/300x200.webp" data-animated="true" class="media-image-element landscape-thumbnail" width="3264" height="2448" style="width: 13.333333333333334em;" loading="lazy">' +
+            '<img data-original-dimensions="3264x2448" src="/user_uploads/thumbnail/path/to/image.png/300x200.webp" data-animated="true" class="media-image-element landscape-thumbnail" loading="lazy" width="3264" height="2448" style="width: 13.333333333333334em;">' +
             "</a>" +
             "</div>" +
             "</div>",
@@ -290,7 +290,7 @@ run_test("message_inline_animated_image_still", ({override}) => {
         '<div class="message-thumbnail-gallery">' +
             '<div class="message-media-preview-image message_inline_animated_image_still">' +
             '<a href="/user_uploads/path/to/image.png" target="_blank" rel="noopener noreferrer" class="media-anchor-element" aria-label="image.png">' +
-            '<img data-original-dimensions="3264x2448" src="/user_uploads/thumbnail/path/to/image.png/300x200.webp" data-animated="true" class="media-image-element landscape-thumbnail" width="3264" height="2448" style="width: 13.333333333333334em;" loading="lazy">' +
+            '<img data-original-dimensions="3264x2448" src="/user_uploads/thumbnail/path/to/image.png/300x200.webp" data-animated="true" class="media-image-element landscape-thumbnail" loading="lazy" width="3264" height="2448" style="width: 13.333333333333334em;">' +
             "</a>" +
             "</div>" +
             "</div>",
@@ -301,7 +301,7 @@ run_test("message_inline_animated_image_still", ({override}) => {
     // history.
     assert.equal(
         postprocess_content(
-            '<div class="message-media-preview-image">' +
+            '<div class="message_inline_image">' +
                 '<a href="https://zulip.%20[Click%20to%20join%20video%20call](https://meeting.example.com/abcd1234)%20example.com/user_uploads/2/ab/abcd1234/image.png" target="_blank" title="image.png">' +
                 '<img src="https://zulip.%20[Click%20to%20join%20video%20call](https://meeting.example.com/abcd1234)%20example.com/user_uploads/2/ab/abcd1234/image.png">' +
                 "</a>" +