Add Image Prefetching for Click to expand Images

[Takshil-Kunadia]

PR for #60883

What?

Prefetch full-resolution image to speed up display of Click to expand images.
see #60883 for more details

Why?

Hovering over a click-to-expand image block does not proactively attempt to prefetch the full-scale image in Lighbox. This can result in a prolonged period in which the low-resolution scaled-up image is displayed in the lightbox.

How?

• Implement prefetchImage action that prefetches an image and keeps it in the browser cache.
• Then utilising the above add pointer event directives that trigger it on pointerup & pointerdown.

Testing Instructions

1. Create a post with a click to expand image on it.
2. Open Dev tools and throttle network to slow 3G and notice the network tab.
3. Hover over the image, this will trigger the image to load.
4. When the loading is complete, click the image for it to load in full resolution without any delay or loading.

Testing Instructions for Keyboard

Screenshots or screencast

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: Takshil-Kunadia <takshil@git.wordpress.org>
Co-authored-by: luisherranz <luisherranz@git.wordpress.org>
Co-authored-by: westonruter <westonruter@git.wordpress.org>
Co-authored-by: artemiomorales <artemiosans@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[artemiomorales]

@Takshil-Kunadia Thanks for creating this PR! I've left a comment on the issue to loop a few other folks into the discussion who may have thoughts on how to best proceed. In short, we previously had prefetching on hover but removed it. Since then, there's been more discussion around this, so perhaps may be good to add this back.

[Takshil-Kunadia]

Thanks @artemiomorales ! for the context and for looping the stakeholders in the discussion! I've updated the code to reflect the direction discussed in the issue. Happy to adjust further based on any additional feedback 😄

[westonruter]

I'm just realizing a problem here with the overall image lightbox: what if the original src image is too large for the viewport when the image is expanded (e.g. on mobile)? Shouldn't the expanded lightbox image copy the srcset as well? If this is the case, prefetching the src wouldn't necessarily be correct since a smaller size could be more appropriate. This could be achieved simply by copying the srcset of the original image to lightbox image and also adding it to the imagesrcset of the prefetch link. In addition to this, an appropriate sizes attribute would need to be created specifically for the lightbox image, although the browser default of 100vw would probably be correct for the lightbox image. In this way, the lightbox would avoid downloading a larger image than needed, and this further speeding up displaying of the expanded image.

[Takshil-Kunadia]

Thanks! @westonruter for looking into this 🙇🏻‍♂️ and yes good catch! it makes sense to have responsive images for lightbox images to avoid unnecessarily large downloads, especially on smaller viewports.

One thing I’d like to highlight though is that imagesrcset and imagesizes are supported with preload, not with prefetch afaik (reference: https://web.dev/articles/preload-responsive-images). This would slightly deviate from the original approach discussed in the issue which was on using prefetch as part of speculative loading.

That said, I’ve implemented the suggested preload approach in d7f2e41

[luisherranz]

Hey, just a couple of comments 🙂

[westonruter]

Aside from the minor suggestion in #61107 (comment) this looks good to me. It is successfully preloading the image prior to opening it in the lightbox.

It can be hard to see, but in the before case the image is a bit blurry while the full size image is loaded:

Before	After
without-preload.mov	with-preload.mov

[Takshil-Kunadia]

Hey @luisherranz This PR has already been reviewed and approved, so just wondering what’s next in the release process. Would love to see it land soon!

[luisherranz]

I'm not sure when sizes is different from 100vw for the lightbox. So, if that's not the case, it could be hardcoded.

Apart from that and a couple of nitpicks, the rest looks good to me.

[Takshil-Kunadia]

Thanks @luisherranz implemented the changes 🙇

[luisherranz]

Thanks @Takshil-Kunadia. All good on my side now 👍🙂

[Takshil-Kunadia]

Thanks for the approval @luisherranz! 🙇