Wrong message that Image with src "/test.jpg" is smaller than 40x40. Consider removing the "placeholder='blur'" property to improve performance.

[jthcast]

What version of Next.js are you using?

11

What version of Node.js are you using?

15.12.0

What browser are you using?

Chrome, Safari

What operating system are you using?

macOS

How are you deploying your application?

yarn dev

Describe the Bug

Terminal says Image with src "/test.jpg" is smaller than 40x40. Consider removing the "placeholder='blur'" property to improve performance.

but test.jpg is 14669 × 5000. file is below.
https://commons.wikimedia.org/w/index.php?title=Category:Large_images#/media/File:'Matijevic_Hill'_Panorama_for_Rover's_Ninth_Anniversary_(Stereo).jpg

Expected Behavior

No message with that.

To Reproduce

put that image in public folder and use below code.

<Image
  src='/test.jpg'
  width='fill'
  height='fill'
  layout='responsive'
  placeholder='blur'
  blurDataURL='/test.jpg'
/>

[ismailToyran]

Same problem here.
Problem occurs only when I use layout="fill" Without layout fill it works as intended. Even though my image is 400x400 originally, it still shows

"Image with src "..." is smaller than 40x40. Consider removing the "placeholder='blur'" property to improve performance."

To be more specific <Image src={url} width={width} height={height} placeholder="blur" blurDataURL={url} /> works.
<div className="relative w-80 h-80"><Image src={url} placeholder="blur" blurDataURL={url} layout="fill"/></div> not works and throws me the error.

Note: url is external image url which uses contentfull Image Api.
next.config.js setup is

images: {
    domains: ['images.ctfassets.net'],
    deviceSizes: [320, 420, 768, 1024, 1200]
},

[josbroers]

Note: url is externalImageApi which is contentfulImageApi.

Having the same problem using imagekit.io and static images, while the images in the _next/static folder are over 800×800.

[jthcast]

This is the point.

<Image
  src='/test.jpg'
  width='fill' // allowed type is string | number
  height='fill' // allowed type is string | number
  layout='responsive'
  placeholder='blur'
  blurDataURL='/test.jpg'
/>

but image.js doing below

function getInt(x) {
    if (typeof x === 'number') {
        return x;
    }
    if (typeof x === 'string') {
        return parseInt(x, 10); // x is now 'fill' string so it will return NaN
    }
    return undefined;
}

const widthInt = getInt(width);
const heightInt = getInt(height);

when width or height are not as string in numeric format , getInt will return NaN.

if ((widthInt || 0) * (heightInt || 0) < 1600) { // cause widthInt and heightInt are NaN then it will 0
  console.warn(`Image with src "${src}" is smaller than 40x40. Consider removing the "placeholder='blur'" property to improve performance.`);
}

so, 0 * 0 < 1600 will true. then message will be print 😅

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.