Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

WIP Performance tracing image optimizer #27047

Closed
wants to merge 2 commits into from

Conversation

styfle
Copy link
Member

@styfle styfle commented Jul 9, 2021

Follow up to #27043 to compare squoosh vs sharp performance

@styfle styfle requested a review from timneutkens July 9, 2021 15:49
@ijjk ijjk added created-by: Next.js team PRs by the Next.js team. type: next labels Jul 9, 2021
@timneutkens timneutkens changed the title Replace squoosh with sharp WIP Performance tracing image optimizer Jul 9, 2021
@ijjk
Copy link
Member

ijjk commented Jul 9, 2021

Stats from current PR

Default Build (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary vercel/next.js replace-squoosh-with-sharp Change
buildDuration 14.2s 14.3s ⚠️ +170ms
buildDurationCached 3.3s 3.4s ⚠️ +75ms
nodeModulesSize 49.3 MB 72.7 MB ⚠️ +23.5 MB
Page Load Tests Overall decrease ⚠️
vercel/next.js canary vercel/next.js replace-squoosh-with-sharp Change
/ failed reqs 0 0
/ total time (seconds) 2.326 2.345 ⚠️ +0.02
/ avg req/sec 1074.75 1066.04 ⚠️ -8.71
/error-in-render failed reqs 0 0
/error-in-render total time (seconds) 1.261 1.288 ⚠️ +0.03
/error-in-render avg req/sec 1982.08 1940.77 ⚠️ -41.31
Client Bundles (main, webpack, commons)
vercel/next.js canary vercel/next.js replace-squoosh-with-sharp Change
359.HASH.js gzip 3.09 kB 3.09 kB
framework-HASH.js gzip 42 kB 42 kB
main-HASH.js gzip 20.6 kB 20.6 kB
webpack-HASH.js gzip 1.49 kB 1.49 kB
Overall change 67.2 kB 67.2 kB
Legacy Client Bundles (polyfills)
vercel/next.js canary vercel/next.js replace-squoosh-with-sharp Change
polyfills-HASH.js gzip 31.1 kB 31.1 kB
Overall change 31.1 kB 31.1 kB
Client Pages Overall increase ⚠️
vercel/next.js canary vercel/next.js replace-squoosh-with-sharp Change
_app-HASH.js gzip 803 B 803 B
_error-HASH.js gzip 3.18 kB 3.18 kB
amp-HASH.js gzip 526 B 526 B
css-HASH.js gzip 329 B 329 B
hooks-HASH.js gzip 903 B 903 B
image-HASH.js gzip 5.69 kB 5.73 kB ⚠️ +43 B
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
withRouter-HASH.js gzip 320 B 320 B
bb14e60e810b..30f.css gzip 125 B 125 B
Overall change 14.1 kB 14.2 kB ⚠️ +43 B
Client Build Manifests
vercel/next.js canary vercel/next.js replace-squoosh-with-sharp Change
_buildManifest.js gzip 419 B 419 B
Overall change 419 B 419 B
Rendered Page Sizes
vercel/next.js canary vercel/next.js replace-squoosh-with-sharp Change
index.html gzip 531 B 531 B
link.html gzip 544 B 544 B
withRouter.html gzip 524 B 524 B
Overall change 1.6 kB 1.6 kB

Diffs

Diff for _buildManifest.js
@@ -13,7 +13,7 @@ self.__BUILD_MANIFEST = {
     "static\u002Fchunks\u002Fpages\u002Fhooks-4e38b05900fed34fcf34.js"
   ],
   "/image": [
-    "static\u002Fchunks\u002Fpages\u002Fimage-7b2a3db6fef72dcc481e.js"
+    "static\u002Fchunks\u002Fpages\u002Fimage-1318788852d326af85ca.js"
   ],
   "/link": ["static\u002Fchunks\u002Fpages\u002Flink-461e3656f357dad048d3.js"],
   "/routerDirect": [
Diff for image-HASH.js
@@ -1498,7 +1498,7 @@ Also adds support for deduplicated `key` properties
         height: 1347,
         width: 1626,
         blurDataURL:
-          "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAHCAQAAACfUMTVAAAAP0lEQVR42jXIQQqDUBTF0Lf/rdZZB9W2/0REDNwbyATxaJSuCZlafn3tDmHq49Vm87ZkpKPd8n9CF+7XFOImJ8SebtyxyeM6AAAAAElFTkSuQmCC"
+          "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAYAAAD+Bd/7AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAT0lEQVQImX2OsQoAMQhD+///KAVBxKGLTi7mqEe36wkJQeHFAQBVddXY9jdjm7tDVVvMDDPrYxN2iAgQEeacEBGstZCZL+FWcfZN+HruVDzOPbw+4RztFgAAAABJRU5ErkJggg=="
       }; // CONCATENATED MODULE: ./pages/image.js
       function ImagePage(props) {
         return /*#__PURE__*/ (0, jsx_runtime.jsxs)(jsx_runtime.Fragment, {

Webpack 4 Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary vercel/next.js replace-squoosh-with-sharp Change
buildDuration 11.5s 11.5s -9ms
buildDurationCached 4.7s 4.6s -55ms
nodeModulesSize 49.3 MB 72.7 MB ⚠️ +23.5 MB
Page Load Tests Overall decrease ⚠️
vercel/next.js canary vercel/next.js replace-squoosh-with-sharp Change
/ failed reqs 0 0
/ total time (seconds) 2.35 2.396 ⚠️ +0.05
/ avg req/sec 1063.84 1043.51 ⚠️ -20.33
/error-in-render failed reqs 0 0
/error-in-render total time (seconds) 1.284 1.321 ⚠️ +0.04
/error-in-render avg req/sec 1946.68 1892.28 ⚠️ -54.4
Client Bundles (main, webpack, commons)
vercel/next.js canary vercel/next.js replace-squoosh-with-sharp Change
14.HASH.js gzip 3.11 kB 3.11 kB
677f882d2ed8..HASH.js gzip 13.9 kB 13.9 kB
framework.HASH.js gzip 41.8 kB 41.8 kB
main-HASH.js gzip 7.81 kB 7.81 kB
webpack-HASH.js gzip 1.19 kB 1.19 kB
Overall change 67.8 kB 67.8 kB
Legacy Client Bundles (polyfills)
vercel/next.js canary vercel/next.js replace-squoosh-with-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 vercel/next.js replace-squoosh-with-sharp Change
_app-HASH.js gzip 791 B 791 B
_error-HASH.js gzip 3.83 kB 3.83 kB
amp-HASH.js gzip 531 B 531 B
css-HASH.js gzip 333 B 333 B
hooks-HASH.js gzip 910 B 910 B
index-HASH.js gzip 230 B 230 B
link-HASH.js gzip 1.64 kB 1.64 kB
routerDirect..HASH.js gzip 297 B 297 B
withRouter-HASH.js gzip 293 B 293 B
e025d2764813..52f.css gzip 125 B 125 B
Overall change 8.98 kB 8.98 kB
Client Build Manifests
vercel/next.js canary vercel/next.js replace-squoosh-with-sharp Change
_buildManifest.js gzip 418 B 418 B
Overall change 418 B 418 B
Rendered Page Sizes
vercel/next.js canary vercel/next.js replace-squoosh-with-sharp Change
index.html gzip 574 B 574 B
link.html gzip 586 B 586 B
withRouter.html gzip 569 B 569 B
Overall change 1.73 kB 1.73 kB
Commit: 5511011

@ijjk
Copy link
Member

ijjk commented Jul 9, 2021

Failing test suites

Commit: 5511011

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

  • Image Optimizer > Server support w/o next.config.js > should not change the color type of a png
  • Image Optimizer > Server support with next.config.js > should not change the color type of a png
  • Image Optimizer > Serverless support with next.config.js > should not change the color type of a png
  • Image Optimizer > dev support w/o next.config.js > should not change the color type of a png
  • Image Optimizer > dev support with next.config.js > should not change the color type of a png
Expand output

● Image Optimizer › dev support w/o next.config.js › should not change the color type of a png

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

Expected: 4
Received: 6

  549 |     // http://www.libpng.org/pub/png/spec/1.2/PNG-Chunks.html
  550 |     const colorType = png.readUIntBE(25, 1)
> 551 |     expect(colorType).toBe(4)
      |                       ^
  552 |   })
  553 |
  554 |   it('should set cache-control to immutable for static images', async () => {

  at Object.<anonymous> (integration/image-optimizer/test/index.test.js:551:23)

● Image Optimizer › dev support with next.config.js › should not change the color type of a png

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

Expected: 4
Received: 6

  549 |     // http://www.libpng.org/pub/png/spec/1.2/PNG-Chunks.html
  550 |     const colorType = png.readUIntBE(25, 1)
> 551 |     expect(colorType).toBe(4)
      |                       ^
  552 |   })
  553 |
  554 |   it('should set cache-control to immutable for static images', async () => {

  at Object.<anonymous> (integration/image-optimizer/test/index.test.js:551:23)

● Image Optimizer › Server support w/o next.config.js › should not change the color type of a png

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

Expected: 4
Received: 6

  549 |     // http://www.libpng.org/pub/png/spec/1.2/PNG-Chunks.html
  550 |     const colorType = png.readUIntBE(25, 1)
> 551 |     expect(colorType).toBe(4)
      |                       ^
  552 |   })
  553 |
  554 |   it('should set cache-control to immutable for static images', async () => {

  at Object.<anonymous> (integration/image-optimizer/test/index.test.js:551:23)

● Image Optimizer › Server support with next.config.js › should not change the color type of a png

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

Expected: 4
Received: 6

  549 |     // http://www.libpng.org/pub/png/spec/1.2/PNG-Chunks.html
  550 |     const colorType = png.readUIntBE(25, 1)
> 551 |     expect(colorType).toBe(4)
      |                       ^
  552 |   })
  553 |
  554 |   it('should set cache-control to immutable for static images', async () => {

  at Object.<anonymous> (integration/image-optimizer/test/index.test.js:551:23)
      at runMicrotasks (<anonymous>)

● Image Optimizer › Serverless support with next.config.js › should not change the color type of a png

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

Expected: 4
Received: 6

  549 |     // http://www.libpng.org/pub/png/spec/1.2/PNG-Chunks.html
  550 |     const colorType = png.readUIntBE(25, 1)
> 551 |     expect(colorType).toBe(4)
      |                       ^
  552 |   })
  553 |
  554 |   it('should set cache-control to immutable for static images', async () => {

  at Object.<anonymous> (integration/image-optimizer/test/index.test.js:551:23)
      at runMicrotasks (<anonymous>)

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

  • Static Image Component Tests > Should add a blurry placeholder to statically imported jpg
  • Static Image Component Tests > Should add a blurry placeholder to statically imported png
Expand output

● Static Image Component Tests › Should add a blurry placeholder to statically imported jpg

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

Expected substring: "style=\"position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;filter:blur(20px);background-size:cover;background-image:url(&quot;data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoKCgoKCgsMDAsPEA4QDxYUExMUFiIYGhgaGCIzICUgICUgMy03LCksNy1RQDg4QFFeT0pPXnFlZXGPiI+7u/sBCgoKCgoKCwwMCw8QDhAPFhQTExQWIhgaGBoYIjMgJSAgJSAzLTcsKSw3LVFAODhAUV5PSk9ecWVlcY+Ij7u7+//CABEIAAgACAMBIgACEQEDEQH/xAAUAAEAAAAAAAAAAAAAAAAAAAAH/9oACAEBAAAAADX/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/9oACAECEAAAAH//xAAUAQEAAAAAAAAAAAAAAAAAAAAA/9oACAEDEAAAAH//xAAdEAABAgcAAAAAAAAAAAAAAAATEhUAAwUUIzLS/9oACAEBAAE/AB0ZlUac43GqMYuo/8QAFBEBAAAAAAAAAAAAAAAAAAAAAP/aAAgBAgEBPwB//8QAFBEBAAAAAAAAAAAAAAAAAAAAAP/aAAgBAwEBPwB//9k=&quot;);background-position:0% 0%\""
Received string:    "<!DOCTYPE html><html><head><meta charSet=\"utf-8\"/><meta name=\"viewport\" content=\"width=device-width\"/><meta name=\"next-head-count\" content=\"2\"/><noscript data-n-css=\"\"></noscript><script defer=\"\" nomodule=\"\" src=\"/_next/static/chunks/polyfills-086def5afcb77f2bdcdf.js\"></script><script src=\"/_next/static/chunks/webpack-c00dc6e3046106c4aa19.js\" defer=\"\"></script><script src=\"/_next/static/chunks/framework-8fd87ad1ae1d3536f217.js\" defer=\"\"></script><script src=\"/_next/static/chunks/main-780c3db0a7224e2c8db6.js\" defer=\"\"></script><script src=\"/_next/static/chunks/pages/_app-f0df36125b6f90e1226e.js\" defer=\"\"></script><script src=\"/_next/static/chunks/528-fb7db533df975d2cd811.js\" defer=\"\"></script><script src=\"/_next/static/chunks/pages/static-img-d84724bd4814532def9c.js\" defer=\"\"></script><script src=\"/_next/static/y5JPBRBN_5gUhzy5B3__z/_buildManifest.js\" defer=\"\"></script><script src=\"/_next/static/y5JPBRBN_5gUhzy5B3__z/_ssgManifest.js\" defer=\"\"></script></head><body><div id=\"__next\"><div><h1 id=\"page-header\">Static Image</h1><div style=\"overflow:hidden;box-sizing:border-box;display:inline-block;position:relative;width:400px;height:300px\"><noscript><img id=\"basic-static\" srcSet=\"/_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Ffoo%2Ftest-rect.ce7cc17139df00c26d34af7e34379e5d.jpg&amp;w=640&amp;q=75 1x, /_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Ffoo%2Ftest-rect.ce7cc17139df00c26d34af7e34379e5d.jpg&amp;w=828&amp;q=75 2x\" src=\"/_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Ffoo%2Ftest-rect.ce7cc17139df00c26d34af7e34379e5d.jpg&amp;w=828&amp;q=75\" decoding=\"async\" style=\"position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;filter:blur(20px);background-size:cover;background-image:url(&quot;data:image/jpeg;base64,/9j/2wBDAAoHBwgHBgoICAgLCgoLDhgQDg0NDh0VFhEYIx8lJCIfIiEmKzcvJik0KSEiMEExNDk7Pj4+JS5ESUM8SDc9Pjv/2wBDAQoLCw4NDhwQEBw7KCIoOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozv/wAARCAAGAAgDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAf/xAAgEAABAwMFAQAAAAAAAAAAAAABAAQRAwUTAhIVITKB/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhEDEQA/AJUXVuNiDMMNfICvkLvL0aceNsfZlERB/9k=&quot;);background-position:0% 0%\"/></noscript><img id=\"basic-static\" src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" decoding=\"async\" style=\"position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;filter:blur(20px);background-size:cover;background-image:url(&quot;data:image/jpeg;base64,/9j/2wBDAAoHBwgHBgoICAgLCgoLDhgQDg0NDh0VFhEYIx8lJCIfIiEmKzcvJik0KSEiMEExNDk7Pj4+JS5ESUM8SDc9Pjv/2wBDAQoLCw4NDhwQEBw7KCIoOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozv/wAARCAAGAAgDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAf/xAAgEAABAwMFAQAAAAAAAAAAAAABAAQRAwUTAhIVITKB/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhEDEQA/AJUXVuNiDMMNfICvkLvL0aceNsfZlERB/9k=&quot;);background-position:0% 0%\"/></div><div><h1 id=\"page-header\">Static Image</h1><div style=\"overflow:hidden;box-sizing:border-box;display:inline-block;position:relative;width:160px;height:394px\"><noscript><img id=\"basic-static\" srcSet=\"/_next/image?url=%2F_next%2Fstatic%2Fimage%2Fcomponents%2Ftall.0742c69817e9c36224935525caa63d75.png&amp;w=256&amp;q=75 1x, /_next/image?url=%2F_next%2Fstatic%2Fimage%2Fcomponents%2Ftall.0742c69817e9c36224935525caa63d75.png&amp;w=384&amp;q=75 2x\" src=\"/_next/image?url=%2F_next%2Fstatic%2Fimage%2Fcomponents%2Ftall.0742c69817e9c36224935525caa63d75.png&amp;w=384&amp;q=75\" decoding=\"async\" style=\"position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;filter:blur(20px);background-size:cover;background-image:url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAICAYAAAA870V8AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAS0lEQVQImUWMuQ0AIRADDZRBGWQkkG2P2852tA3MiXt0lsYOLI0kUWvlrN6ilIJaa4wxnsfMyEx67ygiOHF3tNZi782c8xfcHO3HBWX1JeGVmkxUAAAAAElFTkSuQmCC&quot;);background-position:0% 0%\"/></noscript><img id=\"basic-static\" src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" decoding=\"async\" style=\"position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;filter:blur(20px);background-size:cover;background-image:url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAICAYAAAA870V8AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAS0lEQVQImUWMuQ0AIRADDZRBGWQkkG2P2852tA3MiXt0lsYOLI0kUWvlrN6ilIJaa4wxnsfMyEx67ygiOHF3tNZi782c8xfcHO3HBWX1JeGVmkxUAAAAAElFTkSuQmCC&quot;);background-position:0% 0%\"/></div></div><div style=\"overflow:hidden;box-sizing:border-box;display:inline-block;position:relative;width:200px;height:200px\"><noscript><img id=\"defined-size-static\" srcSet=\"/_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Ftest.eba16dd4cf631c11162a5e9faeb5415b.png&amp;w=256&amp;q=75 1x, /_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Ftest.eba16dd4cf631c11162a5e9faeb5415b.png&amp;w=640&amp;q=75 2x\" src=\"/_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Ftest.eba16dd4cf631c11162a5e9faeb5415b.png&amp;w=640&amp;q=75\" decoding=\"async\" style=\"position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%\"/></noscript><img id=\"defined-size-static\" src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" decoding=\"async\" style=\"position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%\"/></div><div style=\"display:inline-block;max-width:100%;overflow:hidden;position:relative;box-sizing:border-box;margin:0\"><div style=\"box-sizing:border-box;display:block;max-width:100%\"><img style=\"max-width:100%;display:block;margin:0;border:none;padding:0\" alt=\"\" aria-hidden=\"true\" role=\"presentation\" src=\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjMwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiLz4=\"/></div><noscript><img id=\"require-static\" srcSet=\"/_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Ffoo%2Ftest-rect.ce7cc17139df00c26d34af7e34379e5d.jpg&amp;w=640&amp;q=75 1x, /_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Ffoo%2Ftest-rect.ce7cc17139df00c26d34af7e34379e5d.jpg&amp;w=828&amp;q=75 2x\" src=\"/_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Ffoo%2Ftest-rect.ce7cc17139df00c26d34af7e34379e5d.jpg&amp;w=828&amp;q=75\" decoding=\"async\" style=\"position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%\"/></noscript><img id=\"require-static\" src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" decoding=\"async\" style=\"position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%\"/></div><div style=\"display:inline-block;max-width:100%;overflow:hidden;position:relative;box-sizing:border-box;margin:0\"><div style=\"box-sizing:border-box;display:block;max-width:100%\"><img style=\"max-width:100%;display:block;margin:0;border:none;padding:0\" alt=\"\" aria-hidden=\"true\" role=\"presentation\" src=\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjMwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiLz4=\"/></div><noscript><img id=\"basic-non-static\" srcSet=\"/_next/image?url=%2Ftest-rect.jpg&amp;w=640&amp;q=75 1x, /_next/image?url=%2Ftest-rect.jpg&amp;w=828&amp;q=75 2x\" src=\"/_next/image?url=%2Ftest-rect.jpg&amp;w=828&amp;q=75\" decoding=\"async\" style=\"position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%\"/></noscript><img id=\"basic-non-static\" src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" decoding=\"async\" style=\"position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%\"/></div><br/><div style=\"display:inline-block;max-width:100%;overflow:hidden;position:relative;box-sizing:border-box;margin:0\"><div style=\"box-sizing:border-box;display:block;max-width:100%\"><img style=\"max-width:100%;display:block;margin:0;border:none;padding:0\" alt=\"\" aria-hidden=\"true\" role=\"presentation\" src=\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjQwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiLz4=\"/></div><noscript><img id=\"blur-png\" srcSet=\"/_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Ftest.eba16dd4cf631c11162a5e9faeb5415b.png&amp;w=640&amp;q=75 1x, /_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Ftest.eba16dd4cf631c11162a5e9faeb5415b.png&amp;w=828&amp;q=75 2x\" src=\"/_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Ftest.eba16dd4cf631c11162a5e9faeb5415b.png&amp;w=828&amp;q=75\" decoding=\"async\" style=\"position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;filter:blur(20px);background-size:cover;background-image:url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAIAAABLbSncAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAR0lEQVQImXXOwQ2AUAgD0AqD9OgKHruz+xljUb4m/ncrBFLgsVjH4WdRebWOl4gAsFtHZCYASYdJuod1SHIzkp9vU1XpXewEezkO3QOYHigAAAAASUVORK5CYII=&quot;);background-position:0% 0%\"/></noscript><img id=\"blur-png\" src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" decoding=\"async\" style=\"position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;filter:blur(20px);background-size:cover;background-image:url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAIAAABLbSncAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAR0lEQVQImXXOwQ2AUAgD0AqD9OgKHruz+xljUb4m/ncrBFLgsVjH4WdRebWOl4gAsFtHZCYASYdJuod1SHIzkp9vU1XpXewEezkO3QOYHigAAAAASUVORK5CYII=&quot;);background-position:0% 0%\"/></div><div style=\"display:inline-block;max-width:100%;overflow:hidden;position:relative;box-sizing:border-box;margin:0\"><div style=\"box-sizing:border-box;display:block;max-width:100%\"><img style=\"max-width:100%;display:block;margin:0;border:none;padding:0\" alt=\"\" aria-hidden=\"true\" role=\"presentation\" src=\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjQwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiLz4=\"/></div><noscript><img id=\"blur-jpg\" srcSet=\"/_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Ftest.480a01e5ea850d0231aec0fa94bd23a0.jpg&amp;w=640&amp;q=75 1x, /_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Ftest.480a01e5ea850d0231aec0fa94bd23a0.jpg&amp;w=828&amp;q=75 2x\" src=\"/_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Ftest.480a01e5ea850d0231aec0fa94bd23a0.jpg&amp;w=828&amp;q=75\" decoding=\"async\" style=\"position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;filter:blur(20px);background-size:cover;background-image:url(&quot;data:image/jpeg;base64,/9j/2wBDAAoHBwgHBgoICAgLCgoLDhgQDg0NDh0VFhEYIx8lJCIfIiEmKzcvJik0KSEiMEExNDk7Pj4+JS5ESUM8SDc9Pjv/2wBDAQoLCw4NDhwQEBw7KCIoOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozv/wAARCAAIAAgDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAf/xAAfEAABAwMFAAAAAAAAAAAAAAABAAIREhMVBAUUMWH/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/8QAFBEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8AlRbtOBabmpyvIJLaBZtR1MzVPkQUREH/2Q==&quot;);background-position:0% 0%\"/></noscript><img id=\"blur-jpg\" src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" decoding=\"async\" style=\"position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;filter:blur(20px);background-size:cover;background-image:url(&quot;data:image/jpeg;base64,/9j/2wBDAAoHBwgHBgoICAgLCgoLDhgQDg0NDh0VFhEYIx8lJCIfIiEmKzcvJik0KSEiMEExNDk7Pj4+JS5ESUM8SDc9Pjv/2wBDAQoLCw4NDhwQEBw7KCIoOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozv/wAARCAAIAAgDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAf/xAAfEAABAwMFAAAAAAAAAAAAAAABAAIREhMVBAUUMWH/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/8QAFBEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8AlRbtOBabmpyvIJLaBZtR1MzVPkQUREH/2Q==&quot;);background-position:0% 0%\"/></div><div style=\"display:inline-block;max-width:100%;overflow:hidden;position:relative;box-sizing:border-box;margin:0\"><div style=\"box-sizing:border-box;display:block;max-width:100%\"><img style=\"max-width:100%;display:block;margin:0;border:none;padding:0\" alt=\"\" aria-hidden=\"true\" role=\"presentation\" src=\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjQwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiLz4=\"/></div><noscript><img id=\"blur-webp\" srcSet=\"/_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Ftest.7b1faa62d1db9a4a75360bf5d3717d29.webp&amp;w=640&amp;q=75 1x, /_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Ftest.7b1faa62d1db9a4a75360bf5d3717d29.webp&amp;w=828&amp;q=75 2x\" src=\"/_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Ftest.7b1faa62d1db9a4a75360bf5d3717d29.webp&amp;w=828&amp;q=75\" decoding=\"async\" style=\"position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;filter:blur(20px);background-size:cover;background-image:url(&quot;data:image/webp;base64,UklGRk4AAABXRUJQVlA4IEIAAADQAQCdASoIAAgAAkA4JaQAAxU/z6m+gAD+/bpL80J2C+F7VH41TYVWa0u02gF5j+xexPXKTxdYHKVkJqEh/WwAAAA=&quot;);background-position:0% 0%\"/></noscript><img id=\"blur-webp\" src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" decoding=\"async\" style=\"position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;filter:blur(20px);background-size:cover;background-image:url(&quot;data:image/webp;base64,UklGRk4AAABXRUJQVlA4IEIAAADQAQCdASoIAAgAAkA4JaQAAxU/z6m+gAD+/bpL80J2C+F7VH41TYVWa0u02gF5j+xexPXKTxdYHKVkJqEh/WwAAAA=&quot;);background-position:0% 0%\"/></div><div style=\"display:inline-block;max-width:100%;overflow:hidden;position:relative;box-sizing:border-box;margin:0\"><div style=\"box-sizing:border-box;display:block;max-width:100%\"><img style=\"max-width:100%;display:block;margin:0;border:none;padding:0\" alt=\"\" aria-hidden=\"true\" role=\"presentation\" src=\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTMzIiBoZWlnaHQ9IjUzMyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiLz4=\"/></div><noscript><img id=\"static-svg\" srcSet=\"/_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Ftest.cf1bd46504cf7724a1181fcbd5ed157e.svg&amp;w=640&amp;q=75 1x, /_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Ftest.cf1bd46504cf7724a1181fcbd5ed157e.svg&amp;w=1080&amp;q=75 2x\" src=\"/_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Ftest.cf1bd46504cf7724a1181fcbd5ed157e.svg&amp;w=1080&amp;q=75\" decoding=\"async\" style=\"position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%\"/></noscript><img id=\"static-svg\" src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" decoding=\"async\" style=\"position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%\"/></div><div style=\"display:inline-block;max-width:100%;overflow:hidden;position:relative;box-sizing:border-box;margin:0\"><div style=\"box-sizing:border-box;display:block;max-width:100%\"><img style=\"max-width:100%;display:block;margin:0;border:none;padding:0\" alt=\"\" aria-hidden=\"true\" role=\"presentation\" src=\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjQwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiLz4=\"/></div><noscript><img id=\"static-gif\" srcSet=\"/_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Ftest.c7943f15687a24106e595d54f2eefc97.gif&amp;w=640&amp;q=75 1x, /_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Ftest.c7943f15687a24106e595d54f2eefc97.gif&amp;w=828&amp;q=75 2x\" src=\"/_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Ftest.c7943f15687a24106e595d54f2eefc97.gif&amp;w=828&amp;q=75\" decoding=\"async\" style=\"position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%\"/></noscript><img id=\"static-gif\" src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" decoding=\"async\" style=\"position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%\"/></div><div style=\"display:inline-block;max-width:100%;overflow:hidden;position:relative;box-sizing:border-box;margin:0\"><div style=\"box-sizing:border-box;display:block;max-width:100%\"><img style=\"max-width:100%;display:block;margin:0;border:none;padding:0\" alt=\"\" aria-hidden=\"true\" role=\"presentation\" src=\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjQwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiLz4=\"/></div><noscript><img id=\"static-bmp\" srcSet=\"/_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Ftest.1108f56a13593d49ab506ca80d7a97d5.bmp&amp;w=640&amp;q=75 1x, /_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Ftest.1108f56a13593d49ab506ca80d7a97d5.bmp&amp;w=828&amp;q=75 2x\" src=\"/_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Ftest.1108f56a13593d49ab506ca80d7a97d5.bmp&amp;w=828&amp;q=75\" decoding=\"async\" style=\"position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%\"/></noscript><img id=\"static-bmp\" src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" decoding=\"async\" style=\"position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%\"/></div><div style=\"display:inline-block;max-width:100%;overflow:hidden;position:relative;box-sizing:border-box;margin:0\"><div style=\"box-sizing:border-box;display:block;max-width:100%\"><img style=\"max-width:100%;display:block;margin:0;border:none;padding:0\" alt=\"\" aria-hidden=\"true\" role=\"presentation\" src=\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmVyc2lvbj0iMS4xIi8+\"/></div><noscript><img id=\"static-ico\" srcSet=\"/_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Ftest.eb8f473ac874947ded8c18eee80db38d.ico&amp;w=32&amp;q=75 1x, /_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Ftest.eb8f473ac874947ded8c18eee80db38d.ico&amp;w=64&amp;q=75 2x\" src=\"/_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Ftest.eb8f473ac874947ded8c18eee80db38d.ico&amp;w=64&amp;q=75\" decoding=\"async\" style=\"position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%\"/></noscript><img id=\"static-ico\" src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" decoding=\"async\" style=\"position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%\"/></div><br/><div style=\"display:inline-block;max-width:100%;overflow:hidden;position:relative;box-sizing:border-box;margin:0\"><div style=\"box-sizing:border-box;display:block;max-width:100%\"><img style=\"max-width:100%;display:block;margin:0;border:none;padding:0\" alt=\"\" aria-hidden=\"true\" role=\"presentation\" src=\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjQwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiLz4=\"/></div><noscript><img id=\"static-unoptimized\" src=\"/_next/static/image/public/test.480a01e5ea850d0231aec0fa94bd23a0.jpg\" decoding=\"async\" style=\"position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%\"/></noscript><img id=\"static-unoptimized\" src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" decoding=\"async\" style=\"position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%\"/></div></div></div><script id=\"__NEXT_DATA__\" type=\"application/json\">{\"props\":{\"pageProps\":{}},\"page\":\"/static-img\",\"query\":{},\"buildId\":\"y5JPBRBN_5gUhzy5B3__z\",\"nextExport\":true,\"autoExport\":true,\"isFallback\":false,\"scriptLoader\":[]}</script></body></html>"

  67 |   })
  68 |   it('Should add a blurry placeholder to statically imported jpg', async () => {
> 69 |     expect(html).toContain(
     |                  ^
  70 |       `style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;filter:blur(20px);background-size:cover;background-image:url(&quot;data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoKCgoKCgsMDAsPEA4QDxYUExMUFiIYGhgaGCIzICUgICUgMy03LCksNy1RQDg4QFFeT0pPXnFlZXGPiI+7u/sBCgoKCgoKCwwMCw8QDhAPFhQTExQWIhgaGBoYIjMgJSAgJSAzLTcsKSw3LVFAODhAUV5PSk9ecWVlcY+Ij7u7+//CABEIAAgACAMBIgACEQEDEQH/xAAUAAEAAAAAAAAAAAAAAAAAAAAH/9oACAEBAAAAADX/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/9oACAECEAAAAH//xAAUAQEAAAAAAAAAAAAAAAAAAAAA/9oACAEDEAAAAH//xAAdEAABAgcAAAAAAAAAAAAAAAATEhUAAwUUIzLS/9oACAEBAAE/AB0ZlUac43GqMYuo/8QAFBEBAAAAAAAAAAAAAAAAAAAAAP/aAAgBAgEBPwB//8QAFBEBAAAAAAAAAAAAAAAAAAAAAP/aAAgBAwEBPwB//9k=&quot;);background-position:0% 0%"`
  71 |     )
  72 |   })

  at Object.<anonymous> (integration/image-component/default/test/static.test.js:69:18)

● Static Image Component Tests › Should add a blurry placeholder to statically imported png

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

Expected substring: "style=\"position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;filter:blur(20px);background-size:cover;background-image:url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAQAAABuBnYAAAAATklEQVR42i2I0QmAMBQD869Q9K+IsxU6RkfoiA6T55VXDpJLJC9uUJIzcx+XFd2dXMbx8n+QpoeYDpgY66RaDA83jCUfVpK2pER1dcEUP+KfSBtXK+BpAAAAAElFTkSuQmCC&quot;);background-position:0% 0%\""
Received string:    "<!DOCTYPE html><html><head><meta charSet=\"utf-8\"/><meta name=\"viewport\" content=\"width=device-width\"/><meta name=\"next-head-count\" content=\"2\"/><noscript data-n-css=\"\"></noscript><script defer=\"\" nomodule=\"\" src=\"/_next/static/chunks/polyfills-086def5afcb77f2bdcdf.js\"></script><script src=\"/_next/static/chunks/webpack-c00dc6e3046106c4aa19.js\" defer=\"\"></script><script src=\"/_next/static/chunks/framework-8fd87ad1ae1d3536f217.js\" defer=\"\"></script><script src=\"/_next/static/chunks/main-780c3db0a7224e2c8db6.js\" defer=\"\"></script><script src=\"/_next/static/chunks/pages/_app-f0df36125b6f90e1226e.js\" defer=\"\"></script><script src=\"/_next/static/chunks/528-fb7db533df975d2cd811.js\" defer=\"\"></script><script src=\"/_next/static/chunks/pages/static-img-d84724bd4814532def9c.js\" defer=\"\"></script><script src=\"/_next/static/y5JPBRBN_5gUhzy5B3__z/_buildManifest.js\" defer=\"\"></script><script src=\"/_next/static/y5JPBRBN_5gUhzy5B3__z/_ssgManifest.js\" defer=\"\"></script></head><body><div id=\"__next\"><div><h1 id=\"page-header\">Static Image</h1><div style=\"overflow:hidden;box-sizing:border-box;display:inline-block;position:relative;width:400px;height:300px\"><noscript><img id=\"basic-static\" srcSet=\"/_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Ffoo%2Ftest-rect.ce7cc17139df00c26d34af7e34379e5d.jpg&amp;w=640&amp;q=75 1x, /_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Ffoo%2Ftest-rect.ce7cc17139df00c26d34af7e34379e5d.jpg&amp;w=828&amp;q=75 2x\" src=\"/_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Ffoo%2Ftest-rect.ce7cc17139df00c26d34af7e34379e5d.jpg&amp;w=828&amp;q=75\" decoding=\"async\" style=\"position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;filter:blur(20px);background-size:cover;background-image:url(&quot;data:image/jpeg;base64,/9j/2wBDAAoHBwgHBgoICAgLCgoLDhgQDg0NDh0VFhEYIx8lJCIfIiEmKzcvJik0KSEiMEExNDk7Pj4+JS5ESUM8SDc9Pjv/2wBDAQoLCw4NDhwQEBw7KCIoOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozv/wAARCAAGAAgDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAf/xAAgEAABAwMFAQAAAAAAAAAAAAABAAQRAwUTAhIVITKB/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhEDEQA/AJUXVuNiDMMNfICvkLvL0aceNsfZlERB/9k=&quot;);background-position:0% 0%\"/></noscript><img id=\"basic-static\" src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" decoding=\"async\" style=\"position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;filter:blur(20px);background-size:cover;background-image:url(&quot;data:image/jpeg;base64,/9j/2wBDAAoHBwgHBgoICAgLCgoLDhgQDg0NDh0VFhEYIx8lJCIfIiEmKzcvJik0KSEiMEExNDk7Pj4+JS5ESUM8SDc9Pjv/2wBDAQoLCw4NDhwQEBw7KCIoOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozv/wAARCAAGAAgDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAf/xAAgEAABAwMFAQAAAAAAAAAAAAABAAQRAwUTAhIVITKB/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhEDEQA/AJUXVuNiDMMNfICvkLvL0aceNsfZlERB/9k=&quot;);background-position:0% 0%\"/></div><div><h1 id=\"page-header\">Static Image</h1><div style=\"overflow:hidden;box-sizing:border-box;display:inline-block;position:relative;width:160px;height:394px\"><noscript><img id=\"basic-static\" srcSet=\"/_next/image?url=%2F_next%2Fstatic%2Fimage%2Fcomponents%2Ftall.0742c69817e9c36224935525caa63d75.png&amp;w=256&amp;q=75 1x, /_next/image?url=%2F_next%2Fstatic%2Fimage%2Fcomponents%2Ftall.0742c69817e9c36224935525caa63d75.png&amp;w=384&amp;q=75 2x\" src=\"/_next/image?url=%2F_next%2Fstatic%2Fimage%2Fcomponents%2Ftall.0742c69817e9c36224935525caa63d75.png&amp;w=384&amp;q=75\" decoding=\"async\" style=\"position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;filter:blur(20px);background-size:cover;background-image:url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAICAYAAAA870V8AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAS0lEQVQImUWMuQ0AIRADDZRBGWQkkG2P2852tA3MiXt0lsYOLI0kUWvlrN6ilIJaa4wxnsfMyEx67ygiOHF3tNZi782c8xfcHO3HBWX1JeGVmkxUAAAAAElFTkSuQmCC&quot;);background-position:0% 0%\"/></noscript><img id=\"basic-static\" src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" decoding=\"async\" style=\"position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;filter:blur(20px);background-size:cover;background-image:url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAICAYAAAA870V8AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAS0lEQVQImUWMuQ0AIRADDZRBGWQkkG2P2852tA3MiXt0lsYOLI0kUWvlrN6ilIJaa4wxnsfMyEx67ygiOHF3tNZi782c8xfcHO3HBWX1JeGVmkxUAAAAAElFTkSuQmCC&quot;);background-position:0% 0%\"/></div></div><div style=\"overflow:hidden;box-sizing:border-box;display:inline-block;position:relative;width:200px;height:200px\"><noscript><img id=\"defined-size-static\" srcSet=\"/_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Ftest.eba16dd4cf631c11162a5e9faeb5415b.png&amp;w=256&amp;q=75 1x, /_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Ftest.eba16dd4cf631c11162a5e9faeb5415b.png&amp;w=640&amp;q=75 2x\" src=\"/_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Ftest.eba16dd4cf631c11162a5e9faeb5415b.png&amp;w=640&amp;q=75\" decoding=\"async\" style=\"position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%\"/></noscript><img id=\"defined-size-static\" src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" decoding=\"async\" style=\"position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%\"/></div><div style=\"display:inline-block;max-width:100%;overflow:hidden;position:relative;box-sizing:border-box;margin:0\"><div style=\"box-sizing:border-box;display:block;max-width:100%\"><img style=\"max-width:100%;display:block;margin:0;border:none;padding:0\" alt=\"\" aria-hidden=\"true\" role=\"presentation\" src=\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjMwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiLz4=\"/></div><noscript><img id=\"require-static\" srcSet=\"/_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Ffoo%2Ftest-rect.ce7cc17139df00c26d34af7e34379e5d.jpg&amp;w=640&amp;q=75 1x, /_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Ffoo%2Ftest-rect.ce7cc17139df00c26d34af7e34379e5d.jpg&amp;w=828&amp;q=75 2x\" src=\"/_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Ffoo%2Ftest-rect.ce7cc17139df00c26d34af7e34379e5d.jpg&amp;w=828&amp;q=75\" decoding=\"async\" style=\"position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%\"/></noscript><img id=\"require-static\" src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" decoding=\"async\" style=\"position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%\"/></div><div style=\"display:inline-block;max-width:100%;overflow:hidden;position:relative;box-sizing:border-box;margin:0\"><div style=\"box-sizing:border-box;display:block;max-width:100%\"><img style=\"max-width:100%;display:block;margin:0;border:none;padding:0\" alt=\"\" aria-hidden=\"true\" role=\"presentation\" src=\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjMwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiLz4=\"/></div><noscript><img id=\"basic-non-static\" srcSet=\"/_next/image?url=%2Ftest-rect.jpg&amp;w=640&amp;q=75 1x, /_next/image?url=%2Ftest-rect.jpg&amp;w=828&amp;q=75 2x\" src=\"/_next/image?url=%2Ftest-rect.jpg&amp;w=828&amp;q=75\" decoding=\"async\" style=\"position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%\"/></noscript><img id=\"basic-non-static\" src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" decoding=\"async\" style=\"position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%\"/></div><br/><div style=\"display:inline-block;max-width:100%;overflow:hidden;position:relative;box-sizing:border-box;margin:0\"><div style=\"box-sizing:border-box;display:block;max-width:100%\"><img style=\"max-width:100%;display:block;margin:0;border:none;padding:0\" alt=\"\" aria-hidden=\"true\" role=\"presentation\" src=\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjQwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiLz4=\"/></div><noscript><img id=\"blur-png\" srcSet=\"/_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Ftest.eba16dd4cf631c11162a5e9faeb5415b.png&amp;w=640&amp;q=75 1x, /_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Ftest.eba16dd4cf631c11162a5e9faeb5415b.png&amp;w=828&amp;q=75 2x\" src=\"/_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Ftest.eba16dd4cf631c11162a5e9faeb5415b.png&amp;w=828&amp;q=75\" decoding=\"async\" style=\"position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;filter:blur(20px);background-size:cover;background-image:url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAIAAABLbSncAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAR0lEQVQImXXOwQ2AUAgD0AqD9OgKHruz+xljUb4m/ncrBFLgsVjH4WdRebWOl4gAsFtHZCYASYdJuod1SHIzkp9vU1XpXewEezkO3QOYHigAAAAASUVORK5CYII=&quot;);background-position:0% 0%\"/></noscript><img id=\"blur-png\" src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" decoding=\"async\" style=\"position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;filter:blur(20px);background-size:cover;background-image:url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAIAAABLbSncAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAR0lEQVQImXXOwQ2AUAgD0AqD9OgKHruz+xljUb4m/ncrBFLgsVjH4WdRebWOl4gAsFtHZCYASYdJuod1SHIzkp9vU1XpXewEezkO3QOYHigAAAAASUVORK5CYII=&quot;);background-position:0% 0%\"/></div><div style=\"display:inline-block;max-width:100%;overflow:hidden;position:relative;box-sizing:border-box;margin:0\"><div style=\"box-sizing:border-box;display:block;max-width:100%\"><img style=\"max-width:100%;display:block;margin:0;border:none;padding:0\" alt=\"\" aria-hidden=\"true\" role=\"presentation\" src=\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjQwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiLz4=\"/></div><noscript><img id=\"blur-jpg\" srcSet=\"/_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Ftest.480a01e5ea850d0231aec0fa94bd23a0.jpg&amp;w=640&amp;q=75 1x, /_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Ftest.480a01e5ea850d0231aec0fa94bd23a0.jpg&amp;w=828&amp;q=75 2x\" src=\"/_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Ftest.480a01e5ea850d0231aec0fa94bd23a0.jpg&amp;w=828&amp;q=75\" decoding=\"async\" style=\"position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;filter:blur(20px);background-size:cover;background-image:url(&quot;data:image/jpeg;base64,/9j/2wBDAAoHBwgHBgoICAgLCgoLDhgQDg0NDh0VFhEYIx8lJCIfIiEmKzcvJik0KSEiMEExNDk7Pj4+JS5ESUM8SDc9Pjv/2wBDAQoLCw4NDhwQEBw7KCIoOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozv/wAARCAAIAAgDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAf/xAAfEAABAwMFAAAAAAAAAAAAAAABAAIREhMVBAUUMWH/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/8QAFBEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8AlRbtOBabmpyvIJLaBZtR1MzVPkQUREH/2Q==&quot;);background-position:0% 0%\"/></noscript><img id=\"blur-jpg\" src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" decoding=\"async\" style=\"position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;filter:blur(20px);background-size:cover;background-image:url(&quot;data:image/jpeg;base64,/9j/2wBDAAoHBwgHBgoICAgLCgoLDhgQDg0NDh0VFhEYIx8lJCIfIiEmKzcvJik0KSEiMEExNDk7Pj4+JS5ESUM8SDc9Pjv/2wBDAQoLCw4NDhwQEBw7KCIoOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozv/wAARCAAIAAgDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAf/xAAfEAABAwMFAAAAAAAAAAAAAAABAAIREhMVBAUUMWH/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/8QAFBEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8AlRbtOBabmpyvIJLaBZtR1MzVPkQUREH/2Q==&quot;);background-position:0% 0%\"/></div><div style=\"display:inline-block;max-width:100%;overflow:hidden;position:relative;box-sizing:border-box;margin:0\"><div style=\"box-sizing:border-box;display:block;max-width:100%\"><img style=\"max-width:100%;display:block;margin:0;border:none;padding:0\" alt=\"\" aria-hidden=\"true\" role=\"presentation\" src=\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjQwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiLz4=\"/></div><noscript><img id=\"blur-webp\" srcSet=\"/_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Ftest.7b1faa62d1db9a4a75360bf5d3717d29.webp&amp;w=640&amp;q=75 1x, /_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Ftest.7b1faa62d1db9a4a75360bf5d3717d29.webp&amp;w=828&amp;q=75 2x\" src=\"/_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Ftest.7b1faa62d1db9a4a75360bf5d3717d29.webp&amp;w=828&amp;q=75\" decoding=\"async\" style=\"position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;filter:blur(20px);background-size:cover;background-image:url(&quot;data:image/webp;base64,UklGRk4AAABXRUJQVlA4IEIAAADQAQCdASoIAAgAAkA4JaQAAxU/z6m+gAD+/bpL80J2C+F7VH41TYVWa0u02gF5j+xexPXKTxdYHKVkJqEh/WwAAAA=&quot;);background-position:0% 0%\"/></noscript><img id=\"blur-webp\" src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" decoding=\"async\" style=\"position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;filter:blur(20px);background-size:cover;background-image:url(&quot;data:image/webp;base64,UklGRk4AAABXRUJQVlA4IEIAAADQAQCdASoIAAgAAkA4JaQAAxU/z6m+gAD+/bpL80J2C+F7VH41TYVWa0u02gF5j+xexPXKTxdYHKVkJqEh/WwAAAA=&quot;);background-position:0% 0%\"/></div><div style=\"display:inline-block;max-width:100%;overflow:hidden;position:relative;box-sizing:border-box;margin:0\"><div style=\"box-sizing:border-box;display:block;max-width:100%\"><img style=\"max-width:100%;display:block;margin:0;border:none;padding:0\" alt=\"\" aria-hidden=\"true\" role=\"presentation\" src=\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTMzIiBoZWlnaHQ9IjUzMyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiLz4=\"/></div><noscript><img id=\"static-svg\" srcSet=\"/_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Ftest.cf1bd46504cf7724a1181fcbd5ed157e.svg&amp;w=640&amp;q=75 1x, /_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Ftest.cf1bd46504cf7724a1181fcbd5ed157e.svg&amp;w=1080&amp;q=75 2x\" src=\"/_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Ftest.cf1bd46504cf7724a1181fcbd5ed157e.svg&amp;w=1080&amp;q=75\" decoding=\"async\" style=\"position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%\"/></noscript><img id=\"static-svg\" src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" decoding=\"async\" style=\"position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%\"/></div><div style=\"display:inline-block;max-width:100%;overflow:hidden;position:relative;box-sizing:border-box;margin:0\"><div style=\"box-sizing:border-box;display:block;max-width:100%\"><img style=\"max-width:100%;display:block;margin:0;border:none;padding:0\" alt=\"\" aria-hidden=\"true\" role=\"presentation\" src=\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjQwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiLz4=\"/></div><noscript><img id=\"static-gif\" srcSet=\"/_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Ftest.c7943f15687a24106e595d54f2eefc97.gif&amp;w=640&amp;q=75 1x, /_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Ftest.c7943f15687a24106e595d54f2eefc97.gif&amp;w=828&amp;q=75 2x\" src=\"/_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Ftest.c7943f15687a24106e595d54f2eefc97.gif&amp;w=828&amp;q=75\" decoding=\"async\" style=\"position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%\"/></noscript><img id=\"static-gif\" src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" decoding=\"async\" style=\"position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%\"/></div><div style=\"display:inline-block;max-width:100%;overflow:hidden;position:relative;box-sizing:border-box;margin:0\"><div style=\"box-sizing:border-box;display:block;max-width:100%\"><img style=\"max-width:100%;display:block;margin:0;border:none;padding:0\" alt=\"\" aria-hidden=\"true\" role=\"presentation\" src=\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjQwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiLz4=\"/></div><noscript><img id=\"static-bmp\" srcSet=\"/_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Ftest.1108f56a13593d49ab506ca80d7a97d5.bmp&amp;w=640&amp;q=75 1x, /_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Ftest.1108f56a13593d49ab506ca80d7a97d5.bmp&amp;w=828&amp;q=75 2x\" src=\"/_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Ftest.1108f56a13593d49ab506ca80d7a97d5.bmp&amp;w=828&amp;q=75\" decoding=\"async\" style=\"position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%\"/></noscript><img id=\"static-bmp\" src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" decoding=\"async\" style=\"position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%\"/></div><div style=\"display:inline-block;max-width:100%;overflow:hidden;position:relative;box-sizing:border-box;margin:0\"><div style=\"box-sizing:border-box;display:block;max-width:100%\"><img style=\"max-width:100%;display:block;margin:0;border:none;padding:0\" alt=\"\" aria-hidden=\"true\" role=\"presentation\" src=\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmVyc2lvbj0iMS4xIi8+\"/></div><noscript><img id=\"static-ico\" srcSet=\"/_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Ftest.eb8f473ac874947ded8c18eee80db38d.ico&amp;w=32&amp;q=75 1x, /_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Ftest.eb8f473ac874947ded8c18eee80db38d.ico&amp;w=64&amp;q=75 2x\" src=\"/_next/image?url=%2F_next%2Fstatic%2Fimage%2Fpublic%2Ftest.eb8f473ac874947ded8c18eee80db38d.ico&amp;w=64&amp;q=75\" decoding=\"async\" style=\"position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%\"/></noscript><img id=\"static-ico\" src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" decoding=\"async\" style=\"position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%\"/></div><br/><div style=\"display:inline-block;max-width:100%;overflow:hidden;position:relative;box-sizing:border-box;margin:0\"><div style=\"box-sizing:border-box;display:block;max-width:100%\"><img style=\"max-width:100%;display:block;margin:0;border:none;padding:0\" alt=\"\" aria-hidden=\"true\" role=\"presentation\" src=\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjQwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiLz4=\"/></div><noscript><img id=\"static-unoptimized\" src=\"/_next/static/image/public/test.480a01e5ea850d0231aec0fa94bd23a0.jpg\" decoding=\"async\" style=\"position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%\"/></noscript><img id=\"static-unoptimized\" src=\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" decoding=\"async\" style=\"position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%\"/></div></div></div><script id=\"__NEXT_DATA__\" type=\"application/json\">{\"props\":{\"pageProps\":{}},\"page\":\"/static-img\",\"query\":{},\"buildId\":\"y5JPBRBN_5gUhzy5B3__z\",\"nextExport\":true,\"autoExport\":true,\"isFallback\":false,\"scriptLoader\":[]}</script></body></html>"

  72 |   })
  73 |   it('Should add a blurry placeholder to statically imported png', async () => {
> 74 |     expect(html).toContain(
     |                  ^
  75 |       `style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;filter:blur(20px);background-size:cover;background-image:url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAQAAABuBnYAAAAATklEQVR42i2I0QmAMBQD869Q9K+IsxU6RkfoiA6T55VXDpJLJC9uUJIzcx+XFd2dXMbx8n+QpoeYDpgY66RaDA83jCUfVpK2pER1dcEUP+KfSBtXK+BpAAAAAElFTkSuQmCC&quot;);background-position:0% 0%"`
  76 |     )
  77 |   })

  at Object.<anonymous> (integration/image-component/default/test/static.test.js:74:18)

@styfle styfle closed this Jul 12, 2021
@styfle styfle deleted the replace-squoosh-with-sharp branch July 12, 2021 15:31
@vercel vercel locked as resolved and limited conversation to collaborators Jan 28, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants