Skip to content

Commit

Permalink
Update docs - add default config for images property (#18296)
Browse files Browse the repository at this point in the history
- Explain how defaults work and what the default values are.
- Mention quality on the basic page
  • Loading branch information
styfle authored Oct 27, 2020
1 parent 26c438b commit ab0b0a8
Showing 1 changed file with 20 additions and 1 deletion.
21 changes: 20 additions & 1 deletion docs/basic-features/image-optimization.md
Original file line number Diff line number Diff line change
Expand Up @@ -44,11 +44,30 @@ export default Home

- `width` and `height` are required to prevent [Cumulative Layout Shift](https://web.dev/cls/), a [Core Web Vital](https://web.dev/vitals/) that Google is going to [use in their search ranking](https://webmasters.googleblog.com/2020/05/evaluating-page-experience.html)
- `width` and `height` are automatically responsive, unlike the HTML `<img>` element
- `quality` can be configured per image, default 75
- See [`next/image`](/docs/api-reference/next/image.md) for list of available props.

## Configuration

You can configure Image Optimization by using the `images` property in `next.config.js`.
You can optionally configure Image Optimization by using the `images` property in `next.config.js`.

If no configuration is provided, the following default configuration will be used.

```js
module.exports = {
images: {
deviceSizes: [320, 420, 768, 1024, 1200],
iconSizes: [],
domains: [],
path: '/_next/image',
loader: 'default',
},
}
```

If a specific property is omitted, such as `deviceSizes`, that property will use the default above.

This means you only need to configure the properties you wish to change.

### Device Sizes

Expand Down

0 comments on commit ab0b0a8

Please sign in to comment.