Operations

Make sure to read our Getting Started guide if you aren't sure how to use the ImageBoss Operations.

  • :operation is the main manipulation you want to do with your image.

Cover

Use cover when you want an image with an exact width and height (crop). By default we'll run our Smart Cropping algorithm to identify the main subject of the image, so in case we need to remove part of the image to deliver on the requested size, we will always try our best to keep the most important element in the frame.


  1. Cover Modes
  2. Algorithm Based Modes
    1. Smart: Content Aware Cropping
    2. Attention: Luminance, Saturation, Skin Tones
    3. Entropy: Shannon Entropy Algorithm
  3. Directional Modes: North, Northeast, East, Southeast (...)
  4. Focal Point: Choose the point of interest of your image.
  5. Contain: Embed within provided dimensions
  6. Inside: Fit within provided dimensions

Example using ImageBoss Web Library

<img
    src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
    data-imageboss-src="/examples/02.jpg"
    data-imageboss-operation="cover"
    width="300"
    height="300"
/>

API Example

https://img.imageboss.me /mywebsite-images /cover /300x300 /examples/02.jpg




Cover Modes

The cover operation accepts an extra parameter called :mode. It must be used if you think the default behaviour isn't what you're looking for.

Example using ImageBoss Web Library

<img
    src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
    data-imageboss-src="/examples/02.jpg"
    data-imageboss-operation="cover"
    data-imageboss-cover-mode="center"
    width="320"
    height="320"
/>

API Example

https://img.imageboss.me /mywebsite-images /cover:center /320x320 /examples/02.jpg





Algorithm Based Modes

/cover:smart

Content Aware Cropping (default)


https://img.imageboss.me /mywebsite-images /cover:smart /320x320 /examples/02.jpg




/cover:attention

Focuses on the region with the highest luminance frequency, colour saturation and presence of skin tones.


https://img.imageboss.me /mywebsite-images /cover:attention /320x320 /examples/02.jpg




/cover:entropy

Shannon Entropy Algorithm.


https://img.imageboss.me /mywebsite-images /cover:entropy /320x320 /examples/02.jpg




/cover:face

Face Detection Algorithm.


Available Options

fp-z focalpoint zoom. Accepts any value between 1.0 and 10.0. (defaults to 1)



API Example

https://img.imageboss.me /mywebsite-images /cover:face /320x320 /examples/07.jpg




API Example fp-z:2

https://img.imageboss.me /mywebsite-images /cover:face /320x320 /fp-z:2 /examples/07.jpg




Example using ImageBoss Web Library

<img
    src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
    data-imageboss-src="/examples/02.jpg"
    data-imageboss-operation="cover"
    data-imageboss-cover-mode="face"
    data-imageboss-options="fp-z:2"
    width="320"
    height="320"
/>

Directional Modes

Use Directional Modes to focus on a specific region of the image.


Available Modes

north, northeast, east, southeast, south, southwest, west, northwest and center.


Example

https://img.imageboss.me /mywebsite-images /cover:northeast /320x320 /examples/01.jpg




Focal Point

Use the Focal Point option to choose the exact point of interest of the image, expressed in decimal numbers. For example,fp-x:0.5,fp-y:0.5 would be a point at the center of the image.


Available Options

fp-x accepts any value between 0.0 and 1.0 (float).

fp-y accepts any value between 0.0 and 1.0 (float).

fp-z is how much you want to zoom-in into that focal point. This option accepts any value between 1.0 and 10.0. (defaults to 1)


API Example fp-z:2

https://img.imageboss.me /mywebsite-images /cover /320x420 /fp-x:0.3,fp-y:0.4,fp-z:2 06.jpg


API Example fp-z:3

https://img.imageboss.me /mywebsite-images /cover /320x420 /fp-x:0.3,fp-y:0.4,fp-z:3 06.jpg


Example using ImageBoss Web Library

<img
    src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
    data-imageboss-src="/examples/02.jpg"
    data-imageboss-operation="cover"
    data-imageboss-options="fp-x:0.3,fp-y:0.4,fp-z:2"
    width="320"
    height="420"
/>

Contain

Use contain if you want to resize your image until it fits both provided dimentions.

A transparent background will be created in case the resulting image exceeds the size of your original image.

If your image does not allow transparency, a default white background will be used.


Available Options

fill-color Use this option to set the background color of the resulting image. (default: ffffff)


Example

https://img.imageboss.me /mywebsite-images /cover:contain /300x300 /examples/01.jpg




Customizing background

https://img.imageboss.me /mywebsite-images /cover:contain /300x300 /fill-color:130f1e /examples/03.jpg




Inside

Use the inside option if you want to resize your image until it fits both provided dimentions without creating a background.


Example

https://img.imageboss.me /mywebsite-images /cover:inside /300x300 /examples/05.jpg