fix(image): handle image imports with high aspect ratio (#40563)

## Bug

- [x] Related issues linked using `fixes #40562`
fixes #40562
- [x] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`


Co-authored-by: Steven <229881+styfle@users.noreply.github.com>

packages/next/build/webpack/loaders/next-image-loader.js

@@ -35,12 +35,14 @@ function nextImageLoader(content) {
       // Shrink the image's largest dimension
       if (imageSize.width >= imageSize.height) {
         blurWidth = BLUR_IMG_SIZE
-        blurHeight = Math.round(
-          (imageSize.height / imageSize.width) * BLUR_IMG_SIZE
+        blurHeight = Math.max(
+          Math.round((imageSize.height / imageSize.width) * BLUR_IMG_SIZE),
+          1
         )
       } else {
-        blurWidth = Math.round(
-          (imageSize.width / imageSize.height) * BLUR_IMG_SIZE
+        blurWidth = Math.max(
+          Math.round((imageSize.width / imageSize.height) * BLUR_IMG_SIZE),
+          1
         )
         blurHeight = BLUR_IMG_SIZE
       }

test/integration/image-future/default/pages/static-img.js

@@ -11,6 +11,8 @@ import testGIF from '../public/test.gif'
 import testBMP from '../public/test.bmp'
 import testICO from '../public/test.ico'
 import widePNG from '../public/wide.png'
+import tallPNG from '../components/tall.png'
+import superWidePNG from '../public/super-wide.png'
 
 import TallImage from '../components/TallImage'
 
@@ -40,6 +42,22 @@ const Page = () => {
       <Image id="blur-jpg" src={testJPG} placeholder="blur" />
       <Image id="blur-webp" src={testWEBP} placeholder="blur" />
       <Image id="blur-avif" src={testAVIF} placeholder="blur" />
+      <Image id="blur-wide" src={widePNG} placeholder="blur" />
+      <Image id="blur-tall" src={tallPNG} placeholder="blur" />
+      <Image
+        id="blur-super-wide"
+        src={superWidePNG}
+        placeholder="blur"
+        width={72}
+        height={16}
+      />
+      <Image
+        id="blur-super-tall"
+        src={superWidePNG}
+        placeholder="blur"
+        width={16}
+        height={72}
+      />
       <br />
       <Image id="static-svg" src={testSVG} />
       <Image id="static-gif" src={testGIF} />