fix(gatsby-plugin-sharp): Ensure min 1px height for BLURRED placeholder (#35914)

Co-authored-by: Lennart <[email protected]>

Author: ThomasVandenhede

packages/gatsby-plugin-sharp/src/__tests__/images/wide-aspect-ratio.png

@@ -549,6 +549,20 @@ describe(`gatsby-plugin-sharp`, () => {
         }
       `)
     })
+
+    it(`handles really wide aspect ratios for blurred placeholder`, async () => {
+      const result = await base64({
+        file: getFileObject(
+          path.join(__dirname, `images/wide-aspect-ratio.png`),
+          `wide-aspect-ratio`,
+          `1000x10`
+        ),
+        args,
+      })
+
+      expect(result.width).toEqual(20)
+      expect(result.height).toEqual(1)
+    })
   })
 
   describe(`tracedSVG`, () => {

packages/gatsby-plugin-sharp/src/__tests__/index.js

@@ -375,7 +375,10 @@ export async function generateImageData({
         ...options,
         toFormatBase64: args.blurredOptions?.toFormat,
         width: placeholderWidth,
-        height: Math.round(placeholderWidth / imageSizes.aspectRatio),
+        height: Math.max(
+          1,
+          Math.round(placeholderWidth / imageSizes.aspectRatio)
+        ),
       },
       reporter,
     })