Calculates optimal widths for responsive image generation.
By default, uses configured breakpoints filtered by the original image width. Can also calculate widths dynamically based on the original dimensions.
Summary
Functions
Calculate optimal widths dynamically based on original dimensions.
Get widths optimized for common device breakpoints.
Filter breakpoints to only those smaller than the original.
Get the widths to generate for a given original width.
Functions
@spec calculate_widths(original_width :: pos_integer(), opts :: keyword()) :: [ pos_integer() ]
Calculate optimal widths dynamically based on original dimensions.
This generates widths at roughly 50% intervals down to a minimum size, which provides good coverage without generating too many files.
Options
:min_width- Minimum width to generate (default: 320):step_factor- Factor to divide by for each step (default: 1.5):max_variants- Maximum number of variants (default: 6)
Examples
iex> WidthCalculator.calculate_widths(1920)
[320, 480, 720, 1080, 1620, 1920]
iex> WidthCalculator.calculate_widths(800, min_width: 200)
[200, 300, 450, 675, 800]
@spec device_breakpoints() :: [pos_integer()]
Get widths optimized for common device breakpoints.
These match common CSS media query breakpoints:
- 320px - Small phones
- 640px - Large phones / small tablets
- 768px - Tablets
- 1024px - Small desktops / landscape tablets
- 1280px - Desktops
- 1536px - Large desktops
- 1920px - Full HD displays
@spec filter_breakpoints( breakpoints :: [pos_integer()], original_width :: pos_integer() ) :: [ pos_integer() ]
Filter breakpoints to only those smaller than the original.
@spec widths_for(original_width :: pos_integer()) :: [pos_integer()]
Get the widths to generate for a given original width.
Returns widths smaller than the original, plus the original width itself.