Add experimental blurry placeholder to image component #24153

Joonpark13 · 2021-04-16T17:09:21Z

This is the image component implementation of the blurry placeholder as described in #24004. The matching server side implementation is currently planned.

Feature

Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
Related issue Add placeholder="blur" to Image component #18858
Integration tests added

(Documentation and telemetry to follow after server side is implemented)

As the server side functionality is not yet implemented, the only way to currently test the feature is to provide your own blurry image data URL manually (this is how the integration test is written). The feature is currently behind the experimental.imagePlaceholder config value.

packages/next/client/image.tsx

Joonpark13 · 2021-04-16T17:14:45Z

test/integration/image-component/default/test/index.test.js

+    it('should have blurry placeholder when enabled', async () => {
+      const html = await renderViaHTTP(appPort, '/blurry-placeholder')
+      expect(html).toContain(
+        'background-image:url(&quot;data:image/svg+xml,%3Csvg xmlns=&#x27;http://www.w3.org/2000/svg&#x27; width=&#x27;400&#x27; height=&#x27;400&#x27; viewBox=&#x27;0 0 400 400&#x27;%3E%3Cfilter id=&#x27;blur&#x27; filterUnits=&#x27;userSpaceOnUse&#x27; color-interpolation-filters=&#x27;sRGB&#x27;%3E%3CfeGaussianBlur stdDeviation=&#x27;20&#x27; edgeMode=&#x27;duplicate&#x27; /%3E%3CfeComponentTransfer%3E%3CfeFuncA type=&#x27;discrete&#x27; tableValues=&#x27;1 1&#x27; /%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Cimage filter=&#x27;url(%23blur)&#x27; href=&#x27;data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMDAwMDAwQEBAQFBQUFBQcHBgYHBwsICQgJCAsRCwwLCwwLEQ8SDw4PEg8bFRMTFRsfGhkaHyYiIiYwLTA+PlT/wAALCAAKAAoBAREA/8QAMwABAQEAAAAAAAAAAAAAAAAAAAcJEAABAwUAAwAAAAAAAAAAAAAFAAYRAQMEEyEVMlH/2gAIAQEAAD8Az1bLPaxhiuk0QdeCOLDtHixN2dmd2bsc5FPX7VTREX//2Q==&#x27; x=&#x27;0&#x27; y=&#x27;0&#x27; height=&#x27;100%25&#x27; width=&#x27;100%25&#x27;/%3E%3C/svg%3E&quot;)'
+      )
+    })
+
+    it('should remove blurry placeholder after image loads', async () => {
+      let browser
+      try {
+        browser = await webdriver(appPort, '/blurry-placeholder')
+        const id = 'blurry-placeholder'
+        const backgroundImage = await browser.eval(
+          `window.getComputedStyle(document.getElementById('${id}')).getPropertyValue('background-image')`
+        )
+        expect(backgroundImage).toBe('none')
+      } finally {
+        if (browser) {
+          await browser.close()
+        }
+      }
+    })
+


As suggested by @atcastle I'm adding the integration tests to the serverless suite only in order to avoid changing the config and having to rebuild. This should be fine for now since there's no functional difference for this feature between the modes and when this feature graduates out of experimental, we can come back and place this where it should live with the right config.

ijjk · 2021-04-16T17:22:06Z

Stats from current PR

Default Server Mode (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	Joonpark13/next.js blurry-placeholder	Change
buildDuration	15.4s	15.6s	⚠️ +263ms
buildDurationCached	4.7s	4.7s	-28ms
nodeModulesSize	46.2 MB	46.3 MB	⚠️ +5.12 kB

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	Joonpark13/next.js blurry-placeholder	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.755	2.825	⚠️ +0.07
/ avg req/sec	907.56	884.94	⚠️ -22.62
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.539	1.555	⚠️ +0.02
/error-in-render avg req/sec	1624.61	1607.61	⚠️ -17

Client Bundles (main, webpack, commons)

	vercel/next.js canary	Joonpark13/next.js blurry-placeholder	Change
597-HASH.js gzip	13.3 kB	13.3 kB	✓
778-HASH.js gzip	7.05 kB	7.05 kB	✓
framework-HASH.js gzip	39.3 kB	39.3 kB	✓
main-HASH.js gzip	151 B	151 B	✓
webpack-HASH.js gzip	993 B	993 B	✓
Overall change	60.8 kB	60.8 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	Joonpark13/next.js blurry-placeholder	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	Joonpark13/next.js blurry-placeholder	Change
_app-HASH.js gzip	1.3 kB	1.3 kB	✓
_error-HASH.js gzip	3.68 kB	3.68 kB	✓
amp-HASH.js gzip	558 B	558 B	✓
hooks-HASH.js gzip	924 B	924 B	✓
index-HASH.js gzip	243 B	243 B	✓
link-HASH.js gzip	1.66 kB	1.66 kB	✓
routerDirect..HASH.js gzip	336 B	336 B	✓
withRouter-HASH.js gzip	334 B	334 B	✓
Overall change	9.03 kB	9.03 kB	✓

Client Build Manifests

	vercel/next.js canary	Joonpark13/next.js blurry-placeholder	Change
_buildManifest.js gzip	349 B	349 B	✓
Overall change	349 B	349 B	✓

Rendered Page Sizes

	vercel/next.js canary	Joonpark13/next.js blurry-placeholder	Change
index.html gzip	611 B	611 B	✓
link.html gzip	616 B	616 B	✓
withRouter.html gzip	604 B	604 B	✓
Overall change	1.83 kB	1.83 kB	✓

Serverless Mode

General Overall increase ⚠️

	vercel/next.js canary	Joonpark13/next.js blurry-placeholder	Change
buildDuration	19.4s	19.5s	⚠️ +108ms
buildDurationCached	7s	7s	⚠️ +15ms
nodeModulesSize	46.2 MB	46.3 MB	⚠️ +5.12 kB

Client Bundles (main, webpack, commons)

	vercel/next.js canary	Joonpark13/next.js blurry-placeholder	Change
597-HASH.js gzip	13.3 kB	13.3 kB	✓
778-HASH.js gzip	7.05 kB	7.05 kB	✓
framework-HASH.js gzip	39.3 kB	39.3 kB	✓
main-HASH.js gzip	151 B	151 B	✓
webpack-HASH.js gzip	993 B	993 B	✓
Overall change	60.8 kB	60.8 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	Joonpark13/next.js blurry-placeholder	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	Joonpark13/next.js blurry-placeholder	Change
_app-HASH.js gzip	1.3 kB	1.3 kB	✓
_error-HASH.js gzip	3.68 kB	3.68 kB	✓
amp-HASH.js gzip	558 B	558 B	✓
hooks-HASH.js gzip	924 B	924 B	✓
index-HASH.js gzip	243 B	243 B	✓
link-HASH.js gzip	1.66 kB	1.66 kB	✓
routerDirect..HASH.js gzip	336 B	336 B	✓
withRouter-HASH.js gzip	334 B	334 B	✓
Overall change	9.03 kB	9.03 kB	✓

Client Build Manifests

	vercel/next.js canary	Joonpark13/next.js blurry-placeholder	Change
_buildManifest.js gzip	349 B	349 B	✓
Overall change	349 B	349 B	✓

Serverless bundles

	vercel/next.js canary	Joonpark13/next.js blurry-placeholder	Change
_error.js	1.39 MB	1.39 MB	✓
404.html	2.76 kB	2.76 kB	✓
500.html	2.75 kB	2.75 kB	✓
amp.amp.html	10.7 kB	10.7 kB	✓
amp.html	1.96 kB	1.96 kB	✓
hooks.html	2.01 kB	2.01 kB	✓
index.js	1.39 MB	1.39 MB	✓
link.js	1.45 MB	1.45 MB	✓
routerDirect.js	1.44 MB	1.44 MB	✓
withRouter.js	1.44 MB	1.44 MB	✓
Overall change	7.14 MB	7.14 MB	✓

Webpack 4 Mode

General Overall increase ⚠️

	vercel/next.js canary	Joonpark13/next.js blurry-placeholder	Change
buildDuration	13s	13s	-66ms
buildDurationCached	5.3s	5.2s	-61ms
nodeModulesSize	46.2 MB	46.3 MB	⚠️ +5.12 kB

Page Load Tests Overall increase ✓

	vercel/next.js canary	Joonpark13/next.js blurry-placeholder	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.77	2.762	-0.01
/ avg req/sec	902.47	905.11	+2.64
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.572	1.571	0
/error-in-render avg req/sec	1590.16	1591.5	+1.34

Client Bundles (main, webpack, commons)

	vercel/next.js canary	Joonpark13/next.js blurry-placeholder	Change
677f882d2ed8..HASH.js gzip	13.4 kB	13.4 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-HASH.js gzip	7.12 kB	7.12 kB	✓
webpack-HASH.js gzip	751 B	751 B	✓
Overall change	60.2 kB	60.2 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	Joonpark13/next.js blurry-placeholder	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	Joonpark13/next.js blurry-placeholder	Change
_app-HASH.js gzip	1.28 kB	1.28 kB	✓
_error-HASH.js gzip	3.71 kB	3.71 kB	✓
amp-HASH.js gzip	536 B	536 B	✓
hooks-HASH.js gzip	888 B	888 B	✓
index-HASH.js gzip	227 B	227 B	✓
link-HASH.js gzip	1.64 kB	1.64 kB	✓
routerDirect..HASH.js gzip	303 B	303 B	✓
withRouter-HASH.js gzip	302 B	302 B	✓
Overall change	8.89 kB	8.89 kB	✓

Client Build Manifests

	vercel/next.js canary	Joonpark13/next.js blurry-placeholder	Change
_buildManifest.js gzip	371 B	371 B	✓
Overall change	371 B	371 B	✓

Rendered Page Sizes

	vercel/next.js canary	Joonpark13/next.js blurry-placeholder	Change
index.html gzip	613 B	613 B	✓
link.html gzip	620 B	620 B	✓
withRouter.html gzip	607 B	607 B	✓
Overall change	1.84 kB	1.84 kB	✓

Commit: c74a188

ijjk · 2021-04-16T17:34:01Z

Failing test suites

Commit: c74a188

test/integration/typescript/test/index.test.js

TypeScript Features > should build the app
TypeScript Features > should compile with different types > should compile async getInitialProps for _error

Expand output

● TypeScript Features › should build the app

expect(received).toMatch(expected)

Expected pattern: /Compiled successfully/
Received string:  "info  - Using webpack 5. Reason: no custom webpack configuration in next.config.js https://nextjs.org/docs/messages/webpack5
info  - Checking validity of types...
"

   97 |   it('should build the app', async () => {
   98 |     const output = await nextBuild(appDir, [], { stdout: true })
>  99 |     expect(output.stdout).toMatch(/Compiled successfully/)
      |                           ^
  100 |     expect(output.code).toBe(0)
  101 |   })
  102 |

  at Object.<anonymous> (integration/typescript/test/index.test.js:99:27)

● TypeScript Features › should compile with different types › should compile async getInitialProps for _error

expect(received).toMatch(expected)

Expected pattern: /Compiled successfully/
Received string:  "info  - Using webpack 5. Reason: no custom webpack configuration in next.config.js https://nextjs.org/docs/messages/webpack5
info  - Checking validity of types...
"

  107 |         errorPage.replace('static ', 'static async ')
  108 |         const output = await nextBuild(appDir, [], { stdout: true })
> 109 |         expect(output.stdout).toMatch(/Compiled successfully/)
      |                               ^
  110 |       } finally {
  111 |         errorPage.restore()
  112 |       }

  at Object.<anonymous> (integration/typescript/test/index.test.js:109:31)

packages/next/client/image.tsx

packages/next/next-server/server/image-config.ts

ijjk · 2021-04-16T20:59:27Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	Joonpark13/next.js blurry-placeholder	Change
buildDuration	14.5s	14.1s	-499ms
buildDurationCached	4.6s	4.3s	-220ms
nodeModulesSize	46.2 MB	46.3 MB	⚠️ +5.43 kB

Page Load Tests Overall increase ✓

	vercel/next.js canary	Joonpark13/next.js blurry-placeholder	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.67	2.615	-0.05
/ avg req/sec	936.18	956.11	+19.93
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.515	1.451	-0.06
/error-in-render avg req/sec	1650.29	1723.06	+72.77

Client Bundles (main, webpack, commons)

	vercel/next.js canary	Joonpark13/next.js blurry-placeholder	Change
597-HASH.js gzip	13.3 kB	13.3 kB	✓
778-HASH.js gzip	7.05 kB	7.05 kB	✓
framework-HASH.js gzip	39.3 kB	39.3 kB	✓
main-HASH.js gzip	151 B	151 B	✓
webpack-HASH.js gzip	993 B	993 B	✓
Overall change	60.8 kB	60.8 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	Joonpark13/next.js blurry-placeholder	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	Joonpark13/next.js blurry-placeholder	Change
_app-HASH.js gzip	1.3 kB	1.3 kB	✓
_error-HASH.js gzip	3.68 kB	3.68 kB	✓
amp-HASH.js gzip	558 B	558 B	✓
hooks-HASH.js gzip	924 B	924 B	✓
index-HASH.js gzip	243 B	243 B	✓
link-HASH.js gzip	1.66 kB	1.66 kB	✓
routerDirect..HASH.js gzip	336 B	336 B	✓
withRouter-HASH.js gzip	334 B	334 B	✓
Overall change	9.03 kB	9.03 kB	✓

Client Build Manifests

	vercel/next.js canary	Joonpark13/next.js blurry-placeholder	Change
_buildManifest.js gzip	349 B	349 B	✓
Overall change	349 B	349 B	✓

Rendered Page Sizes

	vercel/next.js canary	Joonpark13/next.js blurry-placeholder	Change
index.html gzip	611 B	611 B	✓
link.html gzip	616 B	616 B	✓
withRouter.html gzip	604 B	604 B	✓
Overall change	1.83 kB	1.83 kB	✓

Serverless Mode

General Overall increase ⚠️

	vercel/next.js canary	Joonpark13/next.js blurry-placeholder	Change
buildDuration	18s	17.4s	-635ms
buildDurationCached	6.2s	6.4s	⚠️ +146ms
nodeModulesSize	46.2 MB	46.3 MB	⚠️ +5.43 kB

Client Bundles (main, webpack, commons)

	vercel/next.js canary	Joonpark13/next.js blurry-placeholder	Change
597-HASH.js gzip	13.3 kB	13.3 kB	✓
778-HASH.js gzip	7.05 kB	7.05 kB	✓
framework-HASH.js gzip	39.3 kB	39.3 kB	✓
main-HASH.js gzip	151 B	151 B	✓
webpack-HASH.js gzip	993 B	993 B	✓
Overall change	60.8 kB	60.8 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	Joonpark13/next.js blurry-placeholder	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	Joonpark13/next.js blurry-placeholder	Change
_app-HASH.js gzip	1.3 kB	1.3 kB	✓
_error-HASH.js gzip	3.68 kB	3.68 kB	✓
amp-HASH.js gzip	558 B	558 B	✓
hooks-HASH.js gzip	924 B	924 B	✓
index-HASH.js gzip	243 B	243 B	✓
link-HASH.js gzip	1.66 kB	1.66 kB	✓
routerDirect..HASH.js gzip	336 B	336 B	✓
withRouter-HASH.js gzip	334 B	334 B	✓
Overall change	9.03 kB	9.03 kB	✓

Client Build Manifests

	vercel/next.js canary	Joonpark13/next.js blurry-placeholder	Change
_buildManifest.js gzip	349 B	349 B	✓
Overall change	349 B	349 B	✓

Serverless bundles Overall increase ⚠️

	vercel/next.js canary	Joonpark13/next.js blurry-placeholder	Change
_error.js	1.39 MB	1.39 MB	⚠️ +2 B
404.html	2.76 kB	2.76 kB	✓
500.html	2.75 kB	2.75 kB	✓
amp.amp.html	10.7 kB	10.7 kB	✓
amp.html	1.96 kB	1.96 kB	✓
hooks.html	2.01 kB	2.01 kB	✓
index.js	1.39 MB	1.39 MB	✓
link.js	1.45 MB	1.45 MB	✓
routerDirect.js	1.44 MB	1.44 MB	✓
withRouter.js	1.44 MB	1.44 MB	✓
Overall change	7.14 MB	7.14 MB	⚠️ +2 B

Webpack 4 Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	Joonpark13/next.js blurry-placeholder	Change
buildDuration	11.5s	11.7s	⚠️ +171ms
buildDurationCached	4.8s	4.7s	-106ms
nodeModulesSize	46.2 MB	46.3 MB	⚠️ +5.43 kB

Page Load Tests Overall increase ✓

	vercel/next.js canary	Joonpark13/next.js blurry-placeholder	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.667	2.547	-0.12
/ avg req/sec	937.23	981.59	+44.36
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.443	1.444	0
/error-in-render avg req/sec	1732.95	1731.11	⚠️ -1.84

Client Bundles (main, webpack, commons)

	vercel/next.js canary	Joonpark13/next.js blurry-placeholder	Change
677f882d2ed8..HASH.js gzip	13.4 kB	13.4 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-HASH.js gzip	7.12 kB	7.12 kB	✓
webpack-HASH.js gzip	751 B	751 B	✓
Overall change	60.2 kB	60.2 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	Joonpark13/next.js blurry-placeholder	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	Joonpark13/next.js blurry-placeholder	Change
_app-HASH.js gzip	1.28 kB	1.28 kB	✓
_error-HASH.js gzip	3.71 kB	3.71 kB	✓
amp-HASH.js gzip	536 B	536 B	✓
hooks-HASH.js gzip	888 B	888 B	✓
index-HASH.js gzip	227 B	227 B	✓
link-HASH.js gzip	1.64 kB	1.64 kB	✓
routerDirect..HASH.js gzip	303 B	303 B	✓
withRouter-HASH.js gzip	302 B	302 B	✓
Overall change	8.89 kB	8.89 kB	✓

Client Build Manifests

	vercel/next.js canary	Joonpark13/next.js blurry-placeholder	Change
_buildManifest.js gzip	371 B	371 B	✓
Overall change	371 B	371 B	✓

Rendered Page Sizes

	vercel/next.js canary	Joonpark13/next.js blurry-placeholder	Change
index.html gzip	613 B	613 B	✓
link.html gzip	620 B	620 B	✓
withRouter.html gzip	607 B	607 B	✓
Overall change	1.84 kB	1.84 kB	✓

Commit: ffa2db7

ijjk · 2021-04-16T21:12:56Z

Failing test suites

Commit: ffa2db7

test/integration/typescript/test/index.test.js

TypeScript Features > should build the app
TypeScript Features > should compile with different types > should compile async getInitialProps for _error

Expand output

● TypeScript Features › should build the app

expect(received).toMatch(expected)

Expected pattern: /Compiled successfully/
Received string:  "info  - Using webpack 5. Reason: no custom webpack configuration in next.config.js https://nextjs.org/docs/messages/webpack5
info  - Checking validity of types...
"

   97 |   it('should build the app', async () => {
   98 |     const output = await nextBuild(appDir, [], { stdout: true })
>  99 |     expect(output.stdout).toMatch(/Compiled successfully/)
      |                           ^
  100 |     expect(output.code).toBe(0)
  101 |   })
  102 |

  at Object.<anonymous> (integration/typescript/test/index.test.js:99:27)

● TypeScript Features › should compile with different types › should compile async getInitialProps for _error

expect(received).toMatch(expected)

Expected pattern: /Compiled successfully/
Received string:  "info  - Using webpack 5. Reason: no custom webpack configuration in next.config.js https://nextjs.org/docs/messages/webpack5
info  - Checking validity of types...
"

  107 |         errorPage.replace('static ', 'static async ')
  108 |         const output = await nextBuild(appDir, [], { stdout: true })
> 109 |         expect(output.stdout).toMatch(/Compiled successfully/)
      |                               ^
  110 |       } finally {
  111 |         errorPage.restore()
  112 |       }

  at Object.<anonymous> (integration/typescript/test/index.test.js:109:31)

packages/next/client/image.tsx

test/integration/image-component/default/pages/blurry-placeholder.js

packages/next/client/image.tsx

styfle · 2021-04-22T22:45:24Z

packages/next/client/image.tsx

@@ -45,6 +45,8 @@ const VALID_LAYOUT_VALUES = [
 ] as const
 type LayoutValue = typeof VALID_LAYOUT_VALUES[number]

+type PlaceholderValue = 'blur' | 'empty'


@timneutkens @Timer Do you think we should use empty or none? Do we have any precedence for this?

I don't think none would be a good name since it may imply that we don't placeholder the image in any way, causing layout shift. empty was used in an effort to promote the understanding that there will at least be empty space.

Another option here is blank. I agree that none might imply that we don't have a placeholder here.

packages/next/client/image.tsx

styfle

Thanks!

ijjk · 2021-04-27T17:38:23Z

Stats from current PR

Default Server Mode (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	Joonpark13/next.js blurry-placeholder	Change
buildDuration	16s	15.9s	-107ms
buildDurationCached	5.3s	4.9s	-442ms
nodeModulesSize	46.7 MB	46.7 MB	⚠️ +4.67 kB

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	Joonpark13/next.js blurry-placeholder	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.841	2.758	-0.08
/ avg req/sec	880.06	906.35	+26.29
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.551	1.68	⚠️ +0.13
/error-in-render avg req/sec	1612.25	1487.69	⚠️ -124.56

Client Bundles (main, webpack, commons)

	vercel/next.js canary	Joonpark13/next.js blurry-placeholder	Change
597-HASH.js gzip	13.2 kB	13.2 kB	✓
778-HASH.js gzip	7.12 kB	7.12 kB	✓
framework-HASH.js gzip	39.3 kB	39.3 kB	✓
main-HASH.js gzip	151 B	151 B	✓
webpack-HASH.js gzip	993 B	993 B	✓
Overall change	60.7 kB	60.7 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	Joonpark13/next.js blurry-placeholder	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	Joonpark13/next.js blurry-placeholder	Change
_app-HASH.js gzip	1.3 kB	1.3 kB	✓
_error-HASH.js gzip	3.68 kB	3.68 kB	✓
amp-HASH.js gzip	558 B	558 B	✓
css-HASH.js gzip	363 B	363 B	✓
hooks-HASH.js gzip	924 B	924 B	✓
index-HASH.js gzip	243 B	243 B	✓
link-HASH.js gzip	1.66 kB	1.66 kB	✓
routerDirect..HASH.js gzip	336 B	336 B	✓
withRouter-HASH.js gzip	334 B	334 B	✓
99a142a5cfae..804.css gzip	125 B	125 B	✓
Overall change	9.52 kB	9.52 kB	✓

Client Build Manifests

	vercel/next.js canary	Joonpark13/next.js blurry-placeholder	Change
_buildManifest.js gzip	390 B	390 B	✓
Overall change	390 B	390 B	✓

Rendered Page Sizes

	vercel/next.js canary	Joonpark13/next.js blurry-placeholder	Change
index.html gzip	611 B	611 B	✓
link.html gzip	615 B	615 B	✓
withRouter.html gzip	604 B	604 B	✓
Overall change	1.83 kB	1.83 kB	✓

Serverless Mode

General Overall increase ⚠️

	vercel/next.js canary	Joonpark13/next.js blurry-placeholder	Change
buildDuration	20s	19.8s	-158ms
buildDurationCached	7.2s	7.3s	⚠️ +34ms
nodeModulesSize	46.7 MB	46.7 MB	⚠️ +4.67 kB

Client Bundles (main, webpack, commons)

	vercel/next.js canary	Joonpark13/next.js blurry-placeholder	Change
597-HASH.js gzip	13.2 kB	13.2 kB	✓
778-HASH.js gzip	7.12 kB	7.12 kB	✓
framework-HASH.js gzip	39.3 kB	39.3 kB	✓
main-HASH.js gzip	151 B	151 B	✓
webpack-HASH.js gzip	993 B	993 B	✓
Overall change	60.7 kB	60.7 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	Joonpark13/next.js blurry-placeholder	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	Joonpark13/next.js blurry-placeholder	Change
_app-HASH.js gzip	1.3 kB	1.3 kB	✓
_error-HASH.js gzip	3.68 kB	3.68 kB	✓
amp-HASH.js gzip	558 B	558 B	✓
css-HASH.js gzip	363 B	363 B	✓
hooks-HASH.js gzip	924 B	924 B	✓
index-HASH.js gzip	243 B	243 B	✓
link-HASH.js gzip	1.66 kB	1.66 kB	✓
routerDirect..HASH.js gzip	336 B	336 B	✓
withRouter-HASH.js gzip	334 B	334 B	✓
99a142a5cfae..804.css gzip	125 B	125 B	✓
Overall change	9.52 kB	9.52 kB	✓

Client Build Manifests

	vercel/next.js canary	Joonpark13/next.js blurry-placeholder	Change
_buildManifest.js gzip	390 B	390 B	✓
Overall change	390 B	390 B	✓

Serverless bundles Overall increase ⚠️

	vercel/next.js canary	Joonpark13/next.js blurry-placeholder	Change
_error.js	1.39 MB	1.39 MB	✓
404.html	2.76 kB	2.76 kB	✓
500.html	2.75 kB	2.75 kB	✓
amp.amp.html	10.8 kB	10.8 kB	✓
amp.html	1.96 kB	1.96 kB	✓
css.html	2.13 kB	2.13 kB	✓
hooks.html	2.01 kB	2.01 kB	✓
index.js	1.39 MB	1.39 MB	✓
link.js	1.45 MB	1.45 MB	✓
routerDirect.js	1.44 MB	1.44 MB	⚠️ +2 B
withRouter.js	1.44 MB	1.44 MB	✓
Overall change	7.14 MB	7.14 MB	⚠️ +2 B

Webpack 4 Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	Joonpark13/next.js blurry-placeholder	Change
buildDuration	13.6s	13.3s	-229ms
buildDurationCached	5.6s	5.5s	-33ms
nodeModulesSize	46.7 MB	46.7 MB	⚠️ +4.67 kB

Page Load Tests Overall increase ✓

	vercel/next.js canary	Joonpark13/next.js blurry-placeholder	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.823	2.756	-0.07
/ avg req/sec	885.64	907.08	+21.44
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.662	1.649	-0.01
/error-in-render avg req/sec	1504.55	1516.25	+11.7

Client Bundles (main, webpack, commons)

	vercel/next.js canary	Joonpark13/next.js blurry-placeholder	Change
677f882d2ed8..HASH.js gzip	13.3 kB	13.3 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-HASH.js gzip	7.19 kB	7.19 kB	✓
webpack-HASH.js gzip	751 B	751 B	✓
Overall change	60.2 kB	60.2 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	Joonpark13/next.js blurry-placeholder	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	Joonpark13/next.js blurry-placeholder	Change
_app-HASH.js gzip	1.28 kB	1.28 kB	✓
_error-HASH.js gzip	3.71 kB	3.71 kB	✓
amp-HASH.js gzip	536 B	536 B	✓
css-HASH.js gzip	339 B	339 B	✓
hooks-HASH.js gzip	887 B	887 B	✓
index-HASH.js gzip	227 B	227 B	✓
link-HASH.js gzip	1.65 kB	1.65 kB	✓
routerDirect..HASH.js gzip	303 B	303 B	✓
withRouter-HASH.js gzip	302 B	302 B	✓
21c68fa65a48..217.css gzip	125 B	125 B	✓
Overall change	9.36 kB	9.36 kB	✓

Client Build Manifests

	vercel/next.js canary	Joonpark13/next.js blurry-placeholder	Change
_buildManifest.js gzip	419 B	419 B	✓
Overall change	419 B	419 B	✓

Rendered Page Sizes

	vercel/next.js canary	Joonpark13/next.js blurry-placeholder	Change
index.html gzip	612 B	612 B	✓
link.html gzip	620 B	620 B	✓
withRouter.html gzip	607 B	607 B	✓
Overall change	1.84 kB	1.84 kB	✓

Commit: 6b9c407

ijjk

requesting changes to wait to merge until after the next stable

ijjk · 2021-04-30T16:48:54Z

Stats from current PR

Default Server Mode (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	Joonpark13/next.js blurry-placeholder	Change
buildDuration	15.8s	16.3s	⚠️ +482ms
buildDurationCached	5.2s	4.8s	-460ms
nodeModulesSize	46.6 MB	46.6 MB	⚠️ +4.67 kB

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	Joonpark13/next.js blurry-placeholder	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.783	2.793	⚠️ +0.01
/ avg req/sec	898.28	895.01	⚠️ -3.27
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.543	1.559	⚠️ +0.02
/error-in-render avg req/sec	1620.59	1603.35	⚠️ -17.24

Client Bundles (main, webpack, commons)

	vercel/next.js canary	Joonpark13/next.js blurry-placeholder	Change
597-HASH.js gzip	13.2 kB	13.2 kB	✓
778-HASH.js gzip	7.12 kB	7.12 kB	✓
framework-HASH.js gzip	39.3 kB	39.3 kB	✓
main-HASH.js gzip	151 B	151 B	✓
webpack-HASH.js gzip	993 B	993 B	✓
Overall change	60.8 kB	60.8 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	Joonpark13/next.js blurry-placeholder	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	Joonpark13/next.js blurry-placeholder	Change
_app-HASH.js gzip	1.3 kB	1.3 kB	✓
_error-HASH.js gzip	3.68 kB	3.68 kB	✓
amp-HASH.js gzip	558 B	558 B	✓
css-HASH.js gzip	363 B	363 B	✓
hooks-HASH.js gzip	924 B	924 B	✓
index-HASH.js gzip	243 B	243 B	✓
link-HASH.js gzip	1.66 kB	1.66 kB	✓
routerDirect..HASH.js gzip	336 B	336 B	✓
withRouter-HASH.js gzip	334 B	334 B	✓
99a142a5cfae..804.css gzip	125 B	125 B	✓
Overall change	9.52 kB	9.52 kB	✓

Client Build Manifests

	vercel/next.js canary	Joonpark13/next.js blurry-placeholder	Change
_buildManifest.js gzip	395 B	395 B	✓
Overall change	395 B	395 B	✓

Rendered Page Sizes

	vercel/next.js canary	Joonpark13/next.js blurry-placeholder	Change
index.html gzip	609 B	609 B	✓
link.html gzip	614 B	614 B	✓
withRouter.html gzip	605 B	605 B	✓
Overall change	1.83 kB	1.83 kB	✓

Serverless Mode

General Overall increase ⚠️

	vercel/next.js canary	Joonpark13/next.js blurry-placeholder	Change
buildDuration	19.1s	20s	⚠️ +890ms
buildDurationCached	7s	7.4s	⚠️ +367ms
nodeModulesSize	46.6 MB	46.6 MB	⚠️ +4.67 kB

Client Bundles (main, webpack, commons)

	vercel/next.js canary	Joonpark13/next.js blurry-placeholder	Change
597-HASH.js gzip	13.2 kB	13.2 kB	✓
778-HASH.js gzip	7.12 kB	7.12 kB	✓
framework-HASH.js gzip	39.3 kB	39.3 kB	✓
main-HASH.js gzip	151 B	151 B	✓
webpack-HASH.js gzip	993 B	993 B	✓
Overall change	60.8 kB	60.8 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	Joonpark13/next.js blurry-placeholder	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	Joonpark13/next.js blurry-placeholder	Change
_app-HASH.js gzip	1.3 kB	1.3 kB	✓
_error-HASH.js gzip	3.68 kB	3.68 kB	✓
amp-HASH.js gzip	558 B	558 B	✓
css-HASH.js gzip	363 B	363 B	✓
hooks-HASH.js gzip	924 B	924 B	✓
index-HASH.js gzip	243 B	243 B	✓
link-HASH.js gzip	1.66 kB	1.66 kB	✓
routerDirect..HASH.js gzip	336 B	336 B	✓
withRouter-HASH.js gzip	334 B	334 B	✓
99a142a5cfae..804.css gzip	125 B	125 B	✓
Overall change	9.52 kB	9.52 kB	✓

Client Build Manifests

	vercel/next.js canary	Joonpark13/next.js blurry-placeholder	Change
_buildManifest.js gzip	395 B	395 B	✓
Overall change	395 B	395 B	✓

Serverless bundles Overall increase ⚠️

	vercel/next.js canary	Joonpark13/next.js blurry-placeholder	Change
_error.js	1.35 MB	1.35 MB	✓
404.html	2.76 kB	2.76 kB	✓
500.html	2.75 kB	2.75 kB	✓
amp.amp.html	10.8 kB	10.8 kB	✓
amp.html	1.96 kB	1.96 kB	✓
css.html	2.13 kB	2.13 kB	✓
hooks.html	2.01 kB	2.01 kB	✓
index.js	1.35 MB	1.35 MB	✓
link.js	1.4 MB	1.4 MB	✓
routerDirect.js	1.4 MB	1.4 MB	⚠️ +2 B
withRouter.js	1.4 MB	1.4 MB	✓
Overall change	6.91 MB	6.91 MB	⚠️ +2 B

Webpack 4 Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	Joonpark13/next.js blurry-placeholder	Change
buildDuration	13.1s	13.1s	⚠️ +27ms
buildDurationCached	5.5s	5.3s	-194ms
nodeModulesSize	46.6 MB	46.6 MB	⚠️ +4.67 kB

Page Load Tests Overall increase ✓

	vercel/next.js canary	Joonpark13/next.js blurry-placeholder	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.772	2.703	-0.07
/ avg req/sec	901.85	924.92	+23.07
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.587	1.533	-0.05
/error-in-render avg req/sec	1575.1	1630.69	+55.59

Client Bundles (main, webpack, commons)

	vercel/next.js canary	Joonpark13/next.js blurry-placeholder	Change
677f882d2ed8..HASH.js gzip	13.3 kB	13.3 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-HASH.js gzip	7.19 kB	7.19 kB	✓
webpack-HASH.js gzip	751 B	751 B	✓
Overall change	60.2 kB	60.2 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	Joonpark13/next.js blurry-placeholder	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	Joonpark13/next.js blurry-placeholder	Change
_app-HASH.js gzip	1.28 kB	1.28 kB	✓
_error-HASH.js gzip	3.71 kB	3.71 kB	✓
amp-HASH.js gzip	536 B	536 B	✓
css-HASH.js gzip	339 B	339 B	✓
hooks-HASH.js gzip	887 B	887 B	✓
index-HASH.js gzip	227 B	227 B	✓
link-HASH.js gzip	1.64 kB	1.64 kB	✓
routerDirect..HASH.js gzip	303 B	303 B	✓
withRouter-HASH.js gzip	302 B	302 B	✓
21c68fa65a48..217.css gzip	125 B	125 B	✓
Overall change	9.36 kB	9.36 kB	✓

Client Build Manifests

	vercel/next.js canary	Joonpark13/next.js blurry-placeholder	Change
_buildManifest.js gzip	420 B	420 B	✓
Overall change	420 B	420 B	✓

Rendered Page Sizes

	vercel/next.js canary	Joonpark13/next.js blurry-placeholder	Change
index.html gzip	613 B	613 B	✓
link.html gzip	620 B	620 B	✓
withRouter.html gzip	606 B	606 B	✓
Overall change	1.84 kB	1.84 kB	✓

Commit: 8e0ae65

joe-bell · 2021-05-20T05:13:26Z

@nicholaschiang take a moment to ask yourself; what are you trying to achieve with this comment?

plaiceholder isn't Next.js specific, and I fully support those (like Joon) who work hard to make the Next.js DX even better out-of-the-box

This is the image component implementation of the blurry placeholder as described in vercel#24004. The matching server side implementation is currently planned. ## Feature - [x] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [x] Related issue vercel#18858 - [x] Integration tests added (Documentation and telemetry to follow after server side is implemented)

nicholaschiang · 2021-06-11T17:52:11Z

@joe-bell I completely agree with you! I wasn't trying to be derogatory or anything of the sort. I guess on the internet, it's hard for a playful jest to come across right (I probably should've used some emojis or something). I respect all the open-source work you've done (e.g. I've been an avid user of next-google-fonts until Next.js 10.2.4) and I hope we can be on good terms!

Joonpark13 added 2 commits April 16, 2021 12:01

Merge remote-tracking branch 'upstream/canary' into blurry-placeholder

c74a188

ijjk added the type: next label Apr 16, 2021

Joonpark13 commented Apr 16, 2021

View reviewed changes

Joonpark13 marked this pull request as ready for review April 16, 2021 17:18

Joonpark13 requested review from divmain, ijjk, lfades, shuding and timneutkens as code owners April 16, 2021 17:18

atcastle suggested changes Apr 16, 2021

View reviewed changes

Refactor experimental config name to better reflect intent

ffa2db7

styfle reviewed Apr 20, 2021

View reviewed changes

packages/next/client/image.tsx Outdated Show resolved Hide resolved

styfle reviewed Apr 20, 2021

View reviewed changes

test/integration/image-component/default/pages/blurry-placeholder.js Outdated Show resolved Hide resolved

styfle linked an issue Apr 20, 2021 that may be closed by this pull request

Add placeholder="blur" to Image component #18858

Closed

styfle reviewed Apr 20, 2021

View reviewed changes

test/integration/image-component/default/pages/blurry-placeholder.js Show resolved Hide resolved

Joonpark13 added 4 commits April 20, 2021 15:47

Merge remote-tracking branch 'upstream/canary' into blurry-placeholder

71380e3

Fix type error and rename enum value

40b83db

Enable placeholder for not just priority images

7049942

Merge remote-tracking branch 'upstream/canary' into blurry-placeholder

7a78a4d

styfle reviewed Apr 22, 2021

View reviewed changes

packages/next/client/image.tsx Outdated Show resolved Hide resolved

styfle reviewed Apr 22, 2021

View reviewed changes

packages/next/client/image.tsx Outdated Show resolved Hide resolved

styfle reviewed Apr 22, 2021

View reviewed changes

styfle removed a link to an issue Apr 22, 2021

Add placeholder="blur" to Image component #18858

Closed

Simplify prop interaction with config value

44a5e86

styfle reviewed Apr 25, 2021

View reviewed changes

packages/next/client/image.tsx Outdated Show resolved Hide resolved

styfle reviewed Apr 25, 2021

View reviewed changes

packages/next/client/image.tsx Outdated Show resolved Hide resolved

Joonpark13 added 2 commits April 26, 2021 10:22

Remoe vestigial config checks

0356aa1

Merge remote-tracking branch 'upstream/canary' into blurry-placeholder

e0558b4

styfle reviewed Apr 26, 2021

View reviewed changes

packages/next/client/image.tsx Show resolved Hide resolved

styfle previously approved these changes Apr 26, 2021

View reviewed changes

Add comment about ref handler

3dc7d15

Joonpark13 dismissed styfle’s stale review via 3dc7d15 April 27, 2021 04:37

styfle approved these changes Apr 27, 2021

View reviewed changes

shuding approved these changes Apr 27, 2021

View reviewed changes

Merge remote-tracking branch 'upstream/canary' into blurry-placeholder

6b9c407

ijjk requested changes Apr 27, 2021

View reviewed changes

ijjk approved these changes Apr 30, 2021

View reviewed changes

Joon Park and others added 2 commits April 30, 2021 11:32

Merge remote-tracking branch 'upstream/canary' into blurry-placeholder

1cfdea1

Merge branch 'canary' into blurry-placeholder

8e0ae65

kodiakhq bot merged commit c76170e into vercel:canary Apr 30, 2021

Joonpark13 deleted the blurry-placeholder branch April 30, 2021 17:14

atcastle mentioned this pull request May 6, 2021

Fallback to an automatically-generated blurry placeholder #24875

Closed

vercel locked as resolved and limited conversation to collaborators Jan 28, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add experimental blurry placeholder to image component #24153

Add experimental blurry placeholder to image component #24153

Joonpark13 commented Apr 16, 2021 •

edited by styfle

Loading

Joonpark13 Apr 16, 2021

ijjk commented Apr 16, 2021

ijjk commented Apr 16, 2021

ijjk commented Apr 16, 2021

ijjk commented Apr 16, 2021

styfle Apr 22, 2021

Joonpark13 Apr 23, 2021

shuding Apr 26, 2021

styfle left a comment

ijjk commented Apr 27, 2021

ijjk left a comment

ijjk commented Apr 30, 2021

joe-bell commented May 20, 2021 •

edited

Loading

nicholaschiang commented Jun 11, 2021

Add experimental blurry placeholder to image component #24153

Add experimental blurry placeholder to image component #24153

Conversation

Joonpark13 commented Apr 16, 2021 • edited by styfle Loading

Feature

Joonpark13 Apr 16, 2021

Choose a reason for hiding this comment

ijjk commented Apr 16, 2021

Stats from current PR

ijjk commented Apr 16, 2021

Failing test suites

ijjk commented Apr 16, 2021

Stats from current PR

ijjk commented Apr 16, 2021

Failing test suites

styfle Apr 22, 2021

Choose a reason for hiding this comment

Joonpark13 Apr 23, 2021

Choose a reason for hiding this comment

shuding Apr 26, 2021

Choose a reason for hiding this comment

styfle left a comment

Choose a reason for hiding this comment

ijjk commented Apr 27, 2021

Stats from current PR

ijjk left a comment

Choose a reason for hiding this comment

ijjk commented Apr 30, 2021

Stats from current PR

joe-bell commented May 20, 2021 • edited Loading

nicholaschiang commented Jun 11, 2021

Joonpark13 commented Apr 16, 2021 •

edited by styfle

Loading

joe-bell commented May 20, 2021 •

edited

Loading