> For the complete documentation index, see [llms.txt](https://sygnal.gitbook.io/sygnal-webflow-components/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sygnal.gitbook.io/sygnal-webflow-components/cc/sygnal-media/picture.md).

# Picture

Picture element, with variations for best browser compat. 

## Use Cases 

Maximum browser compat, e.g. animated AVIF

<https://developer.mozilla.org/en-US/docs/Web/Media/Guides/Formats/Image_types>

Possibly, fallback use cases e.g.

* Image for lottie when safari is detected&#x20;
  * Switch element might be better for this&#x20;

## Implementation&#x20;

Either;&#x20;

### Slots&#x20;

Allow dropping in any number of variants as slotted images&#x20;

### Props

Give 5 image props, that get generated as variations when set.  Probably easier for CMS binding.&#x20;