From 99479e6b9505dc929997b5c42f4d7b30d54ef074 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alper=20Do=C4=9Fan?=
 <48688801+doganalper@users.noreply.github.com>
Date: Mon, 10 Apr 2023 15:09:02 +0300
Subject: [PATCH] Optional `Sizes` prop on Picture component (#6773)

---
 .changeset/breezy-roses-smash.md                     | 5 +++++
 packages/integrations/image/components/Picture.astro | 3 ++-
 packages/integrations/image/components/index.ts      | 4 ++--
 3 files changed, 9 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/breezy-roses-smash.md

diff --git a/.changeset/breezy-roses-smash.md b/.changeset/breezy-roses-smash.md
new file mode 100644
index 0000000000..59ec9a17dc
--- /dev/null
+++ b/.changeset/breezy-roses-smash.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/image': patch
+---
+
+Make sizes prop optional on Image component
diff --git a/packages/integrations/image/components/Picture.astro b/packages/integrations/image/components/Picture.astro
index f8958f8fea..bdaaceae0c 100644
--- a/packages/integrations/image/components/Picture.astro
+++ b/packages/integrations/image/components/Picture.astro
@@ -2,6 +2,7 @@
 import { getPicture } from '../dist/index.js';
 import { warnForMissingAlt } from './index.js';
 import type { PictureComponentLocalImageProps, PictureComponentRemoteImageProps } from './index.js';
+import type { GetPictureResult } from '../src/lib/get-picture.js';
 
 export type Props = PictureComponentLocalImageProps | PictureComponentRemoteImageProps;
 
@@ -24,7 +25,7 @@ if (alt === undefined || alt === null) {
 	warnForMissingAlt();
 }
 
-const { image, sources } = await getPicture({
+const { image, sources }: GetPictureResult = await getPicture({
 	src,
 	widths,
 	formats,
diff --git a/packages/integrations/image/components/index.ts b/packages/integrations/image/components/index.ts
index 2ca557656a..3135e0e215 100644
--- a/packages/integrations/image/components/index.ts
+++ b/packages/integrations/image/components/index.ts
@@ -31,8 +31,8 @@ export interface PictureComponentLocalImageProps
 	src: ImageMetadata | Promise<{ default: ImageMetadata }>;
 	/** Defines an alternative text description of the image. Set to an empty string (alt="") if the image is not a key part of the content (it's decoration or a tracking pixel). */
 	alt: string;
-	sizes: HTMLImageElement['sizes'];
 	widths: number[];
+	sizes?: HTMLImageElement['sizes'];
 	formats?: OutputFormat[];
 }
 
@@ -43,9 +43,9 @@ export interface PictureComponentRemoteImageProps
 	src: string;
 	/** Defines an alternative text description of the image. Set to an empty string (alt="") if the image is not a key part of the content (it's decoration or a tracking pixel). */
 	alt: string;
-	sizes: HTMLImageElement['sizes'];
 	widths: number[];
 	aspectRatio: TransformOptions['aspectRatio'];
+	sizes?: HTMLImageElement['sizes'];
 	formats?: OutputFormat[];
 	background?: TransformOptions['background'];
 }