feat: enable vercel image optimization (#8667)

Co-authored-by: Ben McCann <[email protected]>

.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) (`'edge'`) or [Serverless Functions](https://vercel.com/docs/concepts/functions/serverless-functions) (`'nodejs18.x'`, `'nodejs20.x'` etc).

packages/adapter-vercel/index.js

@@ -54,7 +54,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...');
 
@@ -367,14 +367,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,
@@ -420,7 +426,8 @@ function static_vercel_config(builder) {
  handle: 'filesystem'
  }
  ],
- overrides
+ overrides,
+ images
  };
 }