Click-to-expand images could prefetch full-resolution image to speed up display

[westonruter]

What problem does this address?

I just noticed that hovering over a click-to-expand image block does not proactively attempt to prefetch the full-scale image. This can result in a prolonged period in which the low-resolution scaled-up image is displayed in the lightbox:

Screen.recording.2024-04-18.15.57.10.webm

This seems like a missed opportunity.

What is your proposed solution?

As has been explored in #59707 for client-side navigations wherein hovering over a link will prefetch it for faster rendering (cf. discussion about speculation rules), I suggest implementing the same for prefetching the full-resolution image.

Right after this line:

gutenberg/packages/block-library/src/image/index.php

Line 196 in b7e4f3c

$p->set_attribute( 'data-wp-on--click', 'actions.showLightbox' );

I suggest adding a pointerenter event directive (and perhaps a pointerdown too for earlier detection on touch screens):

$p->set_attribute( 'data-wp-on--pointerenter', 'actions.prefetchImage' ); 
$p->set_attribute( 'data-wp-on--pointerdown', 'actions.prefetchImage' ); 

The prefetchImage action should be debounced with a 200 millisecond timeout (to match the moderate eagerness in speculation rules), after which the high-resolution image URL would be prefetched.

I'd like to work on this myself if this is deemed worthwhile.