Skip to content

fix(next/image): use webp for blur placeholder#92421

Draft
styfle wants to merge 3 commits intocanaryfrom
styfle/blur-webp
Draft

fix(next/image): use webp for blur placeholder#92421
styfle wants to merge 3 commits intocanaryfrom
styfle/blur-webp

Conversation

@styfle
Copy link
Copy Markdown
Member

@styfle styfle commented Apr 6, 2026

Since 97% of browser usage supports WebP, we can now use it for default blur placeholders.

Using WebP as a placeholder is favorable since its typically fewer bytes and faster to encode. See benchmark:

SUMMARY
====================================================================================================
File                      Ext      Orig ms   WebP ms   Δ Speed   Orig URL   WebP URL    Δ Size
----------------------------------------------------------------------------------------------------
test.png                  png         3.10      2.90     -6.4%        210        139    -33.8%
grayscale.png             png         1.02      1.19     16.0%        266        227    -14.7%
test.jpg                  jpeg        2.75      2.53     -8.0%        483        135    -72.0%
mountains.jpg             jpeg       17.18     16.77     -2.4%        487        119    -75.6%
wide.png                  png        10.81     10.57     -2.2%        230        131    -43.0%
super-wide.png            png         0.91      0.87     -5.2%        162         83    -48.8%
cat.jpg                   jpeg       15.00     17.16     14.4%        519        175    -66.3%
dog.jpg                   jpeg       15.11     13.78     -8.8%        527        183    -65.3%
vercel.png                png         8.84      7.86    -11.0%        206        127    -38.3%
test.avif                 avif        2.20      2.13     -3.0%        415        139    -66.5%

@nextjs-bot nextjs-bot added created-by: Next.js team PRs by the Next.js team. tests Turbopack Related to Turbopack with Next.js. type: next labels Apr 6, 2026
@nextjs-bot
Copy link
Copy Markdown
Collaborator

Failing test suites

Commit: 324af2f | About building and testing Next.js

pnpm test-start test/integration/next-image-legacy/default/test/static.test.ts (job)

  • Static Image Component Tests > production mode > Should add a blur placeholder to statically imported png (DD)
Expand output

● Static Image Component Tests › production mode › Should add a blur placeholder to statically imported png

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `Static Image Component Tests production mode Should add a blur placeholder to statically imported png 1`

- Snapshot  - 1
+ Received  + 1

- "position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;background-size:cover;background-position:0% 0%;filter:blur(20px);background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAICAYAAAA870V8AAAARUlEQVR42l3MoQ0AQQhE0XG7xWwIJSBIKBRJOZRBEXOWnPjimQ8AXC3ce+nuPOcQEcHuppkRVcWZYWYSIkJV5XvvN9j4AFZHJTnjDHb/AAAAAElFTkSuQmCC")"
+ "position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;background-size:cover;background-position:0% 0%;filter:blur(20px);background-image:url("data:image/webp;base64,UklGRlAAAABXRUJQVlA4TEQAAAAvAsABEM1VICICHggACQAAAICAAwAEAAAAMAgKAAAAFAAAABAIBAAAAAAAAACwBQAAAAAAEQAAIiJhoRyu62Sh+V/DAA==")"

  86 |     const $ = cheerio.load(html)
  87 |     if (process.env.IS_TURBOPACK_TEST) {
> 88 |       expect($('#basic-static')[2].attribs.style).toMatchInlineSnapshot(
     |                                                   ^
  89 |         `"position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;background-size:cover;background-position:0% 0%;filter:blur(20px);background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAICAYAAAA870V8AAAARUlEQVR42l3MoQ0AQQhE0XG7xWwIJSBIKBRJOZRBEXOWnPjimQ8AXC3ce+nuPOcQEcHuppkRVcWZYWYSIkJV5XvvN9j4AFZHJTnjDHb/AAAAAElFTkSuQmCC")"`
  90 |       )
  91 |     } else {

  at Object.toMatchInlineSnapshot (integration/next-image-legacy/default/test/static.test.ts:88:51)

@nextjs-bot
Copy link
Copy Markdown
Collaborator

nextjs-bot commented Apr 6, 2026

Tests Passed

Copy link
Copy Markdown
Contributor

@vercel vercel bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Additional Suggestion:

Test inline snapshots for PNG blur placeholder still expect data:image/png;base64,... but the code now produces data:image/webp;base64,..., causing test failures.

Fix on Vercel

@codspeed-hq
Copy link
Copy Markdown

codspeed-hq bot commented Apr 6, 2026

Merging this PR will degrade performance by 3.31%

❌ 1 regressed benchmark
✅ 16 untouched benchmarks
⏩ 3 skipped benchmarks1

⚠️ Please fix the performance issues or acknowledge them on CodSpeed.

Performance Changes

Mode Benchmark BASE HEAD Efficiency
Simulation react-dom-client.development.js[full] 404.7 ms 418.6 ms -3.31%

Comparing styfle/blur-webp (3286031) with canary (16dd58f)

Open in CodSpeed

Footnotes

  1. 3 benchmarks were skipped, so the baseline results were used instead. If they were deleted from the codebase, click here and archive them to remove them from the performance reports.

@nextjs-bot
Copy link
Copy Markdown
Collaborator

nextjs-bot commented Apr 6, 2026

Stats from current PR

✅ No significant changes detected

📊 All Metrics
📖 Metrics Glossary

Dev Server Metrics:

  • Listen = TCP port starts accepting connections
  • First Request = HTTP server returns successful response
  • Cold = Fresh build (no cache)
  • Warm = With cached build artifacts

Build Metrics:

  • Fresh = Clean build (no .next directory)
  • Cached = With existing .next directory

Change Thresholds:

  • Time: Changes < 50ms AND < 10%, OR < 2% are insignificant
  • Size: Changes < 1KB AND < 1% are insignificant
  • All other changes are flagged to catch regressions

⚡ Dev Server

Metric Canary PR Change Trend
Cold (Listen) 456ms 454ms ▁█▅▅▅
Cold (Ready in log) 436ms 439ms ▁▂▅▇▄
Cold (First Request) 1.112s 1.101s ▆▁▁▂▂
Warm (Listen) 457ms 457ms █▁██▁
Warm (Ready in log) 439ms 440ms ▂▂▇█▁
Warm (First Request) 334ms 334ms ▃▄▇█▄
📦 Dev Server (Webpack) (Legacy)

📦 Dev Server (Webpack)

Metric Canary PR Change Trend
Cold (Listen) 455ms 456ms ▁▁▅▁▅
Cold (Ready in log) 433ms 434ms ▁▃▆▂▂
Cold (First Request) 1.944s 1.904s ▇▇▇▆▁
Warm (Listen) 455ms 455ms ▁▁▁▁▁
Warm (Ready in log) 433ms 434ms ▁▂▅▁▂
Warm (First Request) 1.925s 1.935s ▆▇█▆▁

⚡ Production Builds

Metric Canary PR Change Trend
Fresh Build 3.939s 3.852s ▇▆██▁
Cached Build 3.990s 3.943s ▄███▄
📦 Production Builds (Webpack) (Legacy)

📦 Production Builds (Webpack)

Metric Canary PR Change Trend
Fresh Build 14.337s 14.359s ▁▂▅▂▂
Cached Build 14.487s 14.522s ▁▂▇▃▄
node_modules Size 488 MB 488 MB █████
📦 Bundle Sizes

Bundle Sizes

⚡ Turbopack

Client

Main Bundles
Canary PR Change
02fkg8wfh0iju.js gzip 9.19 kB N/A -
050zwt5xh_0tx.js gzip 10.4 kB N/A -
0803-3r6mifdx.js gzip 157 B N/A -
087fzjd-gvlzv.js gzip 450 B N/A -
0cz1d0mv5g_q7.js gzip 39.4 kB 39.4 kB
0d0pcwea0l749.js gzip 151 B N/A -
0d34flh8j9r6u.js gzip 156 B N/A -
0p0khj57rq_v_.js gzip 162 B N/A -
0ppxcl_z43mad.js gzip 8.52 kB N/A -
13mnpc17btogu.js gzip 157 B N/A -
19oha6-znmkcv.js gzip 8.55 kB N/A -
1elt1qium-r2m.css gzip 115 B 115 B
1ppe_gkx_dsny.js gzip 159 B N/A -
2_5rjb7lqxntf.js gzip 221 B 221 B
219prxwxgaalc.js gzip 7.61 kB N/A -
26elcgxnn9zjd.js gzip 8.52 kB N/A -
28s7tbll9vbjr.js gzip 156 B N/A -
2900hudr6gvm0.js gzip 2.28 kB N/A -
2bbl2qamyvimj.js gzip 65.7 kB N/A -
2lv2js3kmdeho.js gzip 8.48 kB N/A -
2rehygrd36hqv.js gzip 8.58 kB N/A -
2scbv16he964r.js gzip 158 B N/A -
2srwswih0m9_h.js gzip 13.3 kB N/A -
3-jz00s4w-r6h.js gzip 13 kB N/A -
3-p9p9mheqhzx.js gzip 8.55 kB N/A -
31030bryqpolg.js gzip 8.53 kB N/A -
31dx5nmrzzuy7.js gzip 225 B N/A -
37r23u64aoktk.js gzip 155 B N/A -
3925v09gtu-5k.js gzip 49 kB N/A -
39x4zj5mjb4d_.js gzip 9.77 kB N/A -
3at2ovgizp8r6.js gzip 158 B N/A -
3bknr2e7m9s7z.js gzip 155 B N/A -
3k-48b78ys_vy.js gzip 10.1 kB N/A -
3m7-5rfj0avoz.js gzip 12.9 kB N/A -
3t39n05ky9z08.js gzip 70.8 kB N/A -
3uqce_6sa526g.js gzip 8.47 kB N/A -
3yurjqk-sjs3y.js gzip 1.46 kB N/A -
3znov3m90-kab.js gzip 168 B N/A -
40ybjx9c192n0.js gzip 13.8 kB N/A -
421vzwdt9j1b_.js gzip 5.62 kB N/A -
44jj5q-kk1jan.js gzip 157 B N/A -
turbopack-03..e7c0.js gzip 4.18 kB N/A -
turbopack-0k..9h2a.js gzip 4.18 kB N/A -
turbopack-0m..6r79.js gzip 4.18 kB N/A -
turbopack-0v..v8st.js gzip 4.18 kB N/A -
turbopack-1s..tsd2.js gzip 4.16 kB N/A -
turbopack-3-..bo-6.js gzip 4.18 kB N/A -
turbopack-31..l4gh.js gzip 4.18 kB N/A -
turbopack-36..rum2.js gzip 4.18 kB N/A -
turbopack-3i..3636.js gzip 4.18 kB N/A -
turbopack-3v..wfxq.js gzip 4.18 kB N/A -
turbopack-3v..1qwv.js gzip 4.19 kB N/A -
turbopack-3z..kcbv.js gzip 4.18 kB N/A -
turbopack-40..j2ay.js gzip 4.18 kB N/A -
turbopack-42..qz47.js gzip 4.17 kB N/A -
03dgzoo-qf3sm.js gzip N/A 9.19 kB -
03i0taczqebbx.js gzip N/A 70.8 kB -
05tx5f25dlivn.js gzip N/A 8.53 kB -
0c7ez6p2qc57f.js gzip N/A 5.62 kB -
0duvj3qk5pvgn.js gzip N/A 13.8 kB -
0ifxao1ktkgwg.js gzip N/A 156 B -
0m-34rm9w_wpm.js gzip N/A 7.6 kB -
0qnwuk92m8i7o.js gzip N/A 10.4 kB -
0r4wrn6n0ue2m.js gzip N/A 8.55 kB -
0rp0fodtbt_6m.js gzip N/A 8.52 kB -
0sfck-km4dl1k.js gzip N/A 8.47 kB -
0x0xuhmxzwkp8.js gzip N/A 8.47 kB -
1-wdvgxnzicj7.js gzip N/A 1.46 kB -
11u6nxujb2eg4.js gzip N/A 450 B -
19uunh8umr1a1.js gzip N/A 157 B -
1el9fuakpgh8m.js gzip N/A 155 B -
1jv-o1_s-zmua.js gzip N/A 49 kB -
1mifo-hcc4vf6.js gzip N/A 154 B -
1o5x2xlfw7x62.js gzip N/A 156 B -
1sk7rrnby7fjt.js gzip N/A 157 B -
2-j7jrt35v955.js gzip N/A 160 B -
27kwgyklbqvcl.js gzip N/A 152 B -
2e2z-03lx4fjc.js gzip N/A 13 kB -
2irxuxkr23i0g.js gzip N/A 160 B -
2k9ax08cjl2id.js gzip N/A 12.9 kB -
2lms6k76q5-6m.js gzip N/A 13.3 kB -
2qx4twi9i3xus.js gzip N/A 2.28 kB -
2srnqic6tvxxd.js gzip N/A 8.52 kB -
2zkc9u4375pyw.js gzip N/A 157 B -
30l7m4nayp73a.js gzip N/A 8.55 kB -
34v1uamxoz09s.js gzip N/A 170 B -
34wde90lr4zme.js gzip N/A 157 B -
3h_ecpiaatwgc.js gzip N/A 10.1 kB -
3hxw-cpxtvy_3.js gzip N/A 156 B -
3ity0aahajapd.js gzip N/A 225 B -
3wrhpuc-j1aw9.js gzip N/A 9.77 kB -
3xlti3rufjlyg.js gzip N/A 65.7 kB -
43mlw9dy_8f02.js gzip N/A 8.58 kB -
turbopack-02..6_tq.js gzip N/A 4.18 kB -
turbopack-0h..r50b.js gzip N/A 4.18 kB -
turbopack-17..z-3u.js gzip N/A 4.19 kB -
turbopack-18..evlj.js gzip N/A 4.17 kB -
turbopack-1c..a07c.js gzip N/A 4.18 kB -
turbopack-1h..a606.js gzip N/A 4.18 kB -
turbopack-1o.._bpf.js gzip N/A 4.18 kB -
turbopack-1w..e9r6.js gzip N/A 4.18 kB -
turbopack-22..wdmr.js gzip N/A 4.18 kB -
turbopack-2c..zde7.js gzip N/A 4.18 kB -
turbopack-31..4lzd.js gzip N/A 4.18 kB -
turbopack-3g..9wtz.js gzip N/A 4.18 kB -
turbopack-3l..q89n.js gzip N/A 4.18 kB -
turbopack-40..aa11.js gzip N/A 4.16 kB -
Total 464 kB 464 kB ✅ -22 B

Server

Middleware
Canary PR Change
middleware-b..fest.js gzip 722 B 714 B 🟢 8 B (-1%)
Total 722 B 714 B ✅ -8 B
Build Details
Build Manifests
Canary PR Change
_buildManifest.js gzip 434 B 435 B
Total 434 B 435 B ⚠️ +1 B

📦 Webpack

Client

Main Bundles
Canary PR Change
5528-HASH.js gzip 5.54 kB N/A -
6280-HASH.js gzip 60.7 kB N/A -
6335.HASH.js gzip 169 B N/A -
912-HASH.js gzip 4.59 kB N/A -
e8aec2e4-HASH.js gzip 62.8 kB N/A -
framework-HASH.js gzip 59.7 kB 59.7 kB
main-app-HASH.js gzip 255 B 254 B
main-HASH.js gzip 39.4 kB 39.3 kB
webpack-HASH.js gzip 1.68 kB 1.68 kB
262-HASH.js gzip N/A 4.59 kB -
2889.HASH.js gzip N/A 169 B -
5602-HASH.js gzip N/A 5.55 kB -
6948ada0-HASH.js gzip N/A 62.8 kB -
9544-HASH.js gzip N/A 61.4 kB -
Total 235 kB 235 kB ⚠️ +580 B
Polyfills
Canary PR Change
polyfills-HASH.js gzip 39.4 kB 39.4 kB
Total 39.4 kB 39.4 kB
Pages
Canary PR Change
_app-HASH.js gzip 194 B 194 B
_error-HASH.js gzip 183 B 180 B 🟢 3 B (-2%)
css-HASH.js gzip 331 B 330 B
dynamic-HASH.js gzip 1.81 kB 1.81 kB
edge-ssr-HASH.js gzip 256 B 256 B
head-HASH.js gzip 351 B 352 B
hooks-HASH.js gzip 384 B 383 B
image-HASH.js gzip 580 B 494 B 🟢 86 B (-15%)
index-HASH.js gzip 260 B 260 B
link-HASH.js gzip 2.51 kB 2.51 kB
routerDirect..HASH.js gzip 320 B 319 B
script-HASH.js gzip 386 B 386 B
withRouter-HASH.js gzip 315 B 315 B
1afbb74e6ecf..834.css gzip 106 B 106 B
Total 7.98 kB 7.89 kB ✅ -88 B

Server

Edge SSR
Canary PR Change
edge-ssr.js gzip 125 kB 126 kB
page.js gzip 273 kB 273 kB
Total 398 kB 398 kB ⚠️ +189 B
Middleware
Canary PR Change
middleware-b..fest.js gzip 617 B 615 B
middleware-r..fest.js gzip 156 B 155 B
middleware.js gzip 44.2 kB 44.1 kB
edge-runtime..pack.js gzip 842 B 842 B
Total 45.8 kB 45.7 kB ✅ -86 B
Build Details
Build Manifests
Canary PR Change
_buildManifest.js gzip 715 B 717 B
Total 715 B 717 B ⚠️ +2 B
Build Cache
Canary PR Change
0.pack gzip 4.38 MB 4.37 MB 🟢 6.49 kB (0%)
index.pack gzip 115 kB 115 kB
index.pack.old gzip 114 kB 116 kB 🔴 +1.6 kB (+1%)
Total 4.61 MB 4.6 MB ✅ -5.18 kB

🔄 Shared (bundler-independent)

Runtimes
Canary PR Change
app-page-exp...dev.js gzip 342 kB 342 kB
app-page-exp..prod.js gzip 189 kB 189 kB
app-page-tur...dev.js gzip 341 kB 341 kB
app-page-tur..prod.js gzip 189 kB 189 kB
app-page-tur...dev.js gzip 338 kB 338 kB
app-page-tur..prod.js gzip 187 kB 187 kB
app-page.run...dev.js gzip 338 kB 338 kB
app-page.run..prod.js gzip 187 kB 187 kB
app-route-ex...dev.js gzip 76.6 kB 76.6 kB
app-route-ex..prod.js gzip 52.2 kB 52.2 kB
app-route-tu...dev.js gzip 76.6 kB 76.6 kB
app-route-tu..prod.js gzip 52.2 kB 52.2 kB
app-route-tu...dev.js gzip 76.2 kB 76.2 kB
app-route-tu..prod.js gzip 52 kB 52 kB
app-route.ru...dev.js gzip 76.2 kB 76.2 kB
app-route.ru..prod.js gzip 52 kB 52 kB
dist_client_...dev.js gzip 324 B 324 B
dist_client_...dev.js gzip 326 B 326 B
dist_client_...dev.js gzip 318 B 318 B
dist_client_...dev.js gzip 317 B 317 B
pages-api-tu...dev.js gzip 43.8 kB 43.8 kB
pages-api-tu..prod.js gzip 33.4 kB 33.4 kB
pages-api.ru...dev.js gzip 43.8 kB 43.8 kB
pages-api.ru..prod.js gzip 33.4 kB 33.4 kB
pages-turbo....dev.js gzip 53.2 kB 53.2 kB
pages-turbo...prod.js gzip 39 kB 39 kB
pages.runtim...dev.js gzip 53.2 kB 53.2 kB
pages.runtim..prod.js gzip 39 kB 39 kB
server.runti..prod.js gzip 62.8 kB 62.8 kB
Total 3.03 MB 3.03 MB ⚠️ +3 B
📎 Tarball URL
https://vercel-packages.vercel.app/next/commits/328603146166c6e6088b30ab2eced3c4b2d2eda8/next

@mischnic
Copy link
Copy Markdown
Member

mischnic commented Apr 6, 2026

We could use the browserslist config to see if all specified browsers support webp?

@styfle
Copy link
Copy Markdown
Member Author

styfle commented Apr 6, 2026

@mischnic I told claude to implement support for browserlist and it refused 🤣

And I tend to agree. Do you think its worth doing or should we treat blur placeholders as "modern" browsers only.

The default target is modern browsers — all of which support webp. However, users can configure a custom browserslist that could include older browsers like IE 11 which don't support webp.

That said, the blur placeholder is a tiny inline data URL used as a CSS background-image — it's purely a visual placeholder that gets replaced by the real image. Even if a browser doesn't support webp, the worst case is the blur placeholder wouldn't display (transparent background until the real image loads). The actual <img> element still uses the original format.

So webp in the blur data URL is safe because:

  1. The default browserslist targets all support webp
  2. Even with a custom browserslist targeting old browsers, the blur is just a low-quality placeholder — a missing placeholder is a graceful degradation, not a broken feature
  3. The <img src> itself is unchanged — only the tiny inline CSS placeholder changes

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

created-by: Next.js team PRs by the Next.js team. tests Turbopack Related to Turbopack with Next.js. type: next

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants