chore: changeset
This commit is contained in:
parent
207edd65ec
commit
050143da64
1 changed files with 51 additions and 0 deletions
51
.changeset/smooth-goats-agree.md
Normal file
51
.changeset/smooth-goats-agree.md
Normal file
|
@ -0,0 +1,51 @@
|
||||||
|
---
|
||||||
|
'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:
|
||||||
|
|
||||||
|
```astro
|
||||||
|
---
|
||||||
|
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:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<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:
|
||||||
|
|
||||||
|
```astro
|
||||||
|
---
|
||||||
|
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:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<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`.
|
Loading…
Reference in a new issue