Add Image Prefetching for Click to expand Images

packages/block-library/src/image/constants.js

@@ -8,3 +8,9 @@ export const ALLOWED_MEDIA_TYPES = [ 'image' ];
 export const MEDIA_ID_NO_FEATURED_IMAGE_SET = 0;
 export const SIZED_LAYOUTS = [ 'flex', 'grid' ];
 export const DEFAULT_MEDIA_SIZE_SLUG = 'full';
+
+/**
+ * Delay in milliseconds before preloading an image after hovering.
+ * This prevents unnecessary preloading during quick scrolling or mouse movements.
+ */
+export const IMAGE_PRELOAD_DELAY = 200;

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

@@ -202,6 +202,7 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 	if ( isset( $block['attrs']['id'] ) ) {
 		$img_uploaded_src = wp_get_attachment_url( $block['attrs']['id'] );
 		$img_metadata     = wp_get_attachment_metadata( $block['attrs']['id'] );
+		$img_srcset       = wp_get_attachment_image_srcset( $block['attrs']['id'] );
 		$img_width        = $img_metadata['width'] ?? 'none';
 		$img_height       = $img_metadata['height'] ?? 'none';
 	}
@@ -220,6 +221,7 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 			'metadata' => array(
 				$unique_image_id => array(
 					'uploadedSrc'      => $img_uploaded_src,
+					'lightboxSrcset'   => $img_srcset,
 					'figureClassNames' => $figure_class_names,
 					'figureStyles'     => $figure_styles,
 					'imgClassNames'    => $img_class_names,
@@ -252,6 +254,14 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 	$processor->set_attribute( 'data-wp-init', 'callbacks.setButtonStyles' );
 	$processor->set_attribute( 'data-wp-on--load', 'callbacks.setButtonStyles' );
 	$processor->set_attribute( 'data-wp-on-window--resize', 'callbacks.setButtonStyles' );
+
+	// Set an event to preload the image on pointerenter and pointerdown(mobile).
+	// Pointerleave is used to cancel the preload if the user hovers away from the image
+	// before the predefined delay.
+	$processor->set_attribute( 'data-wp-on--pointerenter', 'actions.preloadImageWithDelay' );
+	$processor->set_attribute( 'data-wp-on--pointerdown', 'actions.preloadImage' );
+	$processor->set_attribute( 'data-wp-on--pointerleave', 'actions.cancelPreload' );
+
 	// Sets an event callback on the `img` because the `figure` element can also
 	// contain a caption, and we don't want to trigger the lightbox when the
 	// caption is clicked.
@@ -343,7 +353,14 @@ class="wp-lightbox-overlay zoom"
 				</div>
 				<div class="lightbox-image-container">
 					<figure data-wp-bind--class="state.currentImage.figureClassNames" data-wp-bind--style="state.figureStyles">
-						<img data-wp-bind--alt="state.currentImage.alt" data-wp-bind--class="state.currentImage.imgClassNames" data-wp-bind--style="state.imgStyles" data-wp-bind--src="state.enlargedSrc">
+						<img
+							data-wp-bind--alt="state.currentImage.alt"
+							data-wp-bind--class="state.currentImage.imgClassNames"
+							data-wp-bind--style="state.imgStyles"
+							data-wp-bind--src="state.enlargedSrc"
+							data-wp-bind--srcset="state.enlargedSrcset"
+							sizes="100vw"
+						>
 					</figure>
 				</div>
 				<div class="scrim" style="background-color: $background_color" aria-hidden="true"></div>

packages/block-library/src/image/view.js

@@ -6,8 +6,14 @@ import {
 	getContext,
 	getElement,
 	withSyncEvent,
+	withScope,
 } from '@wordpress/interactivity';
 
+/**
+ * Internal dependencies
+ */
+import { IMAGE_PRELOAD_DELAY } from './constants';
+
 /**
  * Tracks whether user is touching screen; used to differentiate behavior for
  * touch and mouse input.
@@ -24,11 +30,36 @@ let isTouching = false;
  */
 let lastTouchTime = 0;
 
+/**
+ * Returns the appropriate src URL for an image.
+ *
+ * @param {string} uploadedSrc - Full size image src.
+ * @return {string} The source URL.
+ */
+function getImageSrc( { uploadedSrc } ) {
+	return (
+		uploadedSrc ||
+		'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='
+	);
+}
+
+/**
+ * Returns the appropriate srcset for an image.
+ *
+ * @param {string} lightboxSrcset - Image srcset.
+ * @return {string} The srcset value.
+ */
+function getImageSrcset( { lightboxSrcset } ) {
+	return lightboxSrcset || '';
+}
+
 const { state, actions, callbacks } = store(
 	'core/image',
 	{
 		state: {
 			currentImageId: null,
+			preloadTimers: new Map(),
+			preloadedImageIds: new Set(),
 			get currentImage() {
 				return state.metadata[ state.currentImageId ];
 			},
@@ -42,10 +73,10 @@ const { state, actions, callbacks } = store(
 				return state.overlayOpened ? 'true' : null;
 			},
 			get enlargedSrc() {
-				return (
-					state.currentImage.uploadedSrc ||
-					'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='
-				);
+				return getImageSrc( state.currentImage );
+			},
+			get enlargedSrcset() {
+				return getImageSrcset( state.currentImage );
 			},
 			get figureStyles() {
 				return (
@@ -187,6 +218,55 @@ const { state, actions, callbacks } = store(
 					}
 				}
 			},
+			preloadImage() {
+				const { imageId } = getContext();
+
+				// Bails if it has already been preloaded. This could help
+				// prevent unnecessary preloading of the same image multiple times,
+				// leading to duplicate link elements in the document head.
+				if ( state.preloadedImageIds.has( imageId ) ) {
+					return;
+				}
+
+				// Link element to preload the image.
+				const imageMetadata = state.metadata[ imageId ];
+				const imageLink = document.createElement( 'link' );
+				imageLink.rel = 'preload';
+				imageLink.as = 'image';
+				imageLink.href = getImageSrc( imageMetadata );
+
+				// Apply srcset if available for responsive preloading
+				const srcset = getImageSrcset( imageMetadata );
+				if ( srcset ) {
+					imageLink.setAttribute( 'imagesrcset', srcset );
+					imageLink.setAttribute( 'imagesizes', '100vw' );
+				}
+
+				document.head.appendChild( imageLink );
+				state.preloadedImageIds.add( imageId );
+			},
+			preloadImageWithDelay() {
+				const { imageId } = getContext();
+
+				actions.cancelPreload();
+
+				// Set a new timer to preload the image after a short delay.
+				const timerId = setTimeout(
+					withScope( () => {
+						actions.preloadImage();
+						state.preloadTimers.delete( imageId );
+					} ),
+					IMAGE_PRELOAD_DELAY
+				);
+				state.preloadTimers.set( imageId, timerId );
+			},
+			cancelPreload() {
+				const { imageId } = getContext();
+				if ( state.preloadTimers.has( imageId ) ) {
+					clearTimeout( state.preloadTimers.get( imageId ) );
+					state.preloadTimers.delete( imageId );
+				}
+			},
 		},
 		callbacks: {
 			setOverlayStyles() {