wsrv.nl

Appearance

Crop ​

Controls how the image is aligned.

Alignment position &a= ​

How the image should be aligned when &fit=cover or &fit=contain is set. The &w= and &h= parameters should also be specified.

Position-based ​

Controls the starting location of the crop. When &fit=contain is set, it determines how the image is positioned inside its box.

Valid positions:

  • center: default
  • top
  • right
  • bottom
  • left
  • top-left
  • bottom-left
  • bottom-right
  • top-right

For more information, please see the suggestion on our GitHub issue tracker: Issue #24 - Aligning.

html
<img src="//wsrv.nl/?url=wsrv.nl/lichtenstein.jpg&w=300&h=300&fit=cover&a=top">
md
![Alignment position](https://wsrv.nl/?url=wsrv.nl/lichtenstein.jpg&w=300&h=300&fit=cover&a=top)

Alignment position

Focal point &a=focal ​

You can be more specific about the alignment using a focal point. This can be set using a horizontal (&fpx=) and vertical (&fpy=) offset decimal value (a float between 0.0 and 1.0, inclusive). The default value is 0.5, or the center of the image.

html
<img src="//wsrv.nl/?url=wsrv.nl/lichtenstein.jpg&w=300&h=300&fit=cover&a=focal&fpy=0.45">
md
![Focal point](https://wsrv.nl/?url=wsrv.nl/lichtenstein.jpg&w=300&h=300&fit=cover&a=focal&fpy=0.45)

Focal point

Smart crop &a=[entropy,attention] ​

An experimental strategy-based approach to crop the image by removing boring parts. This only works with &fit=cover.

More info: Issue #90 - Add support for smart crop.

Valid strategies:

  • entropy: focus on the region with the highest Shannon entropy.
  • attention: focus on the region with the highest luminance frequency, color saturation and presence of skin tones.
html
<img src="//wsrv.nl/?url=wsrv.nl/puppy.jpg&w=300&h=300&fit=cover&a=attention">
md
![Smart crop](https://wsrv.nl/?url=wsrv.nl/puppy.jpg&w=300&h=300&fit=cover&a=attention)

Smart crop

Rectangle crop &c[x,y,w,h]= ​

Crops the image to specific dimensions after any other resize operations.

Use percentage values (denoted by a value ending with %) to crop a relative portion of the image.

TIP

You can use &precrop, for a pre-resize crop behaviour. See Issue #176 - Combine cropping with resizing for more information.

html
<img src="//wsrv.nl/?url=wsrv.nl/lichtenstein.jpg&cx=680&cy=500&cw=300&ch=300">
md
![Rectangle crop](https://wsrv.nl/?url=wsrv.nl/lichtenstein.jpg&cx=680&cy=500&cw=300&ch=300)

Rectangle crop

Trim &trim= ​

Trim "boring" pixels from all edges that contain values within a similarity of the top-left pixel. Trimming occurs before any resize operation. Use values between 1 and 254 to define a tolerance level to trim away similar color values. You also can specify just &trim, which defaults to a tolerance level of 10.

More info: Issue #39 - able to remove black/white whitespace.

html
<img src="//wsrv.nl/?url=wsrv.nl/transparency_demo.png&w=300&trim=10">
md
![Trim](https://wsrv.nl/?url=wsrv.nl/transparency_demo.png&w=300&trim=10)

Trim