Relax warning for next/image loader width (#30562)

Some users reported false hits when using complex loaders that implement Art Direction.

We can relax the warnings so that query string params named width should not warn.

packages/next/client/image.tsx

@@ -449,15 +449,20 @@ export default function Image({
         `Image with src "${src}" is using unsupported "style" property. Please use the "className" property instead.`
       )
     }
-    const rand = Math.floor(Math.random() * 1000) + 100
-    if (
-      !unoptimized &&
-      !loader({ src, width: rand, quality: 75 }).includes(rand.toString())
-    ) {
-      console.warn(
-        `Image with src "${src}" has a "loader" property that does not implement width. Please implement it or use the "unoptimized" property instead.` +
-          `\nRead more: https://nextjs.org/docs/messages/next-image-missing-loader-width`
-      )
+
+    if (!unoptimized) {
+      const rand = Math.floor(Math.random() * 1000) + 100
+      const url = loader({ src, width: rand, quality: 75 })
+      if (
+        !url.includes(rand.toString()) &&
+        !url.includes('w=') &&
+        !url.includes('width=')
+      ) {
+        console.warn(
+          `Image with src "${src}" has a "loader" property that does not implement width. Please implement it or use the "unoptimized" property instead.` +
+            `\nRead more: https://nextjs.org/docs/messages/next-image-missing-loader-width`
+        )
+      }
     }
 
     if (

test/integration/image-component/default/pages/invalid-loader.js

@@ -0,0 +1,41 @@
+import React from 'react'
+import Image from 'next/image'
+
+const Page = () => {
+  return (
+    <div>
+      <h1>Warn for this loader that doesnt use width</h1>
+      <Image
+        id="no-width"
+        src="/test.png"
+        width={100}
+        height={100}
+        loader={({ src }) => `${src}`}
+      />
+      <Image
+        id="width-path"
+        src="/test.jpg"
+        width={100}
+        height={100}
+        loader={({ src, width }) => `${src}/${width}/file.jpg`}
+      />
+      <Image
+        id="width-querystring"
+        src="/test.webp"
+        width={100}
+        height={100}
+        loader={({ src, width }) => `${src}?w=${width / 2}`}
+      />
+      <Image
+        id="width-querystring-full"
+        src="/test.gif"
+        width={100}
+        height={100}
+        loader={({ src, width }) => `${src}?width=${width * 2}`}
+      />
+      <footer>footer</footer>
+    </div>
+  )
+}
+
+export default Page

test/integration/image-component/default/test/index.test.js

@@ -702,6 +702,27 @@ function runTests(mode) {
         }
       }
     })
+
+    it('should warn when loader is missing width', async () => {
+      const browser = await webdriver(appPort, '/invalid-loader')
+      await browser.eval(`document.querySelector("footer").scrollIntoView()`)
+      const warnings = (await browser.log('browser'))
+        .map((log) => log.message)
+        .join('\n')
+      expect(await hasRedbox(browser)).toBe(false)
+      expect(warnings).toMatch(
+        /Image with src (.*)png(.*) has a "loader" property that does not implement width/gm
+      )
+      expect(warnings).not.toMatch(
+        /Image with src (.*)jpg(.*) has a "loader" property that does not implement width/gm
+      )
+      expect(warnings).not.toMatch(
+        /Image with src (.*)webp(.*) has a "loader" property that does not implement width/gm
+      )
+      expect(warnings).not.toMatch(
+        /Image with src (.*)gif(.*) has a "loader" property that does not implement width/gm
+      )
+    })
   } else {
     //server-only tests
     it('should not create an image folder in server/chunks', async () => {