Generates responsive image variants for optimal loading across devices.
Responsive images are generated at multiple widths, allowing browsers to select the most appropriate size based on the viewport and device pixel ratio.
How It Works
When responsive images are enabled for a media item:
- The original image dimensions are analyzed
- Multiple smaller versions are generated at configured breakpoints
- A tiny placeholder (32px wide) is generated for progressive loading
- All variant information is stored in the
responsive_imagesfield
Configuration
config :phx_media_library,
responsive_images: [
enabled: true,
widths: [320, 640, 960, 1280, 1920],
tiny_placeholder: true
]Usage in Templates
# Get srcset for use in img tag
srcset = PhxMediaLibrary.srcset(media)
# In HEEx template
<img
src={PhxMediaLibrary.url(media)}
srcset={PhxMediaLibrary.srcset(media)}
sizes="(max-width: 768px) 100vw, 50vw"
alt="Description"
/>Summary
Functions
Build a srcset string from responsive image data.
Generate responsive image variants for a media item.
Generate responsive variants for all conversions of a media item.
Get the tiny placeholder data URI for progressive loading.
Get placeholder dimensions for proper aspect ratio.
Types
@type responsive_data() :: %{ required(String.t()) => [ %{width: pos_integer(), height: pos_integer(), path: String.t()} ] }
Functions
@spec build_srcset(PhxMediaLibrary.Media.t(), atom() | nil) :: String.t() | nil
Build a srcset string from responsive image data.
@spec generate(PhxMediaLibrary.Media.t(), atom() | nil) :: {:ok, responsive_data()} | {:error, term()}
Generate responsive image variants for a media item.
Returns updated responsive_images data to be stored on the media record.
@spec generate_all(PhxMediaLibrary.Media.t()) :: {:ok, responsive_data()} | {:error, term()}
Generate responsive variants for all conversions of a media item.
@spec placeholder(PhxMediaLibrary.Media.t(), atom() | nil) :: String.t() | nil
Get the tiny placeholder data URI for progressive loading.
@spec placeholder_dimensions(PhxMediaLibrary.Media.t(), atom() | nil) :: {integer(), integer()} | nil
Get placeholder dimensions for proper aspect ratio.