Update decoder to correctly handle grayscale PNGs #23393

shuding · 2021-03-25T13:53:45Z

This PR updates the Squoosh PNG decoder, which fixes #22929 in GoogleChromeLabs/squoosh#971.

Bug

Fixes 10.0.8 next/image double images #22929
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

ijjk · 2021-04-01T13:37:30Z

Stats from current PR

Default Server Mode (Decrease detected ✓)

General Overall decrease ✓

	vercel/next.js canary	shuding/next.js fix-png-decoder	Change
buildDuration	11.1s	10.3s	-793ms
nodeModulesSize	45.9 MB	45.9 MB	-2.11 kB

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	shuding/next.js fix-png-decoder	Change
/ failed reqs	0	0	✓
/ total time (seconds)	1.88	1.908	⚠️ +0.03
/ avg req/sec	1330.03	1310.41	⚠️ -19.62
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.135	1.171	⚠️ +0.04
/error-in-render avg req/sec	2202.48	2135.57	⚠️ -66.91

Client Bundles (main, webpack, commons)

	vercel/next.js canary	shuding/next.js fix-png-decoder	Change
677f882d2ed8..7edd.js gzip	13.4 kB	13.4 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-HASH.js gzip	7.12 kB	7.12 kB	✓
webpack-HASH.js gzip	751 B	751 B	✓
Overall change	60.2 kB	60.2 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	shuding/next.js fix-png-decoder	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	shuding/next.js fix-png-decoder	Change
_app-8fbabfc..6440.js gzip	1.28 kB	1.28 kB	✓
_error-af59f..582f.js gzip	3.46 kB	3.46 kB	✓
amp-9716187d..0aa8.js gzip	536 B	536 B	✓
hooks-107e90..74c7.js gzip	888 B	888 B	✓
index-ac435c..ecf2.js gzip	227 B	227 B	✓
link-c31053f..c329.js gzip	1.64 kB	1.64 kB	✓
routerDirect..dc9d.js gzip	303 B	303 B	✓
withRouter-6..0e02.js gzip	302 B	302 B	✓
Overall change	8.64 kB	8.64 kB	✓

Client Build Manifests

	vercel/next.js canary	shuding/next.js fix-png-decoder	Change
_buildManifest.js gzip	370 B	370 B	✓
Overall change	370 B	370 B	✓

Rendered Page Sizes

	vercel/next.js canary	shuding/next.js fix-png-decoder	Change
index.html gzip	613 B	613 B	✓
link.html gzip	621 B	621 B	✓
withRouter.html gzip	608 B	608 B	✓
Overall change	1.84 kB	1.84 kB	✓

Serverless Mode (Decrease detected ✓)

General Overall decrease ✓

	vercel/next.js canary	shuding/next.js fix-png-decoder	Change
buildDuration	12.4s	12.6s	⚠️ +232ms
nodeModulesSize	45.9 MB	45.9 MB	-2.11 kB

Client Bundles (main, webpack, commons)

	vercel/next.js canary	shuding/next.js fix-png-decoder	Change
677f882d2ed8..7edd.js gzip	13.4 kB	13.4 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-HASH.js gzip	7.12 kB	7.12 kB	✓
webpack-HASH.js gzip	751 B	751 B	✓
Overall change	60.2 kB	60.2 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	shuding/next.js fix-png-decoder	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	shuding/next.js fix-png-decoder	Change
_app-8fbabfc..6440.js gzip	1.28 kB	1.28 kB	✓
_error-af59f..582f.js gzip	3.46 kB	3.46 kB	✓
amp-9716187d..0aa8.js gzip	536 B	536 B	✓
hooks-107e90..74c7.js gzip	888 B	888 B	✓
index-ac435c..ecf2.js gzip	227 B	227 B	✓
link-c31053f..c329.js gzip	1.64 kB	1.64 kB	✓
routerDirect..dc9d.js gzip	303 B	303 B	✓
withRouter-6..0e02.js gzip	302 B	302 B	✓
Overall change	8.64 kB	8.64 kB	✓

Client Build Manifests

	vercel/next.js canary	shuding/next.js fix-png-decoder	Change
_buildManifest.js gzip	370 B	370 B	✓
Overall change	370 B	370 B	✓

Serverless bundles

	vercel/next.js canary	shuding/next.js fix-png-decoder	Change
_error.js	1.36 MB	1.36 MB	✓
404.html	2.67 kB	2.67 kB	✓
500.html	2.65 kB	2.65 kB	✓
amp.amp.html	10.7 kB	10.7 kB	✓
amp.html	1.86 kB	1.86 kB	✓
hooks.html	1.92 kB	1.92 kB	✓
index.js	1.36 MB	1.36 MB	✓
link.js	1.42 MB	1.42 MB	✓
routerDirect.js	1.41 MB	1.41 MB	✓
withRouter.js	1.41 MB	1.41 MB	✓
Overall change	6.99 MB	6.99 MB	✓

Webpack 5 Mode (Decrease detected ✓)

General Overall decrease ✓

	vercel/next.js canary	shuding/next.js fix-png-decoder	Change
buildDuration	12.9s	12.9s	⚠️ +3ms
nodeModulesSize	45.9 MB	45.9 MB	-2.11 kB

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	shuding/next.js fix-png-decoder	Change
/ failed reqs	0	0	✓
/ total time (seconds)	1.844	1.909	⚠️ +0.06
/ avg req/sec	1355.71	1309.7	⚠️ -46.01
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.149	1.18	⚠️ +0.03
/error-in-render avg req/sec	2176.03	2119.52	⚠️ -56.51

Client Bundles (main, webpack, commons)

	vercel/next.js canary	shuding/next.js fix-png-decoder	Change
597-e27c5352..db8c.js gzip	13.3 kB	13.3 kB	✓
778-84582755..aa9b.js gzip	7.05 kB	7.05 kB	✓
framework.HASH.js gzip	39.3 kB	39.3 kB	✓
main-HASH.js gzip	151 B	151 B	✓
webpack-HASH.js gzip	993 B	993 B	✓
Overall change	60.8 kB	60.8 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	shuding/next.js fix-png-decoder	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	shuding/next.js fix-png-decoder	Change
_app-5cc66b2..6f03.js gzip	1.3 kB	1.3 kB	✓
_error-b58c1..9b8e.js gzip	3.4 kB	3.4 kB	✓
amp-89a5460c..567f.js gzip	558 B	558 B	✓
hooks-8c2e74..be37.js gzip	924 B	924 B	✓
index-fec729..83b2.js gzip	243 B	243 B	✓
link-dd34d9b..0ade.js gzip	1.66 kB	1.66 kB	✓
routerDirect..5759.js gzip	336 B	336 B	✓
withRouter-1..98bf.js gzip	334 B	334 B	✓
Overall change	8.76 kB	8.76 kB	✓

Client Build Manifests

	vercel/next.js canary	shuding/next.js fix-png-decoder	Change
_buildManifest.js gzip	349 B	349 B	✓
Overall change	349 B	349 B	✓

Rendered Page Sizes

	vercel/next.js canary	shuding/next.js fix-png-decoder	Change
index.html gzip	610 B	610 B	✓
link.html gzip	615 B	615 B	✓
withRouter.html gzip	605 B	605 B	✓
Overall change	1.83 kB	1.83 kB	✓

Diffs

Diff for index.html

@@ -43,7 +43,7 @@
         "props": { "pageProps": {} },
         "page": "/",
         "query": {},
-        "buildId": "wqjH4nUCVIsmExX2SLVvI",
+        "buildId": "k1gNU7IsVUS5dZfcBcDaj",
         "isFallback": false,
         "gip": true
       }
@@ -77,11 +77,11 @@
       async=""
     ></script>
     <script
-      src="/_next/static/wqjH4nUCVIsmExX2SLVvI/_buildManifest.js"
+      src="/_next/static/k1gNU7IsVUS5dZfcBcDaj/_buildManifest.js"
       async=""
     ></script>
     <script
-      src="/_next/static/wqjH4nUCVIsmExX2SLVvI/_ssgManifest.js"
+      src="/_next/static/k1gNU7IsVUS5dZfcBcDaj/_ssgManifest.js"
       async=""
     ></script>
   </body>

Diff for link.html

@@ -48,7 +48,7 @@
         "props": { "pageProps": {} },
         "page": "/link",
         "query": {},
-        "buildId": "wqjH4nUCVIsmExX2SLVvI",
+        "buildId": "k1gNU7IsVUS5dZfcBcDaj",
         "isFallback": false,
         "gip": true
       }
@@ -82,11 +82,11 @@
       async=""
     ></script>
     <script
-      src="/_next/static/wqjH4nUCVIsmExX2SLVvI/_buildManifest.js"
+      src="/_next/static/k1gNU7IsVUS5dZfcBcDaj/_buildManifest.js"
       async=""
     ></script>
     <script
-      src="/_next/static/wqjH4nUCVIsmExX2SLVvI/_ssgManifest.js"
+      src="/_next/static/k1gNU7IsVUS5dZfcBcDaj/_ssgManifest.js"
       async=""
     ></script>
   </body>

Diff for withRouter.html

@@ -43,7 +43,7 @@
         "props": { "pageProps": {} },
         "page": "/withRouter",
         "query": {},
-        "buildId": "wqjH4nUCVIsmExX2SLVvI",
+        "buildId": "k1gNU7IsVUS5dZfcBcDaj",
         "isFallback": false,
         "gip": true
       }
@@ -77,11 +77,11 @@
       async=""
     ></script>
     <script
-      src="/_next/static/wqjH4nUCVIsmExX2SLVvI/_buildManifest.js"
+      src="/_next/static/k1gNU7IsVUS5dZfcBcDaj/_buildManifest.js"
       async=""
     ></script>
     <script
-      src="/_next/static/wqjH4nUCVIsmExX2SLVvI/_ssgManifest.js"
+      src="/_next/static/k1gNU7IsVUS5dZfcBcDaj/_ssgManifest.js"
       async=""
     ></script>
   </body>

Commit: d31f71b

ijjk · 2021-04-01T14:42:13Z

Stats from current PR

Default Server Mode (Decrease detected ✓)

General Overall decrease ✓

	vercel/next.js canary	shuding/next.js fix-png-decoder	Change
buildDuration	10.9s	10.7s	-193ms
nodeModulesSize	45.9 MB	45.9 MB	-2.11 kB

Page Load Tests Overall increase ✓

	vercel/next.js canary	shuding/next.js fix-png-decoder	Change
/ failed reqs	0	0	✓
/ total time (seconds)	1.902	1.903	0
/ avg req/sec	1314.22	1313.49	⚠️ -0.73
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.157	1.155	0
/error-in-render avg req/sec	2160.39	2165.08	+4.69

Client Bundles (main, webpack, commons)

	vercel/next.js canary	shuding/next.js fix-png-decoder	Change
677f882d2ed8..7edd.js gzip	13.4 kB	13.4 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-HASH.js gzip	7.12 kB	7.12 kB	✓
webpack-HASH.js gzip	751 B	751 B	✓
Overall change	60.2 kB	60.2 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	shuding/next.js fix-png-decoder	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	shuding/next.js fix-png-decoder	Change
_app-8fbabfc..6440.js gzip	1.28 kB	1.28 kB	✓
_error-af59f..582f.js gzip	3.46 kB	3.46 kB	✓
amp-9716187d..0aa8.js gzip	536 B	536 B	✓
hooks-107e90..74c7.js gzip	888 B	888 B	✓
index-ac435c..ecf2.js gzip	227 B	227 B	✓
link-c31053f..c329.js gzip	1.64 kB	1.64 kB	✓
routerDirect..dc9d.js gzip	303 B	303 B	✓
withRouter-6..0e02.js gzip	302 B	302 B	✓
Overall change	8.64 kB	8.64 kB	✓

Client Build Manifests

	vercel/next.js canary	shuding/next.js fix-png-decoder	Change
_buildManifest.js gzip	370 B	370 B	✓
Overall change	370 B	370 B	✓

Rendered Page Sizes

	vercel/next.js canary	shuding/next.js fix-png-decoder	Change
index.html gzip	613 B	613 B	✓
link.html gzip	621 B	621 B	✓
withRouter.html gzip	608 B	608 B	✓
Overall change	1.84 kB	1.84 kB	✓

Serverless Mode (Decrease detected ✓)

General Overall decrease ✓

	vercel/next.js canary	shuding/next.js fix-png-decoder	Change
buildDuration	12.7s	13.2s	⚠️ +498ms
nodeModulesSize	45.9 MB	45.9 MB	-2.11 kB

Client Bundles (main, webpack, commons)

	vercel/next.js canary	shuding/next.js fix-png-decoder	Change
677f882d2ed8..7edd.js gzip	13.4 kB	13.4 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-HASH.js gzip	7.12 kB	7.12 kB	✓
webpack-HASH.js gzip	751 B	751 B	✓
Overall change	60.2 kB	60.2 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	shuding/next.js fix-png-decoder	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	shuding/next.js fix-png-decoder	Change
_app-8fbabfc..6440.js gzip	1.28 kB	1.28 kB	✓
_error-af59f..582f.js gzip	3.46 kB	3.46 kB	✓
amp-9716187d..0aa8.js gzip	536 B	536 B	✓
hooks-107e90..74c7.js gzip	888 B	888 B	✓
index-ac435c..ecf2.js gzip	227 B	227 B	✓
link-c31053f..c329.js gzip	1.64 kB	1.64 kB	✓
routerDirect..dc9d.js gzip	303 B	303 B	✓
withRouter-6..0e02.js gzip	302 B	302 B	✓
Overall change	8.64 kB	8.64 kB	✓

Client Build Manifests

	vercel/next.js canary	shuding/next.js fix-png-decoder	Change
_buildManifest.js gzip	370 B	370 B	✓
Overall change	370 B	370 B	✓

Serverless bundles

	vercel/next.js canary	shuding/next.js fix-png-decoder	Change
_error.js	1.36 MB	1.36 MB	✓
404.html	2.67 kB	2.67 kB	✓
500.html	2.65 kB	2.65 kB	✓
amp.amp.html	10.7 kB	10.7 kB	✓
amp.html	1.86 kB	1.86 kB	✓
hooks.html	1.92 kB	1.92 kB	✓
index.js	1.36 MB	1.36 MB	✓
link.js	1.42 MB	1.42 MB	✓
routerDirect.js	1.41 MB	1.41 MB	✓
withRouter.js	1.41 MB	1.41 MB	✓
Overall change	6.99 MB	6.99 MB	✓

Webpack 5 Mode (Increase detected ⚠️)

General Overall decrease ✓

	vercel/next.js canary	shuding/next.js fix-png-decoder	Change
buildDuration	13.1s	13.3s	⚠️ +182ms
nodeModulesSize	45.9 MB	45.9 MB	-2.11 kB

Page Load Tests Overall increase ✓

	vercel/next.js canary	shuding/next.js fix-png-decoder	Change
/ failed reqs	0	0	✓
/ total time (seconds)	1.986	1.933	-0.05
/ avg req/sec	1258.65	1293.63	+34.98
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.234	1.237	0
/error-in-render avg req/sec	2025.66	2020.47	⚠️ -5.19

Client Bundles (main, webpack, commons)

	vercel/next.js canary	shuding/next.js fix-png-decoder	Change
597-e27c5352..db8c.js gzip	13.3 kB	13.3 kB	✓
778-84582755..aa9b.js gzip	7.05 kB	7.05 kB	✓
framework.HASH.js gzip	39.3 kB	39.3 kB	✓
main-HASH.js gzip	151 B	151 B	✓
webpack-HASH.js gzip	993 B	993 B	✓
Overall change	60.8 kB	60.8 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	shuding/next.js fix-png-decoder	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	shuding/next.js fix-png-decoder	Change
_app-5cc66b2..6f03.js gzip	1.3 kB	1.3 kB	✓
_error-b58c1..9b8e.js gzip	3.4 kB	3.4 kB	✓
amp-89a5460c..567f.js gzip	558 B	558 B	✓
hooks-8c2e74..be37.js gzip	924 B	924 B	✓
index-fec729..83b2.js gzip	243 B	243 B	✓
link-dd34d9b..0ade.js gzip	1.66 kB	1.66 kB	✓
routerDirect..5759.js gzip	336 B	336 B	✓
withRouter-1..98bf.js gzip	334 B	334 B	✓
Overall change	8.76 kB	8.76 kB	✓

Client Build Manifests

	vercel/next.js canary	shuding/next.js fix-png-decoder	Change
_buildManifest.js gzip	349 B	349 B	✓
Overall change	349 B	349 B	✓

Rendered Page Sizes

	vercel/next.js canary	shuding/next.js fix-png-decoder	Change
index.html gzip	610 B	610 B	✓
link.html gzip	615 B	615 B	✓
withRouter.html gzip	605 B	605 B	✓
Overall change	1.83 kB	1.83 kB	✓

Diffs

Diff for index.html

@@ -43,7 +43,7 @@
         "props": { "pageProps": {} },
         "page": "/",
         "query": {},
-        "buildId": "K5VDmRqZ0igY9KvZ2kxa_",
+        "buildId": "ivEA6huIgBiAWjRioZ9Ea",
         "isFallback": false,
         "gip": true
       }
@@ -77,11 +77,11 @@
       async=""
     ></script>
     <script
-      src="/_next/static/K5VDmRqZ0igY9KvZ2kxa_/_buildManifest.js"
+      src="/_next/static/ivEA6huIgBiAWjRioZ9Ea/_buildManifest.js"
       async=""
     ></script>
     <script
-      src="/_next/static/K5VDmRqZ0igY9KvZ2kxa_/_ssgManifest.js"
+      src="/_next/static/ivEA6huIgBiAWjRioZ9Ea/_ssgManifest.js"
       async=""
     ></script>
   </body>

Diff for link.html

@@ -48,7 +48,7 @@
         "props": { "pageProps": {} },
         "page": "/link",
         "query": {},
-        "buildId": "K5VDmRqZ0igY9KvZ2kxa_",
+        "buildId": "ivEA6huIgBiAWjRioZ9Ea",
         "isFallback": false,
         "gip": true
       }
@@ -82,11 +82,11 @@
       async=""
     ></script>
     <script
-      src="/_next/static/K5VDmRqZ0igY9KvZ2kxa_/_buildManifest.js"
+      src="/_next/static/ivEA6huIgBiAWjRioZ9Ea/_buildManifest.js"
       async=""
     ></script>
     <script
-      src="/_next/static/K5VDmRqZ0igY9KvZ2kxa_/_ssgManifest.js"
+      src="/_next/static/ivEA6huIgBiAWjRioZ9Ea/_ssgManifest.js"
       async=""
     ></script>
   </body>

Diff for withRouter.html

@@ -43,7 +43,7 @@
         "props": { "pageProps": {} },
         "page": "/withRouter",
         "query": {},
-        "buildId": "K5VDmRqZ0igY9KvZ2kxa_",
+        "buildId": "ivEA6huIgBiAWjRioZ9Ea",
         "isFallback": false,
         "gip": true
       }
@@ -77,11 +77,11 @@
       async=""
     ></script>
     <script
-      src="/_next/static/K5VDmRqZ0igY9KvZ2kxa_/_buildManifest.js"
+      src="/_next/static/ivEA6huIgBiAWjRioZ9Ea/_buildManifest.js"
       async=""
     ></script>
     <script
-      src="/_next/static/K5VDmRqZ0igY9KvZ2kxa_/_ssgManifest.js"
+      src="/_next/static/ivEA6huIgBiAWjRioZ9Ea/_ssgManifest.js"
       async=""
     ></script>
   </body>

Commit: 46eb823

This PR updates the Squoosh PNG decoder, which fixes vercel#22929 in GoogleChromeLabs/squoosh#971. ## Bug - [x] Fixes vercel#22929 - [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

shuding added 2 commits March 25, 2021 21:46

fix png decoder

6e96f51

fix unintended change

14fcedf

ijjk added the type: next label Mar 25, 2021

shuding marked this pull request as ready for review March 25, 2021 13:54

shuding requested review from divmain, ijjk, lfades and timneutkens as code owners March 25, 2021 13:54

This comment has been minimized.

Sign in to view

shuding marked this pull request as draft March 25, 2021 14:15

shuding added 2 commits April 1, 2021 19:16

Merge branch 'canary' into fix-png-decoder

1539d0d

fix codec

d7218b9

This comment has been minimized.

Sign in to view

add integration test

d31f71b

shuding marked this pull request as ready for review April 1, 2021 13:52

timneutkens approved these changes Apr 1, 2021

View reviewed changes

Merge branch 'canary' into fix-png-decoder

46eb823

Timer approved these changes Apr 1, 2021

View reviewed changes

ijjk approved these changes Apr 1, 2021

View reviewed changes

kodiakhq bot merged commit 2ed54cd into vercel:canary Apr 1, 2021

shuding deleted the fix-png-decoder branch April 1, 2021 15:22

samcx mentioned this pull request Apr 2, 2021

Next/Image with grayscale color mode #23625

Closed

snyk-bot mentioned this pull request Apr 25, 2021

[Snyk] Upgrade next from 10.0.3 to 10.1.3 majacQ/next.js#34

Merged

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

Update decoder to correctly handle grayscale PNGs #23393

Update decoder to correctly handle grayscale PNGs #23393

shuding commented Mar 25, 2021 •

edited

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

ijjk commented Apr 1, 2021

Diffs

ijjk commented Apr 1, 2021

Diffs

Update decoder to correctly handle grayscale PNGs #23393

Update decoder to correctly handle grayscale PNGs #23393

Conversation

shuding commented Mar 25, 2021 • edited

Bug

Feature

Documentation / Examples

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

ijjk commented Apr 1, 2021

Stats from current PR

Diffs

ijjk commented Apr 1, 2021

Stats from current PR

Diffs

shuding commented Mar 25, 2021 •

edited