From e1a5e65ad7ed6c334aecf86503be47860f73a720 Mon Sep 17 00:00:00 2001 From: Matt Kane Date: Wed, 20 Nov 2024 13:12:17 +0000 Subject: [PATCH] chore: clarify wording of responsive image props (#12482) --- packages/astro/src/assets/internal.ts | 1 + packages/astro/src/types/public/config.ts | 9 ++++----- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/astro/src/assets/internal.ts b/packages/astro/src/assets/internal.ts index 3363a5648d..d9c2db5a05 100644 --- a/packages/astro/src/assets/internal.ts +++ b/packages/astro/src/assets/internal.ts @@ -150,6 +150,7 @@ export async function getImage( resolvedOptions.fetchpriority ??= 'auto'; } delete resolvedOptions.priority; + delete resolvedOptions.densities; } const validatedOptions = service.validateOptions diff --git a/packages/astro/src/types/public/config.ts b/packages/astro/src/types/public/config.ts index 6af76676aa..354d304937 100644 --- a/packages/astro/src/types/public/config.ts +++ b/packages/astro/src/types/public/config.ts @@ -1899,11 +1899,10 @@ export interface ViteUserConfig extends OriginalViteUserConfig { * - `position`: Defines the position of the image crop if the aspect ratio is changed. Values match those of CSS `object-position`. Defaults to `center`, or the value of `image.experimentalObjectPosition` if set. * - `priority`: If set, eagerly loads the image. Otherwise images will be lazy-loaded. Use this for your largest above-the-fold image. Defaults to `false`. * - * The following `` component properties should not be used with responsive images as these are automatically generated: - * - * - `densities` - * - `widths` - * - `sizes` + * The `widths` and `sizes` attributes are automatically generated based on the image's dimensions and the layout type, and in most cases should not be set manually. The generated `sizes` attribute for `responsive` and `full-width` images + * is based on the assumption that the image is displayed at close to the full width of the screen when the viewport is smaller than the image's width. If it is significantly different (e.g. if it's in a multi-column layout on small screens) you may need to adjust the `sizes` attribute manually for best results. + * + * The `densities` attribute is not compatible with responsive images and will be ignored if set. */ responsiveImages?: boolean;