fix(assets): ensure valid mime types in picture component (#11147)

* test: Add test for Picture MIME types

* fix(assets): Fix MIME type generation in Picture component

* chore: changeset

* fix: Trust mrmime to handle an undefined lookup argument

* fix: Use image.src as fallback argument to mrmime

---------

Co-authored-by: Erika <3019731+Princesseuh@users.noreply.github.com>

4 files changed, 33 insertions, 1 deletions

diff --git a/.changeset/serious-garlics-cheer.md b/.changeset/serious-garlics-cheer.md
new file mode 100644
index 000000000..225b8c2d6
--- /dev/null
+++ b/.changeset/serious-garlics-cheer.md
@@ -0,0 +1,5 @@
+---
+"astro": patch
+---
+
+Fixes invalid MIME types in Picture source elements for jpg and svg extensions, which was preventing otherwise valid source variations from being shown by the browser
diff --git a/packages/astro/components/Picture.astro b/packages/astro/components/Picture.astro
index 1b4f67e5d..593dd8097 100644
--- a/packages/astro/components/Picture.astro
+++ b/packages/astro/components/Picture.astro
@@ -1,5 +1,6 @@
 ---
 import { type LocalImageProps, type RemoteImageProps, getImage } from 'astro:assets';
+import * as mime from 'mrmime';
 import type { GetImageResult, ImageOutputFormat } from '../dist/@types/astro';
 import { isESMImportedImage, resolveSrc } from '../dist/assets/utils/imageKind';
 import { AstroError, AstroErrorData } from '../dist/core/errors/index.js';
@@ -99,7 +100,7 @@ if (import.meta.env.DEV) {
 			return (
 				<source
 					srcset={srcsetAttribute}
-					type={'image/' + image.options.format}
+					type={mime.lookup(image.options.format ?? image.src) ?? `image/${image.options.format}`}
 					{...sourceAdditionalAttributes}
 				/>
 			);
diff --git a/packages/astro/test/core-image.test.js b/packages/astro/test/core-image.test.js
index 539688725..17c08db21 100644
--- a/packages/astro/test/core-image.test.js
+++ b/packages/astro/test/core-image.test.js
@@ -244,6 +244,26 @@ describe('astro:image', () => {
 					srcset2.map((src) => src.w),
 					[207]
 				);
+
+				// MIME Types
+				const validMimeTypes = [
+					'image/webp',
+					'image/jpeg',
+					'image/avif',
+					'image/png',
+					'image/gif',
+					'image/svg+xml',
+				];
+
+				const $sources = $('#picture-mime-types picture source');
+				for ($source of $sources) {
+					const type = $source.attribs.type;
+					assert.equal(
+						validMimeTypes.includes(type),
+						true,
+						`Expected type attribute value to be a valid MIME type: ${type}`
+					);
+				}
 			});
 
 			it('Picture component scope styles work', async () => {
diff --git a/packages/astro/test/fixtures/core-image/src/pages/picturecomponent.astro b/packages/astro/test/fixtures/core-image/src/pages/picturecomponent.astro
index ddb7108f1..901b91ee8 100644
--- a/packages/astro/test/fixtures/core-image/src/pages/picturecomponent.astro
+++ b/packages/astro/test/fixtures/core-image/src/pages/picturecomponent.astro
@@ -1,6 +1,7 @@
 ---
 import { Picture } from "astro:assets";
 import myImage from "../assets/penguin1.jpg";
+import myImageSvg from '../assets/penguin.svg';
 ---
 
 <div id="picture-density-2-format">
@@ -19,6 +20,11 @@ import myImage from "../assets/penguin1.jpg";
   <Picture src={myImage} fallbackFormat="jpeg" alt="A penguin" class="img-comp" pictureAttributes={{ class: 'picture-comp' }} />
 </div>
 
+<div id="picture-mime-types">
+  <Picture alt="A penguin" src={myImage} formats={['jpg', 'jpeg', 'png', 'avif', 'webp']} />
+  <Picture alt="A penguin" src={myImageSvg} />
+</div>
+
 <style>
   .img-comp {
     border: 5px solid blue;