feat: image cdn support #232

pieh · 2025-05-28T11:51:06Z

https://linear.app/netlify/issue/FRB-1838/support-image-optimization

Adds Image CDN support. Should have parity with handling we have in CLI:

supports both local and remote images
checks if remote image is allowed
applies image transformations with ipx (there is transformation from our syntax to ipx syntax which was copied and adjusted from CLI)

…1858-add-passthrough-image-optimization-for-netlifyimages

… text

…1858-add-passthrough-image-optimization-for-netlifyimages

pieh · 2025-06-04T11:39:38Z

packages/dev-utils/src/test/generate-image.ts

+/**
+ * Returns Buffer of a generated random noise jpeg image with the specified width and height.
+ */
+export async function generateImage(width: number, height: number): Promise<Buffer> {


To avoid adding fixture style images to repo, this will generate images on-demand (random noise, so they don't mean anything, but can be used to assert resizing correctness)

In this PR this is used in ~unit tests for ImageHandler AND e2e for vite plugin

Additionally minor adjustments to Fixture to allow return of this image to feed into Fixture.withFile builder

pieh · 2025-06-04T11:40:21Z

packages/dev-utils/src/test/generate-image.ts

+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+        const imageBuffer = image.data as Buffer


TS type for the lib that generates random images is ... not working (image is treated as error type) :/

pieh · 2025-06-04T11:42:56Z

packages/dev/README.md

-| Image CDN              | ❌ No     |
+| Image CDN              | ✅ Yes    |

 > Note: Missing features will be added incrementally. This module is **not** intended to be a full replacement for the


First sentence of note right now doesn't make much sense because feature support matrix with this PR is "everything is supported".

Given our previous chats I was thinking about Extensions item and marking as not supported in which case Note itself might not need any changes

pieh · 2025-06-04T11:45:13Z

packages/dev/src/main.ts

 }

-export type ResponseType = 'edge-function' | 'function' | 'redirect' | 'static'
+export type ResponseType = 'edge-function' | 'function' | 'image' | 'redirect' | 'static'


Should this be considered a breaking change? There is new possible response type for public handleAndIntrospect(NodeRequest) methods

Not sure that's worth a major bump, but happy to defer to you.

I don't think we should consider widening a type as a breaking change

packages/dev/src/main.ts

serhalp · 2025-06-04T13:25:06Z

packages/images/package.json

+    "vitest": "^3.1.4"
+  },
+  "dependencies": {
+    "ipx": "^3.0.3"


👯 👯 👯 netlify/cli#6308

This is good shout, but hopefully this would be addressed by sharp bump that is done in ipx@3 - https://github.com/unjs/ipx/releases/tag/v3.0.0 / lovell/sharp#3750 (vs ipx@2 using older sharp installation that is problematic)

eslint_temporary_suppressions.js

packages/images/src/main.test.ts

…1858-add-passthrough-image-optimization-for-netlifyimages

…rver provided

eduardoboucas · 2025-06-04T20:22:35Z

packages/dev/src/main.test.ts

+      const dev = new NetlifyDev({
+        projectRoot: directory,
+        edgeFunctions: {
+          // disable edge functions to avoid relying on edge functions handling spinning up internal server


What do you mean here?

This is currently in main:

primitives/packages/dev/src/main.ts

Lines 392 to 406 in bf00043

// If a custom server has been provided, use it. If not, we must stand up

// a new one, since it's required for communication with edge functions.

if (typeof this.#server === 'string') {

serverAddress = this.#server

} else if (this.#features.edgeFunctions) {

const passthroughServer = new HTTPServer(async (req) => {

const res = await this.handle(req)

return res ?? new Response(null, { status: 404 })

})

this.#cleanupJobs.push(() => passthroughServer.stop())

serverAddress = await passthroughServer.start()

}

Handling of local images does rely on origin server, so for the case of ~standalone @netlify/dev without ~external origin server I wanted to have a test that doesn't rely on any side-effects other features might have to make sure it's all self-reliant.

Maybe this could be adjusted to just disable ALL features except for images, because disabling only edge-functions specifically might leak too much of current implementation detail (or have 2 cases - one with default and everything enabled to make sure it all works together and one with just images enabled to test that images handling deal with all its requirements and doesn't rely on other features)

packages/dev/src/main.test.ts

eduardoboucas · 2025-06-04T20:24:54Z

packages/dev/src/main.ts

 }

-export type ResponseType = 'edge-function' | 'function' | 'redirect' | 'static'
+export type ResponseType = 'edge-function' | 'function' | 'image' | 'redirect' | 'static'


Not sure that's worth a major bump, but happy to defer to you.

packages/dev/src/main.ts

packages/images/src/main.test.ts

packages/images/src/main.ts

Co-authored-by: Eduardo Bouças <mail@eduardoboucas.com>

…andom images

eduardoboucas · 2025-06-05T09:59:29Z

packages/dev-utils/src/test/image.ts

+/**
+ * Helper to create a server handler that responds with a random noise image.
+ */
+export function createImageServerHandler(imageConfigFromURL: (url: URL) => { width: number; height: number } | null) {


Not a blocker, but I'm curious why you choose to pass a function here as opposed to something like Record<URL, { width: number, height: number }>?

This felt customizable enough to support potential future test setups that respond to /random-image/:width/:height without having to declare all allowed size combinations ahead of time in tests.

But because nothing like that is actually being done and I could get away with alternative you mentioned (or probably anything heh) for the current tests - I'm happy to adjust, if that would be preferred. I don't have strong feelings here one way or the other.

…1858-add-passthrough-image-optimization-for-netlifyimages

…age-optimization-for-netlifyimages

pieh added 5 commits May 28, 2025 13:48

feat: initial image cdn handling

d13cf43

Merge remote-tracking branch 'origin/main' into michalpiechowiak/frb-…

1521d5b

…1858-add-passthrough-image-optimization-for-netlifyimages

chore: fix lint

7dda011

chore: format

279af0a

chore: TODO note about serverAddress

984eed3

pieh force-pushed the michalpiechowiak/frb-1858-add-passthrough-image-optimization-for-netlifyimages branch from 97cf088 to 655159d Compare May 30, 2025 11:19

pieh added 2 commits May 30, 2025 13:25

feat: warn about invalid remote patterns

10de36f

test: add tests for remote images

3541d01

pieh force-pushed the michalpiechowiak/frb-1858-add-passthrough-image-optimization-for-netlifyimages branch from 655159d to 3541d01 Compare May 30, 2025 11:49

pieh added 16 commits June 2, 2025 09:48

test: add tests for images endpoint and request method

868d6e3

Merge remote-tracking branch 'origin/main' into michalpiechowiak/frb-…

98e440c

…1858-add-passthrough-image-optimization-for-netlifyimages

post-merge fixes

a2b1065

adjust feature support matrix

99db75e

test: adjust assertions for added feature

2e7f8fb

chore: fix lint

d6476cd

test: adjust to not use .bytes(), match mocked response, not response…

a49fdc5

… text

fix: use originServerAddress

281e4bb

Merge remote-tracking branch 'origin/main' into michalpiechowiak/frb-…

9909754

…1858-add-passthrough-image-optimization-for-netlifyimages

chore: remove not existign server.d.ts from package.json#files

3d8fcc2

test: use mock logger from dev-utils

5f667c9

test: add first local image test

65aa6b3

test: add tests for resizing

bff46f9

test: test image cdn handling in vite

be1420c

Merge remote-tracking branch 'origin/main' into michalpiechowiak/frb-…

996a715

…1858-add-passthrough-image-optimization-for-netlifyimages

chore: add jsdoc for generateImage

6986b42

pieh changed the title ~~feat: initial image cdn handling~~ feat: image cdn support Jun 4, 2025

pieh commented Jun 4, 2025

View reviewed changes

pieh requested a review from a team as a code owner June 4, 2025 11:55

pieh commented Jun 4, 2025

View reviewed changes

packages/dev/src/main.ts Show resolved Hide resolved

serhalp reviewed Jun 4, 2025

View reviewed changes

mrstork reviewed Jun 4, 2025

View reviewed changes

eslint_temporary_suppressions.js Outdated Show resolved Hide resolved

chore: no need to supress n/no-unsupported-features/node-builtins

2c53d92

mrstork reviewed Jun 4, 2025

View reviewed changes

packages/images/src/main.test.ts Outdated Show resolved Hide resolved

pieh added 5 commits June 4, 2025 17:27

docs: fix shield url for netlify/images

5c473d8

fix: drop node 18

723270e

chore: add images to .release-please-manifest.json

d575532

Merge remote-tracking branch 'origin/main' into michalpiechowiak/frb-…

b0eadc2

…1858-add-passthrough-image-optimization-for-netlifyimages

fix: spin up server when images are enabled and there is no origin se…

7621a4d

…rver provided

pieh force-pushed the michalpiechowiak/frb-1858-add-passthrough-image-optimization-for-netlifyimages branch from 8a9a46b to 7621a4d Compare June 4, 2025 16:50

chore: fix lint

a38db95

eduardoboucas reviewed Jun 4, 2025

View reviewed changes

pieh and others added 8 commits June 5, 2025 09:23

Update packages/images/src/main.ts

74dc91a

Co-authored-by: Eduardo Bouças <mail@eduardoboucas.com>

chore: http.createServer -> HTTPServer

3021856

fix: early bail to limit nesting

92becbb

refactor: create helper function for HTTPServer handler that serves r…

24d3ec7

…andom images

test: use own http server for testing remote images instead of unsplash

f025ef1

fix: move image matching to before function matching

955c109

fix: handle image cdn rewrites

0af3615

fix: log error when image generation for tests fails

58f0e0e

eduardoboucas previously approved these changes Jun 5, 2025

View reviewed changes

Merge remote-tracking branch 'origin/main' into michalpiechowiak/frb-…

5cf290e

…1858-add-passthrough-image-optimization-for-netlifyimages

pieh dismissed eduardoboucas’s stale review via 5cf290e June 6, 2025 07:34

eduardoboucas approved these changes Jun 6, 2025

View reviewed changes

Merge branch 'main' into michalpiechowiak/frb-1858-add-passthrough-im…

d9332c2

…age-optimization-for-netlifyimages

pieh merged commit 01c844d into main Jun 6, 2025
10 checks passed

pieh deleted the michalpiechowiak/frb-1858-add-passthrough-image-optimization-for-netlifyimages branch June 6, 2025 09:58

token-generator-app bot mentioned this pull request Jun 6, 2025

chore: release main #296

Merged

		// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
		const imageBuffer = image.data as Buffer

	// If a custom server has been provided, use it. If not, we must stand up
	// a new one, since it's required for communication with edge functions.
	if (typeof this.#server === 'string') {
	serverAddress = this.#server
	} else if (this.#features.edgeFunctions) {
	const passthroughServer = new HTTPServer(async (req) => {
	const res = await this.handle(req)

	return res ?? new Response(null, { status: 404 })
	})

	this.#cleanupJobs.push(() => passthroughServer.stop())

	serverAddress = await passthroughServer.start()
	}

feat: image cdn support #232

feat: image cdn support #232

Uh oh!

Conversation

pieh commented May 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pieh Jun 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

pieh Jun 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

pieh Jun 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

pieh commented May 28, 2025 •

edited

Loading

pieh Jun 4, 2025 •

edited

Loading

pieh Jun 4, 2025 •

edited

Loading

pieh Jun 4, 2025 •

edited

Loading