Add image optimization with Cloudflare Images (#999)

Co-authored-by: Hinata Masaki <hinata@cloudflare.com>
Co-authored-by: Victor Berchet <victor@suumit.com>

Author: 3 people

examples/playground14/e2e/cloudflare.spec.ts

@@ -5,6 +5,7 @@
  */
 
 import { test, expect } from "@playwright/test";
+import sharp from "sharp";
 
 test.describe("playground/cloudflare", () => {
 	test("NextConfig", async ({ page }) => {
@@ -21,36 +22,64 @@ test.describe("playground/cloudflare", () => {
 
 	test.describe("remotePatterns", () => {
 		test("fetch an image allowed by remotePatterns", async ({ page }) => {
-			const res = await page.request.get("/_next/image?url=https://avatars.githubusercontent.com/u/248818");
+			const res = await page.request.get(
+				"/_next/image?url=https://avatars.githubusercontent.com/u/248818&w=256&q=75"
+			);
 			expect(res.status()).toBe(200);
 			expect(res.headers()).toMatchObject({ "content-type": "image/jpeg" });
 		});
 
 		test("400 when fetching an image disallowed by remotePatterns", async ({ page }) => {
-			const res = await page.request.get("/_next/image?url=https://avatars.githubusercontent.com/u/248817");
+			const res = await page.request.get(
+				"/_next/image?url=https://avatars.githubusercontent.com/u/248817&w=256&q=75"
+			);
 			expect(res.status()).toBe(400);
 		});
 	});
 
 	test.describe("localPatterns", () => {
 		test("fetch an image allowed by localPatterns", async ({ page }) => {
-			const res = await page.request.get("/_next/image?url=/snipp/snipp.webp?iscute=yes");
+			const res = await page.request.get("/_next/image?url=/snipp/snipp.webp?iscute=yes&w=256&q=75");
 			expect(res.status()).toBe(200);
 			expect(res.headers()).toMatchObject({ "content-type": "image/webp" });
 		});
 
 		test("400 when fetching an image disallowed by localPatterns with wrong query parameter", async ({
 			page,
 		}) => {
-			const res = await page.request.get("/_next/image?url=/snipp/snipp?iscute=no");
+			const res = await page.request.get("/_next/image?url=/snipp/snipp?iscute=no&w=256&q=75");
 			expect(res.status()).toBe(400);
 		});
 
 		test("400 when fetching an image disallowed by localPatterns without query parameter", async ({
 			page,
 		}) => {
-			const res = await page.request.get("/_next/image?url=/snipp/snipp");
+			const res = await page.request.get("/_next/image?url=/snipp/snipp&w=256&q=75");
 			expect(res.status()).toBe(400);
 		});
 	});
+
+	test.describe("imageSizes", () => {
+		test("400 when fetching an image with unsupported width value", async ({ page }) => {
+			const res = await page.request.get("/_next/image?url=/snipp/snipp.webp?iscute=yes&w=100&q=75");
+			expect(res.status()).toBe(400);
+		});
+	});
+
+	test.describe("qualities", () => {
+		test("400 when fetching an image with unsupported quality value", async ({ page }) => {
+			const res = await page.request.get("/_next/image?url=/snipp/snipp.webp?iscute=yes&w=256&q=100");
+			expect(res.status()).toBe(400);
+		});
+	});
+
+	test.describe('"w" parameter', () => {
+		test("Image is shrunk to target width", async ({ page }) => {
+			const res = await page.request.get("/_next/image?url=/snipp/snipp.webp?iscute=yes&w=256&q=75");
+			expect(res.status()).toBe(200);
+			const buffer = await res.body();
+			const metadata = await sharp(buffer).metadata();
+			expect(metadata.width).toBe(256);
+		});
+	});
 });

examples/playground14/package.json

@@ -24,6 +24,7 @@
 		"@opennextjs/cloudflare": "workspace:*",
 		"@playwright/test": "catalog:",
 		"@types/node": "catalog:",
+		"sharp": "^0.34.5",
 		"wrangler": "catalog:"
 	}
 }

examples/playground14/wrangler.jsonc

@@ -18,5 +18,8 @@
 		"hello": "Hello World from the cloudflare context!",
 		"PROCESS_ENV_VAR": "process.env",
 		"NEXT_INC_CACHE_KV_PREFIX": "custom_prefix"
+	},
+	"images": {
+		"binding": "IMAGES"
 	}
 }

examples/playground15/next.config.ts

@@ -12,6 +12,9 @@ const nextConfig: NextConfig = {
 	},
 	deploymentId: getDeploymentId(),
 	trailingSlash: true,
+	images: {
+		formats: ["image/avif", "image/webp"],
+	},
 };
 
 export default nextConfig;

examples/playground15/wrangler.jsonc

@@ -44,5 +44,8 @@
 			"database_id": "db_id",
 			"database_name": "db_name"
 		}
-	]
+	],
+	"images": {
+		"binding": "IMAGES"
+	}
 }

packages/cloudflare/src/api/cloudflare-context.ts

@@ -13,6 +13,10 @@ declare global {
 		// Asset binding
 		ASSETS?: Fetcher;
 
+		// Images binding for image optimization
+		// Optimization is disabled if undefined
+		IMAGES?: ImagesBinding;
+
 		// Environment to use when loading Next `.env` files
 		// Default to "production"
 		NEXTJS_ENV?: string;

packages/cloudflare/src/cli/build/open-next/compile-images.ts

@@ -19,29 +19,64 @@ export async function compileImages(options: BuildOptions) {
 		: {};
 
 	const __IMAGES_REMOTE_PATTERNS__ = JSON.stringify(imagesManifest?.images?.remotePatterns ?? []);
-	const __IMAGES_LOCAL_PATTERNS__ = JSON.stringify(imagesManifest?.images?.localPatterns ?? []);
+	const __IMAGES_LOCAL_PATTERNS__ = JSON.stringify(
+		imagesManifest?.images?.localPatterns ?? defaultLocalPatterns
+	);
+	const __IMAGES_DEVICE_SIZES__ = JSON.stringify(imagesManifest?.images?.deviceSizes ?? defaultDeviceSizes);
+	const __IMAGES_IMAGE_SIZES__ = JSON.stringify(imagesManifest?.images?.imageSizes ?? defaultImageSizes);
+	const __IMAGES_QUALITIES__ = JSON.stringify(imagesManifest?.images?.qualities ?? defaultQualities);
+	const __IMAGES_FORMATS__ = JSON.stringify(imagesManifest?.images?.formats ?? defaultFormats);
+	const __IMAGES_MINIMUM_CACHE_TTL_SEC__ = JSON.stringify(
+		imagesManifest?.images?.minimumCacheTTL ?? defaultMinimumCacheTTLSec
+	);
 	const __IMAGES_ALLOW_SVG__ = JSON.stringify(Boolean(imagesManifest?.images?.dangerouslyAllowSVG));
 	const __IMAGES_CONTENT_SECURITY_POLICY__ = JSON.stringify(
 		imagesManifest?.images?.contentSecurityPolicy ?? "script-src 'none'; frame-src 'none'; sandbox;"
 	);
 	const __IMAGES_CONTENT_DISPOSITION__ = JSON.stringify(
 		imagesManifest?.images?.contentDispositionType ?? "attachment"
 	);
+	const __IMAGES_MAX_REDIRECTS__ = JSON.stringify(
+		imagesManifest?.images?.maximumRedirects ?? defaultMaxRedirects
+	);
 
 	await build({
 		entryPoints: [imagesPath],
 		outdir: path.join(options.outputDir, "cloudflare"),
-		bundle: false,
+		bundle: true,
 		minify: false,
 		format: "esm",
 		target: "esnext",
 		platform: "node",
 		define: {
 			__IMAGES_REMOTE_PATTERNS__,
 			__IMAGES_LOCAL_PATTERNS__,
+			__IMAGES_DEVICE_SIZES__,
+			__IMAGES_IMAGE_SIZES__,
+			__IMAGES_QUALITIES__,
+			__IMAGES_FORMATS__,
+			__IMAGES_MINIMUM_CACHE_TTL_SEC__,
 			__IMAGES_ALLOW_SVG__,
 			__IMAGES_CONTENT_SECURITY_POLICY__,
 			__IMAGES_CONTENT_DISPOSITION__,
+			__IMAGES_MAX_REDIRECTS__,
 		},
 	});
 }
+
+const defaultDeviceSizes = [640, 750, 828, 1080, 1200, 1920, 2048, 3840];
+
+// 16 was included in Next.js 15
+const defaultImageSizes = [32, 48, 64, 96, 128, 256, 384];
+
+// All values between 1-100 were allowed in Next.js 15
+const defaultQualities = [75];
+
+// Was unlimited in Next.js 15
+const defaultMaxRedirects = 3;
+
+const defaultFormats = ["image/webp"];
+
+const defaultMinimumCacheTTLSec = 14400;
+
+const defaultLocalPatterns = { pathname: "/**" };