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" />List pages that pre-load variants should pre-load the alt text too —
Storage.translated_alts/2 reads it for every file in one query.
Alt text
Leave alt out and the image gets the file's own alt text, in the language
the page is rendered in. Pass alt="" for a decorative image. With
pre-loaded variants nothing is looked up — the component must not bring
back the query per image the caller just avoided — so pass alt too.
With custom sizes attribute:
<.image_set file_uuid="018e3c4a-..." alt="Photo" sizes="(max-width: 768px) 100vw, 50vw" />How it works
- Groups file variants by format (AVIF, WebP, JPEG, etc.)
- Renders a
<source>per format withsrcsetusing width descriptors - Falls back to a standard
<img>tag with the primary format srcset - Format priority: AVIF > WebP > others (browsers pick the first supported
<source>)
Summary
Functions
Attributes
file_uuid(:string) (required) - File UUID from PhoenixKit Storage.variants(:list) - Pre-loaded variant data from Storage.list_image_set_variants/1. Defaults tonil.alt(:string) - Alt text. Left out, it is the file's own alt text in the page's language. Defaults tonil.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.