# `PhoenixKit.Modules.Shared.Components.ImageSet`
[🔗](https://github.com/BeamLabEU/phoenix_kit/blob/v1.7.102/lib/modules/shared/components/image_set.ex#L1)

Responsive image component that renders a `<picture>` element with `<source>` tags.

The browser automatically picks the best format it supports (AVIF > WebP > JPEG)
AND the right size for the viewport width, minimizing bandwidth.

## Usage

### Basic (auto-loads variants from DB):

    <.image_set file_uuid="018e3c4a-..." alt="Photo" />

### With pre-loaded variants (for list pages, avoids N+1):

    <.image_set file_uuid="018e3c4a-..." variants={@variants["018e3c4a-..."]} alt="Photo" />

### With custom sizes attribute:

    <.image_set file_uuid="018e3c4a-..." alt="Photo" sizes="(max-width: 768px) 100vw, 50vw" />

## How it works

1. Groups file variants by format (AVIF, WebP, JPEG, etc.)
2. Renders a `<source>` per format with `srcset` using width descriptors
3. Falls back to a standard `<img>` tag with the primary format srcset
4. Format priority: AVIF > WebP > others (browsers pick the first supported `<source>`)

# `image_set`

## Attributes

* `file_uuid` (`:string`) (required) - File UUID from PhoenixKit Storage.
* `variants` (`:list`) - Pre-loaded variant data from Storage.list_image_set_variants/1. Defaults to `nil`.
* `alt` (`:string`) - Alt text for accessibility. Defaults to `""`.
* `sizes` (`:string`) - Sizes attribute for responsive images. Defaults to `"100vw"`.
* `class` (`:string`) - CSS classes for the img element. Defaults to `""`.
* `loading` (`:string`) - Loading strategy: lazy or eager. Defaults to `"lazy"`.
* Global attributes are accepted.

---

*Consult [api-reference.md](api-reference.md) for complete listing*