Handle priority images

packages/astro/src/assets/internal.ts

@@ -109,6 +109,17 @@ export async function getImage(
 			originalWidth,
 		});
 		resolvedOptions.sizes ||= getSizes({ width: resolvedOptions.width, layout });
+
+		if (resolvedOptions.priority) {
+			resolvedOptions.loading ??= 'eager';
+			resolvedOptions.decoding ??= 'sync';
+			resolvedOptions.fetchpriority ??= 'high';
+		} else {
+			resolvedOptions.loading ??= 'lazy';
+			resolvedOptions.decoding ??= 'async';
+			resolvedOptions.fetchpriority ??= 'auto';
+		}
+		delete resolvedOptions.priority;
 	}
 
 	const validatedOptions = service.validateOptions

packages/astro/src/assets/services/service.ts

@@ -224,9 +224,19 @@ export const baseService: Omit<LocalImageService, 'transform'> = {
 	},
 	getHTMLAttributes(options) {
 		const { targetWidth, targetHeight } = getTargetDimensions(options);
-		const { src, width, height, format, quality, densities, widths, formats, ...attributes } =
-			options;
-
+		const {
+			src,
+			width,
+			height,
+			format,
+			quality,
+			densities,
+			widths,
+			formats,
+			layout,
+			priority,
+			...attributes
+		} = options;
 		return {
 			...attributes,
 			width: targetWidth,

packages/astro/src/assets/types.ts

@@ -160,6 +160,18 @@ type ImageSharedProps<T> = T & {
 	position?: string;
 } & (
 		| {
+				/**
+				 * The layout type for responsive images. Overrides any default set in the Astro config.
+				 * Requires the `experimental.responsiveImages` flag to be enabled.
+				 *
+				 * - `responsive` - The image will scale to fit the container, maintaining its aspect ratio, but will not exceed the specified dimensions.
+				 * - `fixed` - The image will maintain its original dimensions.
+				 * - `full-width` - The image will scale to fit the container, maintaining its aspect ratio.
+				 */
+				layout?: ImageLayout;
+				fit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down' | (string & {});
+				position?: string;
+				priority?: boolean;
 				/**
 				 * A list of widths to generate images for. The value of this property will be used to assign the `srcset` property on the final `img` element.
 				 *
@@ -176,6 +188,9 @@ type ImageSharedProps<T> = T & {
 				 */
 				densities?: (number | `${number}x`)[];
 				widths?: never;
+				layout?: never;
+				fit?: never;
+				position?: never;
 		  }
 	);
 

packages/astro/test/fixtures/core-image-layout/src/pages/index.astro

@@ -4,7 +4,7 @@ import hero from "../assets/hero.jpg";
 ---
 
 <div>
-	<Image src={hero} alt="A penguin" layout="fixed" width={800} height={300} class="green" />
+	<Image src={hero} alt="A penguin" layout="fixed" width={800} height={300} class="green" priority/>
 </div>
 <div>
 	<Image src={hero} alt="A penguin" layout="responsive" width={800} height={300} style="border: 2px red solid"/>