-
Notifications
You must be signed in to change notification settings - Fork 27.2k
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.
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
feat(image-optimizer): Add support for AVIF #27432
Conversation
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
@styfle @atcastle AFAIK, AVIF doesn't have a magic number.
|
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
Stats from current PRDefault Build (Increase detected
|
vercel/next.js canary | paambaati/next.js canary | Change | |
---|---|---|---|
buildDuration | 14.8s | 14.6s | -244ms |
buildDurationCached | 3.4s | 3.4s | |
nodeModulesSize | 50.3 MB | 50.3 MB |
Page Load Tests Overall increase ✓
vercel/next.js canary | paambaati/next.js canary | Change | |
---|---|---|---|
/ failed reqs | 0 | 0 | ✓ |
/ total time (seconds) | 2.457 | 2.426 | -0.03 |
/ avg req/sec | 1017.35 | 1030.4 | +13.05 |
/error-in-render failed reqs | 0 | 0 | ✓ |
/error-in-render total time (seconds) | 1.348 | 1.323 | -0.03 |
/error-in-render avg req/sec | 1854.99 | 1889.35 | +34.36 |
Client Bundles (main, webpack, commons)
vercel/next.js canary | paambaati/next.js canary | Change | |
---|---|---|---|
359.HASH.js gzip | 2.96 kB | 2.96 kB | ✓ |
745.HASH.js gzip | 180 B | 180 B | ✓ |
framework-HASH.js gzip | 42.2 kB | 42.2 kB | ✓ |
main-HASH.js gzip | 21 kB | 21 kB | ✓ |
webpack-HASH.js gzip | 1.53 kB | 1.53 kB | ✓ |
Overall change | 67.9 kB | 67.9 kB | ✓ |
Legacy Client Bundles (polyfills)
vercel/next.js canary | paambaati/next.js canary | Change | |
---|---|---|---|
polyfills-HASH.js gzip | 31.1 kB | 31.1 kB | ✓ |
Overall change | 31.1 kB | 31.1 kB | ✓ |
Client Pages
vercel/next.js canary | paambaati/next.js canary | Change | |
---|---|---|---|
_app-HASH.js gzip | 803 B | 803 B | ✓ |
_error-HASH.js gzip | 3.06 kB | 3.06 kB | ✓ |
amp-HASH.js gzip | 554 B | 554 B | ✓ |
css-HASH.js gzip | 329 B | 329 B | ✓ |
dynamic-HASH.js gzip | 2.52 kB | 2.52 kB | ✓ |
head-HASH.js gzip | 2.28 kB | 2.28 kB | ✓ |
hooks-HASH.js gzip | 903 B | 903 B | ✓ |
image-HASH.js gzip | 5.63 kB | 5.63 kB | ✓ |
index-HASH.js gzip | 261 B | 261 B | ✓ |
link-HASH.js gzip | 1.66 kB | 1.66 kB | ✓ |
routerDirect..HASH.js gzip | 319 B | 319 B | ✓ |
script-HASH.js gzip | 387 B | 387 B | ✓ |
withRouter-HASH.js gzip | 320 B | 320 B | ✓ |
bb14e60e810b..30f.css gzip | 125 B | 125 B | ✓ |
Overall change | 19.1 kB | 19.1 kB | ✓ |
Client Build Manifests
vercel/next.js canary | paambaati/next.js canary | Change | |
---|---|---|---|
_buildManifest.js gzip | 489 B | 489 B | ✓ |
Overall change | 489 B | 489 B | ✓ |
Rendered Page Sizes
vercel/next.js canary | paambaati/next.js canary | Change | |
---|---|---|---|
index.html gzip | 531 B | 531 B | ✓ |
link.html gzip | 542 B | 542 B | ✓ |
withRouter.html gzip | 525 B | 525 B | ✓ |
Overall change | 1.6 kB | 1.6 kB | ✓ |
Webpack 4 Mode (Decrease detected ✓)
General Overall increase ⚠️
vercel/next.js canary | paambaati/next.js canary | Change | |
---|---|---|---|
buildDuration | 11.5s | 11.5s | -41ms |
buildDurationCached | 4.5s | 4.4s | -116ms |
nodeModulesSize | 50.3 MB | 50.3 MB |
Page Load Tests Overall decrease ⚠️
vercel/next.js canary | paambaati/next.js canary | Change | |
---|---|---|---|
/ failed reqs | 0 | 0 | ✓ |
/ total time (seconds) | 2.421 | 2.566 | |
/ avg req/sec | 1032.46 | 974.31 | |
/error-in-render failed reqs | 0 | 0 | ✓ |
/error-in-render total time (seconds) | 1.363 | 1.392 | |
/error-in-render avg req/sec | 1834.63 | 1796.02 |
Client Bundles (main, webpack, commons)
vercel/next.js canary | paambaati/next.js canary | Change | |
---|---|---|---|
17.HASH.js gzip | 2.98 kB | 2.98 kB | ✓ |
18.HASH.js gzip | 185 B | 185 B | ✓ |
677f882d2ed8..HASH.js gzip | 13.8 kB | 13.8 kB | ✓ |
framework.HASH.js gzip | 41.9 kB | 41.9 kB | ✓ |
main-HASH.js gzip | 8.4 kB | 8.4 kB | ✓ |
webpack-HASH.js gzip | 1.22 kB | 1.22 kB | ✓ |
Overall change | 68.5 kB | 68.5 kB | ✓ |
Legacy Client Bundles (polyfills)
vercel/next.js canary | paambaati/next.js canary | Change | |
---|---|---|---|
polyfills-HASH.js gzip | 31.3 kB | 31.3 kB | ✓ |
Overall change | 31.3 kB | 31.3 kB | ✓ |
Client Pages
vercel/next.js canary | paambaati/next.js canary | Change | |
---|---|---|---|
_app-HASH.js gzip | 791 B | 791 B | ✓ |
_error-HASH.js gzip | 3.76 kB | 3.76 kB | ✓ |
amp-HASH.js gzip | 552 B | 552 B | ✓ |
css-HASH.js gzip | 333 B | 333 B | ✓ |
dynamic-HASH.js gzip | 2.71 kB | 2.71 kB | ✓ |
head-HASH.js gzip | 2.97 kB | 2.97 kB | ✓ |
hooks-HASH.js gzip | 911 B | 911 B | ✓ |
index-HASH.js gzip | 231 B | 231 B | ✓ |
link-HASH.js gzip | 1.64 kB | 1.64 kB | ✓ |
routerDirect..HASH.js gzip | 298 B | 298 B | ✓ |
script-HASH.js gzip | 3.02 kB | 3.02 kB | ✓ |
withRouter-HASH.js gzip | 294 B | 294 B | ✓ |
e025d2764813..52f.css gzip | 125 B | 125 B | ✓ |
Overall change | 17.6 kB | 17.6 kB | ✓ |
Client Build Manifests
vercel/next.js canary | paambaati/next.js canary | Change | |
---|---|---|---|
_buildManifest.js gzip | 500 B | 500 B | ✓ |
Overall change | 500 B | 500 B | ✓ |
Rendered Page Sizes
vercel/next.js canary | paambaati/next.js canary | Change | |
---|---|---|---|
index.html gzip | 576 B | 576 B | ✓ |
link.html gzip | 588 B | 588 B | ✓ |
withRouter.html gzip | 569 B | 569 B | ✓ |
Overall change | 1.73 kB | 1.73 kB | ✓ |
This comment has been minimized.
This comment has been minimized.
if (contentType === AVIF) { | ||
transformer.avif({ quality }) | ||
} else if (contentType === WEBP) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
you've just added the support for the case when sharp
exists in deps, but what about the squoosh
fallback?
in the official squoosh repository, I do see that AVIF is supported ;) should we bring it to Next repo? @styfle @timneutkens wdyt?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes it will need to be in both. I'm going to update squoosh soon after we get a few bugs fixed
This comment has been minimized.
This comment has been minimized.
Failing test suitesCommit: b36c66a test/integration/route-load-cancel/test/index.test.js
Expand output● next/dynamic › dev mode › should cancel slow page loads on re-navigation
|
In case interesting, the latest version of |
One thing to consider here is that only Chrome and Firefox support AVIF. Safari and Edge do not. This could reduce cache hit ratios because now each image could to be converted to both WebP and AVIF (multiply that by the number of In particular, external images configured with But every cache is finite so at some point, cached images need to be removed so in those cases any website with many images will be affected. So we'll probably need to introduce AVIF under a flag so users can opt-in. Then once Safari and Edge add support we can change the default behavior. |
Add support for AVIF to `next/image` - Fixes #27882 - Closes #27432 ## Feature - [x] Implements an existing feature request - [x] Related issues linked - [x] Integration tests added - [x] Documentation added - [x] Update manifest output - [x] Warn when `sharp` is outdated - [x] Errors & Warnings have helpful link attached - [ ] Remove `image-size` in favor of `squoosh`/`sharp` (optional, need to benchmark)
Add support for AVIF to `next/image` - Fixes vercel#27882 - Closes vercel#27432 ## Feature - [x] Implements an existing feature request - [x] Related issues linked - [x] Integration tests added - [x] Documentation added - [x] Update manifest output - [x] Warn when `sharp` is outdated - [x] Errors & Warnings have helpful link attached - [ ] Remove `image-size` in favor of `squoosh`/`sharp` (optional, need to benchmark)
This PR resurrects #20765, now that conditional support for
sharp
has been added back.Bug
fixes #number
contributing.md
Feature
fixes #number
contributing.md
Documentation / Examples