Add fallback for <Image /> component when JavaScript is disabled in browser #19052

brunocrosier · 2020-11-11T12:48:09Z

The current <Image /> component does not fallback gracefully when JavaScript is disabled in the client / browser.

You can test this with the official Next/Image example, by disabling JavaScript in the browser's DevTools. Video demo: https://streamable.com/frkvw9

This PR aims to fix this behaviour by using <noscript></noscript> tags to conditionally display a standard <img> element using the props passed to <Image /> when JavaScript is disabled.

For browser sessions where JavaScript is enabled, this will not cause an increase in network requests, so there should be no downside.

One area where this PR is a bit "hacky" is that it uses a negative margin-top to counteract sizerStyle.paddingTop. From what I can tell, sizerStyle.paddingTop is generated on the server side, where we can not know ahead of time whether JavaScript is enabled in the browser - hence why I've opted for this solution.

Fixes #19223
Fixes #21214

samthomson · 2021-01-04T16:16:19Z

Hey, why was my comment asking the status of the PR marked as spam? automated or? This PR fixes an issue which I also have, hence my interest following the PR.

brunocrosier · 2021-01-04T20:56:13Z

Hey @rauchg and @Timer , is there anything that I can do to help this PR get merged? I definitely think it's a big accessibility issue that the <Image /> component doesn't work when javascript is disabled in the browser.

The official Next.js docs say that "the Next.js Image Component, next/image, is an extension of the HTML element, evolved for the modern web."

In order for the above to be true, I believe that the <Image /> component must fall back to an <img> element when javascript is disabled in the browser.

Happy to help improve the PR ! Would be good to have some feedback on the topic in general, as I think there are many Next.js users who assume that <Image /> falls back to <img> because of the official docs

atcastle · 2021-01-15T22:30:40Z

Hi @brunocrosier if you can bring this PR up to date, I'll work on getting it merged. I've created a new issue to track that, as well as to add the loading="lazy" attribute in the noscript case.

packages/next/client/image.tsx

brunocrosier · 2021-01-16T13:31:26Z

Thanks @styfle - I've tested all your suggestions locally and they work perfectly!

From where I'm standing, this is good to go - what do you think @atcastle ?

styfle · 2021-01-16T20:00:27Z

@brunocrosier Please push your changes so we can review 🙂

packages/next/client/image.tsx

styfle · 2021-01-17T21:27:52Z

packages/next/client/image.tsx

+          decoding="async"
+          style={{ ...imgStyle, visibility: 'visible' }}
+          className={className}
+          ref={thisEl}


Is the ref still needed?

you're right - the ref seems to only be used for the observer inside useEffect, which won't run when js is disabled, so it's not necessary

ijjk · 2021-01-17T23:39:28Z

Failing test suites

Commit: 734f88d

test/unit/image-rendering.unit.test.js

Image rendering > should render Image on its own

Expand output

● Image rendering › should render Image on its own

expect(received).toContain(expected) // indexOf

Expected substring: "/_next/image?url=%2Ftest.png"
Received string:    "/test.png"

  18 |     const img = $('#unit-image')
  19 |     expect(img.attr('id')).toBe('unit-image')
> 20 |     expect(img.attr('src')).toContain('/_next/image?url=%2Ftest.png')
     |                             ^
  21 |     expect(img.attr('srcset')).toContain('/_next/image?url=%2Ftest.png')
  22 |   })
  23 | })

  at Object.<anonymous> (unit/image-rendering.unit.test.js:20:29)

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

Image Component Tests > dev mode > should not pass through user-provided srcset (causing a flash)
Image Component Tests > server mode > should not pass through user-provided srcset (causing a flash)
Image Component Tests > serverless mode > should not pass through user-provided srcset (causing a flash)

Expand output

● Image Component Tests › dev mode › should not pass through user-provided srcset (causing a flash)

expect(received).toBe(expected) // Object.is equality

Expected: 1
Received: 2

  162 | 
  163 |     const els = [].slice.apply($html('img'))
> 164 |     expect(els.length).toBe(1)
      |                        ^
  165 | 
  166 |     const [el] = els
  167 |     expect(el.attribs.src).toBeDefined()

  at Object.<anonymous> (integration/image-component/default/test/index.test.js:164:24)

● Image Component Tests › server mode › should not pass through user-provided srcset (causing a flash)

expect(received).toBe(expected) // Object.is equality

Expected: 1
Received: 2

  162 | 
  163 |     const els = [].slice.apply($html('img'))
> 164 |     expect(els.length).toBe(1)
      |                        ^
  165 | 
  166 |     const [el] = els
  167 |     expect(el.attribs.src).toBeDefined()

  at Object.<anonymous> (integration/image-component/default/test/index.test.js:164:24)

● Image Component Tests › serverless mode › should not pass through user-provided srcset (causing a flash)

expect(received).toBe(expected) // Object.is equality

Expected: 1
Received: 2

  162 | 
  163 |     const els = [].slice.apply($html('img'))
> 164 |     expect(els.length).toBe(1)
      |                        ^
  165 | 
  166 |     const [el] = els
  167 |     expect(el.attribs.src).toBeDefined()

  at Object.<anonymous> (integration/image-component/default/test/index.test.js:164:24)
      at runMicrotasks (<anonymous>)

ijjk · 2021-01-17T23:43:16Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	Change
buildDuration	8.2s	8.4s	⚠️ +218ms
nodeModulesSize	72.9 MB	77.6 MB	⚠️ +4.68 MB

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	Change
/ failed reqs	0	0	✓
/ total time (seconds)	1.674	1.842	⚠️ +0.17
/ avg req/sec	1493.2	1357	⚠️ -136.2
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.046	1.102	⚠️ +0.06
/error-in-render avg req/sec	2389.01	2269.43	⚠️ -119.58

Client Bundles (main, webpack, commons)

	vercel/next.js canary	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	Change
677f882d2ed8..43e3.js gzip	13.1 kB	13.1 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-9e3e4e6..2023.js gzip	6.63 kB	6.63 kB	✓
webpack-50be..df5b.js gzip	751 B	751 B	✓
Overall change	59.4 kB	59.4 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	Change
polyfills-af..9390.js gzip	31.3 kB	31.3 kB	✓
Overall change	31.3 kB	31.3 kB	✓

Client Pages

	vercel/next.js canary	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	Change
_app-2a09aa2..4a98.js gzip	1.28 kB	1.28 kB	✓
_error-8b758..aef6.js gzip	3.46 kB	3.46 kB	✓
hooks-c71ae4..70cd.js gzip	887 B	887 B	✓
index-bbee2f..528b.js gzip	227 B	227 B	✓
link-7faf09b..eba4.js gzip	1.64 kB	1.64 kB	✓
routerDirect..bf84.js gzip	303 B	303 B	✓
withRouter-a..5826.js gzip	302 B	302 B	✓
Overall change	8.09 kB	8.09 kB	✓

Client Build Manifests

	vercel/next.js canary	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	Change
_buildManifest.js gzip	321 B	321 B	✓
Overall change	321 B	321 B	✓

Rendered Page Sizes

	vercel/next.js canary	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	Change
index.html gzip	614 B	614 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

General Overall increase ⚠️

	vercel/next.js canary	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	Change
buildDuration	10.8s	9.7s	-1s
nodeModulesSize	77.6 MB	77.6 MB	⚠️ +732 B

Client Bundles (main, webpack, commons)

	vercel/next.js canary	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	Change
677f882d2ed8..43e3.js gzip	13.1 kB	13.1 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-9e3e4e6..2023.js gzip	6.63 kB	6.63 kB	✓
webpack-50be..df5b.js gzip	751 B	751 B	✓
Overall change	59.4 kB	59.4 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	Change
polyfills-af..9390.js gzip	31.3 kB	31.3 kB	✓
Overall change	31.3 kB	31.3 kB	✓

Client Pages

	vercel/next.js canary	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	Change
_app-2a09aa2..4a98.js gzip	1.28 kB	1.28 kB	✓
_error-8b758..aef6.js gzip	3.46 kB	3.46 kB	✓
hooks-c71ae4..70cd.js gzip	887 B	887 B	✓
index-bbee2f..528b.js gzip	227 B	227 B	✓
link-7faf09b..eba4.js gzip	1.64 kB	1.64 kB	✓
routerDirect..bf84.js gzip	303 B	303 B	✓
withRouter-a..5826.js gzip	302 B	302 B	✓
Overall change	8.09 kB	8.09 kB	✓

Client Build Manifests

	vercel/next.js canary	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	Change
_buildManifest.js gzip	321 B	321 B	✓
Overall change	321 B	321 B	✓

Serverless bundles

	vercel/next.js canary	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	Change
_error.js	1 MB	1 MB	✓
404.html	2.67 kB	2.67 kB	✓
hooks.html	1.92 kB	1.92 kB	✓
index.js	1 MB	1 MB	✓
link.js	1.06 MB	1.06 MB	✓
routerDirect.js	1.05 MB	1.05 MB	✓
withRouter.js	1.05 MB	1.05 MB	✓
Overall change	5.18 MB	5.18 MB	✓

Commit: 734f88d

ijjk · 2021-03-17T22:44:56Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	Change
buildDuration	11.8s	11.7s	-86ms
nodeModulesSize	43.5 MB	43.6 MB	⚠️ +90.8 kB

Page Load Tests Overall increase ✓

	vercel/next.js canary	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.005	2.047	⚠️ +0.04
/ avg req/sec	1246.69	1221.45	⚠️ -25.24
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.253	1.22	-0.03
/error-in-render avg req/sec	1995.45	2049.85	+54.4

Client Bundles (main, webpack, commons)

	vercel/next.js canary	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	Change
677f882d2ed8..a2e7.js gzip	13.4 kB	13.4 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-HASH.js gzip	7.14 kB	7.14 kB	✓
webpack-HASH.js gzip	751 B	751 B	✓
Overall change	60.3 kB	60.3 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	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	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	Change
_app-fde3324..9dd1.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-e6cee42..49eb.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	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	Change
_buildManifest.js gzip	346 B	346 B	✓
Overall change	346 B	346 B	✓

Rendered Page Sizes

	vercel/next.js canary	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	Change
index.html gzip	614 B	614 B	✓
link.html gzip	622 B	622 B	✓
withRouter.html gzip	609 B	609 B	✓
Overall change	1.84 kB	1.84 kB	✓

Serverless Mode

General Overall increase ⚠️

	vercel/next.js canary	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	Change
buildDuration	14s	13.8s	-179ms
nodeModulesSize	43.5 MB	43.6 MB	⚠️ +90.8 kB

Client Bundles (main, webpack, commons)

	vercel/next.js canary	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	Change
677f882d2ed8..a2e7.js gzip	13.4 kB	13.4 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-HASH.js gzip	7.14 kB	7.14 kB	✓
webpack-HASH.js gzip	751 B	751 B	✓
Overall change	60.3 kB	60.3 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	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	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	Change
_app-fde3324..9dd1.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-e6cee42..49eb.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	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	Change
_buildManifest.js gzip	346 B	346 B	✓
Overall change	346 B	346 B	✓

Serverless bundles

	vercel/next.js canary	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	Change
_error.js	1.02 MB	1.02 MB	✓
404.html	2.67 kB	2.67 kB	✓
500.html	2.65 kB	2.65 kB	✓
amp.amp.html	10.6 kB	10.6 kB	✓
amp.html	1.86 kB	1.86 kB	✓
hooks.html	1.92 kB	1.92 kB	✓
index.js	1.02 MB	1.02 MB	✓
link.js	1.08 MB	1.08 MB	✓
routerDirect.js	1.07 MB	1.07 MB	✓
withRouter.js	1.07 MB	1.07 MB	✓
Overall change	5.27 MB	5.27 MB	✓

Webpack 5 Mode (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	Change
buildDuration	13.8s	13.7s	-57ms
nodeModulesSize	43.5 MB	43.6 MB	⚠️ +90.8 kB

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.01	2.047	⚠️ +0.04
/ avg req/sec	1243.83	1221.59	⚠️ -22.24
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.3	1.303	0
/error-in-render avg req/sec	1923.64	1919.31	⚠️ -4.33

Client Bundles (main, webpack, commons)

	vercel/next.js canary	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	Change
597-12fee761..569d.js gzip	13.3 kB	13.3 kB	✓
framework.HASH.js gzip	39.3 kB	39.3 kB	✓
main-HASH.js gzip	7.1 kB	7.1 kB	✓
webpack-HASH.js gzip	993 B	993 B	✓
Overall change	60.7 kB	60.7 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	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	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	Change
_app-d0eb668..79ef.js gzip	1.28 kB	1.28 kB	✓
_error-d12ff..6063.js gzip	3.4 kB	3.4 kB	✓
amp-127483e4..9cd8.js gzip	560 B	560 B	✓
hooks-75994b..62d3.js gzip	924 B	924 B	✓
index-ac1ee6..819e.js gzip	243 B	243 B	✓
link-1cd4709..71e5.js gzip	1.65 kB	1.65 kB	✓
routerDirect..4d90.js gzip	333 B	333 B	✓
withRouter-0..60b0.js gzip	329 B	329 B	✓
Overall change	8.72 kB	8.72 kB	✓

Client Build Manifests

	vercel/next.js canary	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	Change
_buildManifest.js gzip	324 B	324 B	✓
Overall change	324 B	324 B	✓

Rendered Page Sizes

	vercel/next.js canary	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	Change
index.html gzip	587 B	587 B	✓
link.html gzip	594 B	594 B	✓
withRouter.html gzip	582 B	582 B	✓
Overall change	1.76 kB	1.76 kB	✓

Diffs

Diff for index.html

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

Diff for link.html

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

Diff for withRouter.html

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

Commit: 78246b9

ijjk · 2021-03-17T22:50:07Z

Failing test suites

Commit: 78246b9

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

Image Component Tests > dev mode > should not pass through user-provided srcset (causing a flash)
Image Component Tests > server mode > should not pass through user-provided srcset (causing a flash)
Image Component Tests > serverless mode > should not pass through user-provided srcset (causing a flash)

Expand output

● Image Component Tests › dev mode › should not pass through user-provided srcset (causing a flash)

expect(received).toBeDefined()

Received: undefined

  167 |     expect(noscriptEl.attribs.src).toBeDefined()
  168 |     expect(noscriptEl.attribs.srcset).toBeDefined()
> 169 |     expect(noscriptEl.attribs.srcSet).toBeDefined()
      |                                       ^
  170 |     expect(el.attribs.src).toBeDefined()
  171 |     expect(el.attribs.srcset).toBeUndefined()
  172 |     expect(el.attribs.srcSet).toBeUndefined()

  at Object.<anonymous> (integration/image-component/default/test/index.test.js:169:39)

● Image Component Tests › server mode › should not pass through user-provided srcset (causing a flash)

expect(received).toBeDefined()

Received: undefined

  167 |     expect(noscriptEl.attribs.src).toBeDefined()
  168 |     expect(noscriptEl.attribs.srcset).toBeDefined()
> 169 |     expect(noscriptEl.attribs.srcSet).toBeDefined()
      |                                       ^
  170 |     expect(el.attribs.src).toBeDefined()
  171 |     expect(el.attribs.srcset).toBeUndefined()
  172 |     expect(el.attribs.srcSet).toBeUndefined()

  at Object.<anonymous> (integration/image-component/default/test/index.test.js:169:39)

● Image Component Tests › serverless mode › should not pass through user-provided srcset (causing a flash)

expect(received).toBeDefined()

Received: undefined

  167 |     expect(noscriptEl.attribs.src).toBeDefined()
  168 |     expect(noscriptEl.attribs.srcset).toBeDefined()
> 169 |     expect(noscriptEl.attribs.srcSet).toBeDefined()
      |                                       ^
  170 |     expect(el.attribs.src).toBeDefined()
  171 |     expect(el.attribs.srcset).toBeUndefined()
  172 |     expect(el.attribs.srcSet).toBeUndefined()

  at Object.<anonymous> (integration/image-component/default/test/index.test.js:169:39)
      at runMicrotasks (<anonymous>)

ijjk · 2021-03-17T23:03:05Z

Stats from current PR

Default Server Mode (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	Change
buildDuration	12.1s	12.1s	-5ms
nodeModulesSize	43.6 MB	43.6 MB	⚠️ +1.13 kB

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.073	2.125	⚠️ +0.05
/ avg req/sec	1206.06	1176.67	⚠️ -29.39
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.252	1.317	⚠️ +0.06
/error-in-render avg req/sec	1996.13	1897.72	⚠️ -98.41

Client Bundles (main, webpack, commons)

	vercel/next.js canary	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	Change
677f882d2ed8..a2e7.js gzip	13.4 kB	13.4 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-HASH.js gzip	7.14 kB	7.14 kB	✓
webpack-HASH.js gzip	751 B	751 B	✓
Overall change	60.3 kB	60.3 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	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	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	Change
_app-fde3324..9dd1.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-e6cee42..49eb.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	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	Change
_buildManifest.js gzip	346 B	346 B	✓
Overall change	346 B	346 B	✓

Rendered Page Sizes

	vercel/next.js canary	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	Change
index.html gzip	614 B	614 B	✓
link.html gzip	622 B	622 B	✓
withRouter.html gzip	609 B	609 B	✓
Overall change	1.84 kB	1.84 kB	✓

Serverless Mode

General Overall increase ⚠️

	vercel/next.js canary	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	Change
buildDuration	14s	13.6s	-421ms
nodeModulesSize	43.6 MB	43.6 MB	⚠️ +1.13 kB

Client Bundles (main, webpack, commons)

	vercel/next.js canary	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	Change
677f882d2ed8..a2e7.js gzip	13.4 kB	13.4 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-HASH.js gzip	7.14 kB	7.14 kB	✓
webpack-HASH.js gzip	751 B	751 B	✓
Overall change	60.3 kB	60.3 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	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	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	Change
_app-fde3324..9dd1.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-e6cee42..49eb.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	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	Change
_buildManifest.js gzip	346 B	346 B	✓
Overall change	346 B	346 B	✓

Serverless bundles

	vercel/next.js canary	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	Change
_error.js	1.02 MB	1.02 MB	✓
404.html	2.67 kB	2.67 kB	✓
500.html	2.65 kB	2.65 kB	✓
amp.amp.html	10.6 kB	10.6 kB	✓
amp.html	1.86 kB	1.86 kB	✓
hooks.html	1.92 kB	1.92 kB	✓
index.js	1.02 MB	1.02 MB	✓
link.js	1.08 MB	1.08 MB	✓
routerDirect.js	1.07 MB	1.07 MB	✓
withRouter.js	1.07 MB	1.07 MB	✓
Overall change	5.27 MB	5.27 MB	✓

Webpack 5 Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	Change
buildDuration	14.2s	14.4s	⚠️ +197ms
nodeModulesSize	43.6 MB	43.6 MB	⚠️ +1.13 kB

Page Load Tests Overall increase ✓

	vercel/next.js canary	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.083	2.055	-0.03
/ avg req/sec	1200.33	1216.59	+16.26
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.272	1.273	0
/error-in-render avg req/sec	1965.91	1963.5	⚠️ -2.41

Client Bundles (main, webpack, commons)

	vercel/next.js canary	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	Change
597-12fee761..569d.js gzip	13.3 kB	13.3 kB	✓
framework.HASH.js gzip	39.3 kB	39.3 kB	✓
main-HASH.js gzip	7.1 kB	7.1 kB	✓
webpack-HASH.js gzip	993 B	993 B	✓
Overall change	60.7 kB	60.7 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	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	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	Change
_app-d0eb668..79ef.js gzip	1.28 kB	1.28 kB	✓
_error-d12ff..6063.js gzip	3.4 kB	3.4 kB	✓
amp-127483e4..9cd8.js gzip	560 B	560 B	✓
hooks-75994b..62d3.js gzip	924 B	924 B	✓
index-ac1ee6..819e.js gzip	243 B	243 B	✓
link-1cd4709..71e5.js gzip	1.65 kB	1.65 kB	✓
routerDirect..4d90.js gzip	333 B	333 B	✓
withRouter-0..60b0.js gzip	329 B	329 B	✓
Overall change	8.72 kB	8.72 kB	✓

Client Build Manifests

	vercel/next.js canary	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	Change
_buildManifest.js gzip	324 B	324 B	✓
Overall change	324 B	324 B	✓

Rendered Page Sizes

	vercel/next.js canary	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	Change
index.html gzip	587 B	587 B	✓
link.html gzip	594 B	594 B	✓
withRouter.html gzip	582 B	582 B	✓
Overall change	1.76 kB	1.76 kB	✓

Diffs

Diff for index.html

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

Diff for link.html

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

Diff for withRouter.html

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

Commit: b54cd22

brunocrosier · 2021-03-18T00:27:47Z

I've updated the tests, they seem to be passing now. Unfortunately I don't have too much experience with writing tests, so I'm sorry if they're not up to scratch!

ijjk · 2021-03-18T14:09:52Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	Change
buildDuration	11.1s	11.3s	⚠️ +252ms
nodeModulesSize	43.6 MB	43.6 MB	⚠️ +1.23 kB

Page Load Tests Overall increase ✓

	vercel/next.js canary	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.033	2.011	-0.02
/ avg req/sec	1229.77	1243.19	+13.42
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.393	1.377	-0.02
/error-in-render avg req/sec	1794.66	1815.43	+20.77

Client Bundles (main, webpack, commons)

	vercel/next.js canary	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	Change
677f882d2ed8..a2e7.js gzip	13.4 kB	13.4 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-HASH.js gzip	7.14 kB	7.14 kB	✓
webpack-HASH.js gzip	751 B	751 B	✓
Overall change	60.3 kB	60.3 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	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	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	Change
_app-fde3324..9dd1.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-e6cee42..49eb.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	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	Change
_buildManifest.js gzip	346 B	346 B	✓
Overall change	346 B	346 B	✓

Rendered Page Sizes

	vercel/next.js canary	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	Change
index.html gzip	612 B	612 B	✓
link.html gzip	621 B	621 B	✓
withRouter.html gzip	607 B	607 B	✓
Overall change	1.84 kB	1.84 kB	✓

Serverless Mode

General Overall increase ⚠️

	vercel/next.js canary	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	Change
buildDuration	12.9s	12.9s	⚠️ +88ms
nodeModulesSize	43.6 MB	43.6 MB	⚠️ +1.23 kB

Client Bundles (main, webpack, commons)

	vercel/next.js canary	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	Change
677f882d2ed8..a2e7.js gzip	13.4 kB	13.4 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-HASH.js gzip	7.14 kB	7.14 kB	✓
webpack-HASH.js gzip	751 B	751 B	✓
Overall change	60.3 kB	60.3 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	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	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	Change
_app-fde3324..9dd1.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-e6cee42..49eb.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	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	Change
_buildManifest.js gzip	346 B	346 B	✓
Overall change	346 B	346 B	✓

Serverless bundles

	vercel/next.js canary	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	Change
_error.js	1.02 MB	1.02 MB	✓
404.html	2.67 kB	2.67 kB	✓
500.html	2.65 kB	2.65 kB	✓
amp.amp.html	10.6 kB	10.6 kB	✓
amp.html	1.86 kB	1.86 kB	✓
hooks.html	1.92 kB	1.92 kB	✓
index.js	1.02 MB	1.02 MB	✓
link.js	1.08 MB	1.08 MB	✓
routerDirect.js	1.07 MB	1.07 MB	✓
withRouter.js	1.07 MB	1.07 MB	✓
Overall change	5.27 MB	5.27 MB	✓

Webpack 5 Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	Change
buildDuration	13.3s	13.3s	⚠️ +36ms
nodeModulesSize	43.6 MB	43.6 MB	⚠️ +1.23 kB

Page Load Tests Overall increase ✓

	vercel/next.js canary	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.037	2.023	-0.01
/ avg req/sec	1227.32	1235.59	+8.27
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.378	1.377	0
/error-in-render avg req/sec	1813.98	1815.82	+1.84

Client Bundles (main, webpack, commons)

	vercel/next.js canary	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	Change
597-12fee761..569d.js gzip	13.3 kB	13.3 kB	✓
framework.HASH.js gzip	39.3 kB	39.3 kB	✓
main-HASH.js gzip	7.1 kB	7.1 kB	✓
webpack-HASH.js gzip	993 B	993 B	✓
Overall change	60.7 kB	60.7 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	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	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	Change
_app-d0eb668..79ef.js gzip	1.28 kB	1.28 kB	✓
_error-d12ff..6063.js gzip	3.4 kB	3.4 kB	✓
amp-127483e4..9cd8.js gzip	560 B	560 B	✓
hooks-75994b..62d3.js gzip	924 B	924 B	✓
index-ac1ee6..819e.js gzip	243 B	243 B	✓
link-1cd4709..71e5.js gzip	1.65 kB	1.65 kB	✓
routerDirect..4d90.js gzip	333 B	333 B	✓
withRouter-0..60b0.js gzip	329 B	329 B	✓
Overall change	8.72 kB	8.72 kB	✓

Client Build Manifests

	vercel/next.js canary	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	Change
_buildManifest.js gzip	324 B	324 B	✓
Overall change	324 B	324 B	✓

Rendered Page Sizes

	vercel/next.js canary	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	Change
index.html gzip	588 B	588 B	✓
link.html gzip	595 B	595 B	✓
withRouter.html gzip	581 B	581 B	✓
Overall change	1.76 kB	1.76 kB	✓

Diffs

Diff for index.html

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

Diff for link.html

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

Diff for withRouter.html

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

Commit: 9c24d3b

brunocrosier · 2021-03-23T10:27:08Z

Any chance we could get this merged ? @timneutkens @ijjk @divmain @lfades 🙏

styfle · 2021-03-23T19:02:06Z

packages/next/client/image.tsx

+            src={src}
+            decoding="async"
+            sizes={sizes}
+            style={{ ...imgStyle, visibility: 'inherit' }}


I think we can remove visibility since it was removed in #23278

cc @shuding

ijjk · 2021-03-23T19:13:39Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	Change
buildDuration	13s	13s	-10ms
nodeModulesSize	43.6 MB	43.6 MB	⚠️ +1.25 kB

Page Load Tests Overall increase ✓

	vercel/next.js canary	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.221	2.209	-0.01
/ avg req/sec	1125.4	1131.7	+6.3
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.445	1.375	-0.07
/error-in-render avg req/sec	1729.97	1818.52	+88.55

Client Bundles (main, webpack, commons)

	vercel/next.js canary	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	Change
677f882d2ed8..a2e7.js gzip	13.4 kB	13.4 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-HASH.js gzip	7.14 kB	7.14 kB	✓
webpack-HASH.js gzip	751 B	751 B	✓
Overall change	60.3 kB	60.3 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	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	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	Change
_app-fde3324..9dd1.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-e6cee42..49eb.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	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	Change
_buildManifest.js gzip	346 B	346 B	✓
Overall change	346 B	346 B	✓

Rendered Page Sizes

	vercel/next.js canary	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	Change
index.html gzip	612 B	612 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

General Overall increase ⚠️

	vercel/next.js canary	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	Change
buildDuration	14.7s	14.8s	⚠️ +133ms
nodeModulesSize	43.6 MB	43.6 MB	⚠️ +1.25 kB

Client Bundles (main, webpack, commons)

	vercel/next.js canary	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	Change
677f882d2ed8..a2e7.js gzip	13.4 kB	13.4 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-HASH.js gzip	7.14 kB	7.14 kB	✓
webpack-HASH.js gzip	751 B	751 B	✓
Overall change	60.3 kB	60.3 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	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	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	Change
_app-fde3324..9dd1.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-e6cee42..49eb.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	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	Change
_buildManifest.js gzip	346 B	346 B	✓
Overall change	346 B	346 B	✓

Serverless bundles

	vercel/next.js canary	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	Change
_error.js	1.02 MB	1.02 MB	✓
404.html	2.67 kB	2.67 kB	✓
500.html	2.65 kB	2.65 kB	✓
amp.amp.html	10.6 kB	10.6 kB	✓
amp.html	1.86 kB	1.86 kB	✓
hooks.html	1.92 kB	1.92 kB	✓
index.js	1.02 MB	1.02 MB	✓
link.js	1.08 MB	1.08 MB	✓
routerDirect.js	1.07 MB	1.07 MB	✓
withRouter.js	1.07 MB	1.07 MB	✓
Overall change	5.27 MB	5.27 MB	✓

Webpack 5 Mode (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	Change
buildDuration	14.4s	14.8s	⚠️ +367ms
nodeModulesSize	43.6 MB	43.6 MB	⚠️ +1.25 kB

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.183	2.102	-0.08
/ avg req/sec	1145.26	1189.35	+44.09
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.335	1.432	⚠️ +0.1
/error-in-render avg req/sec	1872.28	1745.98	⚠️ -126.3

Client Bundles (main, webpack, commons)

	vercel/next.js canary	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	Change
597-12fee761..569d.js gzip	13.3 kB	13.3 kB	✓
framework.HASH.js gzip	39.3 kB	39.3 kB	✓
main-HASH.js gzip	7.11 kB	7.11 kB	✓
webpack-HASH.js gzip	993 B	993 B	✓
Overall change	60.7 kB	60.7 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	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	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	Change
_app-b5edc60..e5c2.js gzip	1.29 kB	1.29 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-3631090..4cab.js gzip	1.65 kB	1.65 kB	✓
routerDirect..20d7.js gzip	328 B	328 B	✓
withRouter-b..a4b9.js gzip	326 B	326 B	✓
Overall change	8.72 kB	8.72 kB	✓

Client Build Manifests

	vercel/next.js canary	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	Change
_buildManifest.js gzip	325 B	325 B	✓
Overall change	325 B	325 B	✓

Rendered Page Sizes

	vercel/next.js canary	brunocrosier/next.js IMAGE_NO_JS_FALLBACK	Change
index.html gzip	585 B	585 B	✓
link.html gzip	594 B	594 B	✓
withRouter.html gzip	582 B	582 B	✓
Overall change	1.76 kB	1.76 kB	✓

Diffs

Diff for index.html

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

Diff for link.html

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

Diff for withRouter.html

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

Commit: d7480e1

This is a follow-up PR of #19052, where `visibility: inherit` was mistakenly added back. It was removed in #23278. ## Bug - [ ] Related issues linked using `fixes #number` - [ ] 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

…rowser (vercel#19052) The current `<Image />` component does not fallback gracefully when JavaScript is disabled in the client / browser. You can test this with the [official Next/Image example](https://csb-4k0kr-p8ya8f304.vercel.app/), by disabling JavaScript in the browser's DevTools. Video demo: https://streamable.com/frkvw9 This PR aims to fix this behaviour by using `<noscript></noscript>` tags to conditionally display a standard `<img>` element using the `props` passed to `<Image />` when JavaScript is disabled. For browser sessions where JavaScript is enabled, this will not cause an increase in network requests, so there should be no downside. One area where this PR is a bit "hacky" is that it uses a negative `margin-top` to counteract `sizerStyle.paddingTop`. From what I can tell, `sizerStyle.paddingTop` is generated on the server side, where we can not know ahead of time whether JavaScript is enabled in the browser - hence why I've opted for this solution. Fixes vercel#19223 Fixes vercel#21214

This is a follow-up PR of vercel#19052, where `visibility: inherit` was mistakenly added back. It was removed in vercel#23278. ## Bug - [ ] Related issues linked using `fixes #number` - [ ] 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

…rowser (vercel#19052) The current `<Image />` component does not fallback gracefully when JavaScript is disabled in the client / browser. You can test this with the [official Next/Image example](https://csb-4k0kr-p8ya8f304.vercel.app/), by disabling JavaScript in the browser's DevTools. Video demo: https://streamable.com/frkvw9 This PR aims to fix this behaviour by using `<noscript></noscript>` tags to conditionally display a standard `<img>` element using the `props` passed to `<Image />` when JavaScript is disabled. For browser sessions where JavaScript is enabled, this will not cause an increase in network requests, so there should be no downside. One area where this PR is a bit "hacky" is that it uses a negative `margin-top` to counteract `sizerStyle.paddingTop`. From what I can tell, `sizerStyle.paddingTop` is generated on the server side, where we can not know ahead of time whether JavaScript is enabled in the browser - hence why I've opted for this solution. Fixes vercel#19223 Fixes vercel#21214

This is a follow-up PR of vercel#19052, where `visibility: inherit` was mistakenly added back. It was removed in vercel#23278. ## Bug - [ ] Related issues linked using `fixes #number` - [ ] 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

JGeis13 · 2021-07-19T21:53:23Z

Generally, this is great and thank you for it. However, it seems that when I use "placeholder='blur'" it doesn't hide the original and I'm left with a blurry image on top of the img I want within noscript.

I can manually hide it with css but it would be nice if it worked out of the box. I'm new to NextJS so I might be missing something obvious.

styfle · 2021-07-19T22:41:02Z

Thanks, this will be fixed in PR #27311

We shouldn't be setting `placeholder=blur` styles when JS is disabled because we'll have no way to know when the image is loaded and it will be stuck in blur permanently as mentioned in [this comment](#19052 (comment)). This PR avoids blur styles on the `<noscript>` version of the image.

Telsenome · 2021-07-21T15:48:06Z

In which nextJS version was this added? It doesn't seem to work in the one we're using.

ijjk · 2021-07-21T16:17:32Z

@Lewom This PR is available in v10.0.10-canary.8 and the fix mentioned in #27311 is available in v11.0.2-canary.18

Telsenome · 2021-07-21T18:30:22Z

@ijjk Trying to understand how things work here. So if we upgrade to the latest release v11.0.1 it won't have this fix in it? Only if we upgrade to v10.0.10-canary.8? Or will all releases after v10.0.10-canary.8 have #19052 in it?

ijjk · 2021-07-21T18:49:03Z

Releases after that canary version will include it so it should be present in v11.0.1

Telsenome · 2021-07-21T18:54:50Z

Thank you! Much appreciated

We shouldn't be setting `placeholder=blur` styles when JS is disabled because we'll have no way to know when the image is loaded and it will be stuck in blur permanently as mentioned in [this comment](vercel#19052 (comment)). This PR avoids blur styles on the `<noscript>` version of the image.

add img fallback when no javascript in browser

5f177ad

brunocrosier requested review from ijjk, lfades, Timer and timneutkens as code owners November 11, 2020 12:48

ijjk added the type: next label Nov 11, 2020

formatting

8eaa8b2

lachlanjc mentioned this pull request Nov 18, 2020

Next/image component does not display image when JS is disabled #19223

Closed

This comment has been minimized.

Sign in to view

atcastle mentioned this pull request Jan 15, 2021

Support noscript in the image component with lazy loading support #21214

Closed

styfle reviewed Jan 15, 2021

View reviewed changes

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

styfle reviewed Jan 15, 2021

View reviewed changes

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

apply styfle fixes

e9135c4

styfle reviewed Jan 16, 2021

View reviewed changes

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

styfle reviewed Jan 16, 2021

View reviewed changes

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

styfle reviewed Jan 16, 2021

View reviewed changes

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

remove fragment + use imgStyle

a0ff7ca

styfle reviewed Jan 16, 2021

View reviewed changes

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

styfle reviewed Jan 16, 2021

View reviewed changes

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

visibility: 'visible' on <noscript> + styfle fixes

be37666

styfle reviewed Jan 17, 2021

View reviewed changes

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

styfle reviewed Jan 17, 2021

View reviewed changes

remove ref + add sizes on noscript img

734f88d

update test

b54cd22

only render <noscript> if !isVisible

9c24d3b

shuding approved these changes Mar 18, 2021

View reviewed changes

styfle reviewed Mar 23, 2021

View reviewed changes

Merge branch 'canary' into IMAGE_NO_JS_FALLBACK

d7480e1

kodiakhq bot merged commit 48dd995 into vercel:canary Mar 23, 2021

shuding mentioned this pull request Mar 23, 2021

Remove visibility: inherit from the image component #23329

Merged

8 tasks

styfle mentioned this pull request Jul 19, 2021

Fix placeholder=blur inside <noscript> #27311

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

Add fallback for <Image /> component when JavaScript is disabled in browser #19052

Add fallback for <Image /> component when JavaScript is disabled in browser #19052

brunocrosier commented Nov 11, 2020 •

edited by timneutkens

This comment has been minimized.

samthomson commented Jan 4, 2021

brunocrosier commented Jan 4, 2021

atcastle commented Jan 15, 2021

brunocrosier commented Jan 16, 2021

styfle commented Jan 16, 2021

styfle Jan 17, 2021

brunocrosier Jan 17, 2021

ijjk commented Jan 17, 2021 •

edited

ijjk commented Jan 17, 2021

ijjk commented Mar 17, 2021

Diffs

ijjk commented Mar 17, 2021

ijjk commented Mar 17, 2021

Diffs

brunocrosier commented Mar 18, 2021

ijjk commented Mar 18, 2021

Diffs

brunocrosier commented Mar 23, 2021

styfle Mar 23, 2021

shuding Mar 23, 2021

ijjk commented Mar 23, 2021

Diffs

JGeis13 commented Jul 19, 2021 •

edited

styfle commented Jul 19, 2021

Telsenome commented Jul 21, 2021

ijjk commented Jul 21, 2021

Telsenome commented Jul 21, 2021

ijjk commented Jul 21, 2021

Telsenome commented Jul 21, 2021

Add fallback for <Image /> component when JavaScript is disabled in browser #19052

Add fallback for <Image /> component when JavaScript is disabled in browser #19052

Conversation

brunocrosier commented Nov 11, 2020 • edited by timneutkens

This comment has been minimized.

samthomson commented Jan 4, 2021

brunocrosier commented Jan 4, 2021

atcastle commented Jan 15, 2021

brunocrosier commented Jan 16, 2021

styfle commented Jan 16, 2021

styfle Jan 17, 2021

Choose a reason for hiding this comment

brunocrosier Jan 17, 2021

Choose a reason for hiding this comment

ijjk commented Jan 17, 2021 • edited

Failing test suites

ijjk commented Jan 17, 2021

Stats from current PR

ijjk commented Mar 17, 2021

Stats from current PR

Diffs

ijjk commented Mar 17, 2021

Failing test suites

ijjk commented Mar 17, 2021

Stats from current PR

Diffs

brunocrosier commented Mar 18, 2021

ijjk commented Mar 18, 2021

Stats from current PR

Diffs

brunocrosier commented Mar 23, 2021

styfle Mar 23, 2021

Choose a reason for hiding this comment

shuding Mar 23, 2021

Choose a reason for hiding this comment

ijjk commented Mar 23, 2021

Stats from current PR

Diffs

JGeis13 commented Jul 19, 2021 • edited

styfle commented Jul 19, 2021

Telsenome commented Jul 21, 2021

ijjk commented Jul 21, 2021

Telsenome commented Jul 21, 2021

ijjk commented Jul 21, 2021

Telsenome commented Jul 21, 2021

brunocrosier commented Nov 11, 2020 •

edited by timneutkens

ijjk commented Jan 17, 2021 •

edited

JGeis13 commented Jul 19, 2021 •

edited