feat(vercel): Use Sharp in dev instead of Squoosh by default (#8445)

* feat(vercel): Use Sharp in dev instead of Squoosh by default

* fix(build):

* nit: adjust with feedback

* fix: imports

* Update packages/integrations/vercel/README.md

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

* docs: small change in other part of the README

---------

Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca>

1 files changed, 33 insertions, 0 deletions

diff --git a/packages/integrations/vercel/src/image/shared-dev-service.ts b/packages/integrations/vercel/src/image/shared-dev-service.ts
new file mode 100644
index 000000000..4251603a7
--- /dev/null
+++ b/packages/integrations/vercel/src/image/shared-dev-service.ts
@@ -0,0 +1,33 @@
+import type { LocalImageService } from 'astro';
+import { sharedValidateOptions } from './shared.js';
+
+export const baseDevService: Omit<LocalImageService, 'transform'> = {
+	validateOptions: (options, serviceOptions) =>
+		sharedValidateOptions(options, serviceOptions.service.config, 'development'),
+	getURL(options) {
+		const fileSrc = typeof options.src === 'string' ? options.src : options.src.src;
+
+		const searchParams = new URLSearchParams();
+		searchParams.append('href', fileSrc);
+
+		options.width && searchParams.append('w', options.width.toString());
+		options.quality && searchParams.append('q', options.quality.toString());
+
+		return '/_image?' + searchParams;
+	},
+	parseURL(url) {
+		const params = url.searchParams;
+
+		if (!params.has('href')) {
+			return undefined;
+		}
+
+		const transform = {
+			src: params.get('href')!,
+			width: params.has('w') ? parseInt(params.get('w')!) : undefined,
+			quality: params.get('q'),
+		};
+
+		return transform;
+	},
+};