---
title: Picture
description: "`Picture` is a component that uses the `picture` element to provide alternative images for different display and device scenarios."
links:
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/picture
  - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-picture--basic
---

# Picture

`Picture` is a component that uses the `picture` element to provide alternative images for different display and device scenarios.

```tsx
<Picture>
  <Source
    srcSet="https://dragon-ball-official.com/assets/img/intro/intro_4.png"
    media="md"
  />
  <Source
    srcSet="https://dragon-ball-official.com/assets/img/intro/intro_3.png"
    media="lg"
  />
  <Source
    srcSet="https://dragon-ball-official.com/assets/img/intro/intro_2.png"
    media="xl"
  />
  <Image
    src="https://dragon-ball-official.com/assets/img/intro/intro_1.png"
    alt="Dragon Ball"
    maxW="full"
    w="xl"
  />
</Picture>
```

## Usage

```tsx
import { Picture, Source, Image } from "@yamada-ui/react"
```

```tsx
import { Picture, Source, Image } from "@/components/ui"
```

```tsx
import { Picture, Source, Image } from "@workspaces/ui"
```

```tsx
<Picture>
  <Source />
  <Image />
</Picture>
```

### Use sources

```tsx
<Picture
  src="https://dragon-ball-official.com/assets/img/intro/intro_1.png"
  alt="Dragon Ball"
  maxW="full"
  sources={[
    {
      srcSet: "https://dragon-ball-official.com/assets/img/intro/intro_2.png",
      media: "xl",
    },
    {
      srcSet: "https://dragon-ball-official.com/assets/img/intro/intro_3.png",
      media: "lg",
    },
    {
      srcSet: "https://dragon-ball-official.com/assets/img/intro/intro_4.png",
      media: "md",
    },
  ]}
  w="xl"
/>
```

### Use Custom Media Query

```tsx
<Picture
  src="https://dragon-ball-official.com/assets/img/intro/intro_1.png"
  alt="Dragon Ball"
  maxW="full"
  sources={[
    {
      srcSet: "https://dragon-ball-official.com/assets/img/intro/intro_6.png",
      media: "(max-width: 480px)",
    },
    {
      srcSet: "https://dragon-ball-official.com/assets/img/intro/intro_5.png",
      maxW: "3xl",
    },
    {
      srcSet: "https://dragon-ball-official.com/assets/img/intro/intro_3.png",
      maxW: "976px",
    },
    {
      srcSet: "https://dragon-ball-official.com/assets/img/intro/intro_2.png",
      maxW: 1280,
    },
  ]}
  w="xl"
/>
```

### Disable Sorting

By default, it is sorted by the `minW` and `maxW` of the source. To disable this sorting, set `enableSorting` to `false`.

```tsx
<Picture
  src="https://dragon-ball-official.com/assets/img/intro/intro_1.png"
  alt="Dragon Ball"
  enableSorting={false}
  maxW="full"
  sources={[
    {
      srcSet: "https://dragon-ball-official.com/assets/img/intro/intro_3.png",
      media: "lg",
    },
    {
      srcSet: "https://dragon-ball-official.com/assets/img/intro/intro_2.png",
      media: "(max-width: 1280px)",
    },
  ]}
  w="xl"
/>
```

## Props

### Picture

| Prop            | Default | Type                                                                                                                                     | Description                                                                |
| --------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------- |
| `as`            | -       | `As`                                                                                                                                     | The HTML element to render.                                                |
| `asChild`       | -       | `boolean`                                                                                                                                | Merges its props onto its immediate child.                                 |
| `css`           | -       | `CSSObject \| CSSObject[]`                                                                                                               | The CSS object.                                                            |
| `colorScheme`   | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...`                | Set color scheme variables.                                                |
| `enableSorting` | `true`  | `boolean`                                                                                                                                | If `true`, the sources will be sorted by the `minW` and `maxW` properties. |
| `fit`           | -       | `"-moz-initial" \| "contain" \| "cover" \| "fill" \| "inherit" \| "initial" \| "none" \| "revert-layer" \| "revert" \| "scale-down" ...` | The CSS `object-fit` property.                                             |
| `pictureProps`  | -       | `HTMLStyledProps<"picture">`                                                                                                             | The props for the picture element.                                         |
| `sources`       | -       | `PictureSource[]`                                                                                                                        | The sources for the picture element.                                       |

### Source

| Prop          | Default | Type                                                                                                                      | Description                                |
| ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
| `as`          | -       | `As`                                                                                                                      | The HTML element to render.                |
| `asChild`     | -       | `boolean`                                                                                                                 | Merges its props onto its immediate child. |
| `css`         | -       | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                            |
| `colorScheme` | -       | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                |
| `media`       | -       | `AnyString \| ThemeTokens["breakpoints"]`                                                                                 | The media query for the source.            |

## Similar Components

- [Image](https://yamada-ui.com/docs/components/image.md): `Image` is a component that displays images.
- [AspectRatio](https://yamada-ui.com/docs/components/aspect-ratio.md): `AspectRatio` is a component for embedding things like videos and maps while maintaining the aspect ratio.
- [Icon](https://yamada-ui.com/docs/components/icon.md): `Icon` is a general icon component that can be used in your projects.
- [QrCode](https://yamada-ui.com/docs/components/qr-code.md): `QrCode` is a component that displays a QR code.
- [Avatar](https://yamada-ui.com/docs/components/avatar.md): `Avatar` is a component that displays a profile picture or an icon with initials representing a user.

## Uses Components & Hooks

- [Image](https://yamada-ui.com/docs/components/image.md): `Image` is a component that displays images.