Resizing is a fundamental operation for image processing, crucial for adapting visuals to various display requirements. The Optidash Image API offers versatile resizing modes to accommodate diverse scenarios, automatically handling aspect ratio calculations for you. Below is an overview of the resizing modes available.

Auto Mode

Auto mode is the default resizing approach. It requires width and/or height parameters and maintains the image's original aspect ratio. For instance, specifying only the width adjusts the height accordingly, and vice versa. When both dimensions are provided, the image resizes to fit within them without exceeding either one.

Usage scenarios include:

• Ensuring the image's maximum dimensions do not surpass a given width and height.
• Adjusting the width while automatically calculating the height, or adjusting the height with an automatic width calculation.

{
    "resize": {
        "mode": "auto",
        "width": 300
    }
}

Fit Mode

In this mode, both width and height attributes are required. The image is resized to fit the specified dimensions while maintaining its aspect ratio. This ensures that the entire area described by the dimensions is covered by the image. If the original image is smaller than the desired output frame size, it will be proportionally upscaled. Any excess parts of the image will be cropped out. By default, the crop gravity value is set to center, but you can customize it by specifying one of the following options: top-left, top, top-right, right, bottom-right, bottom, bottom-left, or left.

To avoid upscaling smaller images, include "upscale": false within the resize hash.

{
    "resize": {
        "mode": "fit",
        "width": 200,
        "height": 200,
        "gravity": "right"
    }
}

To center the image on the most prominent face, use face as the gravity value:

{
    "resize": {
        "mode": "fit",
        "width": 250,
        "height": 200,
        "gravity": "face"
    }
}

When faces (plural) is set as the gravity value in the API call, the image will be centered to include all faces.

{
    "resize": {
        "mode": "fit",
        "width": 250,
        "height": 200,
        "gravity": "faces"
    }
}

Usage scenarios include:

• Fitting the image within specific dimensions, accepting potential cropping for full coverage.

Fill Mode

In this mode, both width and height attributes are required. Similar to the auto strategy, the image is resized proportionally to ensure it does not exceed the specified dimensions. The remaining area is filled with a background, which can be specified using one of three values: a hex-encoded color, auto, or blur (see examples below). Additionally, within the resize hash, you may specify the shadow parameter, which accepts an integer value between 1 and 100. This parameter describes the amount of shadow to add to the original image in order to make it stand out.

The first available background value is straightforward. You can specify a hex-encoded string representing the background color in RGB, RRGGBB, or AARRGGBB format. The default background color is white (#ffffff). Let's examine an example JSON request and the corresponding image result:

{
    "resize": {
        "mode": "fill",
        "width": 400,
        "height": 300,
        "background": "#2b3246"
    }
}

Alternatively, you can opt to set the background color to match the most dominant color present in the input image. To achieve this, simply specify auto as the background value. The Optidash API will promptly analyze the color palette of the input image and automatically select the most dominant color, ensuring seamless blending with the background.

{
    "resize": {
        "mode": "fill",
        "width": 400,
        "height": 300,
        "background": "auto"
    }
}

The final available background value is blur. When selected, the Optidash API will utilize a Gaussian-blurred rendition of the input image to fill any excess space, resulting in a visually appealing composition.

{
    "resize": {
        "mode": "fill",
        "width": 400,
        "height": 300,
        "background": "blur"
    }
}

Usage scenarios include:

• Maximizing the image to fit given dimensions, with excess space filled by a specified background for aesthetic composition.

Exact Mode

Exact mode demands precise width and height values, resizing the image to these dimensions without regard to the original aspect ratio. This mode requires manual calculation to maintain image proportions.

Usage scenarios include:

• Achieving specific dimensions without automatic aspect ratio adjustments.

{
    "resize": {
        "mode": "exact",
        "width": 300,
        "height": 50
    }
}