diff --git a/packages/astro/src/assets/internal.ts b/packages/astro/src/assets/internal.ts index b72b72bc8862..840f72ac7fb1 100644 --- a/packages/astro/src/assets/internal.ts +++ b/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 diff --git a/packages/astro/src/assets/services/service.ts b/packages/astro/src/assets/services/service.ts index e22bada898e4..3ca965834de0 100644 --- a/packages/astro/src/assets/services/service.ts +++ b/packages/astro/src/assets/services/service.ts @@ -224,9 +224,19 @@ export const baseService: Omit = { }, 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, diff --git a/packages/astro/src/assets/types.ts b/packages/astro/src/assets/types.ts index 125002b89f3a..60c2f670ad81 100644 --- a/packages/astro/src/assets/types.ts +++ b/packages/astro/src/assets/types.ts @@ -160,6 +160,18 @@ type ImageSharedProps = 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 & { */ densities?: (number | `${number}x`)[]; widths?: never; + layout?: never; + fit?: never; + position?: never; } ); diff --git a/packages/astro/test/fixtures/core-image-layout/src/pages/index.astro b/packages/astro/test/fixtures/core-image-layout/src/pages/index.astro index 3562f58da19b..c322c7d22333 100644 --- a/packages/astro/test/fixtures/core-image-layout/src/pages/index.astro +++ b/packages/astro/test/fixtures/core-image-layout/src/pages/index.astro @@ -4,7 +4,7 @@ import hero from "../assets/hero.jpg"; ---
- A penguin + A penguin
A penguin