🔳 Resize, Crop, Align
Edge-Resizer was conceived as a nice-url middleware to harness dinamically generated thumbnails. Pass w to request a specific width,
Pass w, h
- w: positive integer 🔗 Width,
- h: positive integer 🔗 Height
- dpr: positive integer 🔗 Device Pixel Ratio (defaults to 1)
https://resizer.pictures/w=150_h=150/riff.one/images/dice.png
dpr=2 w=200 | dpr=4 w=200 | dpr=2 w=200 | dpr=3 w=200 |
---|---|---|---|
![]() | ![]() | ![]() | ![]() |
In parallel to width, height and setting a specific DPR, you can use vw, vh to have Edge Resizer size the image according to your Client Hints headers (Sec-CH-Viewport-[width,height]). Likewise, using dpr without a value means "check my Sec-CH-DPR header to pick the best one for me".
Fit and Align
- fit: 🔗 Fit (contain, cover, inside, outside, fill)
The following image, whose original dimensions were 200x150 is requested with dimensions 180x210.
![](https://resizer.pictures/_h=210_w=180_fit=inside/riff.one/dice_200.png)
![](https://resizer.pictures/_h=210_w=180_fit=contain/riff.one/dice_200.png)
![](https://resizer.pictures/_h=210_w=180_fit=cover/riff.one/dice_200.png)
![](https://resizer.pictures/_h=210_w=180_fit=fill/riff.one/dice_200.png)
![](https://resizer.pictures/_h=210_w=180_fit=outside/riff.one/dice_200.png)
Alignment
In scenarios where the original image will show up in a canvas larger than itself, you'd want to set exactly where in this extra room it should align:
a=top-left
a=top
a=top-right
... you get the idea.
![](https://resizer.pictures/contain_we_cbg=77cccccc_h=190_w=220_a=top-left/riff.one/img/dice_128.png)
![](https://resizer.pictures/contain_we_cbg=77cccccc_h=190_w=220_a=top/riff.one/img/dice_128.png)
![](https://resizer.pictures/contain_we_cbg=77cccccc_h=190_w=220_a=top-right/riff.one/img/dice_128.png)
![](https://resizer.pictures/contain_we_cbg=77cccccc_h=190_w=220_a=left/riff.one/img/dice_128.png)
![](https://resizer.pictures/contain_we_cbg=77cccccc_h=190_w=220_a=center/riff.one/img/dice_128.png)
![](https://resizer.pictures/contain_we_cbg=77cccccc_h=190_w=220_a=right/riff.one/img/dice_128.png)
![](https://resizer.pictures/contain_we_cbg=77cccccc_h=190_w=220_a=bottom-left/riff.one/img/dice_128.png)
![](https://resizer.pictures/contain_we_cbg=77cccccc_h=190_w=220_a=bottom/riff.one/img/dice_128.png)
![](https://resizer.pictures/contain_we_cbg=77cccccc_h=190_w=220_a=bottom-right/riff.one/img/dice_128.png)
Special values a=attention
, a=focal
and a=entropy
are computed according to a given image contents through some kind of sorcery. And sure, you can use the shorthand form too.
![]() a=focal fpx=0.1 fpy=0.6 fit=cover | ![]() w=470 fit=cover | ![]() a=attention fit=cover |
Alignment shorthands
Canonical form | Short form |
---|---|
<zone>/ a=top-left /<image source> | Shorthand <zone>/ top-left /<image source> |
<zone>/ a=top /<image source> | Shorthand <zone>/ top /<image source> |
<zone>/ a=top-right /<image source> | Shorthand <zone>/ top-right /<image source> |
<zone>/ a=left /<image source> | Shorthand <zone>/ left /<image source> |
<zone>/ a=center /<image source> | Shorthand <zone>/ center /<image source> |
<zone>/ a=right /<image source> | Shorthand <zone>/ right /<image source> |
<zone>/ a=bottom-left /<image source> | Shorthand <zone>/ bottom-left /<image source> |
<zone>/ a=bottom /<image source> | Shorthand <zone>/ bottom /<image source> |
<zone>/ a=bottom-right /<image source> | Shorthand <zone>/ bottom-right /<image source> |
Cropping
Cropping is achieved through 4 parameters
- cw: 'Crop width',
- cy: 'Crop y',
- cx: 'Crop x',
- ch: 'Crop height',
This one is tricky to get right, but you can see an example on the story of my use case.
original w=200 h=150 | w=200 h=150 | w=200 h=150 | w=400 h=300 |
---|---|---|---|
cx=20 cy=20 fit=cover | cx=20 cy=20 ch=54 fit=cover | cx=82 cy=67 ch=137 cw=224 fit=cover | |
![]() | ![]() | ![]() | ![]() |
Basically, taking the image AFTER any resizing, you define a rectangle of [cw] x [ch] pixels, starting from a top left corner located at [cx, cy].
In the example below, the original image is resized to 430 x 270. From this size we want, in turn, to crop a 180 x 210 rectangle starting from [130, 50].
![](https://riff.one/crop.png)
To width or not to width
The final result is different if passing an explicit width
, in which case the fit
and precrop
parameters become relevant too. Using fit=contain will output an image of the specified width
, in which the cropped rectangle is padded by blank content. In turn, this blank content can be colorized using the cbg
parameter:
![](https://resizer.pictures/cbg=ccc_w=470_cx=130_cy=50_cw=180_ch=210_contain/riff.one/designcue-unsplash-430.jpg)
A note on coloring
The difference regarding the background color and the crop background color, is easier to appreciate on transparent or semi-transparent images. This example algo uses rotation background color to illustrate their different scopes:
![](https://resizer.pictures/cbg=eac_bg=9ac_w=250_cw=180_ch=210_ro=10_contain/riff.one/dice.png?rbg=9c6)
Using fit=cover
renders just the cropped rectangle, without blank space paddings (otherwise it would be mostly useless). Please note the output size is defined by cw
and ch
. Meaning: if you request width=400 and cx=200, it's only logic you'd get a 200px wide image.
![](https://resizer.pictures/w=400_cw=250_ch=250_cover_cy=80/riff.one/designcue-unsplash-430.jpg)
But, when the precrop
parameter is passed, the image is cropped first and then resized, in which case the output size obeys the w
and h
parameters:
![](https://resizer.pictures/precrop_cw=380_ch=300_cover_w=250/riff.one/designcue-unsplash-430.jpg)
You can achieve neat effects by keeping a constant cw and ch, and playing with cx and cy:
![]() | ![]() | ![]() |
![]() | ![]() | ![]() |
![]() | ![]() | ![]() |