Make lazy-loading the default for next/image #18123

timneutkens · 2020-10-22T10:09:11Z

Also fixed a flexbox rendering issue that @samsisle reported while testing.

ijjk · 2020-10-22T10:19:00Z

Failing test suites

Commit: ef79ffc

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

Image Component Tests > Client-side Image Component Tests > should support the unoptimized attribute
Image Component Tests > SSR Image Component Tests > should support the unoptimized attribute

Expand output

● Image Component Tests › SSR Image Component Tests › should support the unoptimized attribute

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

Expected: "https://arbitraryurl.com/foo.jpg"
Received: null

  59 |     expect(
  60 |       await browser.elementById('unoptimized-image').getAttribute('src')
> 61 |     ).toBe('https://arbitraryurl.com/foo.jpg')
     |       ^
  62 |   })
  63 |   it('should not add a srcset if unoptimized attribute present', async () => {
  64 |     expect(

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

● Image Component Tests › Client-side Image Component Tests › should support the unoptimized attribute

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

Expected: "https://arbitraryurl.com/foo.jpg"
Received: null

  59 |     expect(
  60 |       await browser.elementById('unoptimized-image').getAttribute('src')
> 61 |     ).toBe('https://arbitraryurl.com/foo.jpg')
     |       ^
  62 |   })
  63 |   it('should not add a srcset if unoptimized attribute present', async () => {
  64 |     expect(

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

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

Image Component Tests > dev mode > should load the images
Image Component Tests > server mode > should load the images
Image Component Tests > serverless mode > should load the images

Expand output

● Image Component Tests › dev mode › should load the images

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."

  22 | 
  23 | function runTests() {
> 24 |   it('should load the images', async () => {
     |   ^
  25 |     let browser
  26 |     try {
  27 |       browser = await webdriver(appPort, '/')

  at runTests (integration/image-component/default/test/index.test.js:24:3)
  at integration/image-component/default/test/index.test.js:65:5
  at integration/image-component/default/test/index.test.js:58:3
  at Object.<anonymous> (integration/image-component/default/test/index.test.js:57:1)

● Image Component Tests › server mode › should load the images

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."

  22 | 
  23 | function runTests() {
> 24 |   it('should load the images', async () => {
     |   ^
  25 |     let browser
  26 |     try {
  27 |       browser = await webdriver(appPort, '/')

  at runTests (integration/image-component/default/test/index.test.js:24:3)
  at integration/image-component/default/test/index.test.js:76:5
  at integration/image-component/default/test/index.test.js:68:3
  at Object.<anonymous> (integration/image-component/default/test/index.test.js:57:1)

● Image Component Tests › serverless mode › should load the images

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."

  22 | 
  23 | function runTests() {
> 24 |   it('should load the images', async () => {
     |   ^
  25 |     let browser
  26 |     try {
  27 |       browser = await webdriver(appPort, '/')

  at runTests (integration/image-component/default/test/index.test.js:24:3)
  at integration/image-component/default/test/index.test.js:98:5
  at integration/image-component/default/test/index.test.js:79:3
  at Object.<anonymous> (integration/image-component/default/test/index.test.js:57:1)

ijjk · 2020-10-22T10:19:36Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	timneutkens/next.js fix/image-component-loading	Change
buildDuration	12.4s	12.3s	-124ms
nodeModulesSize	91.2 MB	91.2 MB	⚠️ +281 B

Page Load Tests Overall increase ✓

	vercel/next.js canary	timneutkens/next.js fix/image-component-loading	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.45	2.375	-0.08
/ avg req/sec	1020.2	1052.81	+32.61
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.331	1.314	-0.02
/error-in-render avg req/sec	1878.23	1902.31	+24.08

Client Bundles (main, webpack, commons)

	vercel/next.js canary	timneutkens/next.js fix/image-component-loading	Change
677f882d2ed8..35e7.js gzip	11.1 kB	11.1 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-23d7afb..be6f.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	timneutkens/next.js fix/image-component-loading	Change
677f882d2ed8..dule.js gzip	6.94 kB	6.94 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-ccae7c3..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	timneutkens/next.js fix/image-component-loading	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	timneutkens/next.js fix/image-component-loading	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	timneutkens/next.js fix/image-component-loading	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	timneutkens/next.js fix/image-component-loading	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	timneutkens/next.js fix/image-component-loading	Change
index.html gzip	1 kB	1 kB	✓
link.html gzip	1.01 kB	1.01 kB	✓
withRouter.html gzip	994 B	994 B	✓
Overall change	3.01 kB	3.01 kB	✓

Serverless Mode

General Overall increase ⚠️

	vercel/next.js canary	timneutkens/next.js fix/image-component-loading	Change
buildDuration	14.2s	13.8s	-403ms
nodeModulesSize	91.2 MB	91.2 MB	⚠️ +281 B

Client Bundles (main, webpack, commons)

	vercel/next.js canary	timneutkens/next.js fix/image-component-loading	Change
677f882d2ed8..35e7.js gzip	11.1 kB	11.1 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-23d7afb..be6f.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	timneutkens/next.js fix/image-component-loading	Change
677f882d2ed8..dule.js gzip	6.94 kB	6.94 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-ccae7c3..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	timneutkens/next.js fix/image-component-loading	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	timneutkens/next.js fix/image-component-loading	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	timneutkens/next.js fix/image-component-loading	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	timneutkens/next.js fix/image-component-loading	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	timneutkens/next.js fix/image-component-loading	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: ef79ffc

ijjk · 2020-10-22T10:50:48Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	timneutkens/next.js fix/image-component-loading	Change
buildDuration	12.7s	13s	⚠️ +241ms
nodeModulesSize	91.2 MB	91.2 MB	⚠️ +637 B

Page Load Tests Overall increase ✓

	vercel/next.js canary	timneutkens/next.js fix/image-component-loading	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.389	2.36	-0.03
/ avg req/sec	1046.54	1059.28	+12.74
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.394	1.311	-0.08
/error-in-render avg req/sec	1793.38	1907.23	+113.85

Client Bundles (main, webpack, commons)

	vercel/next.js canary	timneutkens/next.js fix/image-component-loading	Change
677f882d2ed8..35e7.js gzip	11.1 kB	11.1 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-23d7afb..be6f.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	timneutkens/next.js fix/image-component-loading	Change
677f882d2ed8..dule.js gzip	6.94 kB	6.94 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-ccae7c3..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	timneutkens/next.js fix/image-component-loading	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	timneutkens/next.js fix/image-component-loading	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	timneutkens/next.js fix/image-component-loading	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	timneutkens/next.js fix/image-component-loading	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	timneutkens/next.js fix/image-component-loading	Change
index.html gzip	1 kB	1 kB	✓
link.html gzip	1.01 kB	1.01 kB	✓
withRouter.html gzip	994 B	994 B	✓
Overall change	3.01 kB	3.01 kB	✓

Serverless Mode

General Overall increase ⚠️

	vercel/next.js canary	timneutkens/next.js fix/image-component-loading	Change
buildDuration	14.5s	14.7s	⚠️ +292ms
nodeModulesSize	91.2 MB	91.2 MB	⚠️ +637 B

Client Bundles (main, webpack, commons)

	vercel/next.js canary	timneutkens/next.js fix/image-component-loading	Change
677f882d2ed8..35e7.js gzip	11.1 kB	11.1 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-23d7afb..be6f.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	timneutkens/next.js fix/image-component-loading	Change
677f882d2ed8..dule.js gzip	6.94 kB	6.94 kB	✓
framework.HA..dule.js gzip	39 kB	39 kB	✓
main-ccae7c3..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	timneutkens/next.js fix/image-component-loading	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	timneutkens/next.js fix/image-component-loading	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	timneutkens/next.js fix/image-component-loading	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	timneutkens/next.js fix/image-component-loading	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	timneutkens/next.js fix/image-component-loading	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: 6c11e4f

ijjk · 2020-10-22T10:55:41Z

Failing test suites

Commit: 6c11e4f

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

Image Component Tests > Client-side Image Component Tests > should support the unoptimized attribute
Image Component Tests > SSR Image Component Tests > should support the unoptimized attribute

Expand output

● Image Component Tests › SSR Image Component Tests › should support the unoptimized attribute

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

Expected: "https://arbitraryurl.com/foo.jpg"
Received: null

  59 |     expect(
  60 |       await browser.elementById('unoptimized-image').getAttribute('src')
> 61 |     ).toBe('https://arbitraryurl.com/foo.jpg')
     |       ^
  62 |   })
  63 |   it('should not add a srcset if unoptimized attribute present', async () => {
  64 |     expect(

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

● Image Component Tests › Client-side Image Component Tests › should support the unoptimized attribute

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

Expected: "https://arbitraryurl.com/foo.jpg"
Received: null

  59 |     expect(
  60 |       await browser.elementById('unoptimized-image').getAttribute('src')
> 61 |     ).toBe('https://arbitraryurl.com/foo.jpg')
     |       ^
  62 |   })
  63 |   it('should not add a srcset if unoptimized attribute present', async () => {
  64 |     expect(

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

styfle

Nice catch 👍

packages/next/client/image.tsx

timneutkens added 2 commits October 22, 2020 11:57

Add width/maxwidth to fix flexbox lazy loading

1ab9848

Make lazy loading the default

ef79ffc

timneutkens requested review from Timer, ijjk and lfades as code owners October 22, 2020 10:09

ijjk added the type: next label Oct 22, 2020

Add tests and solve another edge case

6c11e4f

timneutkens mentioned this pull request Oct 22, 2020

[WIP] Next.js Image Component #18122

Closed

24 tasks

leerob previously approved these changes Oct 22, 2020

View reviewed changes

leerob mentioned this pull request Oct 22, 2020

Add docs for Image Optimization #18107

Merged

styfle previously approved these changes Oct 22, 2020

View reviewed changes

styfle reviewed Oct 22, 2020

View reviewed changes

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

styfle added 2 commits October 22, 2020 10:20

Fix lazy tests

39fb88e

Throw instead of log error

7a1bd3d

styfle dismissed stale reviews from leerob and themself via 7a1bd3d October 22, 2020 14:28

timneutkens merged commit 9fb1e60 into vercel:canary Oct 22, 2020

timneutkens deleted the fix/image-component-loading branch October 22, 2020 14:55

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

Uh oh!

Make lazy-loading the default for next/image #18123

Make lazy-loading the default for next/image #18123

Uh oh!

timneutkens commented Oct 22, 2020

Uh oh!

ijjk commented Oct 22, 2020 •

edited

Loading

Uh oh!

ijjk commented Oct 22, 2020

Uh oh!

ijjk commented Oct 22, 2020

Uh oh!

ijjk commented Oct 22, 2020

Uh oh!

styfle left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Make lazy-loading the default for next/image #18123

Make lazy-loading the default for next/image #18123

Uh oh!

Conversation

timneutkens commented Oct 22, 2020

Uh oh!

ijjk commented Oct 22, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Failing test suites

Uh oh!

ijjk commented Oct 22, 2020

Stats from current PR

Uh oh!

ijjk commented Oct 22, 2020

Stats from current PR

Uh oh!

ijjk commented Oct 22, 2020

Failing test suites

Uh oh!

styfle left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

ijjk commented Oct 22, 2020 •

edited

Loading