chore: support progressive jpg with sharp

[nil1511]

What?

Use Progressive JPG when optimizing images using Sharp with Sqooush we are already using progressive jpg

[styfle]

Thanks!

Can you share the before/after image of this change?

Better yet, can you add a test here?

https://github.com/vercel/next.js/blob/canary/test/integration/image-optimizer/test/index.test.ts

[nil1511]

input image ~769 kb
before | it was generating baseline jpeg ~432kb
after | as progressive ~417kb

Since almost all browser supports webp and fallback to apng (on explicitly passing empty formats on next.config.js), the condition to get jpeg as a response is rare, so we can close this PR if needed.

[styfle]

Since almost all browser supports webp, the condition to get jpeg as a response is rare

Agreed, currently 96.68% of browsers support webp https://caniuse.com/webp

Squoosh we are already using progressive jpg

Good point, these should behave the same so I think we should land this PR. I also confirmed that cloud providers like imgix will default to progressive jpeg.

https://docs.imgix.com/apis/rendering/format/fm#jpg

Note: In most cases, images rendered in imgix as JPEGs will use progressive encoding. This is because progressive JPEGs are preferable to baseline JPEGs in terms of size and display speed, though in some cases (such as smaller images), baseline will be better.

Thanks for the PR! 🎉

[ijjk]

Stats from current PR

Default Build

General Overall increase ⚠️

	vercel/next.js canary	nil1511/next.js patch-2	Change
buildDuration	10.5s	10.6s	N/A
buildDurationCached	6.3s	6.2s	N/A
nodeModulesSize	175 MB	175 MB	⚠️ +248 B
nextStartRea..uration (ms)	515ms	519ms	N/A

Client Bundles (main, webpack)

	vercel/next.js canary	nil1511/next.js patch-2	Change
199-HASH.js gzip	27.5 kB	27.5 kB	N/A
3f784ff6-HASH.js gzip	53.3 kB	53.3 kB	✓
99.HASH.js gzip	182 B	182 B	✓
framework-HASH.js gzip	45.3 kB	45.3 kB	✓
main-app-HASH.js gzip	252 B	252 B	✓
main-HASH.js gzip	32.9 kB	32.9 kB	N/A
webpack-HASH.js gzip	1.75 kB	1.75 kB	N/A
Overall change	99 kB	99 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	nil1511/next.js patch-2	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	nil1511/next.js patch-2	Change
_app-HASH.js gzip	206 B	205 B	N/A
_error-HASH.js gzip	182 B	180 B	N/A
amp-HASH.js gzip	506 B	505 B	N/A
css-HASH.js gzip	322 B	323 B	N/A
dynamic-HASH.js gzip	2.57 kB	2.57 kB	N/A
edge-ssr-HASH.js gzip	260 B	259 B	N/A
head-HASH.js gzip	350 B	350 B	✓
hooks-HASH.js gzip	369 B	369 B	✓
image-HASH.js gzip	4.36 kB	4.36 kB	N/A
index-HASH.js gzip	256 B	256 B	✓
link-HASH.js gzip	2.64 kB	2.63 kB	N/A
routerDirect..HASH.js gzip	312 B	311 B	N/A
script-HASH.js gzip	385 B	384 B	N/A
withRouter-HASH.js gzip	307 B	308 B	N/A
1afbb74e6ecf..834.css gzip	106 B	106 B	✓
Overall change	1.08 kB	1.08 kB	✓

Client Build Manifests

	vercel/next.js canary	nil1511/next.js patch-2	Change
_buildManifest.js gzip	484 B	482 B	N/A
Overall change	0 B	0 B	✓

Rendered Page Sizes

	vercel/next.js canary	nil1511/next.js patch-2	Change
index.html gzip	530 B	529 B	N/A
link.html gzip	542 B	542 B	✓
withRouter.html gzip	524 B	524 B	✓
Overall change	1.07 kB	1.07 kB	✓

Edge SSR bundle Size

	vercel/next.js canary	nil1511/next.js patch-2	Change
edge-ssr.js gzip	93.7 kB	93.7 kB	N/A
page.js gzip	155 kB	155 kB	N/A
Overall change	0 B	0 B	✓

Middleware size

	vercel/next.js canary	nil1511/next.js patch-2	Change
middleware-b..fest.js gzip	623 B	622 B	N/A
middleware-r..fest.js gzip	150 B	151 B	N/A
middleware.js gzip	22.5 kB	22.5 kB	N/A
edge-runtime..pack.js gzip	1.92 kB	1.92 kB	✓
Overall change	1.92 kB	1.92 kB	✓

Commit: 999db71

[ijjk]

Tests Passed