diff --git a/.changeset/khaki-cloths-repair.md b/.changeset/khaki-cloths-repair.md new file mode 100644 index 000000000000..fd74a17eb9e4 --- /dev/null +++ b/.changeset/khaki-cloths-repair.md @@ -0,0 +1,34 @@ +--- +'astro': minor +--- + +Adds a new `priority` attribute for Astro's image components. + +This change introduces a new `priority` option for the `` and `` components, which automatically sets the `loading`, `decoding`, and `fetchpriority` attributes to their optimal values for above-the-fold images which should be loaded immediately. + +It is a boolean prop, and you can use the shorthand syntax by simply adding `priority` as a prop to the `` or `` component. When set, it will apply the following attributes: + +- `loading="eager"` +- `decoding="sync"` +- `fetchpriority="high"` + +The individual attributes can still be set manually if you need to customize your images further. + +By default, the Astro [`` component](https://docs.astro.build/en/guides/images/#display-optimized-images-with-the-image--component) generates `` tags that lazy-load their content by setting `loading="lazy"` and `decoding="async"`. This improves performance by deferring the loading of images that are not immediately visible in the viewport, and gives the best scores in performance audits like Lighthouse. + +The new `priority` attribute will override those defaults and automatically add the best settings for your high-priority assets. + +This option was previously available for experimental responsive images, but now it is a standard feature for all images. + +## Usage + +```astro +An example image +``` + +> [!Note] +> You should only use the `priority` option for images that are critical to the initial rendering of the page, and ideally only one image per page. This is often an image identified as the [LCP element](https://web.dev/articles/lcp) when running Lighthouse tests. Using it for too many images will lead to performance issues, as it forces the browser to load those images immediately, potentially blocking the rendering of other content. diff --git a/.changeset/mean-gifts-know.md b/.changeset/mean-gifts-know.md new file mode 100644 index 000000000000..1ff213fbe251 --- /dev/null +++ b/.changeset/mean-gifts-know.md @@ -0,0 +1,91 @@ +--- +'astro': minor +'@astrojs/vercel': patch +--- + +The responsive images feature introduced behind a flag in [v5.0.0](https://github.com/withastro/astro/blob/main/packages/astro/CHANGELOG.md#500) is no longer experimental and is available for general use. + +The new responsive images feature in Astro automatically generates optimized images for different screen sizes and resolutions, and applies the correct attributes to ensure that images are displayed correctly on all devices. + +Enable the `image.responsiveStyles` option in your Astro config. Then, set a `layout` attribute on any or component, or configure a default `image.layout`, for instantly responsive images with automatically generated `srcset` and `sizes` attributes based on the image's dimensions and the layout type. + +Displaying images correctly on the web can be challenging, and is one of the most common performance issues seen in sites. This new feature simplifies the most challenging part of the process: serving your site visitor an image optimized for their viewing experience, and for your website's performance. + +For full details, see the updated [Image guide](https://docs.astro.build/en/guides/images/#responsive-image-behavior). + +## Migration from Experimental Responsive Images + +The `experimental.responsiveImages` flag has been removed, and all experimental image configuration options have been renamed to their final names. + +If you were using the experimental responsive images feature, you'll need to update your configuration: + +### Remove the experimental flag + +```diff +export default defineConfig({ + experimental: { +- responsiveImages: true, + }, +}); +``` + +### Update image configuration options + +During the experimental phase, default styles were applied automatically to responsive images. Now, you need to explicitly set the `responsiveStyles` option to `true` if you want these styles applied. + +```diff +export default defineConfig({ + image: { ++ responsiveStyles: true, + }, +}); +``` + +The experimental image configuration options have been renamed: + +**Before:** +```js +export default defineConfig({ + image: { + experimentalLayout: 'constrained', + experimentalObjectFit: 'cover', + experimentalObjectPosition: 'center', + experimentalBreakpoints: [640, 750, 828, 1080, 1280], + experimentalDefaultStyles: true, + }, + experimental: { + responsiveImages: true, + }, +}); +``` + +**After:** +```js +export default defineConfig({ + image: { + layout: 'constrained', + objectFit: 'cover', + objectPosition: 'center', + breakpoints: [640, 750, 828, 1080, 1280], + responsiveStyles: true, // This is now *false* by default + }, +}); +``` + +### Component usage remains the same + +The `layout`, `fit`, and `position` props on `` and `` components work exactly the same as before: + +```astro +A responsive image +``` + +If you weren't using the experimental responsive images feature, no changes are required. + +Please see the [Image guide](https://docs.astro.build/en/guides/images/#responsive-image-behavior) for more information on using responsive images in Astro. diff --git a/packages/astro/client.d.ts b/packages/astro/client.d.ts index 9884d1f1d116..e8d172b59d27 100644 --- a/packages/astro/client.d.ts +++ b/packages/astro/client.d.ts @@ -48,9 +48,7 @@ declare module 'astro:assets' { getImage: ( options: import('./dist/assets/types.js').UnresolvedImageTransform, ) => Promise; - imageConfig: import('./dist/types/public/config.js').AstroConfig['image'] & { - experimentalResponsiveImages: boolean; - }; + imageConfig: import('./dist/types/public/config.js').AstroConfig['image']; getConfiguredImageService: typeof import('./dist/assets/index.js').getConfiguredImageService; inferRemoteSize: typeof import('./dist/assets/utils/index.js').inferRemoteSize; Image: typeof import('./components/Image.astro').default; diff --git a/packages/astro/components/Image.astro b/packages/astro/components/Image.astro index 709e4fe68159..29f6ecb74193 100644 --- a/packages/astro/components/Image.astro +++ b/packages/astro/components/Image.astro @@ -24,14 +24,13 @@ if (typeof props.height === 'string') { props.height = parseInt(props.height); } -const layout = props.layout ?? imageConfig.experimentalLayout ?? 'none'; -const useResponsive = imageConfig.experimentalResponsiveImages && layout !== 'none'; +const layout = props.layout ?? imageConfig.layout ?? 'none'; -if (useResponsive) { +if (layout !== 'none') { // Apply defaults from imageConfig if not provided - props.layout ??= imageConfig.experimentalLayout; - props.fit ??= imageConfig.experimentalObjectFit ?? 'cover'; - props.position ??= imageConfig.experimentalObjectPosition ?? 'center'; + props.layout ??= imageConfig.layout; + props.fit ??= imageConfig.objectFit ?? 'cover'; + props.position ??= imageConfig.objectPosition ?? 'center'; } const image = await getImage(props as UnresolvedImageTransform); diff --git a/packages/astro/components/Picture.astro b/packages/astro/components/Picture.astro index 8ebb4995f96c..9443ed8a383c 100644 --- a/packages/astro/components/Picture.astro +++ b/packages/astro/components/Picture.astro @@ -42,14 +42,14 @@ if (scopedStyleClass) { } } -const layout = props.layout ?? imageConfig.experimentalLayout ?? 'none'; -const useResponsive = imageConfig.experimentalResponsiveImages && layout !== 'none'; +const layout = props.layout ?? imageConfig.layout ?? 'none'; +const useResponsive = layout !== 'none'; if (useResponsive) { // Apply defaults from imageConfig if not provided - props.layout ??= imageConfig.experimentalLayout; - props.fit ??= imageConfig.experimentalObjectFit ?? 'cover'; - props.position ??= imageConfig.experimentalObjectPosition ?? 'center'; + props.layout ??= imageConfig.layout; + props.fit ??= imageConfig.objectFit ?? 'cover'; + props.position ??= imageConfig.objectPosition ?? 'center'; } for (const key in props) { diff --git a/packages/astro/components/ResponsivePicture.astro b/packages/astro/components/ResponsivePicture.astro index b43fcdbf869c..f9c68ee0f01c 100644 --- a/packages/astro/components/ResponsivePicture.astro +++ b/packages/astro/components/ResponsivePicture.astro @@ -4,6 +4,7 @@ import { default as Picture, type Props as PictureProps } from './Picture.astro' type Props = PictureProps; const { class: className, ...props } = Astro.props; +import './image.css'; --- {/* Applying class outside of the spread prevents it from applying unnecessary astro-* classes */} diff --git a/packages/astro/src/assets/internal.ts b/packages/astro/src/assets/internal.ts index a88276e2e419..f6fd495ae012 100644 --- a/packages/astro/src/assets/internal.ts +++ b/packages/astro/src/assets/internal.ts @@ -39,13 +39,9 @@ export async function getConfiguredImageService(): Promise { return globalThis.astroAsset.imageService; } -type ImageConfig = AstroConfig['image'] & { - experimentalResponsiveImages: boolean; -}; - export async function getImage( options: UnresolvedImageTransform, - imageConfig: ImageConfig, + imageConfig: AstroConfig['image'], ): Promise { if (!options || typeof options !== 'object') { throw new AstroError({ @@ -126,43 +122,41 @@ export async function getImage( } resolvedOptions.src = clonedSrc; - const layout = options.layout ?? imageConfig.experimentalLayout; + const layout = options.layout ?? imageConfig.layout ?? 'none'; - if (imageConfig.experimentalResponsiveImages && layout) { + if (resolvedOptions.priority) { + resolvedOptions.loading ??= 'eager'; + resolvedOptions.decoding ??= 'sync'; + resolvedOptions.fetchpriority ??= 'high'; + delete resolvedOptions.priority; + } else { + resolvedOptions.loading ??= 'lazy'; + resolvedOptions.decoding ??= 'async'; + resolvedOptions.fetchpriority ??= 'auto'; + } + + if (layout !== 'none') { resolvedOptions.widths ||= getWidths({ width: resolvedOptions.width, layout, originalWidth, - breakpoints: imageConfig.experimentalBreakpoints?.length - ? imageConfig.experimentalBreakpoints + breakpoints: imageConfig.breakpoints?.length + ? imageConfig.breakpoints : isLocalService(service) ? LIMITED_RESOLUTIONS : DEFAULT_RESOLUTIONS, }); resolvedOptions.sizes ||= getSizesAttribute({ 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; + // The densities option is incompatible with the `layout` option delete resolvedOptions.densities; - - if (layout !== 'none') { - resolvedOptions.style = addCSSVarsToStyle( - { - fit: cssFitValues.includes(resolvedOptions.fit ?? '') && resolvedOptions.fit, - pos: resolvedOptions.position, - }, - resolvedOptions.style, - ); - resolvedOptions['data-astro-image'] = layout; - } + resolvedOptions.style = addCSSVarsToStyle( + { + fit: cssFitValues.includes(resolvedOptions.fit ?? '') && resolvedOptions.fit, + pos: resolvedOptions.position, + }, + resolvedOptions.style, + ); + resolvedOptions['data-astro-image'] = layout; } const validatedOptions = service.validateOptions diff --git a/packages/astro/src/assets/types.ts b/packages/astro/src/assets/types.ts index ca1216e71f5c..bed111e350f7 100644 --- a/packages/astro/src/assets/types.ts +++ b/packages/astro/src/assets/types.ts @@ -160,9 +160,9 @@ type ImageSharedProps = T & { } & ( | { /** - * The layout type for responsive images. Requires the `experimental.responsiveImages` flag to be enabled in the Astro config. + * The layout type for responsive images. * - * Allowed values are `constrained`, `fixed`, `full-width` or `none`. Defaults to value of `image.experimentalLayout`. + * Allowed values are `constrained`, `fixed`, `full-width` or `none`. Defaults to value of `image.layout`. * * - `constrained` - 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. @@ -177,7 +177,7 @@ type ImageSharedProps = T & { layout?: ImageLayout; /** - * Defines how the image should be cropped if the aspect ratio is changed. Requires the `experimental.responsiveImages` flag to be enabled in the Astro config. + * Defines how the image should be cropped if the aspect ratio is changed. Requires `layout` to be set. * * Default is `cover`. Allowed values are `fill`, `contain`, `cover`, `none` or `scale-down`. These behave like the equivalent CSS `object-fit` values. Other values may be passed if supported by the image service. * @@ -190,7 +190,7 @@ type ImageSharedProps = T & { fit?: ImageFit; /** - * Defines the position of the image when cropping. Requires the `experimental.responsiveImages` flag to be enabled in the Astro config. + * Defines the position of the image when cropping. Requires `layout` to be set. * * The value is a string that specifies the position of the image, which matches the CSS `object-position` property. Other values may be passed if supported by the image service. * diff --git a/packages/astro/src/assets/vite-plugin-assets.ts b/packages/astro/src/assets/vite-plugin-assets.ts index 7d6cd3828b09..5bc39d2d19f6 100644 --- a/packages/astro/src/assets/vite-plugin-assets.ts +++ b/packages/astro/src/assets/vite-plugin-assets.ts @@ -109,10 +109,7 @@ export default function assets({ fs, settings, sync, logger }: Options): vite.Pl referencedImages: new Set(), }; - const imageComponentPrefix = - settings.config.experimental.responsiveImages && settings.config.image.experimentalDefaultStyles - ? 'Responsive' - : ''; + const imageComponentPrefix = settings.config.image.responsiveStyles ? 'Responsive' : ''; return [ // Expose the components and different utilities from `astro:assets` { @@ -139,7 +136,7 @@ export default function assets({ fs, settings, sync, logger }: Options): vite.Pl export { default as Font } from "astro/components/Font.astro"; export { inferRemoteSize } from "astro/assets/utils/inferRemoteSize.js"; - export const imageConfig = ${JSON.stringify({ ...settings.config.image, experimentalResponsiveImages: settings.config.experimental.responsiveImages })}; + export const imageConfig = ${JSON.stringify(settings.config.image)}; // This is used by the @astrojs/node integration to locate images. // It's unused on other platforms, but on some platforms like Netlify (and presumably also Vercel) // new URL("dist/...") is interpreted by the bundler as a signal to include that directory diff --git a/packages/astro/src/core/config/schemas/base.ts b/packages/astro/src/core/config/schemas/base.ts index 9f6d36653761..e2b1927a8a7c 100644 --- a/packages/astro/src/core/config/schemas/base.ts +++ b/packages/astro/src/core/config/schemas/base.ts @@ -68,7 +68,7 @@ export const ASTRO_CONFIG_DEFAULTS = { image: { endpoint: { entrypoint: undefined, route: '/_image' }, service: { entrypoint: 'astro/assets/services/sharp', config: {} }, - experimentalDefaultStyles: true, + responsiveStyles: false, }, devToolbar: { enabled: true, @@ -98,7 +98,6 @@ export const ASTRO_CONFIG_DEFAULTS = { experimental: { clientPrerender: false, contentIntellisense: false, - responsiveImages: false, headingIdCompat: false, preserveScriptOrder: false, csp: false, @@ -273,13 +272,11 @@ export const AstroConfigSchema = z.object({ }), ) .default([]), - experimentalLayout: z.enum(['constrained', 'fixed', 'full-width', 'none']).optional(), - experimentalObjectFit: z.string().optional(), - experimentalObjectPosition: z.string().optional(), - experimentalBreakpoints: z.array(z.number()).optional(), - experimentalDefaultStyles: z - .boolean() - .default(ASTRO_CONFIG_DEFAULTS.image.experimentalDefaultStyles), + layout: z.enum(['constrained', 'fixed', 'full-width', 'none']).optional(), + objectFit: z.string().optional(), + objectPosition: z.string().optional(), + breakpoints: z.array(z.number()).optional(), + responsiveStyles: z.boolean().default(ASTRO_CONFIG_DEFAULTS.image.responsiveStyles), }) .default(ASTRO_CONFIG_DEFAULTS.image), devToolbar: z @@ -466,10 +463,6 @@ export const AstroConfigSchema = z.object({ .boolean() .optional() .default(ASTRO_CONFIG_DEFAULTS.experimental.contentIntellisense), - responsiveImages: z - .boolean() - .optional() - .default(ASTRO_CONFIG_DEFAULTS.experimental.responsiveImages), headingIdCompat: z .boolean() .optional() diff --git a/packages/astro/src/core/config/schemas/refined.ts b/packages/astro/src/core/config/schemas/refined.ts index c14e18f12c92..1caff3ad2794 100644 --- a/packages/astro/src/core/config/schemas/refined.ts +++ b/packages/astro/src/core/config/schemas/refined.ts @@ -172,21 +172,6 @@ export const AstroConfigRefinedSchema = z.custom().superRefine((con } } - if ( - !config.experimental.responsiveImages && - (config.image.experimentalLayout || - config.image.experimentalObjectFit || - config.image.experimentalObjectPosition || - config.image.experimentalBreakpoints) - ) { - ctx.addIssue({ - code: z.ZodIssueCode.custom, - message: - 'The `experimentalLayout`, `experimentalObjectFit`, `experimentalObjectPosition` and `experimentalBreakpoints` options are only available when `experimental.responsiveImages` is enabled.', - path: ['experimental', 'responsiveImages'], - }); - } - if (config.experimental.fonts && config.experimental.fonts.length > 0) { for (let i = 0; i < config.experimental.fonts.length; i++) { const { cssVariable } = config.experimental.fonts[i]; diff --git a/packages/astro/src/types/public/config.ts b/packages/astro/src/types/public/config.ts index a5361f1d0517..8c8e45ae45b7 100644 --- a/packages/astro/src/types/public/config.ts +++ b/packages/astro/src/types/public/config.ts @@ -1330,58 +1330,70 @@ export interface ViteUserConfig extends OriginalViteUserConfig { /** * @docs - * @name image.experimentalLayout + * @name image.layout * @type {ImageLayout} * @default `undefined` + * @version 5.10.0 * @description * The default layout type for responsive images. Can be overridden by the `layout` prop on the image component. - * Requires the `experimental.responsiveImages` flag to be enabled. * - `constrained` - 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. + * + * See [the `layout` component property](https://docs.astro.build/en/reference/modules/astro-assets/#layout) for more details. */ - experimentalLayout?: ImageLayout | undefined; + layout?: ImageLayout | undefined; /** * @docs - * @name image.experimentalObjectFit + * @name image.objectFit * @type {ImageFit} * @default `"cover"` + * @version 5.10.0 * @description * The default object-fit value for responsive images. Can be overridden by the `fit` prop on the image component. - * Requires the `experimental.responsiveImages` flag to be enabled. + * Requires a value for `layout` to be set. + * + * See [the `fit` component property](https://docs.astro.build/en/reference/modules/astro-assets/#fit) for more details. */ - experimentalObjectFit?: ImageFit; + objectFit?: ImageFit; /** * @docs - * @name image.experimentalObjectPosition + * @name image.objectPosition * @type {string} * @default `"center"` + * @version 5.10.0 * @description * The default object-position value for responsive images. Can be overridden by the `position` prop on the image component. - * Requires the `experimental.responsiveImages` flag to be enabled. + * Requires a value for `layout` to be set. + * + * See [the `position` component property](https://docs.astro.build/en/reference/modules/astro-assets/#position) for more details. */ - experimentalObjectPosition?: string; + objectPosition?: string; /** * @docs - * @name image.experimentalBreakpoints + * @name image.breakpoints * @type {number[]} * @default `[640, 750, 828, 1080, 1280, 1668, 2048, 2560] | [640, 750, 828, 960, 1080, 1280, 1668, 1920, 2048, 2560, 3200, 3840, 4480, 5120, 6016]` + * @version 5.10.0 * @description - * The breakpoints used to generate responsive images. Requires the `experimental.responsiveImages` flag to be enabled. The full list is not normally used, + * The breakpoints used to generate responsive images. Requires a value for `layout` to be set. The full list is not normally used, * but is filtered according to the source and output size. The defaults used depend on whether a local or remote image service is used. For remote services * the more comprehensive list is used, because only the required sizes are generated. For local services, the list is shorter to reduce the number of images generated. */ - experimentalBreakpoints?: number[]; + breakpoints?: number[]; /** * @docs - * @name image.experimentalDefaultStyles + * @name image.responsiveStyles * @type {boolean} - * @default `true` + * @default `false` + * @version 5.10.0 * @description - * Whether to automatically add global styles to ensure that experimental images resize correctly. This is enabled by default, but can be disabled if you want to manage the styles yourself. - * This option is only used when the `experimental.responsiveImages` flag is enabled. + * Whether to automatically add global styles for responsive images. You should enable this option unless you are styling the images yourself. + * This option is only used when `layout` is set to `constrained`, `full-width`, or `fixed` using the configuration or the `layout` prop on the image component. + * + * See [the images docs](https://docs.astro.build/en/guides/images/#responsive-image-styles) for more information. */ - experimentalDefaultStyles?: boolean; + responsiveStyles?: boolean; }; /** @@ -2090,121 +2102,6 @@ export interface ViteUserConfig extends OriginalViteUserConfig { */ contentIntellisense?: boolean; - /** - * - * @name experimental.responsiveImages - * @type {boolean} - * @default `undefined` - * @version 5.0.0 - * @description - * - * Enables automatic responsive images in your project. - * - * ```js title=astro.config.mjs - * { - * experimental: { - * responsiveImages: true, - * }, - * } - * ``` - * - * When enabled, you can pass a `layout` props to any `` or `` component to create a responsive image. When a layout is set, images have automatically generated `srcset` and `sizes` attributes based on the image's dimensions and the layout type. Images with `constrained` and `full-width` layouts will have styles applied to ensure they resize according to their container. - * - * ```astro title=MyComponent.astro - * --- - * import { Image, Picture } from 'astro:assets'; - * import myImage from '../assets/my_image.png'; - * --- - * A description of my image. - * - * ``` - * This `` component will generate the following HTML output: - * ```html title=Output - * - * A description of my image - * ``` - * - * The following styles are applied to ensure the images resize correctly: - * - * ```css title="Responsive Image Styles" - * - * :where([data-astro-image]) { - * object-fit: var(--fit); - * object-position: var(--pos); - * } - * - * :where([data-astro-image='full-width']) { - * width: 100%; - * } - * - * :where([data-astro-image='constrained']) { - * max-width: 100%; - * } - * - * ``` - * You can enable responsive images for all `` and `` components by setting `image.experimentalLayout` with a default value. This can be overridden by the `layout` prop on each component. - * - * **Example:** - * ```js title=astro.config.mjs - * { - * image: { - * // Used for all `` and `` components unless overridden - * experimentalLayout: 'constrained', - * }, - * experimental: { - * responsiveImages: true, - * }, - * } - * ``` - * - * ```astro title=MyComponent.astro - * --- - * import { Image } from 'astro:assets'; - * import myImage from '../assets/my_image.png'; - * --- - * - * This will use responsive layout - * - * This will use full-width layout - * - * This will disable responsive images - * ``` - * - * #### Responsive image properties - * - * These are additional properties available to the `` and `` components when responsive images are enabled: - * - * - `layout`: The layout type for the image. Can be `constrained`, `fixed`, `full-width` or `none`. Defaults to value of `image.experimentalLayout`. - * - `fit`: Defines how the image should be cropped if the aspect ratio is changed. Values match those of CSS `object-fit`. Defaults to `cover`, or the value of `image.experimentalObjectFit` if set. - * - `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 `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 `constrained` 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; - /** * * @name experimental.fonts diff --git a/packages/astro/test/core-image-layout.test.js b/packages/astro/test/core-image-layout.test.js index 10e5eec487cb..6bf7e5a61cfa 100644 --- a/packages/astro/test/core-image-layout.test.js +++ b/packages/astro/test/core-image-layout.test.js @@ -690,7 +690,7 @@ describe('astro:image:layout', () => { image: { service: testImageService({ foo: 'bar' }), domains: ['avatars.githubusercontent.com'], - experimentalDefaultStyles: false, + responsiveStyles: false, }, }); await fixtureWithoutStyles.build(); diff --git a/packages/astro/test/fixtures/core-image-layout/astro.config.mjs b/packages/astro/test/fixtures/core-image-layout/astro.config.mjs index b819fd8778a4..2db01beab2f1 100644 --- a/packages/astro/test/fixtures/core-image-layout/astro.config.mjs +++ b/packages/astro/test/fixtures/core-image-layout/astro.config.mjs @@ -3,10 +3,8 @@ import { defineConfig } from 'astro/config'; export default defineConfig({ image: { - experimentalLayout: 'constrained', + layout: 'constrained', + responsiveStyles: true }, - experimental: { - responsiveImages: true - }, }); diff --git a/packages/integrations/mdx/test/fixtures/mdx-images/astro.config.ts b/packages/integrations/mdx/test/fixtures/mdx-images/astro.config.ts index a6326190ef73..063ce8e5aa9c 100644 --- a/packages/integrations/mdx/test/fixtures/mdx-images/astro.config.ts +++ b/packages/integrations/mdx/test/fixtures/mdx-images/astro.config.ts @@ -6,8 +6,6 @@ export default defineConfig({ integrations: [mdx()], image: { service: testImageService(), - }, - experimental: { - responsiveImages: true, + responsiveStyles: true } }) diff --git a/packages/integrations/vercel/src/image/shared.ts b/packages/integrations/vercel/src/image/shared.ts index e214cfa426f5..7bb8b8c77735 100644 --- a/packages/integrations/vercel/src/image/shared.ts +++ b/packages/integrations/vercel/src/image/shared.ts @@ -66,7 +66,6 @@ export function getAstroImageConfig( command: string, devImageService: DevImageService, astroImageConfig: AstroConfig['image'], - responsiveImages?: boolean, ) { let devService = '@astrojs/vercel/dev-image-service'; @@ -91,7 +90,7 @@ export function getAstroImageConfig( entrypoint: command === 'dev' ? devService : '@astrojs/vercel/build-image-service', config, }, - experimentalBreakpoints: responsiveImages ? config.sizes : undefined, + breakpoints: config.sizes, }, }; } diff --git a/packages/integrations/vercel/src/index.ts b/packages/integrations/vercel/src/index.ts index d382ed766691..9db18f95b3be 100644 --- a/packages/integrations/vercel/src/index.ts +++ b/packages/integrations/vercel/src/index.ts @@ -241,7 +241,6 @@ export default function vercelAdapter({ command, devImageService, config.image, - config.experimental.responsiveImages, ), }); }, diff --git a/packages/integrations/vercel/test/fixtures/image/astro.config.mjs b/packages/integrations/vercel/test/fixtures/image/astro.config.mjs index 5c4aa7709e30..bd3385ad8a79 100644 --- a/packages/integrations/vercel/test/fixtures/image/astro.config.mjs +++ b/packages/integrations/vercel/test/fixtures/image/astro.config.mjs @@ -6,9 +6,6 @@ export default defineConfig({ adapter: vercel({ imageService: true, }), - experimental: { - responsiveImages: true, - }, image: { service: testImageService(), domains: ['astro.build'],