PhoenixKit.Modules.Shared.Components.ImageSet (phoenix_kit v1.7.102)

Copy Markdown View Source

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>)

Summary

Functions

image_set(assigns)

Functions

image_set(assigns)

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.