Support for static image imports #24993

atcastle · 2021-05-11T14:05:24Z

This PR adds a fairly sizeable new feature to the Next.js image component: support for statically importing local images. Specifically, it does the following:

(Behind an experimental flag 'staticImage')

    import img from '../public/foo/test-rect.jpg'
    <Image
        id="require-static"
        src={img}
        layout="fixed"
    />

When used this way, the image does not need a height and width, unlike other image component usages. This is because a custom Webpack loader processes images required this way and converts them into a data structure that provides the height and width information (retrieved at build time with the image-size library) to the image component.
This form of image inclusion has the extra benefit of breaking at build time if your image path is incorrect
Additionally, the image component's default loader has been changed slightly, so that it passes a new query parameter in the URL of local static images. This allows the image optimizer to respond to those requests with the Cache-Control: immutable header, which should provide a substantial performance boost.

One feature that's not in this PR is the automatic generation of blurry placeholders for local images. I'll make a separate PR for that functionality shortly.

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

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

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

packages/next/build/webpack-config.ts

packages/next/build/webpack/loaders/next-image-loader.js

packages/next/client/image.tsx

This reverts commit 29892e3.

This reverts commit ccefcb2.

Co-authored-by: Steven <steven@ceriously.com>

styfle

Looks good besides tests

ijjk · 2021-06-03T17:56:24Z

Failing test suites

Commit: cfe7b38

test/integration/rewrite-with-browser-history/test/index.test.js

rewrites persist with browser history actions > dev mode > back-button should go back to rewritten path successfully

Expand output

● rewrites persist with browser history actions › dev mode › back-button should go back to rewritten path successfully

NoSuchElementError: no such element: Unable to locate element: {"method":"css selector","selector":"#another"}
  (Session info: headless chrome=91.0.4472.77)

  33 |     await browser.back()
  34 |
> 35 |     expect(await browser.elementByCss('#another').text()).toBe('another page')
     |            ^
  36 |
  37 |     expect(await browser.eval('window.beforeNav')).toBe(1)
  38 |   })

  at Object.throwDecodedError (../node_modules/selenium-webdriver/lib/error.js:550:15)
  at parseHttpResponse (../node_modules/selenium-webdriver/lib/http.js:565:13)
  at Executor.execute (../node_modules/selenium-webdriver/lib/http.js:491:26)
  at thenableWebDriverProxy.execute (../node_modules/selenium-webdriver/lib/webdriver.js:700:17)
  at Object.<anonymous> (integration/rewrite-with-browser-history/test/index.test.js:35:12)

ijjk · 2021-06-03T22:34:43Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	atcastle/next.js static-image	Change
buildDuration	14.5s	14.5s	-88ms
buildDurationCached	3.4s	3.5s	⚠️ +19ms
nodeModulesSize	46.8 MB	46.8 MB	⚠️ +77.8 kB

Page Load Tests Overall increase ✓

	vercel/next.js canary	atcastle/next.js static-image	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.008	2.934	-0.07
/ avg req/sec	831.14	852.06	+20.92
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.679	1.655	-0.02
/error-in-render avg req/sec	1488.58	1510.98	+22.4

Client Bundles (main, webpack, commons)

	vercel/next.js canary	atcastle/next.js static-image	Change
framework-HASH.js gzip	39.3 kB	39.3 kB	✓
main-HASH.js gzip	20.2 kB	20.2 kB	✓
webpack-HASH.js gzip	804 B	804 B	✓
Overall change	60.3 kB	60.3 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	atcastle/next.js static-image	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	atcastle/next.js static-image	Change
_app-HASH.js gzip	801 B	801 B	✓
_error-HASH.js gzip	3.07 kB	3.07 kB	✓
amp-HASH.js gzip	527 B	527 B	✓
css-HASH.js gzip	334 B	334 B	✓
hooks-HASH.js gzip	890 B	890 B	✓
index-HASH.js gzip	263 B	263 B	✓
link-HASH.js gzip	1.64 kB	1.64 kB	✓
routerDirect..HASH.js gzip	333 B	333 B	✓
withRouter-HASH.js gzip	330 B	330 B	✓
bb14e60e810b..30f.css gzip	125 B	125 B	✓
Overall change	8.31 kB	8.31 kB	✓

Client Build Manifests

	vercel/next.js canary	atcastle/next.js static-image	Change
_buildManifest.js gzip	392 B	392 B	✓
Overall change	392 B	392 B	✓

Rendered Page Sizes

	vercel/next.js canary	atcastle/next.js static-image	Change
index.html gzip	573 B	573 B	✓
link.html gzip	580 B	580 B	✓
withRouter.html gzip	568 B	568 B	✓
Overall change	1.72 kB	1.72 kB	✓

Serverless Mode

General Overall increase ⚠️

	vercel/next.js canary	atcastle/next.js static-image	Change
buildDuration	16.4s	16.2s	-232ms
buildDurationCached	4.7s	4.6s	-98ms
nodeModulesSize	46.8 MB	46.8 MB	⚠️ +77.8 kB

Client Bundles (main, webpack, commons)

	vercel/next.js canary	atcastle/next.js static-image	Change
framework-HASH.js gzip	39.3 kB	39.3 kB	✓
main-HASH.js gzip	20.2 kB	20.2 kB	✓
webpack-HASH.js gzip	804 B	804 B	✓
Overall change	60.3 kB	60.3 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	atcastle/next.js static-image	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	atcastle/next.js static-image	Change
_app-HASH.js gzip	801 B	801 B	✓
_error-HASH.js gzip	3.07 kB	3.07 kB	✓
amp-HASH.js gzip	527 B	527 B	✓
css-HASH.js gzip	334 B	334 B	✓
hooks-HASH.js gzip	890 B	890 B	✓
index-HASH.js gzip	263 B	263 B	✓
link-HASH.js gzip	1.64 kB	1.64 kB	✓
routerDirect..HASH.js gzip	333 B	333 B	✓
withRouter-HASH.js gzip	330 B	330 B	✓
bb14e60e810b..30f.css gzip	125 B	125 B	✓
Overall change	8.31 kB	8.31 kB	✓

Client Build Manifests

	vercel/next.js canary	atcastle/next.js static-image	Change
_buildManifest.js gzip	392 B	392 B	✓
Overall change	392 B	392 B	✓

Serverless bundles Overall increase ⚠️

	vercel/next.js canary	atcastle/next.js static-image	Change
_error.js	16.9 kB	16.9 kB	⚠️ +2 B
404.html	2.44 kB	2.44 kB	✓
500.html	2.43 kB	2.43 kB	✓
amp.amp.html	10.8 kB	10.8 kB	✓
amp.html	1.63 kB	1.63 kB	✓
css.html	1.81 kB	1.81 kB	✓
hooks.html	1.69 kB	1.69 kB	✓
index.js	17.2 kB	17.2 kB	✓
link.js	17.4 kB	17.4 kB	✓
routerDirect.js	17.4 kB	17.4 kB	⚠️ +2 B
withRouter.js	17.4 kB	17.4 kB	✓
Overall change	107 kB	107 kB	⚠️ +4 B

Webpack 4 Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	atcastle/next.js static-image	Change
buildDuration	12.5s	12.7s	⚠️ +198ms
buildDurationCached	5.2s	5.1s	-77ms
nodeModulesSize	46.8 MB	46.8 MB	⚠️ +77.8 kB

Page Load Tests Overall increase ✓

	vercel/next.js canary	atcastle/next.js static-image	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.947	3.24	⚠️ +0.29
/ avg req/sec	848.31	771.61	⚠️ -76.7
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.818	1.674	-0.14
/error-in-render avg req/sec	1375.42	1493.66	+118.24

Client Bundles (main, webpack, commons)

	vercel/next.js canary	atcastle/next.js static-image	Change
677f882d2ed8..HASH.js gzip	13.3 kB	13.3 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-HASH.js gzip	7.99 kB	7.99 kB	✓
webpack-HASH.js gzip	751 B	751 B	✓
Overall change	61.1 kB	61.1 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	atcastle/next.js static-image	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	atcastle/next.js static-image	Change
_app-HASH.js gzip	1.07 kB	1.07 kB	✓
_error-HASH.js gzip	3.74 kB	3.74 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.63 kB	1.63 kB	✓
routerDirect..HASH.js gzip	303 B	303 B	✓
withRouter-HASH.js gzip	302 B	302 B	✓
e025d2764813..52f.css gzip	125 B	125 B	✓
Overall change	9.16 kB	9.16 kB	✓

Client Build Manifests

	vercel/next.js canary	atcastle/next.js static-image	Change
_buildManifest.js gzip	420 B	420 B	✓
Overall change	420 B	420 B	✓

Rendered Page Sizes

	vercel/next.js canary	atcastle/next.js static-image	Change
index.html gzip	626 B	626 B	✓
link.html gzip	632 B	632 B	✓
withRouter.html gzip	620 B	620 B	✓
Overall change	1.88 kB	1.88 kB	✓

Commit: 0956c0d

@atcastle

If you give a Static Image to the Image component, TypeScript will throw a type error. This Pull Request fixes it. ## Bug - ~~Related issues linked using `fixes #number`~~ - [x] Integration tests added ## ~~Feature~~ - ~~Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.~~ - ~~Related issues linked using `fixes #number`~~ - ~~Integration tests added~~ - ~~Documentation added~~ - ~~Telemetry added. In case of a feature if it's used or not.~~ ## ~~Documentation / Examples~~ - ~~Make sure the linting passes~~ --- follow-up #24993 cc @atcastle

Previously we were accepting a `s=1` query string parameter for static imports, but this is not necessary. Instead, this PR looks at the file path to determine if the header should be `immutable`. The nice thing here is we don't need to worry about someone trying `s=1` with an external image or 3rd party loader. In that case, we use the upstream `Cache-Control` header as usual. This change also ensures we don't add the `immutable` header for `next dev`. Related to PR #24993

Co-authored-by: Steven <steven@ceriously.com> Co-authored-by: Tim Neutkens <timneutkens@me.com> Co-authored-by: Tim Neutkens <tim@timneutkens.nl>

@atcastle

If you give a Static Image to the Image component, TypeScript will throw a type error. This Pull Request fixes it. ## Bug - ~~Related issues linked using `fixes #number`~~ - [x] Integration tests added ## ~~Feature~~ - ~~Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.~~ - ~~Related issues linked using `fixes #number`~~ - ~~Integration tests added~~ - ~~Documentation added~~ - ~~Telemetry added. In case of a feature if it's used or not.~~ ## ~~Documentation / Examples~~ - ~~Make sure the linting passes~~ --- follow-up vercel#24993 cc @atcastle

Previously we were accepting a `s=1` query string parameter for static imports, but this is not necessary. Instead, this PR looks at the file path to determine if the header should be `immutable`. The nice thing here is we don't need to worry about someone trying `s=1` with an external image or 3rd party loader. In that case, we use the upstream `Cache-Control` header as usual. This change also ensures we don't add the `immutable` header for `next dev`. Related to PR vercel#24993

kripod · 2021-08-06T09:29:49Z

Is it possible to infer a reduced natural sizes for high density PNGs somehow? The specs define a header for storing pixels per unit, which could be leveraged (assuming a default of 72 DPI).

styfle · 2021-08-06T14:37:36Z

Does #27695 solve your use case?

kripod · 2021-08-07T08:15:36Z

No, unfortunately, it doesn’t. I would like e.g. a 400x200px@2x image to occupy only 200x100px (with double density for high DPI screens).

styfle · 2021-08-08T17:57:43Z

I see what you mean now.

I think we would have to introduce that in Next.js 12 since it could be breaking behavior.

We would also need to investigate what other formats support this feature besides png.

I would recommend creating a new Feature Request and we can convert it to an RFC to gather feedback from the community.

atcastle added 9 commits May 10, 2021 16:35

Add static image loading functionality with auto height and width

996dc7f

Add tests for static image fill layout

6dea6a2

Update testing for height and width

21400ba

Send cache-control immutable header for static assets

c6ad7c5

Add tests for static image cache control behavior

b5f2c12

Add test for build breaking on bad image path

bc5c64a

Move static image tests into default test suite and add format test

aa9e4fd

Put static image behind experimental flag

9b4c513

Fix support for images loaded with Require

fdd27c4

atcastle requested review from divmain, ijjk, lfades, shuding and timneutkens as code owners May 11, 2021 14:05

ijjk added the type: next label May 11, 2021

styfle reviewed May 11, 2021

View reviewed changes

packages/next/next-server/server/image-optimizer.ts Outdated Show resolved Hide resolved

styfle reviewed May 11, 2021

View reviewed changes

test/integration/image-component/default/test/index.test.js Outdated Show resolved Hide resolved

styfle reviewed May 11, 2021

View reviewed changes

packages/next/next-server/server/image-optimizer.ts Outdated Show resolved Hide resolved

atcastle added 5 commits May 11, 2021 09:37

Remove extraneous code from next-image-loader

7c138de

Initial addition of new loader for converting new URL() usage

ccefcb2

Change static query parameter value from true to 1

acd4ae3

Update tests for static query param

5a8ce4c

Support new URL constructor for image component

29892e3

styfle reviewed May 21, 2021

View reviewed changes

packages/next/build/webpack-config.ts Outdated Show resolved Hide resolved

styfle reviewed May 21, 2021

View reviewed changes

packages/next/build/webpack/loaders/next-image-loader.js Outdated Show resolved Hide resolved

styfle reviewed May 22, 2021

View reviewed changes

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

styfle reviewed May 22, 2021

View reviewed changes

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

atcastle added 3 commits May 24, 2021 08:34

Revert "Support new URL constructor for image component"

108aed9

This reverts commit 29892e3.

Revert "Initial addition of new loader for converting new URL() usage"

b6a199a

This reverts commit ccefcb2.

Merge branch 'canary' of github.com:vercel/next.js into static-image

d4149d2

Reuse buffer from webpack

09b0799

This comment has been minimized.

Sign in to view

Update packages/next/next-server/server/image-optimizer.ts

4e387d7

Co-authored-by: Steven <steven@ceriously.com>

This comment has been minimized.

Sign in to view

styfle previously approved these changes May 31, 2021

View reviewed changes

Update image-optimizer tests to reflect static image changes

9932cd8

atcastle dismissed styfle’s stale review via 9932cd8 June 3, 2021 16:53

atcastle added 2 commits June 3, 2021 10:28

Merge remote-tracking branch 'origin' into static-image

6a94a6d

Run prettier on image-optimizer.ts

cfe7b38

Merge branch 'canary' into static-image

0956c0d

timneutkens merged commit 9b295f5 into vercel:canary Jun 4, 2021

ykzts mentioned this pull request Jun 5, 2021

Fix types for static image #25808

Merged

1 task

ofhouse mentioned this pull request Jun 8, 2021

Enable support for static image imports milliHQ/terraform-aws-next-js-image-optimization#42

Closed

1 task

styfle mentioned this pull request Jun 8, 2021

Refactor image optimizer static immutable header #25909

Merged

thinceller mentioned this pull request Jun 16, 2021

Broken in NextJS 11.0 twopluszero/next-images#73

Open

sync-by-unito bot mentioned this pull request Jun 16, 2021

chore(deps): bump next from 10.1.2 to 11.0.0 filecoin-project/slate#793

Closed

flybayer pushed a commit to blitz-js/next.js that referenced this pull request Jun 16, 2021

Support for static image imports (vercel#24993)

606735e

Co-authored-by: Steven <steven@ceriously.com> Co-authored-by: Tim Neutkens <timneutkens@me.com> Co-authored-by: Tim Neutkens <tim@timneutkens.nl>

TheThirdRace mentioned this pull request Aug 4, 2021

Allow static import from URL #27748

Closed

TheThirdRace mentioned this pull request Oct 19, 2021

Feature Request: Allow static import from URL #30061

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

Support for static image imports #24993

Support for static image imports #24993

atcastle commented May 11, 2021 •

edited by timneutkens

This comment has been minimized.

This comment has been minimized.

styfle left a comment

ijjk commented Jun 3, 2021

ijjk commented Jun 3, 2021

kripod commented Aug 6, 2021 •

edited

styfle commented Aug 6, 2021

kripod commented Aug 7, 2021 •

edited

styfle commented Aug 8, 2021

Support for static image imports #24993

Support for static image imports #24993

Conversation

atcastle commented May 11, 2021 • edited by timneutkens

This comment has been minimized.

This comment has been minimized.

styfle left a comment

Choose a reason for hiding this comment

ijjk commented Jun 3, 2021

Failing test suites

ijjk commented Jun 3, 2021

Stats from current PR

kripod commented Aug 6, 2021 • edited

styfle commented Aug 6, 2021

kripod commented Aug 7, 2021 • edited

styfle commented Aug 8, 2021

atcastle commented May 11, 2021 •

edited by timneutkens

kripod commented Aug 6, 2021 •

edited

kripod commented Aug 7, 2021 •

edited