How do you create responsive images with phoenix?
I’d love to merge my separate 11ty/netlify landing page into the Phoenix app.
Responsive images are the last big stumbling block for me. Most JAMStack frameworks have good out-of-the-box solutions, e.g. next.js and gatsby.
It would be great to have an easy to use, performant solution for Phoenix.
That doesn’t impact page loading speeds/page rank.
Here’s my best solution so far. Resized using Image at compile time.
Stored in priv/static/resized, served and cached via normal Plug.Static setup.
Would love to get some feedback and to hear about how you guys handle this.
Usage:
use ResponsiveImage
~H(<img src={src("input.jpg", 300)} />)
~H(<img srcset={srcset("input.jpg", [300, 600, 900])} src={...} sizes="50vw" />)
Module:
defmodule ResponsiveImage do
defmacro __using__(_opts) do
quote do
import unquote(__MODULE__)
Module.register_attribute(__MODULE__, :image, accumulate: true)
@before_compile unquote(__MODULE__)
end
end
defmacro src(path, width) do
Module.put_attribute(__CALLER__.module, :image, {path, width})
quote do
unquote(img_src(path, width))
end
end
defmacro srcset(path, widths) do
for width <- widths, do: Module.put_attribute(__CALLER__.module, :image, {path, width})
quote do
unquote(widths |> Enum.map(&"#{img_src(path, &1)} #{&1}w") |> Enum.join(", "))
end
end
defmacro __before_compile__(_env) do
{duration, _} =
:timer.tc(fn ->
ResponsiveImage.resize(Module.get_attribute(__CALLER__.module, :image))
end)
IO.puts("Image resize took #{duration / 1_000_000}s")
end
def resize(attr) when is_list(attr) do
for {path, width} <- attr, do: resize(path, width)
end
def resize(path, width) do
out_path = out_path(path, width)
if not File.exists?(out_path) do
IO.puts("Writing #{out_path}")
out_path |> Path.dirname() |> File.mkdir_p!()
path
|> in_path()
|> Image.open!()
|> then(&Image.resize!(&1, width / Image.width(&1)))
|> Image.write!(out_path)
end
end
defp without_ext(path), do: "#{Path.dirname(path)}/#{Path.basename(path, Path.extname(path))}"
defp in_path(path), do: "priv/static/images/#{path}"
defp img_src(path, width), do: "/resized/#{without_ext(path)}_#{width}.avif"
defp out_path(path, width), do: "priv/static#{img_src(path, width)}"
end
