Add `width` and `height` props to Image component #18031

styfle · 2020-10-19T23:26:41Z

This adds PR adds width and height properties to the Image component per the RFC.

In a follow up PR, we'll add support for the unsized property.

Related to RFC RFC: Image Component for Next.js #16832
Closes PR Add failing test for image optimization #17970

Test for something that still has to be added.

…dd/failing-test-for-image-optimization

…-width-height

ijjk · 2020-10-19T23:37:19Z

Stats from current PR

Default Server Mode (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js add-image-width-height	Change
buildDuration	12.9s	12.8s	-116ms
nodeModulesSize	64.5 MB	64.5 MB	⚠️ +568 B

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	vercel/next.js add-image-width-height	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.485	2.388	-0.1
/ avg req/sec	1005.98	1046.72	+40.74
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.304	1.362	⚠️ +0.06
/error-in-render avg req/sec	1917.28	1835.52	⚠️ -81.76

Client Bundles (main, webpack, commons)

	vercel/next.js canary	vercel/next.js add-image-width-height	Change
677f882d2ed8..7765.js gzip	11.1 kB	11.1 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-5aa1543..4e79.js gzip	7.34 kB	7.34 kB	✓
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	58.1 kB	58.1 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	vercel/next.js add-image-width-height	Change
677f882d2ed8..dule.js gzip	6.94 kB	6.94 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-7d849dd..dule.js gzip	6.32 kB	6.32 kB	✓
webpack-07c5..dule.js gzip	751 B	751 B	✓
Overall change	53 kB	53 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js add-image-width-height	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js add-image-width-height	Change
_app-9a0b9e1..b37e.js gzip	1.28 kB	1.28 kB	✓
_error-ed1b0..8fbd.js gzip	3.44 kB	3.44 kB	✓
hooks-89731c..c609.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-89ad9e7..25bb.js gzip	1.34 kB	1.34 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	7.74 kB	7.74 kB	✓

Client Pages Modern

	vercel/next.js canary	vercel/next.js add-image-width-height	Change
_app-75d3a82..dule.js gzip	625 B	625 B	✓
_error-4469a..dule.js gzip	2.29 kB	2.29 kB	✓
hooks-cbf13f..dule.js gzip	387 B	387 B	✓
index-b9a643..dule.js gzip	226 B	226 B	✓
link-aeb707b..dule.js gzip	1.29 kB	1.29 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-f..dule.js gzip	282 B	282 B	✓
Overall change	5.39 kB	5.39 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js add-image-width-height	Change
_buildManifest.js gzip	322 B	322 B	✓
_buildManife..dule.js gzip	329 B	329 B	✓
Overall change	651 B	651 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js add-image-width-height	Change
index.html gzip	1 kB	1 kB	✓
link.html gzip	1.01 kB	1.01 kB	✓
withRouter.html gzip	996 B	996 B	✓
Overall change	3.01 kB	3.01 kB	✓

Serverless Mode

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js add-image-width-height	Change
buildDuration	14.8s	14.8s	⚠️ +75ms
nodeModulesSize	64.5 MB	64.5 MB	⚠️ +568 B

Client Bundles (main, webpack, commons)

	vercel/next.js canary	vercel/next.js add-image-width-height	Change
677f882d2ed8..7765.js gzip	11.1 kB	11.1 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-5aa1543..4e79.js gzip	7.34 kB	7.34 kB	✓
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	58.1 kB	58.1 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	vercel/next.js add-image-width-height	Change
677f882d2ed8..dule.js gzip	6.94 kB	6.94 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-7d849dd..dule.js gzip	6.32 kB	6.32 kB	✓
webpack-07c5..dule.js gzip	751 B	751 B	✓
Overall change	53 kB	53 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js add-image-width-height	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js add-image-width-height	Change
_app-9a0b9e1..b37e.js gzip	1.28 kB	1.28 kB	✓
_error-ed1b0..8fbd.js gzip	3.44 kB	3.44 kB	✓
hooks-89731c..c609.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-89ad9e7..25bb.js gzip	1.34 kB	1.34 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	7.74 kB	7.74 kB	✓

Client Pages Modern

	vercel/next.js canary	vercel/next.js add-image-width-height	Change
_app-75d3a82..dule.js gzip	625 B	625 B	✓
_error-4469a..dule.js gzip	2.29 kB	2.29 kB	✓
hooks-cbf13f..dule.js gzip	387 B	387 B	✓
index-b9a643..dule.js gzip	226 B	226 B	✓
link-aeb707b..dule.js gzip	1.29 kB	1.29 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-f..dule.js gzip	282 B	282 B	✓
Overall change	5.39 kB	5.39 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js add-image-width-height	Change
_buildManifest.js gzip	322 B	322 B	✓
_buildManife..dule.js gzip	329 B	329 B	✓
Overall change	651 B	651 B	✓

Serverless bundles

	vercel/next.js canary	vercel/next.js add-image-width-height	Change
_error.js	1.06 MB	1.06 MB	✓
404.html	4.34 kB	4.34 kB	✓
hooks.html	3.92 kB	3.92 kB	✓
index.js	1.06 MB	1.06 MB	✓
link.js	1.1 MB	1.1 MB	✓
routerDirect.js	1.1 MB	1.1 MB	✓
withRouter.js	1.1 MB	1.1 MB	✓
Overall change	5.42 MB	5.42 MB	✓

Commit: 09bc6bd

ijjk · 2020-10-19T23:39:11Z

Failing test suites

Commit: 09bc6bd

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

Image Component Tests > Client-side Lazy Loading Tests > should load the second image after scrolling down
Image Component Tests > Client-side Lazy Loading Tests > should load the third image, which is unoptimized, after scrolling further down
Image Component Tests > SSR Lazy Loading Tests > should load the second image after scrolling down
Image Component Tests > SSR Lazy Loading Tests > should load the third image, which is unoptimized, after scrolling further down

Expand output

● Image Component Tests › SSR Lazy Loading Tests › should load the second image after scrolling down

expect(received).toBe(expected) // Object.is equality

Expected: "https://example.com/myaccount/foo2.jpg"
Received: null

  103 |       `window.scrollTo(0, ${topOfMidImage - (viewportHeight + buffer)})`
  104 |     )
> 105 |     expect(await browser.elementById('lazy-mid').getAttribute('src')).toBe(
      |                                                                       ^
  106 |       'https://example.com/myaccount/foo2.jpg'
  107 |     )
  108 |     expect(await browser.elementById('lazy-mid').getAttribute('srcset')).toBe(

  at Object.<anonymous> (integration/image-component/basic/test/index.test.js:105:71)

● Image Component Tests › SSR Lazy Loading Tests › should load the third image, which is unoptimized, after scrolling further down

expect(received).toBe(expected) // Object.is equality

Expected: "https://www.otherhost.com/foo3.jpg"
Received: null

  127 |       `window.scrollTo(0, ${topOfBottomImage - (viewportHeight + buffer)})`
  128 |     )
> 129 |     expect(await browser.elementById('lazy-bottom').getAttribute('src')).toBe(
      |                                                                          ^
  130 |       'https://www.otherhost.com/foo3.jpg'
  131 |     )
  132 |     expect(

  at Object.<anonymous> (integration/image-component/basic/test/index.test.js:129:74)

● Image Component Tests › Client-side Lazy Loading Tests › should load the second image after scrolling down

expect(received).toBe(expected) // Object.is equality

Expected: "https://example.com/myaccount/foo2.jpg"
Received: null

  103 |       `window.scrollTo(0, ${topOfMidImage - (viewportHeight + buffer)})`
  104 |     )
> 105 |     expect(await browser.elementById('lazy-mid').getAttribute('src')).toBe(
      |                                                                       ^
  106 |       'https://example.com/myaccount/foo2.jpg'
  107 |     )
  108 |     expect(await browser.elementById('lazy-mid').getAttribute('srcset')).toBe(

  at Object.<anonymous> (integration/image-component/basic/test/index.test.js:105:71)

● Image Component Tests › Client-side Lazy Loading Tests › should load the third image, which is unoptimized, after scrolling further down

expect(received).toBe(expected) // Object.is equality

Expected: "https://www.otherhost.com/foo3.jpg"
Received: null

  127 |       `window.scrollTo(0, ${topOfBottomImage - (viewportHeight + buffer)})`
  128 |     )
> 129 |     expect(await browser.elementById('lazy-bottom').getAttribute('src')).toBe(
      |                                                                          ^
  130 |       'https://www.otherhost.com/foo3.jpg'
  131 |     )
  132 |     expect(

  at Object.<anonymous> (integration/image-component/basic/test/index.test.js:129:74)

This reverts commit f00de13.

ijjk · 2020-10-20T00:02:52Z

Failing test suites

Commit: a572dab

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

Image Component Tests > Client-side Lazy Loading Tests > should load the second image after scrolling down
Image Component Tests > Client-side Lazy Loading Tests > should load the third image, which is unoptimized, after scrolling further down
Image Component Tests > SSR Lazy Loading Tests > should load the second image after scrolling down
Image Component Tests > SSR Lazy Loading Tests > should load the third image, which is unoptimized, after scrolling further down

Expand output

● Image Component Tests › SSR Lazy Loading Tests › should load the second image after scrolling down

expect(received).toBe(expected) // Object.is equality

Expected: "https://example.com/myaccount/foo2.jpg"
Received: null

  103 |       `window.scrollTo(0, ${topOfMidImage - (viewportHeight + buffer)})`
  104 |     )
> 105 |     expect(await browser.elementById('lazy-mid').getAttribute('src')).toBe(
      |                                                                       ^
  106 |       'https://example.com/myaccount/foo2.jpg'
  107 |     )
  108 |     expect(await browser.elementById('lazy-mid').getAttribute('srcset')).toBe(

  at Object.<anonymous> (integration/image-component/basic/test/index.test.js:105:71)

● Image Component Tests › SSR Lazy Loading Tests › should load the third image, which is unoptimized, after scrolling further down

expect(received).toBe(expected) // Object.is equality

Expected: "https://www.otherhost.com/foo3.jpg"
Received: null

  127 |       `window.scrollTo(0, ${topOfBottomImage - (viewportHeight + buffer)})`
  128 |     )
> 129 |     expect(await browser.elementById('lazy-bottom').getAttribute('src')).toBe(
      |                                                                          ^
  130 |       'https://www.otherhost.com/foo3.jpg'
  131 |     )
  132 |     expect(

  at Object.<anonymous> (integration/image-component/basic/test/index.test.js:129:74)

● Image Component Tests › Client-side Lazy Loading Tests › should load the second image after scrolling down

expect(received).toBe(expected) // Object.is equality

Expected: "https://example.com/myaccount/foo2.jpg"
Received: null

  103 |       `window.scrollTo(0, ${topOfMidImage - (viewportHeight + buffer)})`
  104 |     )
> 105 |     expect(await browser.elementById('lazy-mid').getAttribute('src')).toBe(
      |                                                                       ^
  106 |       'https://example.com/myaccount/foo2.jpg'
  107 |     )
  108 |     expect(await browser.elementById('lazy-mid').getAttribute('srcset')).toBe(

  at Object.<anonymous> (integration/image-component/basic/test/index.test.js:105:71)

● Image Component Tests › Client-side Lazy Loading Tests › should load the third image, which is unoptimized, after scrolling further down

expect(received).toBe(expected) // Object.is equality

Expected: "https://www.otherhost.com/foo3.jpg"
Received: null

  127 |       `window.scrollTo(0, ${topOfBottomImage - (viewportHeight + buffer)})`
  128 |     )
> 129 |     expect(await browser.elementById('lazy-bottom').getAttribute('src')).toBe(
      |                                                                          ^
  130 |       'https://www.otherhost.com/foo3.jpg'
  131 |     )
  132 |     expect(

  at Object.<anonymous> (integration/image-component/basic/test/index.test.js:129:74)

ijjk · 2020-10-20T15:44:27Z

Stats from current PR

Default Server Mode (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js add-image-width-height	Change
buildDuration	11.5s	11.7s	⚠️ +211ms
nodeModulesSize	64.5 MB	64.5 MB	⚠️ +1.67 kB

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	vercel/next.js add-image-width-height	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.053	2.168	⚠️ +0.12
/ avg req/sec	1217.92	1152.92	⚠️ -65
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.155	1.202	⚠️ +0.05
/error-in-render avg req/sec	2163.81	2080.7	⚠️ -83.11

Client Bundles (main, webpack, commons)

	vercel/next.js canary	vercel/next.js add-image-width-height	Change
677f882d2ed8..35e7.js gzip	11.1 kB	11.1 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-4622877..6010.js gzip	7.34 kB	7.34 kB	✓
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	58.1 kB	58.1 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	vercel/next.js add-image-width-height	Change
677f882d2ed8..dule.js gzip	6.94 kB	6.94 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-e9d8820..dule.js gzip	6.32 kB	6.32 kB	✓
webpack-07c5..dule.js gzip	751 B	751 B	✓
Overall change	53 kB	53 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js add-image-width-height	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js add-image-width-height	Change
_app-9a0b9e1..b37e.js gzip	1.28 kB	1.28 kB	✓
_error-ed1b0..8fbd.js gzip	3.44 kB	3.44 kB	✓
hooks-89731c..c609.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-89ad9e7..25bb.js gzip	1.34 kB	1.34 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	7.74 kB	7.74 kB	✓

Client Pages Modern

	vercel/next.js canary	vercel/next.js add-image-width-height	Change
_app-75d3a82..dule.js gzip	625 B	625 B	✓
_error-4469a..dule.js gzip	2.29 kB	2.29 kB	✓
hooks-cbf13f..dule.js gzip	387 B	387 B	✓
index-b9a643..dule.js gzip	226 B	226 B	✓
link-aeb707b..dule.js gzip	1.29 kB	1.29 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-f..dule.js gzip	282 B	282 B	✓
Overall change	5.39 kB	5.39 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js add-image-width-height	Change
_buildManifest.js gzip	322 B	322 B	✓
_buildManife..dule.js gzip	329 B	329 B	✓
Overall change	651 B	651 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js add-image-width-height	Change
index.html gzip	1 kB	1 kB	✓
link.html gzip	1.01 kB	1.01 kB	✓
withRouter.html gzip	995 B	995 B	✓
Overall change	3.01 kB	3.01 kB	✓

Serverless Mode

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js add-image-width-height	Change
buildDuration	13.3s	13.5s	⚠️ +178ms
nodeModulesSize	64.5 MB	64.5 MB	⚠️ +1.67 kB

Client Bundles (main, webpack, commons)

	vercel/next.js canary	vercel/next.js add-image-width-height	Change
677f882d2ed8..35e7.js gzip	11.1 kB	11.1 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-4622877..6010.js gzip	7.34 kB	7.34 kB	✓
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	58.1 kB	58.1 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	vercel/next.js add-image-width-height	Change
677f882d2ed8..dule.js gzip	6.94 kB	6.94 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-e9d8820..dule.js gzip	6.32 kB	6.32 kB	✓
webpack-07c5..dule.js gzip	751 B	751 B	✓
Overall change	53 kB	53 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js add-image-width-height	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js add-image-width-height	Change
_app-9a0b9e1..b37e.js gzip	1.28 kB	1.28 kB	✓
_error-ed1b0..8fbd.js gzip	3.44 kB	3.44 kB	✓
hooks-89731c..c609.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-89ad9e7..25bb.js gzip	1.34 kB	1.34 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	7.74 kB	7.74 kB	✓

Client Pages Modern

	vercel/next.js canary	vercel/next.js add-image-width-height	Change
_app-75d3a82..dule.js gzip	625 B	625 B	✓
_error-4469a..dule.js gzip	2.29 kB	2.29 kB	✓
hooks-cbf13f..dule.js gzip	387 B	387 B	✓
index-b9a643..dule.js gzip	226 B	226 B	✓
link-aeb707b..dule.js gzip	1.29 kB	1.29 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-f..dule.js gzip	282 B	282 B	✓
Overall change	5.39 kB	5.39 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js add-image-width-height	Change
_buildManifest.js gzip	322 B	322 B	✓
_buildManife..dule.js gzip	329 B	329 B	✓
Overall change	651 B	651 B	✓

Serverless bundles

	vercel/next.js canary	vercel/next.js add-image-width-height	Change
_error.js	1.06 MB	1.06 MB	✓
404.html	4.34 kB	4.34 kB	✓
hooks.html	3.92 kB	3.92 kB	✓
index.js	1.06 MB	1.06 MB	✓
link.js	1.1 MB	1.1 MB	✓
routerDirect.js	1.1 MB	1.1 MB	✓
withRouter.js	1.1 MB	1.1 MB	✓
Overall change	5.42 MB	5.42 MB	✓

Commit: 1257e7d

ijjk · 2020-10-20T16:21:29Z

Stats from current PR

Default Server Mode (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js add-image-width-height	Change
buildDuration	12.5s	12.7s	⚠️ +225ms
nodeModulesSize	64.5 MB	64.5 MB	⚠️ +1.67 kB

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	vercel/next.js add-image-width-height	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.321	2.322	0
/ avg req/sec	1077.05	1076.78	⚠️ -0.27
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.265	1.269	0
/error-in-render avg req/sec	1976.61	1970.16	⚠️ -6.45

Client Bundles (main, webpack, commons)

	vercel/next.js canary	vercel/next.js add-image-width-height	Change
677f882d2ed8..35e7.js gzip	11.1 kB	11.1 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-4622877..6010.js gzip	7.34 kB	7.34 kB	✓
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	58.1 kB	58.1 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	vercel/next.js add-image-width-height	Change
677f882d2ed8..dule.js gzip	6.94 kB	6.94 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-e9d8820..dule.js gzip	6.32 kB	6.32 kB	✓
webpack-07c5..dule.js gzip	751 B	751 B	✓
Overall change	53 kB	53 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js add-image-width-height	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js add-image-width-height	Change
_app-9a0b9e1..b37e.js gzip	1.28 kB	1.28 kB	✓
_error-ed1b0..8fbd.js gzip	3.44 kB	3.44 kB	✓
hooks-89731c..c609.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-89ad9e7..25bb.js gzip	1.34 kB	1.34 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	7.74 kB	7.74 kB	✓

Client Pages Modern

	vercel/next.js canary	vercel/next.js add-image-width-height	Change
_app-75d3a82..dule.js gzip	625 B	625 B	✓
_error-4469a..dule.js gzip	2.29 kB	2.29 kB	✓
hooks-cbf13f..dule.js gzip	387 B	387 B	✓
index-b9a643..dule.js gzip	226 B	226 B	✓
link-aeb707b..dule.js gzip	1.29 kB	1.29 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-f..dule.js gzip	282 B	282 B	✓
Overall change	5.39 kB	5.39 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js add-image-width-height	Change
_buildManifest.js gzip	322 B	322 B	✓
_buildManife..dule.js gzip	329 B	329 B	✓
Overall change	651 B	651 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js add-image-width-height	Change
index.html gzip	1 kB	1 kB	✓
link.html gzip	1.01 kB	1.01 kB	✓
withRouter.html gzip	995 B	995 B	✓
Overall change	3.01 kB	3.01 kB	✓

Serverless Mode

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js add-image-width-height	Change
buildDuration	14.7s	13.9s	-800ms
nodeModulesSize	64.5 MB	64.5 MB	⚠️ +1.67 kB

Client Bundles (main, webpack, commons)

	vercel/next.js canary	vercel/next.js add-image-width-height	Change
677f882d2ed8..35e7.js gzip	11.1 kB	11.1 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-4622877..6010.js gzip	7.34 kB	7.34 kB	✓
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	58.1 kB	58.1 kB	✓

Client Bundles (main, webpack, commons) Modern

	vercel/next.js canary	vercel/next.js add-image-width-height	Change
677f882d2ed8..dule.js gzip	6.94 kB	6.94 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-e9d8820..dule.js gzip	6.32 kB	6.32 kB	✓
webpack-07c5..dule.js gzip	751 B	751 B	✓
Overall change	53 kB	53 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js add-image-width-height	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js add-image-width-height	Change
_app-9a0b9e1..b37e.js gzip	1.28 kB	1.28 kB	✓
_error-ed1b0..8fbd.js gzip	3.44 kB	3.44 kB	✓
hooks-89731c..c609.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-89ad9e7..25bb.js gzip	1.34 kB	1.34 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	7.74 kB	7.74 kB	✓

Client Pages Modern

	vercel/next.js canary	vercel/next.js add-image-width-height	Change
_app-75d3a82..dule.js gzip	625 B	625 B	✓
_error-4469a..dule.js gzip	2.29 kB	2.29 kB	✓
hooks-cbf13f..dule.js gzip	387 B	387 B	✓
index-b9a643..dule.js gzip	226 B	226 B	✓
link-aeb707b..dule.js gzip	1.29 kB	1.29 kB	✓
routerDirect..dule.js gzip	284 B	284 B	✓
withRouter-f..dule.js gzip	282 B	282 B	✓
Overall change	5.39 kB	5.39 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js add-image-width-height	Change
_buildManifest.js gzip	322 B	322 B	✓
_buildManife..dule.js gzip	329 B	329 B	✓
Overall change	651 B	651 B	✓

Serverless bundles

	vercel/next.js canary	vercel/next.js add-image-width-height	Change
_error.js	1.06 MB	1.06 MB	✓
404.html	4.34 kB	4.34 kB	✓
hooks.html	3.92 kB	3.92 kB	✓
index.js	1.06 MB	1.06 MB	✓
link.js	1.1 MB	1.1 MB	✓
routerDirect.js	1.1 MB	1.1 MB	✓
withRouter.js	1.1 MB	1.1 MB	✓
Overall change	5.42 MB	5.42 MB	✓

Commit: 71062bd

timneutkens and others added 11 commits October 17, 2020 17:23

Add failing test for image optimization

e1dc35d

Test for something that still has to be added.

Remove leftover test run

aa04e44

Merge branch 'canary' of github.com:vercel/next.js into timneutkens-a…

e4391dd

…dd/failing-test-for-image-optimization

Merge branch 'canary' of github.com:vercel/next.js into timneutkens-a…

9e3c7d3

…dd/failing-test-for-image-optimization

Fix url normalization

997e409

Move validation and append trailing slash only with certain cdn

c8206cc

Make sharp a direct dependency

f00de13

Add width/height props to Image component

3dae0b2

Merge branch 'add/failing-test-for-image-optimization' into add-image…

f10915a

…-width-height

Add width and height properties

b4cc7d9

Remove duplicate sharp

09bc6bd

ijjk added the type: next label Oct 19, 2020

styfle added 3 commits October 19, 2020 19:42

Add missing width/height properties

a566e8d

Fix when width/height props are missing

54e04ea

Revert "Make sharp a direct dependency"

a572dab

This reverts commit f00de13.

styfle marked this pull request as ready for review October 19, 2020 23:49

styfle requested review from ijjk, lfades, Timer and timneutkens as code owners October 19, 2020 23:49

styfle and others added 4 commits October 20, 2020 10:42

Merge branch 'canary' into add-image-width-height

58edb16

Fix merge conflicts

870b4c6

Fix test failure

f942e42

Add missing props on ImageData

1257e7d

styfle changed the title ~~Add image width height~~ Add width and height props to Image component Oct 20, 2020

Lint

71062bd

timneutkens merged commit 0fb39e2 into canary Oct 20, 2020

timneutkens deleted the add-image-width-height branch October 20, 2020 16:43

styfle mentioned this pull request Oct 20, 2020

Add failing test for image optimization #17970

Closed

ijjk added the hacktoberfest-accepted label Oct 20, 2020

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add `width` and `height` props to Image component #18031

Add `width` and `height` props to Image component #18031

styfle commented Oct 19, 2020 •

edited

Loading

ijjk commented Oct 19, 2020

ijjk commented Oct 19, 2020

ijjk commented Oct 20, 2020

ijjk commented Oct 20, 2020

ijjk commented Oct 20, 2020

Add width and height props to Image component #18031

Add width and height props to Image component #18031

Conversation

styfle commented Oct 19, 2020 • edited Loading

ijjk commented Oct 19, 2020

Stats from current PR

ijjk commented Oct 19, 2020

Failing test suites

ijjk commented Oct 20, 2020

Failing test suites

ijjk commented Oct 20, 2020

Stats from current PR

ijjk commented Oct 20, 2020

Stats from current PR

Add `width` and `height` props to Image component #18031

Add `width` and `height` props to Image component #18031

styfle commented Oct 19, 2020 •

edited

Loading