suggest Picture props

[gaunt axle]

Hello,
Here's my <Picture /> code for a full width hero background image

<Picture
    pictureAttributes={{
        class: "cs-background",
    }}
    src={backgroundImage}
    quality={"mid"}
    formats={["avif", "webp", "jpg"]}
    alt=""
    loading="eager"
    decoding="async"
    aria-hidden="true"
/>

Suggest picture props to make it responsive and performant on mobile

[storm horizon]

Hi @gaunt axle. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

To make your <Picture /> component responsive and performant on mobile, you should:

1. Enable responsive images in your Astro project by setting the experimental.responsiveImages flag to true in your astro.config.mjs file.
2. Set the layout prop to "full-width" on your <Picture /> component. This will ensure the image scales to fit the width of its container and generates the appropriate srcset and sizes attributes for responsive behavior.
3. Optionally, adjust the priority prop if you want to control loading behavior for above-the-fold images.

Here’s how you can update your <Picture /> usage:

<Picture
    pictureAttributes={{
        class: "cs-background",
    }}
    src={backgroundImage}
    quality="mid"
    formats={["avif", "webp", "jpg"]}
    alt=""
    loading="eager"
    decoding="async"
    aria-hidden="true"
    layout="full-width"   <!-- Enables responsive, full-width behavior -->
/>

Additional steps:

• Make sure you have enabled the experimental flag in your config:

// astro.config.mjs
export default {
  experimental: {
    responsiveImages: true,
  },
};

• The layout="full-width" prop will generate responsive srcset and sizes attributes, and apply styles so the image fills the container width and adapts to different screen sizes, which is ideal for hero backgrounds on mobile and desktop [Responsive image properties] [Image layout].

• You can override the default object-fit and object-position with the fit and position props if needed, but for most hero backgrounds, the defaults (cover and center) are appropriate [Configuration settings].

Summary:
Add layout="full-width" to your <Picture /> component and enable the responsiveImages experimental flag in your config for optimal responsive and performant images on mobile.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: