adjust default to config value closest to 75

vercel · styfle · Jan 3, 2025 · Dec 23, 2024 · Jan 2, 2025 · Jan 2, 2025
commit faf1a99fa5695da9fe7229897b22fca05f34996f
diff --git a/packages/next/src/client/image-component.tsx b/packages/next/src/client/image-component.tsx
@@ -371,7 +371,8 @@ export const Image = forwardRef<HTMLImageElement | null, ImageProps>(
       const c = configEnv || configContext || imageConfigDefault
       const allSizes = [...c.deviceSizes, ...c.imageSizes].sort((a, b) => a - b)
       const deviceSizes = c.deviceSizes.sort((a, b) => a - b)
-      return { ...c, allSizes, deviceSizes }
+      const qualities = c.qualities?.sort((a, b) => a - b)
+      return { ...c, allSizes, deviceSizes, qualities }
     }, [configContext])
 
     const { onLoad, onLoadingComplete } = props

diff --git a/packages/next/src/client/legacy/image.tsx b/packages/next/src/client/legacy/image.tsx
@@ -641,7 +641,8 @@ export default function Image({
     const c = configEnv || configContext || imageConfigDefault
     const allSizes = [...c.deviceSizes, ...c.imageSizes].sort((a, b) => a - b)
     const deviceSizes = c.deviceSizes.sort((a, b) => a - b)
-    return { ...c, allSizes, deviceSizes }
+    const qualities = c.qualities?.sort((a, b) => a - b)
+    return { ...c, allSizes, deviceSizes, qualities }
   }, [configContext])
 
   let rest: Partial<ImageProps> = all

diff --git a/packages/next/src/shared/lib/get-img-props.ts b/packages/next/src/shared/lib/get-img-props.ts
@@ -286,7 +286,8 @@ export function getImgProps(
   } else {
     const allSizes = [...c.deviceSizes, ...c.imageSizes].sort((a, b) => a - b)
     const deviceSizes = c.deviceSizes.sort((a, b) => a - b)
-    config = { ...c, allSizes, deviceSizes }
+    const qualities = c.qualities?.sort((a, b) => a - b)
+    config = { ...c, allSizes, deviceSizes, qualities }
   }
 
   if (typeof defaultLoader === 'undefined') {

diff --git a/packages/next/src/shared/lib/image-loader.ts b/packages/next/src/shared/lib/image-loader.ts
@@ -1,5 +1,7 @@
 import type { ImageLoaderPropsWithConfig } from './image-config'
 
+const DEFAULT_Q = 75
+
 function defaultLoader({
   config,
   src,
@@ -81,10 +83,14 @@ function defaultLoader({
     }
   }
 
-  return `${config.path}?url=${encodeURIComponent(src)}&w=${width}&q=${
-    // TODO: switch from .slice(-1)[0] to .at(-1) when we drop old Safari (pre 15.4)
-    quality || config.qualities?.slice(-1)[0] || 75
-  }${
+  const q =
+    quality ||
+    config.qualities?.reduce((prev, cur) =>
+      Math.abs(cur - DEFAULT_Q) < Math.abs(prev - DEFAULT_Q) ? cur : prev
+    ) ||
+    DEFAULT_Q
+
+  return `${config.path}?url=${encodeURIComponent(src)}&w=${width}&q=${q}${
     src.startsWith('/_next/static/media/') && process.env.NEXT_DEPLOYMENT_ID
       ? `&dpl=${process.env.NEXT_DEPLOYMENT_ID}`
       : ''

diff --git a/test/integration/next-image-new/app-dir-qualities/app/page.js b/test/integration/next-image-new/app-dir-qualities/app/page.js
@@ -8,6 +8,7 @@ const Page = () => {
       <Image alt="q-undefined" id="q-undefined" src={src} />
       <Image alt="q-42" id="q-42" quality={42} src={src} />
       <Image alt="q-69" id="q-69" quality={69} src={src} />
+      <Image alt="q-88" id="q-88" quality={88} src={src} />
       <Image alt="q-100" id="q-100" quality={100} src={src} />
     </main>
   )

diff --git a/test/integration/next-image-new/app-dir-qualities/next.config.js b/test/integration/next-image-new/app-dir-qualities/next.config.js
@@ -1,5 +1,5 @@
 module.exports = {
   images: {
-    qualities: [42, 69],
+    qualities: [42, 69, 88],
   },
 }
diff --git a/test/integration/next-image-new/app-dir-qualities/test/index.test.ts b/test/integration/next-image-new/app-dir-qualities/test/index.test.ts
@@ -63,6 +63,16 @@ function runTests(mode: 'dev' | 'server') {
     expect(res.status).toStrictEqual(200)
   })
 
+  it('should load img when quality 88', async () => {
+    const browser = await webdriver(appPort, '/')
+    if (mode === 'dev') {
+      await assertNoRedbox(browser)
+    }
+    const url = await getSrc(browser, 'q-88')
+    const res = await fetchViaHTTP(appPort, url)
+    expect(res.status).toStrictEqual(200)
+  })
+
   it('should fail to load img when quality is 100', async () => {
     const page = '/invalid-quality'
     const browser = await webdriver(appPort, page)
@@ -99,7 +109,7 @@ function runTests(mode: 'dev' | 'server') {
           localPatterns: undefined,
           minimumCacheTTL: 60,
           path: '/_next/image',
-          qualities: [42, 69],
+          qualities: [42, 69, 88],
           sizes: [
             640, 750, 828, 1080, 1200, 1920, 2048, 3840, 16, 32, 48, 64, 96,
             128, 256, 384,