diff --git a/packages/integrations/image/components/Picture.astro b/packages/integrations/image/components/Picture.astro
index fb1f1e2bd..0de8c8e33 100644
--- a/packages/integrations/image/components/Picture.astro
+++ b/packages/integrations/image/components/Picture.astro
@@ -4,14 +4,14 @@ import loader from 'virtual:image-loader';
 import { getPicture } from '../src/get-picture.js';
 import type { ImageAttributes, ImageMetadata, OutputFormat, PictureAttributes, TransformOptions } from '../src/types.js';
 
-export interface LocalImageProps extends Omit<PictureAttributes, 'src' | 'width' | 'height'>, Omit<TransformOptions, 'src'>, Omit<ImageAttributes, 'src' | 'width' | 'height'> {
+export interface LocalImageProps extends Omit<TransformOptions, 'src'>, Omit<ImageAttributes, 'src' | 'width' | 'height'> {
 	src: ImageMetadata | Promise<{ default: ImageMetadata }>;
 	sizes: HTMLImageElement['sizes'];
 	widths: number[];
 	formats?: OutputFormat[];
 }
 
-export interface RemoteImageProps extends Omit<PictureAttributes, 'src' | 'width' | 'height'>, TransformOptions, Omit<ImageAttributes, 'src' | 'width' | 'height'> {
+export interface RemoteImageProps extends TransformOptions, Omit<ImageAttributes, 'src' | 'width' | 'height'> {
 	src: string;
 	sizes: HTMLImageElement['sizes'];
 	widths: number[];
@@ -26,10 +26,10 @@ const { src, sizes, widths, aspectRatio, formats = ['avif', 'webp'], loading = '
 const { image, sources } = await getPicture({ loader, src, widths, formats, aspectRatio });
 ---
 
-<picture {...attrs}>
+<picture>
 	{sources.map(attrs => (
 	<source {...attrs} {sizes}>))}
-	<img {...image} {loading} {decoding} />
+	<img {...image} {...attrs} {loading} {decoding} />
 </picture>
 
 <style>
diff --git a/packages/integrations/image/test/picture-ssg.test.js b/packages/integrations/image/test/picture-ssg.test.js
index 0da1daa1c..b65d6c5cf 100644
--- a/packages/integrations/image/test/picture-ssg.test.js
+++ b/packages/integrations/image/test/picture-ssg.test.js
@@ -38,7 +38,8 @@ describe('SSG pictures', function () {
 
 		describe('Local images', () => {
 			it('includes sources', () => {
-				const sources = $('#social-jpg source');
+				const picture = $('#social-jpg').parent('picture');
+				const sources = picture.children('source');
 
 				expect(sources.length).to.equal(3);
 
@@ -46,7 +47,7 @@ describe('SSG pictures', function () {
 			});
 
 			it('includes src, width, and height attributes', () => {
-				const image = $('#social-jpg img');
+				const image = $('#social-jpg');
 
 				expect(image.attr('src')).to.equal('/_image/assets/social_506x253.jpg');
 				expect(image.attr('width')).to.equal('506');
@@ -65,7 +66,8 @@ describe('SSG pictures', function () {
 
 		describe('Inline imports', () => {
 			it('includes sources', () => {
-				const sources = $('#inline source');
+				const picture = $('#inline').parent('picture');
+				const sources = picture.children('source');
 
 				expect(sources.length).to.equal(3);
 
@@ -73,7 +75,7 @@ describe('SSG pictures', function () {
 			});
 
 			it('includes src, width, and height attributes', () => {
-				const image = $('#inline img');
+				const image = $('#inline');
 
 				expect(image.attr('src')).to.equal('/_image/assets/social_506x253.jpg');
 				expect(image.attr('width')).to.equal('506');
@@ -96,7 +98,8 @@ describe('SSG pictures', function () {
 			const HASH = 'Z1iI4xW';
 
 			it('includes sources', () => {
-				const sources = $('#google source');
+				const picture = $('#google').parent('picture');
+				const sources = picture.children('source');
 
 				expect(sources.length).to.equal(3);
 
@@ -104,7 +107,7 @@ describe('SSG pictures', function () {
 			});
 
 			it('includes src, width, and height attributes', () => {
-				const image = $('#google img');
+				const image = $('#google');
 
 				expect(image.attr('src')).to.equal(`/_image/googlelogo_color_272x92dp-${HASH}_544x184.png`);
 				expect(image.attr('width')).to.equal('544');
@@ -162,7 +165,8 @@ describe('SSG pictures', function () {
 
 		describe('Local images', () => {
 			it('includes sources', () => {
-				const sources = $('#social-jpg source');
+				const picture = $('#social-jpg').parent('picture');
+				const sources = picture.children('source');
 
 				expect(sources.length).to.equal(3);
 
@@ -170,7 +174,7 @@ describe('SSG pictures', function () {
 			});
 
 			it('includes src, width, and height attributes', () => {
-				const image = $('#social-jpg img');
+				const image = $('#social-jpg');
 
 				const src = image.attr('src');
 				const [route, params] = src.split('?');
@@ -187,7 +191,7 @@ describe('SSG pictures', function () {
 			});
 
 			it('returns the optimized image', async () => {
-				const image = $('#social-jpg img');
+				const image = $('#social-jpg');
 
 				const res = await fixture.fetch(image.attr('src'));
 
@@ -200,7 +204,8 @@ describe('SSG pictures', function () {
 
 		describe('Local images with inline imports', () => {
 			it('includes sources', () => {
-				const sources = $('#inline source');
+				const picture = $('#inline').parent('picture');
+				const sources = picture.children('source');
 
 				expect(sources.length).to.equal(3);
 
@@ -208,7 +213,7 @@ describe('SSG pictures', function () {
 			});
 
 			it('includes src, width, and height attributes', () => {
-				const image = $('#inline img');
+				const image = $('#inline');
 
 				const src = image.attr('src');
 				const [route, params] = src.split('?');
@@ -225,7 +230,7 @@ describe('SSG pictures', function () {
 			});
 
 			it('returns the optimized image', async () => {
-				const image = $('#inline img');
+				const image = $('#inline');
 
 				const res = await fixture.fetch(image.attr('src'));
 
@@ -238,7 +243,8 @@ describe('SSG pictures', function () {
 
 		describe('Remote images', () => {
 			it('includes sources', () => {
-				const sources = $('#google source');
+				const picture = $('#google').parent('picture');
+				const sources = picture.children('source');
 
 				expect(sources.length).to.equal(3);
 
@@ -246,7 +252,7 @@ describe('SSG pictures', function () {
 			});
 
 			it('includes src, width, and height attributes', () => {
-				const image = $('#google img');
+				const image = $('#google');
 
 				const src = image.attr('src');
 				const [route, params] = src.split('?');
diff --git a/packages/integrations/image/test/picture-ssr.test.js b/packages/integrations/image/test/picture-ssr.test.js
index 5bdc6f04c..cf7aacf6b 100644
--- a/packages/integrations/image/test/picture-ssr.test.js
+++ b/packages/integrations/image/test/picture-ssr.test.js
@@ -26,7 +26,8 @@ describe('SSR pictures - build', function () {
 			const html = await response.text();
 			const $ = cheerio.load(html);
 
-			const sources = $('#social-jpg source');
+			const picture = $('#social-jpg').parent('picture');
+			const sources = picture.children('source');
 
 			expect(sources.length).to.equal(3);
 
@@ -41,7 +42,7 @@ describe('SSR pictures - build', function () {
 			const html = await response.text();
 			const $ = cheerio.load(html);
 
-			const image = $('#social-jpg img');
+			const image = $('#social-jpg');
 
 			const src = image.attr('src');
 			const [route, params] = src.split('?');
@@ -66,7 +67,7 @@ describe('SSR pictures - build', function () {
 			const html = await response.text();
 			const $ = cheerio.load(html);
 
-			const image = $('#social-jpg img');
+			const image = $('#social-jpg');
 
 			const res = await fixture.fetch(image.attr('src'));
 
@@ -86,7 +87,8 @@ describe('SSR pictures - build', function () {
 			const html = await response.text();
 			const $ = cheerio.load(html);
 
-			const sources = $('#inline source');
+			const picture = $('#inline').parent('picture');
+			const sources = picture.children('source');
 
 			expect(sources.length).to.equal(3);
 
@@ -101,7 +103,7 @@ describe('SSR pictures - build', function () {
 			const html = await response.text();
 			const $ = cheerio.load(html);
 
-			const image = $('#inline img');
+			const image = $('#inline');
 
 			const src = image.attr('src');
 			const [route, params] = src.split('?');
@@ -127,7 +129,8 @@ describe('SSR pictures - build', function () {
 			const html = await response.text();
 			const $ = cheerio.load(html);
 
-			const sources = $('#google source');
+			const picture = $('#google').parent('picture');
+			const sources = picture.children('source');
 
 			expect(sources.length).to.equal(3);
 
@@ -142,7 +145,7 @@ describe('SSR pictures - build', function () {
 			const html = await response.text();
 			const $ = cheerio.load(html);
 
-			const image = $('#google img');
+			const image = $('#google');
 
 			const src = image.attr('src');
 			const [route, params] = src.split('?');
@@ -185,7 +188,8 @@ describe('SSR images - dev', function () {
 
 	describe('Local images', () => {
 		it('includes sources', () => {
-			const sources = $('#social-jpg source');
+			const picture = $('#social-jpg').parent('picture');
+			const sources = picture.children('source');
 
 			expect(sources.length).to.equal(3);
 
@@ -193,7 +197,7 @@ describe('SSR images - dev', function () {
 		});
 
 		it('includes src, width, and height attributes', () => {
-			const image = $('#social-jpg img');
+			const image = $('#social-jpg');
 
 			const src = image.attr('src');
 			const [route, params] = src.split('?');
@@ -210,7 +214,7 @@ describe('SSR images - dev', function () {
 		});
 
 		it('returns the optimized image', async () => {
-			const image = $('#social-jpg img');
+			const image = $('#social-jpg');
 
 			const res = await fixture.fetch(image.attr('src'));
 
@@ -223,7 +227,8 @@ describe('SSR images - dev', function () {
 
 	describe('Inline imports', () => {
 		it('includes sources', () => {
-			const sources = $('#inline source');
+			const picture = $('#inline').parent('picture');
+			const sources = picture.children('source');
 
 			expect(sources.length).to.equal(3);
 
@@ -231,7 +236,7 @@ describe('SSR images - dev', function () {
 		});
 
 		it('includes src, width, and height attributes', () => {
-			const image = $('#inline img');
+			const image = $('#inline');
 
 			const src = image.attr('src');
 			const [route, params] = src.split('?');
@@ -250,7 +255,8 @@ describe('SSR images - dev', function () {
 
 	describe('Remote images', () => {
 		it('includes sources', () => {
-			const sources = $('#google source');
+			const picture = $('#google').parent('picture');
+			const sources = picture.children('source');
 
 			expect(sources.length).to.equal(3);
 
@@ -258,7 +264,7 @@ describe('SSR images - dev', function () {
 		});
 
 		it('includes src, width, and height attributes', () => {
-			const image = $('#google img');
+			const image = $('#google');
 
 			const src = image.attr('src');
 			const [route, params] = src.split('?');