fix: generate correct responsive srcsets on Vercel (#13351)

* fix: generate correct responsive srcsets on Vercel

* [skipci] Apply suggestions from code review

Co-authored-by: Emanuele Stoppa <my.burning@gmail.com>

---------

Co-authored-by: Emanuele Stoppa <my.burning@gmail.com>

2 files changed, 14 insertions, 1 deletions

diff --git a/packages/integrations/vercel/src/image/shared.ts b/packages/integrations/vercel/src/image/shared.ts
index eb9681243..52c319417 100644
--- a/packages/integrations/vercel/src/image/shared.ts
+++ b/packages/integrations/vercel/src/image/shared.ts
@@ -69,6 +69,7 @@ export function getAstroImageConfig(
 	command: string,
 	devImageService: DevImageService,
 	astroImageConfig: AstroConfig['image'],
+	responsiveImages?: boolean,
 ) {
 	let devService = '@astrojs/vercel/dev-image-service';
 
@@ -86,12 +87,14 @@ export function getAstroImageConfig(
 	}
 
 	if (images) {
+		const config = imagesConfig ? imagesConfig : getDefaultImageConfig(astroImageConfig);
 		return {
 			image: {
 				service: {
 					entrypoint: command === 'dev' ? devService : '@astrojs/vercel/build-image-service',
-					config: imagesConfig ? imagesConfig : getDefaultImageConfig(astroImageConfig),
+					config,
 				},
+				experimentalBreakpoints: responsiveImages ? config.sizes : undefined,
 			},
 		};
 	}
@@ -151,6 +154,15 @@ export function sharedValidateOptions(
 		}
 	}
 
+	if (options.widths) {
+		// Vercel only supports a fixed set of widths, so remove any that aren't in the list
+		options.widths = options.widths.filter((w) => configuredWidths.includes(w));
+		// Oh no, we've removed all the widths! Let's add the nearest one back in
+		if (options.widths.length === 0) {
+			options.widths = [options.width];
+		}
+	}
+
 	if (options.quality && typeof options.quality === 'string') {
 		options.quality = options.quality in qualityTable ? qualityTable[options.quality] : undefined;
 	}
diff --git a/packages/integrations/vercel/src/index.ts b/packages/integrations/vercel/src/index.ts
index 9db18f95b..d382ed766 100644
--- a/packages/integrations/vercel/src/index.ts
+++ b/packages/integrations/vercel/src/index.ts
@@ -241,6 +241,7 @@ export default function vercelAdapter({
 						command,
 						devImageService,
 						config.image,
+						config.experimental.responsiveImages,
 					),
 				});
 			},