feat: implement responsive image preloading for lightbox images

Takshil-Kunadia · Takshil-Kunadia · commit d7f2e41da920 · 2025-06-22T13:20:52.000+05:30
diff --git a/packages/block-library/src/image/index.php b/packages/block-library/src/image/index.php
@@ -155,12 +155,14 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 	$img_styles        = $p->get_attribute( 'style' );
 	$img_width         = 'none';
 	$img_height        = 'none';
+	$img_sizes         = '100vw';
 	$aria_label        = __( 'Enlarge' );
 	$dialog_aria_label = __( 'Enlarged image' );
 
 	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';
 	}
@@ -179,6 +181,8 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 			'metadata' => array(
 				$unique_image_id => array(
 					'uploadedSrc'      => $img_uploaded_src,
+					'lightboxSrcset'   => $img_srcset,
+					'lightboxSizes'    => $img_sizes,
 					'figureClassNames' => $figure_class_names,
 					'figureStyles'     => $figure_styles,
 					'imgClassNames'    => $img_class_names,
@@ -308,7 +312,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"
+							data-wp-bind--sizes="state.enlargedSizes"
+						>
 					</figure>
 				</div>
 				<div class="scrim" style="background-color: $background_color" aria-hidden="true"></div>
diff --git a/packages/block-library/src/image/view.js b/packages/block-library/src/image/view.js
@@ -71,6 +71,12 @@ const { state, actions, callbacks } = store(
 					'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='
 				);
 			},
+			get enlargedSrcset() {
+				return state.currentImage.lightboxSrcset || '';
+			},
+			get enlargedSizes() {
+				return state.currentImage.lightboxSizes || '100vw';
+			},
 			get figureStyles() {
 				return (
 					state.overlayOpened &&
@@ -213,7 +219,8 @@ const { state, actions, callbacks } = store(
 			},
 			prefetchImage() {
 				const { imageId } = getContext();
-				const uploadedSrc = state.metadata[ imageId ].uploadedSrc;
+				const imageMetadata = state.metadata[ imageId ];
+				const uploadedSrc = imageMetadata.uploadedSrc;
 
 				// Bails if the image is not valid or if it has already been prefetched.
 				if (
@@ -223,11 +230,20 @@ const { state, actions, callbacks } = store(
 					return;
 				}
 
+				// Get the original img element's srcset
+				const srcset = imageMetadata.lightboxSrcset;
+
 				const imageLink = document.createElement( 'link' );
-				imageLink.rel = 'prefetch';
+				imageLink.rel = 'preload';
 				imageLink.as = 'image';
 				imageLink.href = uploadedSrc;
 
+				// Apply srcset if available for better responsive prefetching
+				if ( srcset ) {
+					imageLink.setAttribute( 'imagesrcset', srcset );
+					imageLink.setAttribute( 'imagesizes', '100vw' );
+				}
+
 				document.head.appendChild( imageLink );
 				state.prefetchedImageIds.add( imageId );
 			},
