Move format option from LocalImageProps to ImageSharedProps (#10642)

* move format to ImageSharedProps

* add changeset

* move quality to shared

* Update lovely-trees-wait.md

Co-authored-by: Florian Lefebvre <contact@florian-lefebvre.dev>

---------

Co-authored-by: Florian Lefebvre <contact@florian-lefebvre.dev>

.changeset/lovely-trees-wait.md

@@ -0,0 +1,5 @@
+---
+"astro": patch
+---
+
+Fixes typing issues when using `format` and `quality` options with remote images

packages/astro/src/assets/types.ts

@@ -118,6 +118,28 @@ type ImageSharedProps<T> = T & {
 	 * ```
 	 */
 	height?: number | `${number}`;
+	/**
+	 * Desired output format for the image. Defaults to `webp`.
+	 *
+	 * **Example**:
+	 * ```astro
+	 * <Image src={...} format="avif" alt="..." />
+	 * ```
+	 */
+	format?: ImageOutputFormat;
+	/**
+	 * Desired quality for the image. Value can either be a preset such as `low` or `high`, or a numeric value from 0 to 100.
+	 *
+	 * The perceptual quality of the output image is service-specific.
+	 * For instance, a certain service might decide that `high` results in a very beautiful image, but another could choose for it to be at best passable.
+	 *
+	 * **Example**:
+	 * ```astro
+	 * <Image src={...} quality='high' alt="..." />
+	 * <Image src={...} quality={300} alt="..." />
+	 * ```
+	 */
+	quality?: ImageQuality;
 } & (
 		| {
 				/**
@@ -153,28 +175,6 @@ export type LocalImageProps<T> = ImageSharedProps<T> & {
 	 * ```
 	 */
 	src: ImageMetadata | Promise<{ default: ImageMetadata }>;
-	/**
-	 * Desired output format for the image. Defaults to `webp`.
-	 *
-	 * **Example**:
-	 * ```astro
-	 * <Image src={...} format="avif" alt="..." />
-	 * ```
-	 */
-	format?: ImageOutputFormat;
-	/**
-	 * Desired quality for the image. Value can either be a preset such as `low` or `high`, or a numeric value from 0 to 100.
-	 *
-	 * The perceptual quality of the output image is service-specific.
-	 * For instance, a certain service might decide that `high` results in a very beautiful image, but another could choose for it to be at best passable.
-	 *
-	 * **Example**:
-	 * ```astro
-	 * <Image src={...} quality='high' alt="..." />
-	 * <Image src={...} quality={300} alt="..." />
-	 * ```
-	 */
-	quality?: ImageQuality;
 };
 
 export type RemoteImageProps<T> =