1.3 KiB
1.3 KiB
| astro |
|---|
| minor |
Add support for generating multiple widths when using the Image component and a Picture component for supporting multiple formats.
srcset support
The current usage is as follow:
---
import { Image } from "astro";
import myImage from "./my-image.jpg";
---
<Image src={myImage} densities={[2, 3]} alt="My cool image" />
Alternatively to densities, widths can be used for specific widths. In both cases, according images and the following code will be generated:
<img src="..." srcset="... 2x, ... 3x" alt="My cool image" />
(if widths is used the descriptor will be w instead of x)
Picture component
The Picture component can be used to generate a <picture> element with multiple sources. It can be used as follow:
---
import { Picture } from "astro:assets";
import myImage from "./my-image.jpg";
---
<Picture src={myImage} formats=["avif", "webp"] alt="My super image in multiple formats!" />
The above code will generate the following:
<picture>
<source srcset="..." type="image/avif" />
<source srcset="..." type="image/webp" />
<img src="..." alt="My super image in multiple formats!" />
</picture>
The Picture component takes all the same props as the Image component, including densities and widths.