From 050143da642db4d2cd59b80fdd52f71e55087b1d Mon Sep 17 00:00:00 2001
From: Princesseuh <princssdev@gmail.com>
Date: Fri, 22 Sep 2023 11:57:04 +0200
Subject: [PATCH] chore: changeset

---
 .changeset/smooth-goats-agree.md | 51 ++++++++++++++++++++++++++++++++
 1 file changed, 51 insertions(+)
 create mode 100644 .changeset/smooth-goats-agree.md

diff --git a/.changeset/smooth-goats-agree.md b/.changeset/smooth-goats-agree.md
new file mode 100644
index 000000000..13e65d6a7
--- /dev/null
+++ b/.changeset/smooth-goats-agree.md
@@ -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`.