Adjust default image quality to 75 (#18292)

docs/api-reference/next/image.md

@@ -49,7 +49,7 @@ export default Home
 - `width` - The intrinsic width of the source image in pixels. Must be an integer without a unit. Required unless `unsized` is true.
 - `height` - The intrinsic height of the source image, in pixels. Must be an integer without a unit. Required unless `unsized` is true.
 - `sizes` - Defines what proportion of the screen you expect the image to take up. Recommended, as it helps serve the correct sized image to each device. [More info](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-sizes).
-- `quality` - The quality of the optimized image, an integer between 1 and 100 where 100 is the best quality. Default 100.
+- `quality` - The quality of the optimized image, an integer between 1 and 100 where 100 is the best quality. Default 75.
 - `loading` - The loading behavior. When `lazy`, defer loading the image until it reaches a calculated distance from the viewport. When `eager`, load the image immediately. Default `lazy`. [More info](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading)
 - `priority` - When true, the image will be considered high priority and [preload](https://web.dev/preload-responsive-images/).
 - `unoptimized` - When true, the source image will be served as-is instead of resizing and changing quality.

packages/next/client/image.tsx

@@ -443,6 +443,6 @@ function defaultLoader({ root, src, width, quality }: LoaderProps): string {
   }
 
   return `${root}?url=${encodeURIComponent(src)}&w=${width}&q=${
-    quality || '100'
+    quality || '75'
   }`
 }

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

@@ -22,6 +22,19 @@ const nextConfig = join(appDir, 'next.config.js')
 let appPort
 let app
 
+async function hasImageMatchingUrl(browser, url) {
+  const links = await browser.elementsByCss('img')
+  let foundMatch = false
+  for (const link of links) {
+    const src = await link.getAttribute('src')
+    if (src === url) {
+      foundMatch = true
+      break
+    }
+  }
+  return foundMatch
+}
+
 function runTests(mode) {
   it('should load the images', async () => {
     let browser
@@ -54,6 +67,16 @@ function runTests(mode) {
 
         return 'result-correct'
       }, /result-correct/)
+
+      expect(
+        await hasImageMatchingUrl(
+          browser,
+          mode === 'serverless'
+            ? // FIXME: this is a bug
+              `http://localhost:${appPort}/_next/image/?url=%2Ftest.jpg&w=420&q=75`
+            : `http://localhost:${appPort}/_next/image?url=%2Ftest.jpg&w=420&q=75`
+        )
+      ).toBe(true)
     } finally {
       if (browser) {
         await browser.close()