What is Edge-Resizer ?
Edge Resizer is a routing middleware wrapping Images.weserv.nl API, a free and fast on-the-fly image manipulation service. The source image address as well as desired manipulation parameters are passed on the URL.
For example, to generate a 200x150 thumbnail for the original image https://riff.one/dice.png
you would use:
Combining variations does eventually build up to lengthy URLs. For example:
- 200x150 thumbnail
- embedded on a 400px wide canvas with background color
#f5f5f5
(a.k.a. whitesmoke) - aligned to the right
- converted to jpg
would be requested with a fairly complex URL:
https://images.weserv.nl/?a=right&bg=f5f5f5&fit=contain&h=150&output=jpg&url=riff.one%2Fdice.png&w=400
Edge Resizer was created to relief you from the burden of this complexity providing compact, tidy and self-contained URLs that are resolved internally. Using Edge-Resizer, the above variation could be requested as
https://resizer.pictures/w=384_jpg_h=128_right_contain_bg=f5f5f5/riff.one/dice.png
These long lived variations are created through images.weserv.nl's API only when (and if) they are first requested, having further requests answer from Cloudflare's Edge Cache at blazing speeds.
Deploy to Cloudflare to use it with your custom domains:
No Edge and No Resizer
Edge Resizer doesn't perform image manipulation nor persistence. It depends on
- Cloudflare's Edge Cache to do the "Edge" part
- images.weserv.nl's API for the "Resizer" part.
Without them, Edge Resizer would be pointless. Thank you guys, you're da real MVP 🙏.
What does Edge Resizer bring to the table?
- 🔌 Compact & tidy URLs
- 💊 Feature detection through Client Hints and other headers
- 🧠 sensible defaults and syntactic sugar
- 🚀 Finer control of caches
- 😊 ...A cheap and amateurish version of Cloudflare Image Resizing
Throughout the documentation, a ribbon like the one below will be used to distinguish a feature, parameter,default or shortcut
that is non-standard to images.weserve.nl. |