Skip to content

Commit

Permalink
feat(next/image): add support for decoding prop (#70298)
Browse files Browse the repository at this point in the history
- Fixes #49772
  • Loading branch information
styfle authored Sep 20, 2024
1 parent e3688fb commit 0bfa3ec
Show file tree
Hide file tree
Showing 3 changed files with 38 additions and 3 deletions.
15 changes: 13 additions & 2 deletions docs/02-app/02-api-reference/01-components/image.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -467,13 +467,24 @@ For example, when upgrading an existing website from `<img>` to `<Image>`, you m
/>
```

### decoding

A hint to the browser indicating if it should wait for the image to be decoded before presenting other content updates or not. Defaults to `async`.

Possible values are the following:

- `async` - Asynchronously decode the image and allow other content to be rendered before it completes.
- `sync` - Synchronously decode the image for atomic presentation with other content.
- `auto` - No preference for the decoding mode; the browser decides what's best.

Learn more about the [`decoding` attribute](https://developer.mozilla.org/docs/Web/HTML/Element/img#loading).

### Other Props

Other properties on the `<Image />` component will be passed to the underlying
`img` element with the exception of the following:

- `srcSet`. Use [Device Sizes](#devicesizes) instead.
- `decoding`. It is always `"async"`.

## Configuration Options

Expand Down Expand Up @@ -1022,7 +1033,7 @@ This `next/image` component uses browser native [lazy loading](https://caniuse.c

| Version | Changes |
| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `v15.0.0` | `contentDispositionType` configuration default changed to `attachment`. |
| `v15.0.0` | `decoding` prop added. `contentDispositionType` configuration default changed to `attachment`. |
| `v14.2.0` | `overrideSrc` prop added. |
| `v14.1.0` | `getImageProps()` is stable. |
| `v14.0.0` | `onLoadingComplete` prop and `domains` config deprecated. |
Expand Down
3 changes: 2 additions & 1 deletion packages/next/src/shared/lib/get-img-props.ts
Original file line number Diff line number Diff line change
Expand Up @@ -254,6 +254,7 @@ export function getImgProps(
placeholder = 'empty',
blurDataURL,
fetchPriority,
decoding = 'async',
layout,
objectFit,
objectPosition,
Expand Down Expand Up @@ -684,7 +685,7 @@ export function getImgProps(
fetchPriority,
width: widthInt,
height: heightInt,
decoding: 'async',
decoding,
className,
style: { ...imgStyle, ...placeholderStyle },
sizes: imgAttributes.sizes,
Expand Down
23 changes: 23 additions & 0 deletions test/unit/next-image-get-img-props.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -302,4 +302,27 @@ describe('getImageProps()', () => {
['src', '/override.png'],
])
})
it('should handle decoding=sync', async () => {
const { props } = getImageProps({
alt: 'a nice desc',
src: '/test.png',
decoding: 'sync',
width: 100,
height: 200,
})
expect(warningMessages).toStrictEqual([])
expect(Object.entries(props)).toStrictEqual([
['alt', 'a nice desc'],
['loading', 'lazy'],
['width', 100],
['height', 200],
['decoding', 'sync'],
['style', { color: 'transparent' }],
[
'srcSet',
'/_next/image?url=%2Ftest.png&w=128&q=75 1x, /_next/image?url=%2Ftest.png&w=256&q=75 2x',
],
['src', '/_next/image?url=%2Ftest.png&w=256&q=75'],
])
})
})

0 comments on commit 0bfa3ec

Please sign in to comment.