diff --git a/packages/block-library/src/image/view.js b/packages/block-library/src/image/view.js
index 0bc0dfaacea1a..1b25887cc2ac5 100644
--- a/packages/block-library/src/image/view.js
+++ b/packages/block-library/src/image/view.js
@@ -403,8 +403,11 @@ const { state, actions, callbacks } = store(
 				const buttonOffsetTop = figureHeight - offsetHeight;
 				const buttonOffsetRight = figureWidth - offsetWidth;
 
-				let imageButtonTop = buttonOffsetTop + 16;
-				let imageButtonRight = buttonOffsetRight + 16;
+				// The button should be at most 16px from the top and right and inside the image.
+				// For extremely small images take the minimum of 16px or 20% of the image size.
+				let imageButtonTop = Math.min( offsetHeight * 0.2, 16 );
+				let imageButtonRight =
+					buttonOffsetRight + Math.min( offsetWidth * 0.2, 16 );
 
 				// In the case of an image with object-fit: contain, the size of the
 				// <img> element can be larger than the image itself, so it needs to
diff --git a/test/e2e/specs/editor/blocks/image.spec.js b/test/e2e/specs/editor/blocks/image.spec.js
index b2195f2c67688..07c7b5720d18f 100644
--- a/test/e2e/specs/editor/blocks/image.spec.js
+++ b/test/e2e/specs/editor/blocks/image.spec.js
@@ -985,9 +985,11 @@ test.describe( 'Image - lightbox', () => {
 			const postId = await editor.publishPost();
 			await page.goto( `/?p=${ postId }` );
 
-			const lightboxImage = page.locator( '.wp-lightbox-container img' );
-			await expect( lightboxImage ).toBeVisible();
-			await lightboxImage.click();
+			const imageLightboxTrigger = page.locator(
+				'.wp-lightbox-container .lightbox-trigger'
+			);
+			await expect( imageLightboxTrigger ).toBeVisible();
+			await imageLightboxTrigger.click();
 
 			const figure = page
 				.locator( '.wp-lightbox-overlay .wp-block-image' )