ImgCf (img_cf v0.2.0)
This module provides a Phoenix Component <.img_cf src={Routes...} width=400 > that is a drop-in cdn + image resizing service using Cloudflare (CF) Image Resize (IR). The IR feature (paid) can resizes images for your on the fly.
From the Cloudflare website (https://developers.cloudflare.com/images/image-resizing):
You can resize, adjust quality, and convert images to WebP or AVIF format on demand.
Cloudflare will automatically cache every derived image at the edge, so you only need
to store one original image at your origin
We need to proxy all our traffic through CF, and then rewrite the image URLs we want to resize. This package makes it very easy: go to CF dashboard and
- Domain must be on Cloudflare.
- In CF Dashboard: proxy all trafic for your domain
- In CF Dashboard: enable the Image Resizing service
- In our Phoenix project: use <.img_tag src={Routes.static_path(...)} width=400>
Usage of the img_tag is almost similar to just using a regular <img ...> tag, except:
- `src` is always rewritten to the magic IR url.
- If `width`, or `height` is given, they are used for resizing.
- A retina version (`srcset` + `2x`), is always attempted, unless turned off.
Cloudflare specific options can be passed into the component with cf
like so:
<.img_cf src=... cf=[retina: false, use_img_dims: false, sharpen: "3"] >
Link to this section Summary
Functions
Doubles the :width, and/or :height if present. Otherwise returns opts
untouched.
HTML image tag that provides image resizing on the fly, with no infrastructure setup.
Rewrite img to on-the-fly CloudFlare Image Resizing via special magic paths: https://developers.cloudflare.com/images/image-resizing
Link to this section Functions
double(val)
Specs
double(nil | non_neg_integer()) :: {nil | non_neg_integer()} | :pop
get_opts_2x(opts)
Specs
Doubles the :width, and/or :height if present. Otherwise returns opts
untouched.
img_cf(assigns)
HTML image tag that provides image resizing on the fly, with no infrastructure setup.
Either width, height, or srcset is required in opts
.
Recommended ways of usage:
Examples
<.img_cf
src={Routes.static_path(@conn, "/images/foobar.png")}
width: 400
height: 400
cf: [retina: true, width: 400, height: 400]
/>
img_render(assigns)
maybe_merge_img_dim(opts, arg2, arg3)
run(assigns)
Rewrite img to on-the-fly CloudFlare Image Resizing via special magic paths: https://developers.cloudflare.com/images/image-resizing