Optimize Images by 13%

[Zaid-maker]

What?

I saw a very cool bot called imgbot which optimized the images and reduce their sizes

Why?

How?

[ijjk]

Allow CI Workflow Run

• [x] approve CI run for commit: 45bc1ce31cef30cbf085d2f0591c25a174c90a27

Note: this should only be enabled once the PR is ready to go and can only be enabled by a maintainer

[ijjk]

Failing test suites

Commit: 4bfcdf579479dec851fe6796558ff5b7b14b7e3f

pnpm test test/integration/image-optimizer/test/content-disposition-type.test.ts

• with contentDispositionType inline > Production Mode Server support with next.config.js > should set cache-control to immutable for static images

Expand output

● with contentDispositionType inline › Production Mode Server support with next.config.js › should set cache-control to immutable for static images expect(received).toBe(expected) // Object.is equality Expected: 200 Received: 400 1312 | 1313 | const res1 = await fetchViaHTTP(ctx.appPort, '/_next/image', query, opts) > 1314 | expect(res1.status).toBe(200) | ^ 1315 | expect(res1.headers.get('Cache-Control')).toBe( 1316 | 'public, max-age=315360000, immutable' 1317 | ) at Object.toBe (integration/image-optimizer/test/util.ts:1314:27)

Read more about building and testing Next.js in contributing.md.

[ijjk]

Failing test suites

Commit: 4bfcdf579479dec851fe6796558ff5b7b14b7e3f

pnpm test test/integration/next-image-legacy/base-path/test/static.test.ts

• Static Image Component Tests for basePath > development mode > Should add a blur placeholder to statically imported jpg
• Static Image Component Tests for basePath > production mode > Should add a blur placeholder to statically imported png

Expand output

● Static Image Component Tests for basePath › production mode › Should add a blur 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%;background-size:cover;background-position:0% 0%;filter:blur(20px);background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAICAMAAAALMbVOAAAAFVBMVEUBAQEtLS1CQkIHBwf9/f21tbWurq5/IXexAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAHElEQVR4nGNggAJmJmYGJhYmBlYWNgZGRkaYMAACTwAjtdG5RQAAAABJRU5ErkJggg==")" Received string: "

Static Image

Static Image

" 90 | ) 91 | } else { > 92 | expect(html).toContain( | ^ 93 | `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%;background-size:cover;background-position:0% 0%;filter:blur(20px);background-image:url(${ 94 | isDev 95 | ? '"/docs/_next/image?url=%2Fdocs%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=8&q=70"' at Object.toContain (integration/next-image-legacy/base-path/test/static.test.ts:92:20) ● Static Image Component Tests for basePath › development mode › Should add a blur 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%;background-size:cover;background-position:0% 0%;filter:blur(20px);background-image:url("/docs/_next/image?url=%2Fdocs%2F_next%2Fstatic%2Fmedia%2Ftest.fab2915d.jpg&w=8&q=70")" Received string: "

Static Image

Static Image

" 75 | ) 76 | } else { > 77 | expect(html).toContain( | ^ 78 | `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%;background-size:cover;background-position:0% 0%;filter:blur(20px);background-image:url(${ 79 | isDev 80 | ? '"/docs/_next/image?url=%2Fdocs%2F_next%2Fstatic%2Fmedia%2Ftest.fab2915d.jpg&w=8&q=70"' at Object.toContain (integration/next-image-legacy/base-path/test/static.test.ts:77:20)

Read more about building and testing Next.js in contributing.md.

TURBOPACK=1 pnpm test test/integration/image-optimizer/test/dangerously-allow-svg.test.ts (turbopack)

• with dangerouslyAllowSVG config > dev support with next.config.js > should maintain vector svg

Expand output

● with dangerouslyAllowSVG config › dev support with next.config.js › should maintain vector svg expect(received).toBe(expected) // Object.is equality Expected: "603" Received: "442" 310 | const res = await fetchViaHTTP(ctx.appPort, '/_next/image', query, opts) 311 | expect(res.status).toBe(200) > 312 | expect(res.headers.get('Content-Length')).toBe('603') | ^ 313 | expect(res.headers.get('Content-Type')).toContain('image/svg+xml') 314 | expect(res.headers.get('Cache-Control')).toBe( 315 | `public, max-age=0, must-revalidate` at Object.toBe (integration/image-optimizer/test/util.ts:312:49)

Read more about building and testing Next.js in contributing.md.

pnpm test test/integration/next-image-legacy/default/test/static.test.ts

• Static Image Component Tests > production mode > Should add a blur placeholder to statically imported png

Expand output

● Static Image Component Tests › production mode › Should add a blur 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%;background-size:cover;background-position:0% 0%;filter:blur(20px);background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAICAMAAAALMbVOAAAAFVBMVEUBAQEtLS1CQkIHBwf9/f21tbWurq5/IXexAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAHElEQVR4nGNggAJmJmYGJhYmBlYWNgZGRkaYMAACTwAjtdG5RQAAAABJRU5ErkJggg==")" Received string: "

Static Image

Static Image

" 71 | }) 72 | it('Should add a blur placeholder to statically imported png', async () => { > 73 | expect(html).toContain( | ^ 74 | `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%;background-size:cover;background-position:0% 0%;filter:blur(20px);background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAICAMAAAALMbVOAAAAFVBMVEUBAQEtLS1CQkIHBwf9/f21tbWurq5/IXexAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAHElEQVR4nGNggAJmJmYGJhYmBlYWNgZGRkaYMAACTwAjtdG5RQAAAABJRU5ErkJggg==")` 75 | ) 76 | }) at Object.toContain (integration/next-image-legacy/default/test/static.test.ts:73:18)

Read more about building and testing Next.js in contributing.md.

pnpm test test/integration/next-image-new/base-path/test/static.test.js

• Static Image Component Tests for basePath > development mode > should add a blur placeholder a statically imported jpg

Expand output

● Static Image Component Tests for basePath › development mode › should add a blur placeholder a statically imported jpg expect(received).toBe(expected) // Object.is equality Expected: "color:transparent;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-image:url(\"/docs/_next/image?url=%2Fdocs%2F_next%2Fstatic%2Fmedia%2Ftest-rect.f323a148.jpg&w=8&q=70\")" Received: "color:transparent;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-image:url(\"/docs/_next/image?url=%2Fdocs%2F_next%2Fstatic%2Fmedia%2Ftest-rect.5b32ee26.jpg&w=8&q=70\")" 125 | ) 126 | } else { > 127 | expect(style).toBe( | ^ 128 | `color:transparent;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-image:url("/docs/_next/image?url=%2Fdocs%2F_next%2Fstatic%2Fmedia%2Ftest-rect.f323a148.jpg&w=8&q=70")` 129 | ) 130 | } at Object.toBe (integration/next-image-new/base-path/test/static.test.js:127:23)

Read more about building and testing Next.js in contributing.md.

TURBOPACK=1 pnpm test test/integration/url/test/index.test.js (turbopack)

• Handle new URL asset references in next dev > should respond on size api

Expand output

● Handle new URL asset references in next dev › should respond on size api expect(received).toEqual(expected) // deep equality - Expected - 1 + Received + 1 Object { - "size": 30079, + "size": 17515, } 67 | ) 68 | > 69 | expect(data).toEqual({ size: 30079 }) | ^ 70 | }) 71 | 72 | it('should respond on basename api', async () => { at Object.toEqual (integration/url/test/index.test.js:69:22)

Read more about building and testing Next.js in contributing.md.

pnpm test test/integration/image-optimizer/test/minimum-cache-ttl.test.ts

• with minimumCacheTTL of 5 sec > Production Mode Server support with next.config.js > should set cache-control to immutable for static images

Expand output

● with minimumCacheTTL of 5 sec › Production Mode Server support with next.config.js › should set cache-control to immutable for static images expect(received).toBe(expected) // Object.is equality Expected: 200 Received: 400 1312 | 1313 | const res1 = await fetchViaHTTP(ctx.appPort, '/_next/image', query, opts) > 1314 | expect(res1.status).toBe(200) | ^ 1315 | expect(res1.headers.get('Cache-Control')).toBe( 1316 | 'public, max-age=315360000, immutable' 1317 | ) at Object.toBe (integration/image-optimizer/test/util.ts:1314:27)

Read more about building and testing Next.js in contributing.md.

TURBOPACK=1 pnpm test-dev test/development/basic/gssp-ssr-change-reloading/test/index.test.ts (turbopack)

• GS(S)P Server-Side Change Reloading > should not reload page when client-side is changed too GSP

Expand output

● GS(S)P Server-Side Change Reloading › should not reload page when client-side is changed too GSP expect(received).toEqual(expected) // deep equality - Expected - 1 + Received + 1 Object { "count": 1, "params": Object { "post": "first", }, - "random": 0.09939753045447741, + "random": 0.0923358562372687, } 48 | 49 | const props2 = JSON.parse(await browser.elementByCss('#props').text()) > 50 | expect(props).toEqual(props2) | ^ 51 | 52 | await next.patchFile(page, originalContent) 53 | await check(() => browser.elementByCss('#change').text(), 'change me') at Object.toEqual (development/basic/gssp-ssr-change-reloading/test/index.test.ts:50:19)

Read more about building and testing Next.js in contributing.md.

pnpm test test/integration/css/test/basic-global-support.test.js

• CSS URL via file-loader > production mode > useLightnincsss(false) > should've emitted expected files
• CSS URL via file-loader > production mode > useLightnincsss(true) > should've emitted expected files

Expand output

● CSS URL via `file-loader` › production mode › useLightnincsss(true) › should've emitted expected files expect(received).toMatchSnapshot() Snapshot name: `CSS URL via \`file-loader\` production mode useLightnincsss(true) should've emitted expected files 1` Snapshot: ".red-text{color:red;background-image:url(/_next/static/media/dark.6b01655b.svg) url(/_next/static/media/dark2.6b01655b.svg)}.blue-text{color:orange;background-image:url(/_next/static/media/light.2da1d3d6.svg);font-weight:bolder;color:#00f}" Received: ".red-text{color:red;background-image:url(/_next/static/media/dark.74f128b6.svg) url(/_next/static/media/dark2.74f128b6.svg)}.blue-text{color:orange;background-image:url(/_next/static/media/light.f19a88b3.svg);font-weight:bolder;color:#00f}" 364 | expect( 365 | cssContent.replace(/\/\*.*?\*\//g, '').trim() > 366 | ).toMatchSnapshot() | ^ 367 | 368 | const mediaFiles = await readdir(mediaFolder) 369 | expect(mediaFiles.length).toBe(3) at Object.toMatchSnapshot (integration/css/test/basic-global-support.test.js:366:13) ● CSS URL via `file-loader` › production mode › useLightnincsss(false) › should've emitted expected files expect(received).toMatchSnapshot() Snapshot name: `CSS URL via \`file-loader\` production mode useLightnincsss(false) should've emitted expected files 1` Snapshot: ".red-text{color:red;background-image:url(/_next/static/media/dark.6b01655b.svg) url(/_next/static/media/dark2.6b01655b.svg)}.blue-text{color:orange;font-weight:bolder;background-image:url(/_next/static/media/light.2da1d3d6.svg);color:blue}" Received: ".red-text{color:red;background-image:url(/_next/static/media/dark.74f128b6.svg) url(/_next/static/media/dark2.74f128b6.svg)}.blue-text{color:orange;font-weight:bolder;background-image:url(/_next/static/media/light.f19a88b3.svg);color:blue}" 364 | expect( 365 | cssContent.replace(/\/\*.*?\*\//g, '').trim() > 366 | ).toMatchSnapshot() | ^ 367 | 368 | const mediaFiles = await readdir(mediaFolder) 369 | expect(mediaFiles.length).toBe(3) at Object.toMatchSnapshot (integration/css/test/basic-global-support.test.js:366:13)

Read more about building and testing Next.js in contributing.md.

[samcx]

@Zaid-maker This likely isn't worth the work to fix the tests—with next/image, you'll be optimizing the images already.

[Zaid-maker]

@Zaid-maker This likely isn't worth the work to fix the tests—with next/image, you'll be optimizing the images already.

@Zaid-maker This likely isn't worth the work to fix the tests—with next/image, you'll be optimizing the images already.

Hmmm!

[samcx]

@Zaid-maker Let me know if that makes sense! If yes, we can proceed with closing the issue.