diff --git a/.changeset/weak-oranges-relate.md b/.changeset/weak-oranges-relate.md
new file mode 100644
index 000000000000..c61c4b7e05e8
--- /dev/null
+++ b/.changeset/weak-oranges-relate.md
@@ -0,0 +1,5 @@
+---
+"astro": patch
+---
+
+`<Image />` srcset now parses encoded paths correctly
diff --git a/packages/astro/src/assets/vite-plugin-assets.ts b/packages/astro/src/assets/vite-plugin-assets.ts
index 8dfd86d66264..85868f6e1ce3 100644
--- a/packages/astro/src/assets/vite-plugin-assets.ts
+++ b/packages/astro/src/assets/vite-plugin-assets.ts
@@ -132,10 +132,12 @@ export default function assets({
 						});
 					}
 
+					// The paths here are used for URLs, so we need to make sure they have the proper format for an URL
+					// (leading slash, prefixed with the base / assets prefix, encoded, etc)
 					if (settings.config.build.assetsPrefix) {
-						return joinPaths(settings.config.build.assetsPrefix, finalFilePath);
+						return encodeURI(joinPaths(settings.config.build.assetsPrefix, finalFilePath));
 					} else {
-						return prependForwardSlash(joinPaths(settings.config.base, finalFilePath));
+						return encodeURI(prependForwardSlash(joinPaths(settings.config.base, finalFilePath)));
 					}
 				};
 			},
diff --git a/packages/astro/test/core-image.test.js b/packages/astro/test/core-image.test.js
index 9d9ca92b8646..3c2ff8899d8d 100644
--- a/packages/astro/test/core-image.test.js
+++ b/packages/astro/test/core-image.test.js
@@ -945,6 +945,17 @@ describe('astro:image', () => {
 			expect(data).to.be.an.instanceOf(Buffer);
 		});
 
+		it('client images srcset parsed correctly', async () => {
+			const html = await fixture.readFile('/srcset/index.html');
+			const $ = cheerio.load(html);
+			const srcset = $('#local-2-widths-with-spaces img').attr('srcset');
+
+			// Find image
+			const regex = /^(.+?) [0-9]+[wx]$/gm;
+			const imageSrcset = regex.exec(srcset)[1];
+			expect(imageSrcset).to.not.contain(' ');
+    });
+ 
 		it('supports images with encoded characters in url', async () => {
 			const html = await fixture.readFile('/index.html');
 			const $ = cheerio.load(html);
diff --git a/packages/astro/test/fixtures/core-image-ssg/src/assets/image 1.jpg b/packages/astro/test/fixtures/core-image-ssg/src/assets/image 1.jpg
new file mode 100644
index 000000000000..66c86497e311
Binary files /dev/null and b/packages/astro/test/fixtures/core-image-ssg/src/assets/image 1.jpg differ
diff --git a/packages/astro/test/fixtures/core-image-ssg/src/pages/srcset.astro b/packages/astro/test/fixtures/core-image-ssg/src/pages/srcset.astro
new file mode 100644
index 000000000000..64821825a0e3
--- /dev/null
+++ b/packages/astro/test/fixtures/core-image-ssg/src/pages/srcset.astro
@@ -0,0 +1,14 @@
+---
+import { Image } from "astro:assets";
+import imageWithSpaces from "../assets/image 1.jpg";
+---
+
+<div id="local-2-widths-with-spaces">
+	<!--
+		In this example, only two images should be generated :
+		- The base image
+		- The 2x image
+		Additionally, the image URL should be encoded to avoid issues with spaces and other special characters.
+	-->
+	<Image src={imageWithSpaces} width={imageWithSpaces.width / 2} widths={[imageWithSpaces.width]} alt="" />
+</div>