Add warning when image has unused sizes prop

[styfle]

• Related to https://twitter.com/jaffathecake/status/1456579637987979265
• Closes Update fill and responsive examples to use correct sizes prop #30640

[jakearchibald]

Thanks for taking a look at this! The other problem with the output in the tweet is it contained three sizes, but none of them had media conditions, making the statement invalid and useless.

[styfle]

@jakearchibald Currently, the sizes prop is just passed through to the underlying <img> element.

next.js/packages/next/client/image.tsx

Line 209 in 5e185fc

sizes: !sizes && kind === 'w' ? '100vw' : sizes,

It won’t always have media conditions, for example sizes="50vw". Is there a standard way to parse the “sizes” string to see if it’s valid? Perhaps there’s a Web API or npm package we could use to help the user out because it doesn’t seem like the browser provides any warnings for invalid string.

[ijjk]

Stats from current PR

Default Build (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js add-warning-sizes-prop-incorrect	Change
buildDuration	23.2s	23.9s	⚠️ +642ms
buildDurationCached	4.6s	4.6s	⚠️ +2ms
nodeModulesSize	332 MB	332 MB	⚠️ +370 B

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	vercel/next.js add-warning-sizes-prop-incorrect	Change
/ failed reqs	0	0	✓
/ total time (seconds)	4.029	4.113	⚠️ +0.08
/ avg req/sec	620.44	607.78	⚠️ -12.66
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	2.052	2.127	⚠️ +0.07
/error-in-render avg req/sec	1218.03	1175.59	⚠️ -42.44

Client Bundles (main, webpack, commons)

	vercel/next.js canary	vercel/next.js add-warning-sizes-prop-incorrect	Change
450.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42.2 kB	42.2 kB	✓
main-HASH.js gzip	28 kB	28 kB	✓
webpack-HASH.js gzip	1.45 kB	1.45 kB	✓
Overall change	71.9 kB	71.9 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js add-warning-sizes-prop-incorrect	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js add-warning-sizes-prop-incorrect	Change
_app-HASH.js gzip	1.23 kB	1.23 kB	✓
_error-HASH.js gzip	194 B	194 B	✓
amp-HASH.js gzip	312 B	312 B	✓
css-HASH.js gzip	327 B	327 B	✓
dynamic-HASH.js gzip	2.38 kB	2.38 kB	✓
head-HASH.js gzip	350 B	350 B	✓
hooks-HASH.js gzip	635 B	635 B	✓
image-HASH.js gzip	4.44 kB	4.44 kB	✓
index-HASH.js gzip	263 B	263 B	✓
link-HASH.js gzip	1.87 kB	1.87 kB	✓
routerDirect..HASH.js gzip	321 B	321 B	✓
script-HASH.js gzip	383 B	383 B	✓
withRouter-HASH.js gzip	318 B	318 B	✓
334f979574ae..6f4.css gzip	106 B	106 B	✓
Overall change	13.1 kB	13.1 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js add-warning-sizes-prop-incorrect	Change
_buildManifest.js gzip	459 B	459 B	✓
Overall change	459 B	459 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js add-warning-sizes-prop-incorrect	Change
index.html gzip	521 B	521 B	✓
link.html gzip	534 B	534 B	✓
withRouter.html gzip	515 B	515 B	✓
Overall change	1.57 kB	1.57 kB	✓

---

Default Build with SWC (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js add-warning-sizes-prop-incorrect	Change
buildDuration	25.5s	25.2s	-342ms
buildDurationCached	4.6s	4.5s	-82ms
nodeModulesSize	332 MB	332 MB	⚠️ +370 B

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	vercel/next.js add-warning-sizes-prop-incorrect	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.922	3.948	⚠️ +0.03
/ avg req/sec	637.41	633.2	⚠️ -4.21
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.952	1.99	⚠️ +0.04
/error-in-render avg req/sec	1280.43	1256.17	⚠️ -24.26

Client Bundles (main, webpack, commons)

	vercel/next.js canary	vercel/next.js add-warning-sizes-prop-incorrect	Change
450.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42.3 kB	42.3 kB	✓
main-HASH.js gzip	28.2 kB	28.2 kB	✓
webpack-HASH.js gzip	1.43 kB	1.43 kB	✓
Overall change	72.1 kB	72.1 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js add-warning-sizes-prop-incorrect	Change
polyfills-HASH.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js add-warning-sizes-prop-incorrect	Change
_app-HASH.js gzip	1.22 kB	1.22 kB	✓
_error-HASH.js gzip	180 B	180 B	✓
amp-HASH.js gzip	305 B	305 B	✓
css-HASH.js gzip	321 B	321 B	✓
dynamic-HASH.js gzip	2.38 kB	2.38 kB	✓
head-HASH.js gzip	342 B	342 B	✓
hooks-HASH.js gzip	622 B	622 B	✓
image-HASH.js gzip	4.46 kB	4.46 kB	✓
index-HASH.js gzip	256 B	256 B	✓
link-HASH.js gzip	1.91 kB	1.91 kB	✓
routerDirect..HASH.js gzip	314 B	314 B	✓
script-HASH.js gzip	375 B	375 B	✓
withRouter-HASH.js gzip	309 B	309 B	✓
334f979574ae..6f4.css gzip	106 B	106 B	✓
Overall change	13.1 kB	13.1 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js add-warning-sizes-prop-incorrect	Change
_buildManifest.js gzip	460 B	460 B	✓
Overall change	460 B	460 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js add-warning-sizes-prop-incorrect	Change
index.html gzip	521 B	521 B	✓
link.html gzip	534 B	534 B	✓
withRouter.html gzip	515 B	515 B	✓
Overall change	1.57 kB	1.57 kB	✓

Commit: b927401

[jakearchibald]

It won’t always have media conditions, for example sizes="50vw".

Right, the last size doesn't need a media condition, but the rest do.

Is there a standard way to parse the “sizes” string to see if it’s valid? Perhaps there’s a Web API or npm package we could use to help the user out because it doesn’t seem like the browser provides any warnings for invalid string.

The standard way is https://html.spec.whatwg.org/multipage/images.html#parsing-a-sizes-attribute. I'm not aware of a JS implementation, but I haven't looked.