Skip to content

chore(next/image): improve imgopt api bypass detection for unsupported images#73909

Merged
styfle merged 2 commits intocanaryfrom
styfle/perf-bypass
Dec 17, 2024
Merged

chore(next/image): improve imgopt api bypass detection for unsupported images#73909
styfle merged 2 commits intocanaryfrom
styfle/perf-bypass

Conversation

@styfle
Copy link
Copy Markdown
Member

@styfle styfle commented Dec 13, 2024 •
edited
Loading

We currently bypass svg and animated images because vector doesn't need to be rasterized and animated will turn to still.

However, there are other image types that we implicitly bypass once sharp throws an error message and we catch it here:

next.js/packages/next/src/server/image-optimizer.ts

Lines 798 to 815 in 7d1ee4f

} catch (error) {
if (upstreamType) {
// If we fail to optimize, fallback to the original image
return {
buffer: upstreamBuffer,
contentType: upstreamType,
maxAge: nextConfig.images.minimumCacheTTL,
etag: upstreamEtag,
upstreamEtag,
error,
}
} else {
throw new ImageError(
400,
'Unable to optimize image and unable to fallback to upstream image'
)
}
}

We already have existing tests for this behavior here:

next.js/test/integration/image-optimizer/test/util.ts

Line 201 in 9435b7b

it('should maintain icns', async () => {

This PR bypasses early so we can avoid sending the buffer, waiting for it to throw the error, and then catching the error.

Also note this uncovered some discrepancies in how we handle the max age cache-control so this unifies the behavior.

@ijjk
Copy link
Copy Markdown
Member

ijjk commented Dec 13, 2024 •
edited
Loading

Tests Passed

@ijjk
Copy link
Copy Markdown
Member

ijjk commented Dec 13, 2024 •
edited
Loading

Stats from current PR

Default Build (Increase detected ⚠️)
General
vercel/next.js canary vercel/next.js styfle/perf-bypass Change
buildDuration 20s 16.7s N/A
buildDurationCached 15.8s 13.7s N/A
nodeModulesSize 410 MB 410 MB N/A
nextStartRea..uration (ms) 483ms 490ms N/A
Client Bundles (main, webpack)
vercel/next.js canary vercel/next.js styfle/perf-bypass Change
1187-HASH.js gzip 50.9 kB 50.9 kB N/A
8276.HASH.js gzip 169 B 168 B N/A
8377-HASH.js gzip 5.36 kB 5.36 kB N/A
bccd1874-HASH.js gzip 53 kB 53 kB N/A
framework-HASH.js gzip 57.5 kB 57.5 kB N/A
main-app-HASH.js gzip 232 B 235 B N/A
main-HASH.js gzip 34.1 kB 34 kB N/A
webpack-HASH.js gzip 1.71 kB 1.71 kB N/A
Overall change 0 B 0 B ✓
Legacy Client Bundles (polyfills)
vercel/next.js canary vercel/next.js styfle/perf-bypass Change
polyfills-HASH.js gzip 39.4 kB 39.4 kB ✓
Overall change 39.4 kB 39.4 kB ✓
Client Pages
vercel/next.js canary vercel/next.js styfle/perf-bypass Change
_app-HASH.js gzip 193 B 193 B ✓
_error-HASH.js gzip 193 B 193 B ✓
amp-HASH.js gzip 512 B 510 B N/A
css-HASH.js gzip 343 B 342 B N/A
dynamic-HASH.js gzip 1.84 kB 1.84 kB ✓
edge-ssr-HASH.js gzip 265 B 265 B ✓
head-HASH.js gzip 363 B 362 B N/A
hooks-HASH.js gzip 393 B 392 B N/A
image-HASH.js gzip 4.49 kB 4.49 kB N/A
index-HASH.js gzip 268 B 268 B ✓
link-HASH.js gzip 2.35 kB 2.34 kB N/A
routerDirect..HASH.js gzip 328 B 328 B ✓
script-HASH.js gzip 397 B 397 B ✓
withRouter-HASH.js gzip 323 B 326 B N/A
1afbb74e6ecf..834.css gzip 106 B 106 B ✓
Overall change 3.59 kB 3.59 kB ✓
Client Build Manifests
vercel/next.js canary vercel/next.js styfle/perf-bypass Change
_buildManifest.js gzip 749 B 746 B N/A
Overall change 0 B 0 B ✓
Rendered Page Sizes
vercel/next.js canary vercel/next.js styfle/perf-bypass Change
index.html gzip 524 B 523 B N/A
link.html gzip 539 B 537 B N/A
withRouter.html gzip 520 B 520 B ✓
Overall change 520 B 520 B ✓
Edge SSR bundle Size
vercel/next.js canary vercel/next.js styfle/perf-bypass Change
edge-ssr.js gzip 128 kB 128 kB N/A
page.js gzip 204 kB 204 kB N/A
Overall change 0 B 0 B ✓
Middleware size
vercel/next.js canary vercel/next.js styfle/perf-bypass Change
middleware-b..fest.js gzip 672 B 667 B N/A
middleware-r..fest.js gzip 155 B 156 B N/A
middleware.js gzip 31.2 kB 31.2 kB N/A
edge-runtime..pack.js gzip 844 B 844 B ✓
Overall change 844 B 844 B ✓
Next Runtimes
vercel/next.js canary vercel/next.js styfle/perf-bypass Change
523-experime...dev.js gzip 322 B 322 B ✓
523.runtime.dev.js gzip 314 B 314 B ✓
app-page-exp...dev.js gzip 323 kB 323 kB ✓
app-page-exp..prod.js gzip 127 kB 127 kB ✓
app-page-tur..prod.js gzip 140 kB 140 kB ✓
app-page-tur..prod.js gzip 135 kB 135 kB ✓
app-page.run...dev.js gzip 313 kB 313 kB ✓
app-page.run..prod.js gzip 123 kB 123 kB ✓
app-route-ex...dev.js gzip 37.4 kB 37.4 kB ✓
app-route-ex..prod.js gzip 25.5 kB 25.5 kB ✓
app-route-tu..prod.js gzip 25.5 kB 25.5 kB ✓
app-route-tu..prod.js gzip 25.3 kB 25.3 kB ✓
app-route.ru...dev.js gzip 39 kB 39 kB ✓
app-route.ru..prod.js gzip 25.3 kB 25.3 kB ✓
pages-api-tu..prod.js gzip 9.69 kB 9.69 kB ✓
pages-api.ru...dev.js gzip 11.6 kB 11.6 kB ✓
pages-api.ru..prod.js gzip 9.68 kB 9.68 kB ✓
pages-turbo...prod.js gzip 21.7 kB 21.7 kB ✓
pages.runtim...dev.js gzip 27.4 kB 27.4 kB ✓
pages.runtim..prod.js gzip 21.7 kB 21.7 kB ✓
server.runti..prod.js gzip 916 kB 916 kB ✓
Overall change 2.36 MB 2.36 MB ✓
build cache Overall increase ⚠️
vercel/next.js canary vercel/next.js styfle/perf-bypass Change
0.pack gzip 2.05 MB 2.05 MB N/A
index.pack gzip 72.2 kB 72.4 kB ⚠️ +266 B
Overall change 72.2 kB 72.4 kB ⚠️ +266 B
Diff details
Diff for main-HASH.js

Diff too large to display

Commit: 52bbcee

@styfle styfle merged commit ce881de into canary Dec 17, 2024
@styfle styfle deleted the styfle/perf-bypass branch December 17, 2024 13:44
@github-actions github-actions bot added the locked label Jan 1, 2025
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Jan 1, 2025
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Reviewers

@ijjk ijjk ijjk approved these changes

Assignees

No one assigned

Labels

created-by: Next.js team PRs by the Next.js team. locked tests type: next

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@styfle @ijjk