Media Thumbnail Field: Optimise loading of the thumbnail image

[andrewserong]

Part of:

• Media interaction in modal #73085

While testing the new infinite scroll work for DataViews with the experimental media modal (#74378), I noticed some performance issues with loading in the media thumbnails while scrolling up and down the media library.

There are some performance improvements we could do to help here:

• Avoid using the full source_url where possible (i.e. max out at a large size)
• Explore asynchronously / lazy loading the images via JS for smoother pop in / fade out of the media thumbnails

To reproduce the issue:

• With a media library with lots of images
• Activate the media modal experiment in Gutenberg settings, and fire up Improvements to dataviews infinite scroll #74378 to try out the infinite scroll
• Adjust the Grid settings in the modal to have a really small preview (so that each "page" of the scrolling loads in lots of images at once)
• Scroll down (or up and down) really fast, and note that things lock up a little bit rather than loading in smoothly
• If you're not noticing this, maybe try some CPU or network throttling to see if you can replicate (I'm testing on a MacBook Air)

A screengrab

Note the points where the loader appears to be a little stuck / the images sort of pop in:

stuck-infinite-scroll.mp4

[ramonjd]

I don't know if it's related — I suspect a stale core data cache and the last paginated query set — but when opening the media modal for the first time a subset of the media items load. If I close then reopen, a specific range is shown and no other images load.

Kapture.2026-02-11.at.17.25.20.mp4

[andrewserong]

To test the hypothesis that the thumbnails / images could really use some lazy loading to resolve (at least) some of the performance issues with infinite scroll, I tried out locally what happens when we hard-code the fallback text-based media thumbnail. In that case, the spinner animation renders pretty smoothly and doesn't get stuck:

2026-02-13.15.41.36.mp4

So, though I'm sure there's more tweaking to do with the infinite scroll feature, I think this means optimising the thumbnail field will be worth it. I'll start taking a look at some options next week.

[tellthemachines]

• Avoid using the full source_url where possible (i.e. max out at a large size)

This is a weird one because the field is configured to be responsive, and the max size for grid thumbnails is 900px, so I would expect it to use one of the smaller sizes and not the full source URL.

Weirdly, featured images aren't displaying in Pages view for me locally, so I can't check if it's also happening there 😕

[andrewserong]

This is a weird one because the field is configured to be responsive, and the max size for grid thumbnails is 900px, so I would expect it to use one of the smaller sizes and not the full source URL.

Yeah, I'm not too sure what's going there, I mostly jotted down notes to aid looking into it further. My hunch is that whether it's the full source_url or smaller images, it'll (hopefully) help performance slightly to explicitly lazy load rather than the browser attempting to render everything all at once.

But we can have a play and see what works 😄