Fix Image component defaults & remove autoOptimize #18101

styfle · 2020-10-21T18:16:38Z

Updates the Image component to assign defaults to properties and removes the unnecessary autoOptimize property in favor of always auto formatting the image (we expect webp if the browser supports it).

Related to #16832

cc @atcastle

ijjk · 2020-10-21T18:33:04Z

Stats from current PR

Default Server Mode (Decrease detected ✓)

General Overall decrease ✓

	vercel/next.js canary	vercel/next.js image-component-cleanup	Change
buildDuration	12.7s	12.9s	⚠️ +209ms
nodeModulesSize	91.2 MB	91.2 MB	-756 B

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	vercel/next.js image-component-cleanup	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.465	2.556	⚠️ +0.09
/ avg req/sec	1014.36	978.19	⚠️ -36.17
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.513	1.544	⚠️ +0.03
/error-in-render avg req/sec	1652.56	1618.72	⚠️ -33.84

Client Bundles (main, webpack, commons)

	vercel/next.js canary	vercel/next.js image-component-cleanup	Change
677f882d2ed8..35e7.js gzip	11.1 kB	11.1 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-0297b89..3d55.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 image-component-cleanup	Change
677f882d2ed8..dule.js gzip	6.94 kB	6.94 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-8539e6d..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 image-component-cleanup	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 image-component-cleanup	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 image-component-cleanup	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 image-component-cleanup	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 image-component-cleanup	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 (Decrease detected ✓)

General Overall decrease ✓

	vercel/next.js canary	vercel/next.js image-component-cleanup	Change
buildDuration	14.5s	14.8s	⚠️ +241ms
nodeModulesSize	91.2 MB	91.2 MB	-756 B

Client Bundles (main, webpack, commons)

	vercel/next.js canary	vercel/next.js image-component-cleanup	Change
677f882d2ed8..35e7.js gzip	11.1 kB	11.1 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-0297b89..3d55.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 image-component-cleanup	Change
677f882d2ed8..dule.js gzip	6.94 kB	6.94 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-8539e6d..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 image-component-cleanup	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 image-component-cleanup	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 image-component-cleanup	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 image-component-cleanup	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 image-component-cleanup	Change
_error.js	1.06 MB	1.06 MB	✓
404.html	4.73 kB	4.73 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: 3a2d88f

ijjk · 2020-10-21T18:39:14Z

Failing test suites

Commit: 3a2d88f

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

Image Component Tests > Client-side Image Component Tests > should modify src with the loader
Image Component Tests > Client-side Image Component Tests > should correctly generate src even if preceding slash is included in prop
Image Component Tests > Client-side Image Component Tests > should add a srcset based on the loader
Image Component Tests > Client-side Image Component Tests > should add a srcset even with preceding slash in prop
Image Component Tests > Client-side Lazy Loading Tests > should have loaded the first image immediately
Image Component Tests > Client-side Lazy Loading Tests > should load the second image after scrolling down
Image Component Tests > SSR Image Component Tests > should modify src with the loader
Image Component Tests > SSR Image Component Tests > should correctly generate src even if preceding slash is included in prop
Image Component Tests > SSR Image Component Tests > should add a srcset based on the loader
Image Component Tests > SSR Image Component Tests > should add a srcset even with preceding slash in prop
Image Component Tests > SSR Image Component Tests > should add a preload tag for a priority image
Image Component Tests > SSR Image Component Tests > should add a preload tag for a priority image with preceding slash
Image Component Tests > SSR Lazy Loading Tests > should have loaded the first image immediately
Image Component Tests > SSR Lazy Loading Tests > should load the second image after scrolling down

Expand output

● Image Component Tests › SSR Image Component Tests › should modify src with the loader

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

Expected: "https://example.com/myaccount/foo.jpg?q=60"
Received: "https://example.com/myaccount/foo.jpg?auto=format&q=60"

  33 |   })
  34 |   it('should modify src with the loader', async () => {
> 35 |     expect(await browser.elementById('basic-image').getAttribute('src')).toBe(
     |                                                                          ^
  36 |       'https://example.com/myaccount/foo.jpg?q=60'
  37 |     )
  38 |   })

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

● Image Component Tests › SSR Image Component Tests › should correctly generate src even if preceding slash is included in prop

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

Expected: "https://example.com/myaccount/fooslash.jpg"
Received: "https://example.com/myaccount/fooslash.jpg?auto=format"

  40 |     expect(
  41 |       await browser.elementById('preceding-slash-image').getAttribute('src')
> 42 |     ).toBe('https://example.com/myaccount/fooslash.jpg')
     |       ^
  43 |   })
  44 |   it('should add a srcset based on the loader', async () => {
  45 |     expect(

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

● Image Component Tests › SSR Image Component Tests › should add a srcset based on the loader

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

Expected: "https://example.com/myaccount/foo.jpg?w=480&q=60 480w, https://example.com/myaccount/foo.jpg?w=1024&q=60 1024w, https://example.com/myaccount/foo.jpg?w=1600&q=60 1600w"
Received: "https://example.com/myaccount/foo.jpg?auto=format&w=480&q=60 480w, https://example.com/myaccount/foo.jpg?auto=format&w=1024&q=60 1024w, https://example.com/myaccount/foo.jpg?auto=format&w=1600&q=60 1600w"

  45 |     expect(
  46 |       await browser.elementById('basic-image').getAttribute('srcset')
> 47 |     ).toBe(
     |       ^
  48 |       'https://example.com/myaccount/foo.jpg?w=480&q=60 480w, https://example.com/myaccount/foo.jpg?w=1024&q=60 1024w, https://example.com/myaccount/foo.jpg?w=1600&q=60 1600w'
  49 |     )
  50 |   })

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

● Image Component Tests › SSR Image Component Tests › should add a srcset even with preceding slash in prop

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

Expected: "https://example.com/myaccount/fooslash.jpg?w=480 480w, https://example.com/myaccount/fooslash.jpg?w=1024 1024w, https://example.com/myaccount/fooslash.jpg?w=1600 1600w"
Received: "https://example.com/myaccount/fooslash.jpg?auto=format&w=480 480w, https://example.com/myaccount/fooslash.jpg?auto=format&w=1024 1024w, https://example.com/myaccount/fooslash.jpg?auto=format&w=1600 1600w"

  52 |     expect(
  53 |       await browser.elementById('preceding-slash-image').getAttribute('srcset')
> 54 |     ).toBe(
     |       ^
  55 |       'https://example.com/myaccount/fooslash.jpg?w=480 480w, https://example.com/myaccount/fooslash.jpg?w=1024 1024w, https://example.com/myaccount/fooslash.jpg?w=1600 1600w'
  56 |     )
  57 |   })

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

● Image Component Tests › SSR Image Component Tests › should add a preload tag for a priority image

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

Expected: true
Received: false

  169 |           'https://example.com/myaccount/withpriority.png'
  170 |         )
> 171 |       ).toBe(true)
      |         ^
  172 |     })
  173 |     it('should add a preload tag for a priority image with preceding slash', async () => {
  174 |       expect(

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

● Image Component Tests › SSR Image Component Tests › should add a preload tag for a priority image with preceding slash

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

Expected: true
Received: false

  176 |           'https://example.com/myaccount/fooslash.jpg'
  177 |         )
> 178 |       ).toBe(true)
      |         ^
  179 |     })
  180 |     it('should add a preload tag for a priority image, with arbitrary host', async () => {
  181 |       expect(

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

● Image Component Tests › Client-side Image Component Tests › should modify src with the loader

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

Expected: "https://example.com/myaccount/foo.jpg?q=60"
Received: "https://example.com/myaccount/foo.jpg?auto=format&q=60"

  33 |   })
  34 |   it('should modify src with the loader', async () => {
> 35 |     expect(await browser.elementById('basic-image').getAttribute('src')).toBe(
     |                                                                          ^
  36 |       'https://example.com/myaccount/foo.jpg?q=60'
  37 |     )
  38 |   })

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

● Image Component Tests › Client-side Image Component Tests › should correctly generate src even if preceding slash is included in prop

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

Expected: "https://example.com/myaccount/fooslash.jpg"
Received: "https://example.com/myaccount/fooslash.jpg?auto=format"

  40 |     expect(
  41 |       await browser.elementById('preceding-slash-image').getAttribute('src')
> 42 |     ).toBe('https://example.com/myaccount/fooslash.jpg')
     |       ^
  43 |   })
  44 |   it('should add a srcset based on the loader', async () => {
  45 |     expect(

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

● Image Component Tests › Client-side Image Component Tests › should add a srcset based on the loader

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

Expected: "https://example.com/myaccount/foo.jpg?w=480&q=60 480w, https://example.com/myaccount/foo.jpg?w=1024&q=60 1024w, https://example.com/myaccount/foo.jpg?w=1600&q=60 1600w"
Received: "https://example.com/myaccount/foo.jpg?auto=format&w=480&q=60 480w, https://example.com/myaccount/foo.jpg?auto=format&w=1024&q=60 1024w, https://example.com/myaccount/foo.jpg?auto=format&w=1600&q=60 1600w"

  45 |     expect(
  46 |       await browser.elementById('basic-image').getAttribute('srcset')
> 47 |     ).toBe(
     |       ^
  48 |       'https://example.com/myaccount/foo.jpg?w=480&q=60 480w, https://example.com/myaccount/foo.jpg?w=1024&q=60 1024w, https://example.com/myaccount/foo.jpg?w=1600&q=60 1600w'
  49 |     )
  50 |   })

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

● Image Component Tests › Client-side Image Component Tests › should add a srcset even with preceding slash in prop

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

Expected: "https://example.com/myaccount/fooslash.jpg?w=480 480w, https://example.com/myaccount/fooslash.jpg?w=1024 1024w, https://example.com/myaccount/fooslash.jpg?w=1600 1600w"
Received: "https://example.com/myaccount/fooslash.jpg?auto=format&w=480 480w, https://example.com/myaccount/fooslash.jpg?auto=format&w=1024 1024w, https://example.com/myaccount/fooslash.jpg?auto=format&w=1600 1600w"

  52 |     expect(
  53 |       await browser.elementById('preceding-slash-image').getAttribute('srcset')
> 54 |     ).toBe(
     |       ^
  55 |       'https://example.com/myaccount/fooslash.jpg?w=480 480w, https://example.com/myaccount/fooslash.jpg?w=1024 1024w, https://example.com/myaccount/fooslash.jpg?w=1600 1600w'
  56 |     )
  57 |   })

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

● Image Component Tests › SSR Lazy Loading Tests › should have loaded the first image immediately

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

Expected: "https://example.com/myaccount/foo1.jpg"
Received: "https://example.com/myaccount/foo1.jpg?auto=format"

  70 | function lazyLoadingTests() {
  71 |   it('should have loaded the first image immediately', async () => {
> 72 |     expect(await browser.elementById('lazy-top').getAttribute('src')).toBe(
     |                                                                       ^
  73 |       'https://example.com/myaccount/foo1.jpg'
  74 |     )
  75 |     expect(await browser.elementById('lazy-top').getAttribute('srcset')).toBe(

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

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

thrown: "Exceeded timeout of 30000 ms for a test.
Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test."

  90 |     )
  91 |   })
> 92 |   it('should load the second image after scrolling down', async () => {
     |   ^
  93 |     let viewportHeight = await browser.eval(`window.innerHeight`)
  94 |     let topOfMidImage = await browser.eval(
  95 |       `document.getElementById('lazy-mid').parentElement.offsetTop`

  at lazyLoadingTests (integration/image-component/basic/test/index.test.js:92:3)
  at integration/image-component/basic/test/index.test.js:231:5
  at integration/image-component/basic/test/index.test.js:224:3
  at Object.<anonymous> (integration/image-component/basic/test/index.test.js:151:1)

● Image Component Tests › Client-side Lazy Loading Tests › should have loaded the first image immediately

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

Expected: "https://example.com/myaccount/foo1.jpg"
Received: "https://example.com/myaccount/foo1.jpg?auto=format"

  70 | function lazyLoadingTests() {
  71 |   it('should have loaded the first image immediately', async () => {
> 72 |     expect(await browser.elementById('lazy-top').getAttribute('src')).toBe(
     |                                                                       ^
  73 |       'https://example.com/myaccount/foo1.jpg'
  74 |     )
  75 |     expect(await browser.elementById('lazy-top').getAttribute('srcset')).toBe(

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

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

thrown: "Exceeded timeout of 30000 ms for a test.
Use jest.setTimeout(newTimeout) to increase the timeout value, if this is a long-running test."

  90 |     )
  91 |   })
> 92 |   it('should load the second image after scrolling down', async () => {
     |   ^
  93 |     let viewportHeight = await browser.eval(`window.innerHeight`)
  94 |     let topOfMidImage = await browser.eval(
  95 |       `document.getElementById('lazy-mid').parentElement.offsetTop`

  at lazyLoadingTests (integration/image-component/basic/test/index.test.js:92:3)
  at integration/image-component/basic/test/index.test.js:242:5
  at integration/image-component/basic/test/index.test.js:233:3
  at Object.<anonymous> (integration/image-component/basic/test/index.test.js:151:1)

ijjk · 2020-10-21T19:09:54Z

Failing test suites

Commit: 1a682fe

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

Image Component Tests > SSR Image Component Tests > should add a preload tag for a priority image, with arbitrary host

Expand output

● Image Component Tests › SSR Image Component Tests › should add a preload tag for a priority image, with arbitrary host

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

Expected: true
Received: false

  183 |           'https://arbitraryurl.com/withpriority3.png?auto=format'
  184 |         )
> 185 |       ).toBe(true)
      |         ^
  186 |     })
  187 |   })
  188 |   describe('Client-side Image Component Tests', () => {

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

Fix Image component defaults remove autoOptimize

be1b90d

styfle requested a review from timneutkens October 21, 2020 18:16

styfle requested review from ijjk, lfades and Timer as code owners October 21, 2020 18:16

ijjk added the type: next label Oct 21, 2020

Merge branch 'canary' into image-component-cleanup

3a2d88f

timneutkens previously approved these changes Oct 21, 2020

View reviewed changes

Fix tests

1a682fe

styfle dismissed timneutkens’s stale review via 1a682fe October 21, 2020 18:55

timneutkens previously approved these changes Oct 21, 2020

View reviewed changes

styfle added 2 commits October 21, 2020 15:16

Fix one more test

e1f290b

Merge branch 'canary' into image-component-cleanup

bc2c1fa

styfle dismissed timneutkens’s stale review via bc2c1fa October 21, 2020 19:17

styfle requested a review from timneutkens October 21, 2020 19:18

styfle changed the title ~~Fix Image component defaults remove autoOptimize~~ Fix Image component defaults & remove autoOptimize Oct 21, 2020

timneutkens previously approved these changes Oct 21, 2020

View reviewed changes

Merge branch 'canary' into image-component-cleanup

06e6884

styfle dismissed timneutkens’s stale review via 06e6884 October 21, 2020 19:37

timneutkens merged commit 3f07e55 into canary Oct 21, 2020

timneutkens deleted the image-component-cleanup branch October 21, 2020 19:39

timneutkens restored the image-component-cleanup branch October 21, 2020 19:44

timneutkens deleted the image-component-cleanup branch October 21, 2020 19:44

timneutkens restored the image-component-cleanup branch October 21, 2020 19:44

styfle mentioned this pull request Oct 21, 2020

Fix merge conflict #18106

Merged

timneutkens added the hacktoberfest-accepted label Oct 23, 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

Fix Image component defaults & remove autoOptimize #18101

Fix Image component defaults & remove autoOptimize #18101

styfle commented Oct 21, 2020 •

edited

Loading

ijjk commented Oct 21, 2020

ijjk commented Oct 21, 2020

ijjk commented Oct 21, 2020

Fix Image component defaults & remove autoOptimize #18101

Fix Image component defaults & remove autoOptimize #18101

Conversation

styfle commented Oct 21, 2020 • edited Loading

ijjk commented Oct 21, 2020

Stats from current PR

ijjk commented Oct 21, 2020

Failing test suites

ijjk commented Oct 21, 2020

Failing test suites

styfle commented Oct 21, 2020 •

edited

Loading