From efca6db953cbc0517bda8814eeb67bfd126c6251 Mon Sep 17 00:00:00 2001 From: Princesseuh Date: Fri, 29 Sep 2023 11:51:22 +0200 Subject: [PATCH 01/11] docs: draft for Picture RFC --- src/content/docs/en/guides/images.mdx | 77 ++++++++++++++++--- .../en/reference/image-service-reference.mdx | 21 +++++ 2 files changed, 89 insertions(+), 9 deletions(-) diff --git a/src/content/docs/en/guides/images.mdx b/src/content/docs/en/guides/images.mdx index 5d00ee168abf6..602ffb996867f 100644 --- a/src/content/docs/en/guides/images.mdx +++ b/src/content/docs/en/guides/images.mdx @@ -84,10 +84,6 @@ import myImage from "../assets/my_image.png"; // Image is 1600x900 /> ``` -Currently, the built-in assets feature does not include a `` component. - -Instead, you can [generate images or custom components using `getImage()`](#generating-images-with-getimage) that use the HTML image attributes `srcset` and `sizes` or the `` tag [for art direction or to create responsive images](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#art_direction). - #### Properties ##### src (required) @@ -145,6 +141,18 @@ When using local images in their original aspect ratio, the `width` and `height` However, both of these properties are required for remote images and images stored in your `public/` folder as Astro is unable to analyze these files. +##### densities + +A list of pixel densities to generate for the image. By default, no other densities are generated. + +This value will be used to generate a `srcset` attribute on the `` tag. + +##### widths + +A list of widths to generate for the image. By default, no other widths are generated. + +This value will be used to generate a `srcset` attribute on the `` tag. When using `widths`, a `sizes` property is also required for `srcset` to take effect. + ##### format You can optionally state the [image file type](https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types#common_image_file_types) output to be used. @@ -209,6 +217,52 @@ const {src, ...attrs} = Astro.props; ``` +### `` + +Use the built-in `` Astro component to display a responsive image with multiple formats and/or sizes. + +```astro title="src/pages/index.astro" +--- +import { Picture } from 'astro:assets'; +import myImage from "../assets/my_image.png"; +--- + + + +``` + +```html + + + + + A description of my image. + +``` + +#### Properties + +`` accepts all the properties of the `` component, plus the following: + +##### `formats` + +An array of image formats to use for the `` tags. Every entry will be added as `` elements in the order they were inputted. As such, your most modern format should go first. By default, this is set to `['webp']`. + +##### `fallbackFormat` + +Format to use as a fallback value for the `` tag. Defaults to `.png`, unless the image is animated or a SVG, in which case it'll fallback to `.gif` and `.svg` respectively. + +##### `pictureAttributes` + +An object of attributes to be added to the `` tag. Every other attributes, apart from the ones used for the image transformation, will be applied to the inner `` element. This is notably useful for applying style and classes to your image. + ### `` The [Astro template syntax](/en/core-concepts/astro-syntax/) also supports writing an `` tag directly, with full control over its final output. These images will not be processed and optimized. @@ -484,8 +538,13 @@ It returns an object with the following properties: ```js { - options: {...} // Original parameters passed - src: "https//..." // Path to the generated image + rawOptions: {...}, // Original parameters passed + options: {...}, // Validated parameters passed + src: "...", // Path to the generated image + srcSet: { + values: [...], // Generated values for srcset, every entry has a url and a size descriptor + attribute: "", // Generated srcset attribute from the values + } attributes: {...} // Additional HTML attributes needed to render the image (width, height, style, etc..) } ``` @@ -731,7 +790,7 @@ The new `image` helper for content collections lets you validate the image metad ### Navigating Image Imports in Astro v3.0 -In Astro v3.0, if you have to preserve the old import behavior for images and require a string representation of the image's URL, append `?url` to the end of your image path when importing it. For example: +In Astro v3.0, if you have to preserve the old import behavior for images and require a string representation of the image's URL, append `?url` to the end of your image path when importing it. For example: ```astro title="src/pages/blog/MyImages.astro" --- @@ -744,8 +803,8 @@ import Sprite from '../assets/logo.svg?url'; ``` -This approach ensures you obtain the URL string. Keep in mind that during development, Astro uses a `src/` path, but upon building, it generates hashed paths like `/_astro/cat.a6737dd3.png`. +This approach ensures you obtain the URL string. Keep in mind that during development, Astro uses a `src/` path, but upon building, it generates hashed paths like `/_astro/cat.a6737dd3.png`. -If you prefer to work directly with the image object itself, you can access the `.src` property. This approach is best for tasks like managing image dimensions for Core Web Vitals metrics and preventing CLS. +If you prefer to work directly with the image object itself, you can access the `.src` property. This approach is best for tasks like managing image dimensions for Core Web Vitals metrics and preventing CLS. If you are transitioning into the new import behavior, combining `?url` and `.src` methods might be the right method for seamless image handling. diff --git a/src/content/docs/en/reference/image-service-reference.mdx b/src/content/docs/en/reference/image-service-reference.mdx index ecb88d225f73e..ef6fea21bde4d 100644 --- a/src/content/docs/en/reference/image-service-reference.mdx +++ b/src/content/docs/en/reference/image-service-reference.mdx @@ -173,6 +173,8 @@ export type ImageTransform = { src: ImageMetadata | string; width?: number; height?: number; + widths?: number[] | undefined; + densities?: (number | `${number}x`)[] | undefined; quality?: ImageQuality; format?: OutputFormat; alt?: string; @@ -207,6 +209,25 @@ You must return a `format` to ensure that the proper MIME type is served to user This hook returns all additional attributes used to render the image as HTML, based on the parameters passed by the user (`options`). + +### `getSrcSet()` + +**Optional for both local and external services** + +`getSrcSet?: (options: ImageTransform, imageConfig: AstroConfig['image']): SrcSetValue[] | Promise;` + +This hook allows the generation of multiple variants of the same image. While it is most notably and intended to be used for `srcset`, it can also be used to generate multiple variants of the same image for different use cases. + +Every item in the array returned by this hook is an object with the following properties: + +```ts +export type SrcSetValue = { + transform: ImageTransform; + descriptor?: string; + attributes?: Record; +}; +``` + ### `validateOptions()` **Optional for both local and external services** From 5be82b582f8eb8055a50304bad82ad839217ef7d Mon Sep 17 00:00:00 2001 From: Princesseuh Date: Tue, 10 Oct 2023 13:19:51 +0200 Subject: [PATCH 02/11] docs: small changes --- src/content/docs/en/guides/images.mdx | 16 +++++----------- .../en/reference/image-service-reference.mdx | 5 ++--- 2 files changed, 7 insertions(+), 14 deletions(-) diff --git a/src/content/docs/en/guides/images.mdx b/src/content/docs/en/guides/images.mdx index 602ffb996867f..1c430809ceacc 100644 --- a/src/content/docs/en/guides/images.mdx +++ b/src/content/docs/en/guides/images.mdx @@ -143,15 +143,15 @@ However, both of these properties are required for remote images and images stor ##### densities -A list of pixel densities to generate for the image. By default, no other densities are generated. +A list of pixel densities to generate for the image. By default, no other densities are generated. Densities that are equals to widths larger than the original image will be ignored, as to avoid upscaling the image. This value will be used to generate a `srcset` attribute on the `` tag. ##### widths -A list of widths to generate for the image. By default, no other widths are generated. +A list of widths to generate for the image. By default, no other widths are generated. Widths that are larger than the original image will be ignored in order to avoid upscaling the image. -This value will be used to generate a `srcset` attribute on the `` tag. When using `widths`, a `sizes` property is also required for `srcset` to take effect. +This value will be used to generate a `srcset` attribute on the `` tag. When using `widths`, a [`sizes` property](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/sizes) is also required for `srcset` to take effect. ##### format @@ -312,7 +312,7 @@ For remote images, use the image's **full URL** as the `src` value: ### Choosing `` vs `` -The `` component optimizes your image and infers width and height (of local images) based on the original aspect ratio to avoid CLS. But, it only works with certain formats and does not provide a `` element, nor does it support `srcset`. +The `` component optimizes your image and infers width and height (of local images) based on the original aspect ratio to avoid CLS. Use the HTML `` element when you cannot use the `` component, for example: - for unsupported image formats @@ -760,13 +760,7 @@ If you were using the image integration in Astro v2.x, complete the following st /> ``` -4. Remove any existing `` components. - - Currently, the built-in assets feature does not include a `` component. - - Instead, you can use the HTML image attributes `srcset` and `sizes` or the `` tag [for art direction or to create responsive images](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#art_direction). - -5. Choose a default image service. +4. Choose a default image service. [Sharp](https://github.com/lovell/sharp) is now the default image service used for `astro:assets`. If you would like to use Sharp, no configuration is required. diff --git a/src/content/docs/en/reference/image-service-reference.mdx b/src/content/docs/en/reference/image-service-reference.mdx index ef6fea21bde4d..853c1aa7af2b5 100644 --- a/src/content/docs/en/reference/image-service-reference.mdx +++ b/src/content/docs/en/reference/image-service-reference.mdx @@ -209,14 +209,13 @@ You must return a `format` to ensure that the proper MIME type is served to user This hook returns all additional attributes used to render the image as HTML, based on the parameters passed by the user (`options`). - ### `getSrcSet()` **Optional for both local and external services** `getSrcSet?: (options: ImageTransform, imageConfig: AstroConfig['image']): SrcSetValue[] | Promise;` -This hook allows the generation of multiple variants of the same image. While it is most notably and intended to be used for `srcset`, it can also be used to generate multiple variants of the same image for different use cases. +This hook allows the generation of multiple variants of the specified image. It is most notably and intended to be used for generating a `srcset` attribute on either `img` or `picture`'s `source`. Every item in the array returned by this hook is an object with the following properties: @@ -236,7 +235,7 @@ export type SrcSetValue = { This hook allows you to validate and augment the options passed by the user. This is useful for setting default options, or telling the user that a parameter is required. -[See how `validateOptions()` is used in Astro built-in services](https://github.com/withastro/astro/blob/af4bd5e79c0bd662d58aeb016a61950e176b0a26/packages/astro/src/assets/services/service.ts#L106). +[See how `validateOptions()` is used in Astro built-in services](https://github.com/withastro/astro/blob/0ab6bad7dffd413c975ab00e545f8bc150f6a92f/packages/astro/src/assets/services/service.ts#L124). ## User configuration From 0fcedf8362627720935409b7ccf898c3652cbf71 Mon Sep 17 00:00:00 2001 From: Princesseuh Date: Tue, 10 Oct 2023 13:28:04 +0200 Subject: [PATCH 03/11] docs: add experimental mentions --- src/content/docs/en/guides/images.mdx | 6 ++++++ src/content/docs/en/reference/image-service-reference.mdx | 2 +- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/src/content/docs/en/guides/images.mdx b/src/content/docs/en/guides/images.mdx index 1c430809ceacc..c14f95aeef993 100644 --- a/src/content/docs/en/guides/images.mdx +++ b/src/content/docs/en/guides/images.mdx @@ -143,12 +143,16 @@ However, both of these properties are required for remote images and images stor ##### densities +**This property and its behaviour are currently experimental and may change in the future.** + A list of pixel densities to generate for the image. By default, no other densities are generated. Densities that are equals to widths larger than the original image will be ignored, as to avoid upscaling the image. This value will be used to generate a `srcset` attribute on the `` tag. ##### widths +**This property and its behaviour are currently experimental and may change in the future.** + A list of widths to generate for the image. By default, no other widths are generated. Widths that are larger than the original image will be ignored in order to avoid upscaling the image. This value will be used to generate a `srcset` attribute on the `` tag. When using `widths`, a [`sizes` property](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/sizes) is also required for `srcset` to take effect. @@ -219,6 +223,8 @@ const {src, ...attrs} = Astro.props; ### `` +**This component and its behaviour are currently experimental and may change in the future.** + Use the built-in `` Astro component to display a responsive image with multiple formats and/or sizes. ```astro title="src/pages/index.astro" diff --git a/src/content/docs/en/reference/image-service-reference.mdx b/src/content/docs/en/reference/image-service-reference.mdx index 853c1aa7af2b5..7a98339878170 100644 --- a/src/content/docs/en/reference/image-service-reference.mdx +++ b/src/content/docs/en/reference/image-service-reference.mdx @@ -211,7 +211,7 @@ This hook returns all additional attributes used to render the image as HTML, ba ### `getSrcSet()` -**Optional for both local and external services** +**Optional for both local and external services. Additionally, this hook is currently experimental and may change in the future.** `getSrcSet?: (options: ImageTransform, imageConfig: AstroConfig['image']): SrcSetValue[] | Promise;` From 5e6f4cc42d19d92823a75cbb6c5b5f9834873ab5 Mon Sep 17 00:00:00 2001 From: Sarah Rainsberger Date: Tue, 10 Oct 2023 16:18:25 +0000 Subject: [PATCH 04/11] add experimental and since badges, minor text edits --- .../docs/en/reference/image-service-reference.mdx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/content/docs/en/reference/image-service-reference.mdx b/src/content/docs/en/reference/image-service-reference.mdx index 7a98339878170..10a13f5215541 100644 --- a/src/content/docs/en/reference/image-service-reference.mdx +++ b/src/content/docs/en/reference/image-service-reference.mdx @@ -2,6 +2,8 @@ title: Image Service API i18nReady: true --- +import Badge from '~/components/Badge.astro'; +import Since from '~/components/Since.astro'; `astro:assets` was designed to make it easy for any image optimization service to build a service on top of Astro. @@ -210,14 +212,15 @@ You must return a `format` to ensure that the proper MIME type is served to user This hook returns all additional attributes used to render the image as HTML, based on the parameters passed by the user (`options`). ### `getSrcSet()` + Experimental -**Optional for both local and external services. Additionally, this hook is currently experimental and may change in the future.** +**Optional for both local and external services.** `getSrcSet?: (options: ImageTransform, imageConfig: AstroConfig['image']): SrcSetValue[] | Promise;` -This hook allows the generation of multiple variants of the specified image. It is most notably and intended to be used for generating a `srcset` attribute on either `img` or `picture`'s `source`. +This hook generates multiple variants of the specified image, for example, to generate a `srcset` attribute on an `` or ``'s `source`. -Every item in the array returned by this hook is an object with the following properties: +This hook returns an array of objects with the following properties: ```ts export type SrcSetValue = { From 6f04b0dac6f766ef2333b3b59565e386e9ff5a5b Mon Sep 17 00:00:00 2001 From: Sarah Rainsberger Date: Tue, 10 Oct 2023 16:35:29 +0000 Subject: [PATCH 05/11] replaced experimental message with the since / badge combo --- src/content/docs/en/guides/images.mdx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/content/docs/en/guides/images.mdx b/src/content/docs/en/guides/images.mdx index c14f95aeef993..d037fad80645c 100644 --- a/src/content/docs/en/guides/images.mdx +++ b/src/content/docs/en/guides/images.mdx @@ -5,6 +5,7 @@ i18nReady: true --- import Since from '~/components/Since.astro'; import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'; +import Badge from '~/components/Badge.astro'; Astro provides several ways for you to use images on your site, whether they are stored locally inside your project, linked to from an external URL, or managed in a CMS or CDN! @@ -143,7 +144,7 @@ However, both of these properties are required for remote images and images stor ##### densities -**This property and its behaviour are currently experimental and may change in the future.** + Experimental A list of pixel densities to generate for the image. By default, no other densities are generated. Densities that are equals to widths larger than the original image will be ignored, as to avoid upscaling the image. @@ -151,7 +152,7 @@ This value will be used to generate a `srcset` attribute on the `` tag. ##### widths -**This property and its behaviour are currently experimental and may change in the future.** + Experimental A list of widths to generate for the image. By default, no other widths are generated. Widths that are larger than the original image will be ignored in order to avoid upscaling the image. @@ -223,7 +224,7 @@ const {src, ...attrs} = Astro.props; ### `` -**This component and its behaviour are currently experimental and may change in the future.** + Experimental Use the built-in `` Astro component to display a responsive image with multiple formats and/or sizes. From f80ec0971e1e29e20174dc04646b77c97ac833ff Mon Sep 17 00:00:00 2001 From: Erika <3019731+Princesseuh@users.noreply.github.com> Date: Wed, 11 Oct 2023 13:48:44 +0200 Subject: [PATCH 06/11] Apply suggestions from code review Co-authored-by: Sarah Rainsberger --- src/content/docs/en/guides/images.mdx | 38 ++++++++++++++++++++++----- 1 file changed, 31 insertions(+), 7 deletions(-) diff --git a/src/content/docs/en/guides/images.mdx b/src/content/docs/en/guides/images.mdx index d037fad80645c..613de84ccecd9 100644 --- a/src/content/docs/en/guides/images.mdx +++ b/src/content/docs/en/guides/images.mdx @@ -146,17 +146,39 @@ However, both of these properties are required for remote images and images stor Experimental -A list of pixel densities to generate for the image. By default, no other densities are generated. Densities that are equals to widths larger than the original image will be ignored, as to avoid upscaling the image. +A list of pixel densities to generate for the image. -This value will be used to generate a `srcset` attribute on the `` tag. +If provided, this value will be used to generate a `srcset` attribute on the `` tag. Do not provide a value for `widths` when using this value. + +Densities that are equals to widths larger than the original image will be ignored to avoid upscaling the image. + +```astro +--- +import { Image } from 'astro:assets'; +import myImage from "../assets/my_image.png"; +--- +A description of my image. +``` ##### widths Experimental -A list of widths to generate for the image. By default, no other widths are generated. Widths that are larger than the original image will be ignored in order to avoid upscaling the image. +A list of widths to generate for the image. + +If provided, this value will be used to generate a `srcset` attribute on the `` tag. A [`sizes` property](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/sizes) must also be provided. + +Do not provide a value for `densities` when using this value. Only one of these two values can be used to generate a `srcset`. -This value will be used to generate a `srcset` attribute on the `` tag. When using `widths`, a [`sizes` property](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/sizes) is also required for `srcset` to take effect. +Widths that are larger than the original image will be ignored to avoid upscaling the image. + +```astro +--- +import { Image } from 'astro:assets'; +import myImage from "../assets/my_image.png"; +--- +A description of my image. +``` ##### format @@ -231,7 +253,7 @@ Use the built-in `` Astro component to display a responsive image wit ```astro title="src/pages/index.astro" --- import { Picture } from 'astro:assets'; -import myImage from "../assets/my_image.png"; +import myImage from "../assets/my_image.png"; // Image is 1600x900 --- @@ -260,11 +282,13 @@ import myImage from "../assets/my_image.png"; ##### `formats` -An array of image formats to use for the `` tags. Every entry will be added as `` elements in the order they were inputted. As such, your most modern format should go first. By default, this is set to `['webp']`. +An array of image formats to use for the `` tags. Entries will be added as `` elements in the order they are listed, and this order determines which format is displayed. For the best performance, list the most modern format first (e.g. `webp` or `avif`). By default, this is set to `['webp']`. ##### `fallbackFormat` -Format to use as a fallback value for the `` tag. Defaults to `.png`, unless the image is animated or a SVG, in which case it'll fallback to `.gif` and `.svg` respectively. +Format to use as a fallback value for the `` tag. + +Defaults to `.png` for static images, `.gif` for animated images, and `.svg` for SVG files. ##### `pictureAttributes` From 8ff860c29875ded59d9e7daee691fa30be8b6449 Mon Sep 17 00:00:00 2001 From: Princesseuh Date: Wed, 11 Oct 2023 17:00:52 +0200 Subject: [PATCH 07/11] docs: add more examples --- src/content/docs/en/guides/images.mdx | 62 +++++++++++++++++++++++++-- 1 file changed, 58 insertions(+), 4 deletions(-) diff --git a/src/content/docs/en/guides/images.mdx b/src/content/docs/en/guides/images.mdx index 613de84ccecd9..a0cbca238f291 100644 --- a/src/content/docs/en/guides/images.mdx +++ b/src/content/docs/en/guides/images.mdx @@ -146,7 +146,7 @@ However, both of these properties are required for remote images and images stor Experimental -A list of pixel densities to generate for the image. +A list of pixel densities to generate for the image. If provided, this value will be used to generate a `srcset` attribute on the `` tag. Do not provide a value for `widths` when using this value. @@ -157,14 +157,29 @@ Densities that are equals to widths larger than the original image will be ignor import { Image } from 'astro:assets'; import myImage from "../assets/my_image.png"; --- -A description of my image. +A description of my image. +``` + +```html +A description of my image. ``` ##### widths Experimental -A list of widths to generate for the image. +A list of widths to generate for the image. If provided, this value will be used to generate a `srcset` attribute on the `` tag. A [`sizes` property](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/sizes) must also be provided. @@ -177,7 +192,23 @@ Widths that are larger than the original image will be ignored to avoid upscalin import { Image } from 'astro:assets'; import myImage from "../assets/my_image.png"; --- -A description of my image. +A description of my image. +``` + +```html +A description of my image. ``` ##### format @@ -294,6 +325,29 @@ Defaults to `.png` for static images, `.gif` for animated images, and `.svg` for An object of attributes to be added to the `` tag. Every other attributes, apart from the ones used for the image transformation, will be applied to the inner `` element. This is notably useful for applying style and classes to your image. +```astro +--- +import { Picture } from "astro:assets"; +import myImage from "../my_image.png"; // Image is 1600x900 +--- + + +``` + +```html + + + A description of my image. + +``` + ### `` The [Astro template syntax](/en/core-concepts/astro-syntax/) also supports writing an `` tag directly, with full control over its final output. These images will not be processed and optimized. From b1b066c77cda0d9922012fbf03abe0fb3a0b7db4 Mon Sep 17 00:00:00 2001 From: Princesseuh Date: Wed, 11 Oct 2023 17:34:33 +0200 Subject: [PATCH 08/11] fix: adjust with feedback --- src/content/docs/en/guides/images.mdx | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/src/content/docs/en/guides/images.mdx b/src/content/docs/en/guides/images.mdx index 4cac72c09edab..07827c5a9573f 100644 --- a/src/content/docs/en/guides/images.mdx +++ b/src/content/docs/en/guides/images.mdx @@ -190,9 +190,9 @@ Widths that are larger than the original image will be ignored to avoid upscalin ```astro --- import { Image } from 'astro:assets'; -import myImage from "../assets/my_image.png"; +import myImage from "../assets/my_image.png"; // Image is 1600x900 --- -A description of my image. +A description of my image. ``` ```html @@ -201,11 +201,12 @@ import myImage from "../assets/my_image.png"; srcset=" /_astro/my_image.hash.webp 240w, /_astro/my_image.hash.webp 540w, - /_astro/my_image.hash.webp 720w + /_astro/my_image.hash.webp 720w, + /_astro/my_image.hash.webp 1600w " alt="A description of my image." - width="700" - height="525" + width="1600" + height="900" loading="lazy" decoding="async" /> @@ -287,7 +288,7 @@ import { Picture } from 'astro:assets'; import myImage from "../assets/my_image.png"; // Image is 1600x900 --- - + ``` From ffce7b7dbe27d9a66157f17555ed3de506b484c1 Mon Sep 17 00:00:00 2001 From: Erika <3019731+Princesseuh@users.noreply.github.com> Date: Wed, 11 Oct 2023 17:43:52 +0200 Subject: [PATCH 09/11] Update src/content/docs/en/guides/images.mdx Co-authored-by: Sarah Rainsberger --- src/content/docs/en/guides/images.mdx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/content/docs/en/guides/images.mdx b/src/content/docs/en/guides/images.mdx index 07827c5a9573f..268fd5abbf22a 100644 --- a/src/content/docs/en/guides/images.mdx +++ b/src/content/docs/en/guides/images.mdx @@ -324,7 +324,9 @@ Defaults to `.png` for static images, `.gif` for animated images, and `.svg` for ##### `pictureAttributes` -An object of attributes to be added to the `` tag. Every other attributes, apart from the ones used for the image transformation, will be applied to the inner `` element. This is notably useful for applying style and classes to your image. +An object of attributes to be added to the `` tag. + +Use this property to apply attributes to the outer `` element itself. Attributes applied to the `` component directly will apply to the inner `` element, except for those used for image transformation. ```astro --- From a67ef48a22d138be0d84607a1c69a54e93bc6aa3 Mon Sep 17 00:00:00 2001 From: Sarah Rainsberger Date: Wed, 11 Oct 2023 12:45:46 -0300 Subject: [PATCH 10/11] remove extra space --- src/content/docs/en/guides/images.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/en/guides/images.mdx b/src/content/docs/en/guides/images.mdx index 268fd5abbf22a..8b67f470b700d 100644 --- a/src/content/docs/en/guides/images.mdx +++ b/src/content/docs/en/guides/images.mdx @@ -326,7 +326,7 @@ Defaults to `.png` for static images, `.gif` for animated images, and `.svg` for An object of attributes to be added to the `` tag. -Use this property to apply attributes to the outer `` element itself. Attributes applied to the `` component directly will apply to the inner `` element, except for those used for image transformation. +Use this property to apply attributes to the outer `` element itself. Attributes applied to the `` component directly will apply to the inner `` element, except for those used for image transformation. ```astro --- From 1fbe3a8c523d4e97991abaa3a1c0f6795456985c Mon Sep 17 00:00:00 2001 From: Erika <3019731+Princesseuh@users.noreply.github.com> Date: Wed, 11 Oct 2023 18:27:13 +0200 Subject: [PATCH 11/11] Update src/content/docs/en/guides/images.mdx Co-authored-by: Yan Thomas <61414485+Yan-Thomas@users.noreply.github.com> --- src/content/docs/en/guides/images.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/en/guides/images.mdx b/src/content/docs/en/guides/images.mdx index 8b67f470b700d..6afb72ec5ce06 100644 --- a/src/content/docs/en/guides/images.mdx +++ b/src/content/docs/en/guides/images.mdx @@ -150,7 +150,7 @@ A list of pixel densities to generate for the image. If provided, this value will be used to generate a `srcset` attribute on the `` tag. Do not provide a value for `widths` when using this value. -Densities that are equals to widths larger than the original image will be ignored to avoid upscaling the image. +Densities that are equal to widths larger than the original image will be ignored to avoid upscaling the image. ```astro ---