feat(next/image): add support for `images.qualities` in next.config #74257

styfle · 2024-12-23T22:20:51Z

This PR adds support for images.qualities configuration which is an allowlist of qualities that can be used with the quality prop on the Image component.

Depends on [cli][build-utils][next] add support for images.qualities vercel#12792

ijjk · 2024-12-23T22:24:19Z

Tests Passed

ijjk · 2024-12-23T22:29:03Z

Stats from current PR

Default Build (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js styfle/add-qualities	Change
buildDuration	18.9s	16.1s	N/A
buildDurationCached	15.1s	12.6s	N/A
nodeModulesSize	417 MB	417 MB	⚠️ +29.6 kB
nextStartRea..uration (ms)	469ms	476ms	N/A

Client Bundles (main, webpack)

	vercel/next.js canary	vercel/next.js styfle/add-qualities	Change
1187-HASH.js gzip	52.6 kB	52.6 kB	N/A
8276.HASH.js gzip	169 B	168 B	N/A
8377-HASH.js gzip	5.36 kB	5.44 kB	N/A
bccd1874-HASH.js gzip	52.8 kB	52.8 kB	N/A
framework-HASH.js gzip	57.5 kB	57.5 kB	N/A
main-app-HASH.js gzip	232 B	235 B	N/A
main-HASH.js gzip	34.1 kB	34.1 kB	N/A
webpack-HASH.js gzip	1.71 kB	1.71 kB	N/A
Overall change	0 B	0 B	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js styfle/add-qualities	Change
polyfills-HASH.js gzip	39.4 kB	39.4 kB	✓
Overall change	39.4 kB	39.4 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js styfle/add-qualities	Change
_app-HASH.js gzip	193 B	193 B	✓
_error-HASH.js gzip	193 B	193 B	✓
amp-HASH.js gzip	512 B	510 B	N/A
css-HASH.js gzip	343 B	342 B	N/A
dynamic-HASH.js gzip	1.84 kB	1.84 kB	✓
edge-ssr-HASH.js gzip	265 B	265 B	✓
head-HASH.js gzip	363 B	362 B	N/A
hooks-HASH.js gzip	393 B	392 B	N/A
image-HASH.js gzip	4.49 kB	4.57 kB	N/A
index-HASH.js gzip	268 B	268 B	✓
link-HASH.js gzip	2.35 kB	2.34 kB	N/A
routerDirect..HASH.js gzip	328 B	328 B	✓
script-HASH.js gzip	397 B	397 B	✓
withRouter-HASH.js gzip	323 B	326 B	N/A
1afbb74e6ecf..834.css gzip	106 B	106 B	✓
Overall change	3.59 kB	3.59 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js styfle/add-qualities	Change
_buildManifest.js gzip	749 B	747 B	N/A
Overall change	0 B	0 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js styfle/add-qualities	Change
index.html gzip	524 B	524 B	✓
link.html gzip	538 B	538 B	✓
withRouter.html gzip	520 B	520 B	✓
Overall change	1.58 kB	1.58 kB	✓

Edge SSR bundle Size

	vercel/next.js canary	vercel/next.js styfle/add-qualities	Change
edge-ssr.js gzip	128 kB	128 kB	N/A
page.js gzip	206 kB	206 kB	N/A
Overall change	0 B	0 B	✓

Middleware size

	vercel/next.js canary	vercel/next.js styfle/add-qualities	Change
middleware-b..fest.js gzip	667 B	667 B	✓
middleware-r..fest.js gzip	155 B	156 B	N/A
middleware.js gzip	31.2 kB	31.2 kB	N/A
edge-runtime..pack.js gzip	844 B	844 B	✓
Overall change	1.51 kB	1.51 kB	✓

Next Runtimes

	vercel/next.js canary	vercel/next.js styfle/add-qualities	Change
274-experime...dev.js gzip	322 B	322 B	✓
274.runtime.dev.js gzip	314 B	314 B	✓
app-page-exp...dev.js gzip	363 kB	363 kB	N/A
app-page-exp..prod.js gzip	129 kB	129 kB	N/A
app-page-tur..prod.js gzip	142 kB	142 kB	N/A
app-page-tur..prod.js gzip	138 kB	138 kB	N/A
app-page.run...dev.js gzip	352 kB	352 kB	N/A
app-page.run..prod.js gzip	125 kB	125 kB	N/A
app-route-ex...dev.js gzip	37.5 kB	37.5 kB	✓
app-route-ex..prod.js gzip	25.5 kB	25.5 kB	✓
app-route-tu..prod.js gzip	25.5 kB	25.5 kB	✓
app-route-tu..prod.js gzip	25.4 kB	25.4 kB	✓
app-route.ru...dev.js gzip	39.2 kB	39.2 kB	✓
app-route.ru..prod.js gzip	25.4 kB	25.4 kB	✓
pages-api-tu..prod.js gzip	9.69 kB	9.69 kB	✓
pages-api.ru...dev.js gzip	11.6 kB	11.6 kB	✓
pages-api.ru..prod.js gzip	9.68 kB	9.68 kB	✓
pages-turbo...prod.js gzip	21.7 kB	21.7 kB	N/A
pages.runtim...dev.js gzip	27.5 kB	27.5 kB	N/A
pages.runtim..prod.js gzip	21.7 kB	21.7 kB	N/A
server.runti..prod.js gzip	916 kB	916 kB	✓
Overall change	1.13 MB	1.13 MB	✓

build cache Overall increase ⚠️

	vercel/next.js canary	vercel/next.js styfle/add-qualities	Change
0.pack gzip	2.08 MB	2.09 MB	⚠️ +5.08 kB
index.pack gzip	73.9 kB	73.9 kB	N/A
Overall change	2.08 MB	2.09 MB	⚠️ +5.08 kB

Diff details

Diff for edge-ssr.js

Diff too large to display

Diff for image-HASH.js

@@ -1,7 +1,7 @@
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
   [2983],
   {
-    /***/ 3705: /***/ (
+    /***/ 8255: /***/ (
       __unused_webpack_module,
       __unused_webpack_exports,
       __webpack_require__
@@ -9,7 +9,7 @@
       (window.__NEXT_P = window.__NEXT_P || []).push([
         "/image",
         function () {
-          return __webpack_require__(8448);
+          return __webpack_require__(8926);
         },
       ]);
       if (false) {
@@ -18,7 +18,7 @@
       /***/
     },
 
-    /***/ 7342: /***/ (module, exports, __webpack_require__) => {
+    /***/ 4369: /***/ (module, exports, __webpack_require__) => {
       "use strict";
       /* __next_internal_client_entry_do_not_use__  cjs */
       Object.defineProperty(exports, "__esModule", {
@@ -40,17 +40,17 @@
         __webpack_require__(6049)
       );
       const _head = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(7196)
+        __webpack_require__(956)
       );
-      const _getimgprops = __webpack_require__(2661);
-      const _imageconfig = __webpack_require__(72);
-      const _imageconfigcontextsharedruntime = __webpack_require__(6386);
-      const _warnonce = __webpack_require__(4496);
-      const _routercontextsharedruntime = __webpack_require__(6443);
+      const _getimgprops = __webpack_require__(485);
+      const _imageconfig = __webpack_require__(4664);
+      const _imageconfigcontextsharedruntime = __webpack_require__(1250);
+      const _warnonce = __webpack_require__(1648);
+      const _routercontextsharedruntime = __webpack_require__(907);
       const _imageloader = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(3433)
+        __webpack_require__(6489)
       );
-      const _usemergedref = __webpack_require__(1942);
+      const _usemergedref = __webpack_require__(5942);
       // This is replaced by webpack define plugin
       const configEnv = {
         deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
@@ -302,16 +302,22 @@
             _imageconfigcontextsharedruntime.ImageConfigContext
           );
           const config = (0, _react.useMemo)(() => {
+            var _c_qualities;
             const c =
               configEnv || configContext || _imageconfig.imageConfigDefault;
             const allSizes = [...c.deviceSizes, ...c.imageSizes].sort(
               (a, b) => a - b
             );
             const deviceSizes = c.deviceSizes.sort((a, b) => a - b);
+            const qualities =
+              (_c_qualities = c.qualities) == null
+                ? void 0
+                : _c_qualities.sort((a, b) => a - b);
             return {
               ...c,
               allSizes,
               deviceSizes,
+              qualities,
             };
           }, [configContext]);
           const { onLoad, onLoadingComplete } = props;
@@ -371,7 +377,7 @@
       /***/
     },
 
-    /***/ 1942: /***/ (module, exports, __webpack_require__) => {
+    /***/ 5942: /***/ (module, exports, __webpack_require__) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -432,7 +438,7 @@
       /***/
     },
 
-    /***/ 2661: /***/ (
+    /***/ 485: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -448,9 +454,9 @@
           return getImgProps;
         },
       });
-      const _warnonce = __webpack_require__(4496);
-      const _imageblursvg = __webpack_require__(4796);
-      const _imageconfig = __webpack_require__(72);
+      const _warnonce = __webpack_require__(1648);
+      const _imageblursvg = __webpack_require__(4812);
+      const _imageconfig = __webpack_require__(4664);
       const VALID_LOADING_VALUES =
         /* unused pure expression or super */ null && [
           "lazy",
@@ -606,14 +612,20 @@
         if ("allSizes" in c) {
           config = c;
         } else {
+          var _c_qualities;
           const allSizes = [...c.deviceSizes, ...c.imageSizes].sort(
             (a, b) => a - b
           );
           const deviceSizes = c.deviceSizes.sort((a, b) => a - b);
+          const qualities =
+            (_c_qualities = c.qualities) == null
+              ? void 0
+              : _c_qualities.sort((a, b) => a - b);
           config = {
             ...c,
             allSizes,
             deviceSizes,
+            qualities,
           };
         }
         if (typeof defaultLoader === "undefined") {
@@ -852,7 +864,7 @@
       /***/
     },
 
-    /***/ 4796: /***/ (__unused_webpack_module, exports) => {
+    /***/ 4812: /***/ (__unused_webpack_module, exports) => {
       "use strict";
       /**
        * A shared function, used on both client and server, to generate a SVG blur placeholder.
@@ -907,7 +919,7 @@
       /***/
     },
 
-    /***/ 1969: /***/ (
+    /***/ 8273: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -934,10 +946,10 @@
         },
       });
       const _interop_require_default = __webpack_require__(173);
-      const _getimgprops = __webpack_require__(2661);
-      const _imagecomponent = __webpack_require__(7342);
+      const _getimgprops = __webpack_require__(485);
+      const _imagecomponent = __webpack_require__(4369);
       const _imageloader = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(3433)
+        __webpack_require__(6489)
       );
       function getImageProps(imgProps) {
         const { props } = (0, _getimgprops.getImgProps)(imgProps, {
@@ -969,7 +981,7 @@
       /***/
     },
 
-    /***/ 3433: /***/ (__unused_webpack_module, exports) => {
+    /***/ 6489: /***/ (__unused_webpack_module, exports) => {
       "use strict";
 
       Object.defineProperty(exports, "__esModule", {
@@ -981,10 +993,22 @@
           return _default;
         },
       });
+      const DEFAULT_Q = 75;
       function defaultLoader(param) {
         let { config, src, width, quality } = param;
+        var _config_qualities;
         if (false) {
         }
+        const q =
+          quality ||
+          ((_config_qualities = config.qualities) == null
+            ? void 0
+            : _config_qualities.reduce((prev, cur) =>
+                Math.abs(cur - DEFAULT_Q) < Math.abs(prev - DEFAULT_Q)
+                  ? cur
+                  : prev
+              )) ||
+          DEFAULT_Q;
         return (
           config.path +
           "?url=" +
@@ -992,7 +1016,7 @@
           "&w=" +
           width +
           "&q=" +
-          (quality || 75) +
+          q +
           (src.startsWith("/_next/static/media/") && false ? 0 : "")
         );
       }
@@ -1004,7 +1028,7 @@
       /***/
     },
 
-    /***/ 8448: /***/ (
+    /***/ 8926: /***/ (
       __unused_webpack_module,
       __webpack_exports__,
       __webpack_require__
@@ -1021,8 +1045,8 @@
 
       // EXTERNAL MODULE: ./node_modules/.pnpm/[email protected]/node_modules/react/jsx-runtime.js
       var jsx_runtime = __webpack_require__(5105);
-      // EXTERNAL MODULE: ./node_modules/.pnpm/next@[email protected][email protected][email protected]/node_modules/next/image.js
-      var next_image = __webpack_require__(8140);
+      // EXTERNAL MODULE: ./node_modules/.pnpm/next@[email protected][email protected][email protected]/node_modules/next/image.js
+      var next_image = __webpack_require__(5434);
       var image_default = /*#__PURE__*/ __webpack_require__.n(next_image); // ./pages/nextjs.png
       /* harmony default export */ const nextjs = {
         src: "/_next/static/media/nextjs.cae0b805.png",
@@ -1052,12 +1076,12 @@
       /***/
     },
 
-    /***/ 8140: /***/ (
+    /***/ 5434: /***/ (
       module,
       __unused_webpack_exports,
       __webpack_require__
     ) => {
-      module.exports = __webpack_require__(1969);
+      module.exports = __webpack_require__(8273);
 
       /***/
     },
@@ -1067,7 +1091,7 @@
     /******/ var __webpack_exec__ = (moduleId) =>
       __webpack_require__((__webpack_require__.s = moduleId));
     /******/ __webpack_require__.O(0, [636, 6593, 8792], () =>
-      __webpack_exec__(3705)
+      __webpack_exec__(8255)
     );
     /******/ var __webpack_exports__ = __webpack_require__.O();
     /******/ _N_E = __webpack_exports__;

Diff for 8377-HASH.js

@@ -1,8 +1,8 @@
 "use strict";
 (self["webpackChunk_N_E"] = self["webpackChunk_N_E"] || []).push([
-  [8377],
+  [2727],
   {
-    /***/ 8377: /***/ (module, exports, __webpack_require__) => {
+    /***/ 2727: /***/ (module, exports, __webpack_require__) => {
       /* __next_internal_client_entry_do_not_use__  cjs */
       Object.defineProperty(exports, "__esModule", {
         value: true,
@@ -13,27 +13,27 @@
           return Image;
         },
       });
-      const _interop_require_default = __webpack_require__(2952);
-      const _interop_require_wildcard = __webpack_require__(333);
-      const _jsxruntime = __webpack_require__(3094);
+      const _interop_require_default = __webpack_require__(384);
+      const _interop_require_wildcard = __webpack_require__(4261);
+      const _jsxruntime = __webpack_require__(7048);
       const _react = /*#__PURE__*/ _interop_require_wildcard._(
-        __webpack_require__(1446)
+        __webpack_require__(228)
       );
       const _reactdom = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(8307)
+        __webpack_require__(9221)
       );
       const _head = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(8050)
+        __webpack_require__(1116)
       );
-      const _getimgprops = __webpack_require__(3201);
-      const _imageconfig = __webpack_require__(6678);
-      const _imageconfigcontextsharedruntime = __webpack_require__(578);
-      const _warnonce = __webpack_require__(1971);
-      const _routercontextsharedruntime = __webpack_require__(7795);
+      const _getimgprops = __webpack_require__(5763);
+      const _imageconfig = __webpack_require__(6224);
+      const _imageconfigcontextsharedruntime = __webpack_require__(6720);
+      const _warnonce = __webpack_require__(894);
+      const _routercontextsharedruntime = __webpack_require__(9093);
       const _imageloader = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(1315)
+        __webpack_require__(2809)
       );
-      const _usemergedref = __webpack_require__(592);
+      const _usemergedref = __webpack_require__(1329);
       // This is replaced by webpack define plugin
       const configEnv = {
         deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
@@ -286,16 +286,22 @@
             _imageconfigcontextsharedruntime.ImageConfigContext
           );
           const config = (0, _react.useMemo)(() => {
+            var _c_qualities;
             const c =
               configEnv || configContext || _imageconfig.imageConfigDefault;
             const allSizes = [...c.deviceSizes, ...c.imageSizes].sort(
               (a, b) => a - b
             );
             const deviceSizes = c.deviceSizes.sort((a, b) => a - b);
+            const qualities =
+              (_c_qualities = c.qualities) == null
+                ? void 0
+                : _c_qualities.sort((a, b) => a - b);
             return {
               ...c,
               allSizes,
               deviceSizes,
+              qualities,
             };
           }, [configContext]);
           const { onLoad, onLoadingComplete } = props;
@@ -355,7 +361,7 @@
       /***/
     },
 
-    /***/ 592: /***/ (module, exports, __webpack_require__) => {
+    /***/ 1329: /***/ (module, exports, __webpack_require__) => {
       Object.defineProperty(exports, "__esModule", {
         value: true,
       });
@@ -365,7 +371,7 @@
           return useMergedRef;
         },
       });
-      const _react = __webpack_require__(1446);
+      const _react = __webpack_require__(228);
       function useMergedRef(refA, refB) {
         const cleanupA = (0, _react.useRef)(() => {});
         const cleanupB = (0, _react.useRef)(() => {});
@@ -414,7 +420,7 @@
       /***/
     },
 
-    /***/ 5318: /***/ (
+    /***/ 272: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -428,9 +434,9 @@
           return AmpStateContext;
         },
       });
-      const _interop_require_default = __webpack_require__(2952);
+      const _interop_require_default = __webpack_require__(384);
       const _react = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(1446)
+        __webpack_require__(228)
       );
       const AmpStateContext = _react.default.createContext({});
       if (false) {
@@ -439,7 +445,7 @@
       /***/
     },
 
-    /***/ 1210: /***/ (__unused_webpack_module, exports) => {
+    /***/ 1467: /***/ (__unused_webpack_module, exports) => {
       Object.defineProperty(exports, "__esModule", {
         value: true,
       });
@@ -461,7 +467,7 @@
       /***/
     },
 
-    /***/ 3201: /***/ (
+    /***/ 5763: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -475,9 +481,9 @@
           return getImgProps;
         },
       });
-      const _warnonce = __webpack_require__(1971);
-      const _imageblursvg = __webpack_require__(3482);
-      const _imageconfig = __webpack_require__(6678);
+      const _warnonce = __webpack_require__(894);
+      const _imageblursvg = __webpack_require__(5868);
+      const _imageconfig = __webpack_require__(6224);
       const VALID_LOADING_VALUES =
         /* unused pure expression or super */ null && [
           "lazy",
@@ -633,14 +639,20 @@
         if ("allSizes" in c) {
           config = c;
         } else {
+          var _c_qualities;
           const allSizes = [...c.deviceSizes, ...c.imageSizes].sort(
             (a, b) => a - b
           );
           const deviceSizes = c.deviceSizes.sort((a, b) => a - b);
+          const qualities =
+            (_c_qualities = c.qualities) == null
+              ? void 0
+              : _c_qualities.sort((a, b) => a - b);
           config = {
             ...c,
             allSizes,
             deviceSizes,
+            qualities,
           };
         }
         if (typeof defaultLoader === "undefined") {
@@ -879,8 +891,8 @@
       /***/
     },
 
-    /***/ 8050: /***/ (module, exports, __webpack_require__) => {
-      /* provided dependency */ var process = __webpack_require__(6611);
+    /***/ 1116: /***/ (module, exports, __webpack_require__) => {
+      /* provided dependency */ var process = __webpack_require__(9829);
       /* __next_internal_client_entry_do_not_use__  cjs */
       Object.defineProperty(exports, "__esModule", {
         value: true,
@@ -901,19 +913,19 @@
           return defaultHead;
         },
       });
-      const _interop_require_default = __webpack_require__(2952);
-      const _interop_require_wildcard = __webpack_require__(333);
-      const _jsxruntime = __webpack_require__(3094);
+      const _interop_require_default = __webpack_require__(384);
+      const _interop_require_wildcard = __webpack_require__(4261);
+      const _jsxruntime = __webpack_require__(7048);
       const _react = /*#__PURE__*/ _interop_require_wildcard._(
-        __webpack_require__(1446)
+        __webpack_require__(228)
       );
       const _sideeffect = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(4607)
+        __webpack_require__(4101)
       );
-      const _ampcontextsharedruntime = __webpack_require__(5318);
-      const _headmanagercontextsharedruntime = __webpack_require__(7060);
-      const _ampmode = __webpack_require__(1210);
-      const _warnonce = __webpack_require__(1971);
+      const _ampcontextsharedruntime = __webpack_require__(272);
+      const _headmanagercontextsharedruntime = __webpack_require__(1790);
+      const _ampmode = __webpack_require__(1467);
+      const _warnonce = __webpack_require__(894);
       function defaultHead(inAmpMode) {
         if (inAmpMode === void 0) inAmpMode = false;
         const head = [
@@ -1097,7 +1109,7 @@
       /***/
     },
 
-    /***/ 3482: /***/ (__unused_webpack_module, exports) => {
+    /***/ 5868: /***/ (__unused_webpack_module, exports) => {
       /**
        * A shared function, used on both client and server, to generate a SVG blur placeholder.
        */
@@ -1151,7 +1163,7 @@
       /***/
     },
 
-    /***/ 578: /***/ (
+    /***/ 6720: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -1165,11 +1177,11 @@
           return ImageConfigContext;
         },
       });
-      const _interop_require_default = __webpack_require__(2952);
+      const _interop_require_default = __webpack_require__(384);
       const _react = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(1446)
+        __webpack_require__(228)
       );
-      const _imageconfig = __webpack_require__(6678);
+      const _imageconfig = __webpack_require__(6224);
       const ImageConfigContext = _react.default.createContext(
         _imageconfig.imageConfigDefault
       );
@@ -1179,7 +1191,7 @@
       /***/
     },
 
-    /***/ 6678: /***/ (__unused_webpack_module, exports) => {
+    /***/ 6224: /***/ (__unused_webpack_module, exports) => {
       Object.defineProperty(exports, "__esModule", {
         value: true,
       });
@@ -1221,13 +1233,14 @@
         contentDispositionType: "attachment",
         localPatterns: undefined,
         remotePatterns: [],
+        qualities: undefined,
         unoptimized: false,
       }; //# sourceMappingURL=image-config.js.map
 
       /***/
     },
 
-    /***/ 1315: /***/ (__unused_webpack_module, exports) => {
+    /***/ 2809: /***/ (__unused_webpack_module, exports) => {
       Object.defineProperty(exports, "__esModule", {
         value: true,
       });
@@ -1237,10 +1250,22 @@
           return _default;
         },
       });
+      const DEFAULT_Q = 75;
       function defaultLoader(param) {
         let { config, src, width, quality } = param;
+        var _config_qualities;
         if (false) {
         }
+        const q =
+          quality ||
+          ((_config_qualities = config.qualities) == null
+            ? void 0
+            : _config_qualities.reduce((prev, cur) =>
+                Math.abs(cur - DEFAULT_Q) < Math.abs(prev - DEFAULT_Q)
+                  ? cur
+                  : prev
+              )) ||
+          DEFAULT_Q;
         return (
           config.path +
           "?url=" +
@@ -1248,7 +1273,7 @@
           "&w=" +
           width +
           "&q=" +
-          (quality || 75) +
+          q +
           (src.startsWith("/_next/static/media/") && false ? 0 : "")
         );
       }
@@ -1260,7 +1285,7 @@
       /***/
     },
 
-    /***/ 7795: /***/ (
+    /***/ 9093: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -1274,9 +1299,9 @@
           return RouterContext;
         },
       });
-      const _interop_require_default = __webpack_require__(2952);
+      const _interop_require_default = __webpack_require__(384);
       const _react = /*#__PURE__*/ _interop_require_default._(
-        __webpack_require__(1446)
+        __webpack_require__(228)
       );
       const RouterContext = _react.default.createContext(null);
       if (false) {
@@ -1285,7 +1310,7 @@
       /***/
     },
 
-    /***/ 4607: /***/ (
+    /***/ 4101: /***/ (
       __unused_webpack_module,
       exports,
       __webpack_require__
@@ -1299,7 +1324,7 @@
           return SideEffect;
         },
       });
-      const _react = __webpack_require__(1446);
+      const _react = __webpack_require__(228);
       const isServer = typeof window === "undefined";
       const useClientOnlyLayoutEffect = isServer
         ? () => {}

Diff for main-HASH.js

Diff too large to display

Diff for app-page-exp..ntime.dev.js

Diff too large to display

Diff for app-page-exp..time.prod.js

Diff too large to display

Diff for app-page-tur..time.prod.js

Diff too large to display

Diff for app-page-tur..time.prod.js

Diff too large to display

Diff for app-page.runtime.dev.js

Diff too large to display

Diff for app-page.runtime.prod.js

Diff too large to display

Diff for pages-turbo...time.prod.js

Diff too large to display

Diff for pages.runtime.dev.js

Diff too large to display

Diff for pages.runtime.prod.js

Diff too large to display

Commit: 1607b8a

…74257) This PR adds support for `images.qualities` configuration which is an allowlist of qualities that can be used with the quality prop on the Image component. - Depends on vercel/vercel#12792

…74500) Backports PR #74257 to 14.x

…74257) This PR adds support for `images.qualities` configuration which is an allowlist of qualities that can be used with the quality prop on the Image component. - Depends on vercel/vercel#12792

…74588) Backport #74257 to 15.1.x

feat(next/image): add support for images.qualities in next.config

3da81cc

ijjk added created-by: Next.js team PRs by the Next.js team. Documentation Related to Next.js' official documentation. tests type: next labels Dec 23, 2024

styfle added 8 commits January 2, 2025 10:55

fix typo

ee064bd

add another test

4eba8a8

.at(-1) => .slice(-1)[0]

5ac232a

add client error for unconfigured qualities

c354714

add docs

aa3bcdc

Merge branch 'canary' into styfle/add-qualities

3a1acc5

adjust default to config value closest to 75

faf1a99

add to next/legacy/image too

01304db

styfle marked this pull request as ready for review January 2, 2025 23:39

styfle requested a review from ijjk January 2, 2025 23:41

styfle added 3 commits January 3, 2025 09:30

fix test

7fdb91c

fix last test

cd6226e

Merge branch 'canary' into styfle/add-qualities

edb6c44

styfle requested a review from a team January 3, 2025 18:51

ijjk approved these changes Jan 3, 2025

View reviewed changes

update docs

1607b8a

styfle enabled auto-merge (squash) January 3, 2025 20:20

styfle merged commit d70595e into canary Jan 3, 2025
124 of 129 checks passed

styfle deleted the styfle/add-qualities branch January 3, 2025 20:43

styfle mentioned this pull request Jan 3, 2025

feat(next/image): add support for images.qualities in next.config #74500

Merged

styfle added a commit that referenced this pull request Jan 3, 2025

feat(next/image): add support for images.qualities in next.config (#…

a85f441

…74500) Backports PR #74257 to 14.x

styfle mentioned this pull request Jan 7, 2025

feat(next/image): add support for images.qualities in next.config #74588

Merged

styfle added a commit that referenced this pull request Jan 7, 2025

feat(next/image): add support for images.qualities in next.config (#…

bc6acf6

…74588) Backport #74257 to 15.1.x

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(next/image): add support for `images.qualities` in next.config #74257

feat(next/image): add support for `images.qualities` in next.config #74257

styfle commented Dec 23, 2024 •

edited

Loading

ijjk commented Dec 23, 2024 •

edited

Loading

ijjk commented Dec 23, 2024 •

edited

Loading

feat(next/image): add support for images.qualities in next.config #74257

feat(next/image): add support for images.qualities in next.config #74257

Conversation

styfle commented Dec 23, 2024 • edited Loading

ijjk commented Dec 23, 2024 • edited Loading

Tests Passed

ijjk commented Dec 23, 2024 • edited Loading

Stats from current PR

feat(next/image): add support for `images.qualities` in next.config #74257

feat(next/image): add support for `images.qualities` in next.config #74257

styfle commented Dec 23, 2024 •

edited

Loading

ijjk commented Dec 23, 2024 •

edited

Loading

ijjk commented Dec 23, 2024 •

edited

Loading