feat: enable vercel image optimization

.changeset/flat-clocks-listen.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/adapter-vercel': minor
+---
+
+feat: expose vercel image optimization config in adapter config

documentation/docs/25-build-and-deploy/90-adapter-vercel.md

@@ -18,7 +18,7 @@ import adapter from '@sveltejs/adapter-vercel';
 export default {
 	kit: {
 		adapter: adapter({
-			// see the 'Deployment configuration' section below
+			// see below for options that can be set here
 		})
 	}
 };
@@ -64,6 +64,18 @@ And the following option apply to serverless functions:
 
 If your functions need to access data in a specific region, it's recommended that they be deployed in the same region (or close to it) for optimal performance.
 
+## Image Optimization
+
+You may set the `images` config to control how Vercel builds your images. See the [image configuration reference](https://vercel.com/docs/build-output-api/v3/configuration#images) for full details. As an example, you may set:
+
+```
+{
+	sizes: [640, 828, 1200, 1920, 3840],
+	formats: ['image/avif', 'image/webp'],
+	minimumCacheTTL: 300
+}
+```
+
 ## Incremental Static Regeneration
 
 Vercel supports [Incremental Static Regeneration](https://vercel.com/docs/concepts/incremental-static-regeneration/overview) (ISR), which provides the performance and cost advantages of prerendered content with the flexibility of dynamically rendered content.

packages/adapter-vercel/index.d.ts

@@ -28,6 +28,12 @@ export interface ServerlessConfig {
 	 * If `true`, this route will always be deployed as its own separate function
 	 */
 	split?: boolean;
+
+	/**
+	 * https://vercel.com/docs/build-output-api/v3/configuration#images
+	 */
+	images?: ImagesConfig;
+
 	/**
 	 * [Incremental Static Regeneration](https://vercel.com/docs/concepts/incremental-static-regeneration/overview) configuration.
 	 * Serverless only.
@@ -53,6 +59,26 @@ export interface ServerlessConfig {
 		| false;
 }
 
+type ImageFormat = 'image/avif' | 'image/webp';
+
+type RemotePattern = {
+	protocol?: 'http' | 'https';
+	hostname: string;
+	port?: string;
+	pathname?: string;
+};
+
+type ImagesConfig = {
+	sizes: number[];
+	domains: string[];
+	remotePatterns?: RemotePattern[];
+	minimumCacheTTL?: number; // seconds
+	formats?: ImageFormat[];
+	dangerouslyAllowSVG?: boolean;
+	contentSecurityPolicy?: string;
+	contentDispositionType?: string;
+};
+
 export interface EdgeConfig {
 	/**
 	 * Whether to use [Edge Functions](https://vercel.com/docs/concepts/functions/edge-functions) or [Serverless Functions](https://vercel.com/docs/concepts/functions/serverless-functions)

packages/adapter-vercel/index.js

@@ -55,7 +55,7 @@ const plugin = function (defaults = {}) {
 				functions: `${dir}/functions`
 			};
 
-			const static_config = static_vercel_config(builder);
+			const static_config = static_vercel_config(builder, defaults);
 
 			builder.log.minor('Generating serverless function...');
 
@@ -368,14 +368,20 @@ function write(file, data) {
 }
 
 // This function is duplicated in adapter-static
-/** @param {import('@sveltejs/kit').Builder} builder */
-function static_vercel_config(builder) {
+/**
+ * @param {import('@sveltejs/kit').Builder} builder
+ * @param {import('.').Config} config
+ */
+function static_vercel_config(builder, config) {
 	/** @type {any[]} */
 	const prerendered_redirects = [];
 
 	/** @type {Record<string, { path: string }>} */
 	const overrides = {};
 
+	/** @type {import('./index').ImagesConfig} */
+	const images = config.images;
+
 	for (const [src, redirect] of builder.prerendered.redirects) {
 		prerendered_redirects.push({
 			src,
@@ -421,7 +427,8 @@ function static_vercel_config(builder) {
 				handle: 'filesystem'
 			}
 		],
-		overrides
+		overrides,
+		images
 	};
 }