---
'astro': minor
---
Adds experimental support for automatic responsive images
This feature is experimental and may change in future versions. To enable it, set `experimental.responsiveImages` to `true` in your `astro.config.mjs` file.
```js title=astro.config.mjs
{
experimental: {
responsiveImages: true,
},
}
```
When this flag is enabled, you can pass a `layout` prop 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 `responsive` and `full-width` layouts will have styles applied to ensure they resize according to their container.
```astro
---
import { Image, Picture } from 'astro:assets';
import myImage from '../assets/my_image.png';
---
```
This `` component will generate the following HTML output:
```html title=Output
```
#### 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 `responsive`, `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`.
#### Default responsive image settings
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: 'responsive',
},
experimental: {
responsiveImages: true,
},
}
```
```astro
---
import { Image } from 'astro:assets';
import myImage from '../assets/my_image.png';
---
```
For a complete overview, and to give feedback on this experimental API, see the [Responsive Images RFC](https://github.com/withastro/roadmap/blob/responsive-images/proposals/0053-responsive-images.md).