Use Sharp if available for Image Optimization #27346

atcastle · 2021-07-20T16:57:57Z

This PR adds support for using sharp for image transformations, but does not add is as a dependency to Next.js. The feature is described more thoroughly in #27073.

docs/basic-features/image-optimization.md

packages/next/server/image-optimizer.ts

styfle

In order to test this, you could add another workflow to GH Actions with the following:

yarn add sharp && yarn testheadless test/integration/image-optimizer

And maybe add one more test to ensure that no warning is printed in this case.

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

…ional-sharp

docs/basic-features/image-optimization.md

test/integration/image-optimizer/test/index.test.js

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

packages/next/server/image-optimizer.ts

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

styfle

🚀

ijjk · 2021-07-22T22:11:57Z

Stats from current PR

Default Build (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	atcastle/next.js optional-sharp	Change
buildDuration	16.4s	16.6s	⚠️ +142ms
buildDurationCached	3.7s	3.7s	⚠️ +34ms
nodeModulesSize	49.5 MB	49.5 MB	⚠️ +7.7 kB

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	atcastle/next.js optional-sharp	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.785	2.724	-0.06
/ avg req/sec	897.7	917.61	+19.91
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.585	1.618	⚠️ +0.03
/error-in-render avg req/sec	1576.9	1545.06	⚠️ -31.84

Client Bundles (main, webpack, commons)

	vercel/next.js canary	atcastle/next.js optional-sharp	Change
359.HASH.js gzip	2.96 kB	2.96 kB	✓
745.HASH.js gzip	180 B	180 B	✓
framework-HASH.js gzip	42.2 kB	42.2 kB	✓
main-HASH.js gzip	21 kB	21 kB	✓
webpack-HASH.js gzip	1.53 kB	1.53 kB	✓
Overall change	67.9 kB	67.9 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	atcastle/next.js optional-sharp	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 optional-sharp	Change
_app-HASH.js gzip	803 B	803 B	✓
_error-HASH.js gzip	3.06 kB	3.06 kB	✓
amp-HASH.js gzip	554 B	554 B	✓
css-HASH.js gzip	329 B	329 B	✓
dynamic-HASH.js gzip	2.52 kB	2.52 kB	✓
head-HASH.js gzip	2.28 kB	2.28 kB	✓
hooks-HASH.js gzip	903 B	903 B	✓
image-HASH.js gzip	5.61 kB	5.61 kB	✓
index-HASH.js gzip	261 B	261 B	✓
link-HASH.js gzip	1.66 kB	1.66 kB	✓
routerDirect..HASH.js gzip	319 B	319 B	✓
script-HASH.js gzip	387 B	387 B	✓
withRouter-HASH.js gzip	320 B	320 B	✓
bb14e60e810b..30f.css gzip	125 B	125 B	✓
Overall change	19.1 kB	19.1 kB	✓

Client Build Manifests

	vercel/next.js canary	atcastle/next.js optional-sharp	Change
_buildManifest.js gzip	490 B	490 B	✓
Overall change	490 B	490 B	✓

Rendered Page Sizes

	vercel/next.js canary	atcastle/next.js optional-sharp	Change
index.html gzip	530 B	530 B	✓
link.html gzip	543 B	543 B	✓
withRouter.html gzip	525 B	525 B	✓
Overall change	1.6 kB	1.6 kB	✓

Webpack 4 Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	atcastle/next.js optional-sharp	Change
buildDuration	12.7s	12.9s	⚠️ +169ms
buildDurationCached	5.2s	4.9s	-270ms
nodeModulesSize	49.5 MB	49.5 MB	⚠️ +7.7 kB

Page Load Tests Overall increase ✓

	vercel/next.js canary	atcastle/next.js optional-sharp	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.717	2.792	⚠️ +0.07
/ avg req/sec	920.26	895.32	⚠️ -24.94
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.685	1.563	-0.12
/error-in-render avg req/sec	1483.36	1599.19	+115.83

Client Bundles (main, webpack, commons)

	vercel/next.js canary	atcastle/next.js optional-sharp	Change
17.HASH.js gzip	2.98 kB	2.98 kB	✓
18.HASH.js gzip	185 B	185 B	✓
677f882d2ed8..HASH.js gzip	13.7 kB	13.7 kB	✓
framework.HASH.js gzip	41.9 kB	41.9 kB	✓
main-HASH.js gzip	8.4 kB	8.4 kB	✓
webpack-HASH.js gzip	1.22 kB	1.22 kB	✓
Overall change	68.5 kB	68.5 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	atcastle/next.js optional-sharp	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 optional-sharp	Change
_app-HASH.js gzip	791 B	791 B	✓
_error-HASH.js gzip	3.76 kB	3.76 kB	✓
amp-HASH.js gzip	552 B	552 B	✓
css-HASH.js gzip	333 B	333 B	✓
dynamic-HASH.js gzip	2.71 kB	2.71 kB	✓
head-HASH.js gzip	2.97 kB	2.97 kB	✓
hooks-HASH.js gzip	911 B	911 B	✓
index-HASH.js gzip	231 B	231 B	✓
link-HASH.js gzip	1.64 kB	1.64 kB	✓
routerDirect..HASH.js gzip	298 B	298 B	✓
script-HASH.js gzip	3.02 kB	3.02 kB	✓
withRouter-HASH.js gzip	294 B	294 B	✓
e025d2764813..52f.css gzip	125 B	125 B	✓
Overall change	17.6 kB	17.6 kB	✓

Client Build Manifests

	vercel/next.js canary	atcastle/next.js optional-sharp	Change
_buildManifest.js gzip	500 B	500 B	✓
Overall change	500 B	500 B	✓

Rendered Page Sizes

	vercel/next.js canary	atcastle/next.js optional-sharp	Change
index.html gzip	577 B	577 B	✓
link.html gzip	588 B	588 B	✓
withRouter.html gzip	569 B	569 B	✓
Overall change	1.73 kB	1.73 kB	✓

Commit: 2eb9f5f

errors/manifest.json

Fixes typo mentioned in #27346 (comment)

LucaNerlich · 2021-07-29T08:04:06Z

amazing work, thanks a lot :)

Follow up to #27346 ![image](https://user-images.githubusercontent.com/229881/128935917-ca6da384-91f4-43d3-8059-4e06220fbc19.png)

* Use sharp for image transformations when available * Refactor resizeImage and add sharp warning * only show sharp warning once per instance * Modify sharp error message * Add documentation for optional sharp dependency * Update docs/basic-features/image-optimization.md Co-authored-by: Steven <steven@ceriously.com> * Import types for sharp * Update lockfile * Add testing against sharp * use fs-extra for node 12 * Rename test sharp path variable * Apply suggestions from code review Co-authored-by: Steven <steven@ceriously.com> * update squoosh specific test * Apply suggestions from code review Co-authored-by: Steven <steven@ceriously.com> * update tests * Apply suggestions from code review Co-authored-by: Steven <steven@ceriously.com> Co-authored-by: Steven <steven@ceriously.com> Co-authored-by: JJ Kasper <jj@jjsweb.site>

Fixes typo mentioned in vercel#27346 (comment)

Follow up to vercel#27346 ![image](https://user-images.githubusercontent.com/229881/128935917-ca6da384-91f4-43d3-8059-4e06220fbc19.png)

atcastle added 6 commits July 18, 2021 00:56

Use sharp for image transformations when available

71ee383

Refactor resizeImage and add sharp warning

69518e3

only show sharp warning once per instance

c46fe9b

Merge remote-tracking branch 'origin/canary' into optional-sharp

e823a6e

Modify sharp error message

0635318

Add documentation for optional sharp dependency

f1543f4

atcastle requested review from huozhi, ijjk, leerob, lfades, padmaia, shuding, styfle and timneutkens as code owners July 20, 2021 16:57

ijjk added created-by: Chrome Aurora PRs by the Google Chrome team: https://web.dev/aurora type: documentation type: next labels Jul 20, 2021

This comment has been minimized.

Sign in to view

styfle reviewed Jul 20, 2021

View reviewed changes

docs/basic-features/image-optimization.md Outdated Show resolved Hide resolved

styfle reviewed Jul 20, 2021

View reviewed changes

docs/basic-features/image-optimization.md Outdated Show resolved Hide resolved

styfle reviewed Jul 20, 2021

View reviewed changes

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

styfle reviewed Jul 20, 2021

View reviewed changes

atcastle and others added 3 commits July 20, 2021 15:15

Update docs/basic-features/image-optimization.md

e9ae047

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

Merge remote-tracking branch 'origin/canary' into optional-sharp

351f71e

Merge branch 'optional-sharp' of github.com:atcastle/next.js into opt…

1fbe641

…ional-sharp

This comment has been minimized.

Sign in to view

atcastle added 2 commits July 20, 2021 16:06

Import types for sharp

bc5c2fa

Update lockfile

71e2a4f

This comment has been minimized.

Sign in to view

styfle reviewed Jul 21, 2021

View reviewed changes

docs/basic-features/image-optimization.md Outdated Show resolved Hide resolved

This comment has been minimized.

Sign in to view

update squoosh specific test

38a43c8

styfle reviewed Jul 22, 2021

View reviewed changes

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

Merge remote-tracking branch 'upstream/canary' into optional-sharp

f3653e9

styfle reviewed Jul 22, 2021

View reviewed changes

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

styfle reviewed Jul 22, 2021

View reviewed changes

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

Apply suggestions from code review

1c1f996

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

This comment has been minimized.

Sign in to view

update tests

040e283

ijjk requested a review from styfle July 22, 2021 21:56

styfle reviewed Jul 22, 2021

View reviewed changes

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

Apply suggestions from code review

2eb9f5f

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

styfle approved these changes Jul 22, 2021

View reviewed changes

styfle changed the title ~~Use Sharp if available for image transformations~~ Use Sharp if available for Image Optimization Jul 22, 2021

ijjk approved these changes Jul 22, 2021

View reviewed changes

ijjk merged commit 1b73342 into vercel:canary Jul 22, 2021

ofhouse mentioned this pull request Jul 23, 2021

Use sharp as optimizer milliHQ/terraform-aws-next-js-image-optimization#51

Closed

ArianHamdi mentioned this pull request Jul 23, 2021

Add support for AVIF #20765

Closed

votemike reviewed Jul 23, 2021

View reviewed changes

errors/manifest.json Show resolved Hide resolved

karlhorky mentioned this pull request Jul 23, 2021

next image optimization significantly slower in next after 10.0.7 #23637

Closed

styfle mentioned this pull request Jul 23, 2021

Fix typo in error message #27438

Merged

kodiakhq bot pushed a commit that referenced this pull request Jul 23, 2021

Fix typo in error message (#27438)

1d347ba

Fixes typo mentioned in #27346 (comment)

styfle mentioned this pull request Aug 10, 2021

Add warning during next build when sharp is missing #27933

Merged

kodiakhq bot pushed a commit that referenced this pull request Aug 11, 2021

Add warning during next build when sharp is missing (#27933)

51a2a02

Follow up to #27346 ![image](https://user-images.githubusercontent.com/229881/128935917-ca6da384-91f4-43d3-8059-4e06220fbc19.png)

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

Fix typo in error message (vercel#27438)

4852b79

Fixes typo mentioned in vercel#27346 (comment)

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

Use Sharp if available for Image Optimization #27346

Use Sharp if available for Image Optimization #27346

atcastle commented Jul 20, 2021 •

edited by styfle

Loading

This comment has been minimized.

styfle left a comment •

edited

Loading

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

styfle left a comment

ijjk commented Jul 22, 2021

LucaNerlich commented Jul 29, 2021

Use Sharp if available for Image Optimization #27346

Use Sharp if available for Image Optimization #27346

Conversation

atcastle commented Jul 20, 2021 • edited by styfle Loading

This comment has been minimized.

styfle left a comment • edited Loading

Choose a reason for hiding this comment

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

styfle left a comment

Choose a reason for hiding this comment

ijjk commented Jul 22, 2021

Stats from current PR

LucaNerlich commented Jul 29, 2021

atcastle commented Jul 20, 2021 •

edited by styfle

Loading

styfle left a comment •

edited

Loading