🔳 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.

<zone>/fit=inside/<source img> <zone>/inside/<source img>

<zone>/fit=contain/<source img> <zone>/contain/<source img>

<zone>/fit=cover/<source img> <zone>/cover/<source img>

<zone>/fit=fill/<source img> <zone>/fill/<source img>

<zone>/fit=outside/<source img> <zone>/outside/<source img>

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.

<zone>/a=top-left/<source img> <zone>/top-left/<source img>

<zone>/a=top/<source img> <zone>/top/<source img>

<zone>/a=top-right/<source img> <zone>/top-right/<source img>

<zone>/a=left/<source img> <zone>/left/<source img>

<zone>/a=center/<source img> <zone>/center/<source img>

<zone>/a=right/<source img> <zone>/right/<source img>

<zone>/a=bottom-left/<source img> <zone>/bottom-left/<source img>

<zone>/a=bottom/<source img> <zone>/bottom/<source img>

<zone>/a=bottom-right/<source img> <zone>/bottom-right/<source img>

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

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].

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:

w=470 bg=CCC fit=contain

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:

cbg=eac_bg=9ac_w=250_cw=180_ch=210_ro=10_contain

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.

w=400_cw=250_ch=250_cover_cy=80

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:

precrop_cw=380_ch=300_cover_w=250

You can achieve neat effects by keeping a constant cw and ch, and playing with cx and cy: