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"; +--- + +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 +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 `` element with multiple sources. It can be used as follow: + +```astro +--- +import { Picture } from "astro:assets"; +import myImage from "./my-image.jpg"; +--- + + +``` + +The above code will generate the following: + +```html + + + + My super image in multiple formats! + +``` + +The `Picture` component takes all the same props as the `Image` component, including `densities` and `widths`.