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

    • Switch element might be better for this

Implementation

Either;

Slots

Allow dropping in any number of variants as slotted images

Props

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

Last updated