Add image optimization with Cloudflare 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,9 @@ declare global {
 		// Asset binding
 		ASSETS?: Fetcher;
 
+		// Images binding
+		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,53 @@ export async function compileImages(options: BuildOptions) {
 		: {};
 
 	const __IMAGES_REMOTE_PATTERNS__ = JSON.stringify(imagesManifest?.images?.remotePatterns ?? []);
+	const __IMAGES_LOCAL_PATTERNS_DEFINED__ = JSON.stringify(
+		Array.isArray(imagesManifest?.images?.localPatterns)
+	);
 	const __IMAGES_LOCAL_PATTERNS__ = JSON.stringify(imagesManifest?.images?.localPatterns ?? []);
+	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__ = JSON.stringify(
+		imagesManifest?.images?.minimumCacheTTL ?? defaultMinimumCacheTTL
+	);
 	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 ?? 3);
 
 	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_DEFINED__,
 			__IMAGES_LOCAL_PATTERNS__,
+			__IMAGES_DEVICE_SIZES__,
+			__IMAGES_IMAGE_SIZES__,
+			__IMAGES_QUALITIES__,
+			__IMAGES_FORMATS__,
+			__IMAGES_MINIMUM_CACHE_TTL__,
 			__IMAGES_ALLOW_SVG__,
 			__IMAGES_CONTENT_SECURITY_POLICY__,
 			__IMAGES_CONTENT_DISPOSITION__,
+			__IMAGES_MAX_REDIRECTS__,
 		},
 	});
 }
+
+const defaultDeviceSizes = [640, 750, 828, 1080, 1200, 1920, 2048, 3840];
+const defaultImageSizes = [32, 48, 64, 96, 128, 256, 384];
+const defaultQualities = [75];
+const defaultFormats = ["image/webp"];
+const defaultMinimumCacheTTL = 14400;