add docs

vercel · styfle · Jan 3, 2025 · Dec 23, 2024 · Jan 2, 2025 · Jan 2, 2025
commit aa3bcdca11682e6b8ee367259b7ede300391253c
diff --git a/docs/01-app/04-api-reference/02-components/image.mdx b/docs/01-app/04-api-reference/02-components/image.mdx
@@ -257,6 +257,10 @@ quality={75} // {number 1-100}
 
 The quality of the optimized image, an integer between `1` and `100`, where `100` is the best quality and therefore largest file size. Defaults to `75`.
 
+If the [`qualities`](#qualities) configuration is defined in `next.config.js`, the `quality` prop must match one of the values defined in the configuration.
+
+> **Good to know**: If the original source image was already low quality, setting the quality prop too high could cause the resulting optimized image to be larger than the original source image.
+
 ### `priority`
 
 ```js
@@ -681,6 +685,20 @@ module.exports = {
 }
 ```
 
+### `qualities`
+
+The default [Image Optimization API](#loader) will automatically allow all qualities from 1 to 100. If you wish to restrict the allowed qualities, you can add configuration to `next.config.js`.
+
+```js filename="next.config.js"
+module.exports = {
+  images: {
+    qualities: [25, 50, 75],
+  },
+}
+```
+
+In this example above, only three qualities are allowed: 25, 50, and 75. If the [`quality`](#quality) prop does not match a value in this array, the image will fail with 400 Bad Request.
+
 ### `formats`
 
 The default [Image Optimization API](#loader) will automatically detect the browser's supported image formats via the request's `Accept` header in order to determine the best output format.