Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update docs - add default config for images property #18296

Merged
merged 3 commits into from Oct 27, 2020
Merged

Update docs - add default config for images property #18296

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
75c2fe1
Add default config for images property
styfle Oct 27, 2020
fa0e8af
Fix typo and add quality
styfle Oct 27, 2020
3dbed63
Merge branch 'canary' into image-docs-config-default
kodiakhq[bot] Oct 27, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
21 changes: 20 additions & 1 deletion docs/basic-features/image-optimization.md
View file
Open in desktop
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