10 files changed, 81 insertions, 2 deletions
diff --git a/packages/integrations/image/test/fixtures/basic-image/package.json b/packages/integrations/image/test/fixtures/basic-image/package.json
index 42b4411a4..502e42c96 100644
--- a/packages/integrations/image/test/fixtures/basic-image/package.json
+++ b/packages/integrations/image/test/fixtures/basic-image/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@test/sharp",
+  "name": "@test/basic-image",
   "version": "0.0.0",
   "private": true,
   "dependencies": {
diff --git a/packages/integrations/image/test/fixtures/basic-image/src/pages/index.astro b/packages/integrations/image/test/fixtures/basic-image/src/pages/index.astro
index 6ee02360b..34deda90e 100644
--- a/packages/integrations/image/test/fixtures/basic-image/src/pages/index.astro
+++ b/packages/integrations/image/test/fixtures/basic-image/src/pages/index.astro
@@ -12,6 +12,6 @@ import { Image } from '@astrojs/image';
 		<br />
 		<Image id="google" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" width={544} height={184} format="webp" />
 		<br />
-		<Image id='testing' src={import('../assets/social.jpg')} width={506} format="avif" />
+		<Image id='inline' src={import('../assets/social.jpg')} width={506} />
   </body>
 </html>
diff --git a/packages/integrations/image/test/fixtures/basic-picture/astro.config.mjs b/packages/integrations/image/test/fixtures/basic-picture/astro.config.mjs
new file mode 100644
index 000000000..45a11dc9d
--- /dev/null
+++ b/packages/integrations/image/test/fixtures/basic-picture/astro.config.mjs
@@ -0,0 +1,8 @@
+import { defineConfig } from 'astro/config';
+import image from '@astrojs/image';
+
+// https://astro.build/config
+export default defineConfig({
+	site: 'http://localhost:3000',
+	integrations: [image()]
+});
diff --git a/packages/integrations/image/test/fixtures/basic-picture/package.json b/packages/integrations/image/test/fixtures/basic-picture/package.json
new file mode 100644
index 000000000..23c91f009
--- /dev/null
+++ b/packages/integrations/image/test/fixtures/basic-picture/package.json
@@ -0,0 +1,10 @@
+{
+  "name": "@test/basic-picture",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@astrojs/image": "workspace:*",
+    "@astrojs/node": "workspace:*",
+    "astro": "workspace:*"
+  }
+}
diff --git a/packages/integrations/image/test/fixtures/basic-picture/public/favicon.ico b/packages/integrations/image/test/fixtures/basic-picture/public/favicon.ico
new file mode 100644
index 000000000..578ad458b
--- /dev/null
+++ b/packages/integrations/image/test/fixtures/basic-picture/public/favicon.ico
diff --git a/packages/integrations/image/test/fixtures/basic-picture/server/server.mjs b/packages/integrations/image/test/fixtures/basic-picture/server/server.mjs
new file mode 100644
index 000000000..d7a0a7a40
--- /dev/null
+++ b/packages/integrations/image/test/fixtures/basic-picture/server/server.mjs
@@ -0,0 +1,44 @@
+import { createServer } from 'http';
+import fs from 'fs';
+import mime from 'mime';
+import { handler as ssrHandler } from '../dist/server/entry.mjs';
+
+const clientRoot = new URL('../dist/client/', import.meta.url);
+
+async function handle(req, res) {
+	ssrHandler(req, res, async (err) => {
+		if (err) {
+			res.writeHead(500);
+			res.end(err.stack);
+			return;
+		}
+
+		let local = new URL('.' + req.url, clientRoot);
+		try {
+			const data = await fs.promises.readFile(local);
+			res.writeHead(200, {
+				'Content-Type': mime.getType(req.url),
+			});
+			res.end(data);
+		} catch {
+			res.writeHead(404);
+			res.end();
+		}
+	});
+}
+
+const server = createServer((req, res) => {
+	handle(req, res).catch((err) => {
+		console.error(err);
+		res.writeHead(500, {
+			'Content-Type': 'text/plain',
+		});
+		res.end(err.toString());
+	});
+});
+
+server.listen(8085);
+console.log('Serving at http://localhost:8085');
+
+// Silence weird <time> warning
+console.error = () => {};
diff --git a/packages/integrations/image/test/fixtures/basic-picture/src/assets/blog/introducing-astro.jpg b/packages/integrations/image/test/fixtures/basic-picture/src/assets/blog/introducing-astro.jpg
new file mode 100644
index 000000000..c58aacf66
--- /dev/null
+++ b/packages/integrations/image/test/fixtures/basic-picture/src/assets/blog/introducing-astro.jpg
diff --git a/packages/integrations/image/test/fixtures/basic-picture/src/assets/social.jpg b/packages/integrations/image/test/fixtures/basic-picture/src/assets/social.jpg
new file mode 100644
index 000000000..906c76144
--- /dev/null
+++ b/packages/integrations/image/test/fixtures/basic-picture/src/assets/social.jpg
diff --git a/packages/integrations/image/test/fixtures/basic-picture/src/assets/social.png b/packages/integrations/image/test/fixtures/basic-picture/src/assets/social.png
new file mode 100644
index 000000000..1399856f1
--- /dev/null
+++ b/packages/integrations/image/test/fixtures/basic-picture/src/assets/social.png
diff --git a/packages/integrations/image/test/fixtures/basic-picture/src/pages/index.astro b/packages/integrations/image/test/fixtures/basic-picture/src/pages/index.astro
new file mode 100644
index 000000000..e3e0ade30
--- /dev/null
+++ b/packages/integrations/image/test/fixtures/basic-picture/src/pages/index.astro
@@ -0,0 +1,17 @@
+---
+import socialJpg from '../assets/social.jpg';
+import { Picture } from '@astrojs/image';
+---
+
+<html>
+  <head>
+    <!-- Head Stuff -->
+  </head>
+  <body>
+		<Picture id="social-jpg" src={socialJpg} sizes="(min-width: 640px) 50vw, 100vw" widths={[253, 506]} />
+		<br />
+		<Picture id="google" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" sizes="(min-width: 640px) 50vw, 100vw" widths={[272, 544]} aspectRatio={544/184} />
+		<br />
+		<Picture id='inline' src={import('../assets/social.jpg')} sizes="(min-width: 640px) 50vw, 100vw" widths={[253, 506]} />
+  </body>
+</html>