Resizing

Image Operations / Image Resizing

On this page:
Intro ▾
{{activeSubMenu.text}} ▾

Image resizing is the single, most important operation one could perform on an image. The Pixaven Image API gives you flexibility in choosing a resizing mode for different scenarios you may have. In most cases, the API will perform all calculations for you with respect to the aspect ratio of the image. Below, you'll find a detailed descripion of all resizing modes offered by the Pixaven API.

Auto Mode

Auto is the default mode for image resizing even if the mode attribute is not specified. It accepts width and/or height attributes. This mode will always resize an image according to its aspect ratio, so for example, if you only specify width attribute, the height will be automatically adjusted and vice versa. If you specify both width and height attributes, the image will be resized in a way that it does not exceed specified dimensions.

In other words:
I want the image to be at maximum width × height or
I want the width of the image to be at W and height adjusted automatically for me or
I want the height of the image to be at H and width adjusted automatically for me.

{
    "resize": {
        "mode": "auto",
        "width": 300
    }
}
Given the input image 750px × 400px
Resize it with "auto" mode setting "width" to 300px
The resulting image is 300px × 160px

Fit Mode

This mode expects both width and height attributes, and resizes the image to fit the specified dimensions according to the aspect ratio and ensures that the area described by the dimensions is entirely covered with the image. Any outstanding image parts will be cropped out. The default crop gravity value is center and you may alter it by specifying one of the the following: top-left, top, top-right, right, bottom-right, bottom, bottom-left, left.

In other words:
I want the image to fit entirely within width × height dimensions, and I'm OK with some cropping occurring.

{
    "resize": {
        "mode": "fit",
        "width": 200,
        "height": 200,
        "gravity": "right"
    }
}
Given the input image 750px × 400px
Resize it with "fit" mode setting "width" to 200px, "height" to 200px and crop gravity to "right"
The resulting image is 200px × 200px cropped from the right direction

Fill Mode

This mode expects both width and height attributes, and just like auto strategy, proportionally resizes the image in a way that it does not exceed the specified dimensions. The remaining area is then filled with a background which accepts three values: a hex-encoded color, auto or blur (see examples below). Within the resize hash you may also specify shadow parameter which takes an integer within 1 - 100 and describes the amount of shadow to add to the original image in order to make it stand out.

In other words:
I want the image to be at maximum width × height and excess space filled with a solid background color or Gaussian-blurred version of the original image.

The first possible background value is pretty self-explanatory. You can provide a hex-encoded string in RGB, RRGGBB or AARRGGBB format. The default background color is white #ffffff. Let's have a look at an example JSON request and the resulting image.

{
    "resize": {
        "mode": "fill",
        "width": 400,
        "height": 300,
        "background": "#2b3246"
    }
}
Given the input image 750px × 400px
Resize it with "fill" mode setting "width" to 400px, "height" to 300px and background color to "#2b3246"
The resulting image is 400px × 300px filled with a solid background color

You may also choose to set the most dominant color found in the input image to be used as a background color. To do so, simply specify auto as a background value. Pixaven API will than quickly compute color palette of the input image and automatically use the most dominant color ensuring your input image will blend perfectly with the background.

{
    "resize": {
        "mode": "fill",
        "width": 400,
        "height": 300,
        "background": "auto"
    }
}
Given the input image 750px × 400px
Resize it with "fill" mode setting "width" to 400px, "height" to 300px and background to "auto"
The resulting image is 400px × 300px filled with the most dominant color in the input image

The last possible background value is blur. When used, Pixaven API will use a Gaussian-blurred version of the input image to fill excess space giving you the most visually pleasing composition.

{
    "resize": {
        "mode": "fill",
        "width": 400,
        "height": 300,
        "background": "blur"
    }
}
Given the input image 750px × 400px
Resize it with "fill" mode setting "width" to 400px, "height" to 300px and background to "blur"
The resulting image is 400px × 300px filled with a blurred version of the original image

Exact Mode

This mode expects both width and height attributes, and resizes an image to the exact specified dimensions. It does not take aspect ratio into account, so you will need to do the calculations on your side in order to ensure that the resulting image comes out with perfect proportions.

In other words:
I want the image to be exactly width × height.

{
    "resize": {
        "mode": "exact",
        "width": 300,
        "height": 50
    }
}
Given the input image 750px × 400px
Resize it with "exact" mode setting "width" to 300px and "height" to 50px
The resulting image is exactly 300px × 50px

Code Examples for Image Resizing

Below, you'll find examples of how to use Image Resizing from the Pixaven API:

<?php

/**
* Instantiate new `$pix` by calling a constructor
*/

$pix = new Pixaven\Pixaven('your-api-key');


/**
* Provide a publicly available image URL with fetch(string) method,
* resize the image to 400 x 300, set resize mode to "fill"
* and background color to "#2b3246"
*/

$pix
    ->fetch('https://www.website.com/image.jpg')
    ->resize(array(
        'mode' => 'fill',
        'width' => 400,
        'height' => 300,
        'background' => '#2b3246'
    ))
    ->toJSON(function ($error, $meta) {
        if (!empty($error)) {
            throw new Exception($error);
        }

        /**
        * You'll find the full JSON metadata array within the `$meta` variable.
        * Remember to always check if the `success` property is set to `true`.
        */

        if ($meta['success'] == true) {
            print ($meta['output']['url']);
        } else {
            print ($meta['message']);
        }
    });
/**
* Module dependencies
*/

const Pixaven = require("pixaven");


/**
* Instantiate new `pix` by calling a constructor
*/

const pix = new Pixaven("your-api-key");


/**
* Provide a publicly available image URL with fetch(string) method,
* resize the image to 400 x 300, set resize mode to "fill"
* and background color to "#2b3246"
*/

pix
    .fetch("https://www.website.com/image.jpg")
    .resize({
        mode: "fill",
        width: 400,
        height: 300,
        background: "#2b3246"
    })
    .toJSON((err, meta) => {
        if (err) {
            return console.log(err);
        }

        /**
        * You'll find the full JSON metadata hash within the `meta` variable.
        * Remember to always check if the `success` property is set to `true`.
        */

        if (meta.success) {
            console.log(meta.output.url);
        } else {
            console.log(meta.message);
        }
    });
##
# Require dependencies

require "pixaven"


##
# Instantiate new `pix` by calling a constructor

pix = Pixaven.new("your-api-key")


##
# Provide a publicly available image URL with fetch(string) method,
# resize the image to 400 x 300, set resize mode to "fill"
# and background color to "#2b3246"

err, meta = pix
    .fetch("https://www.website.com/image.jpg")
    .resize(
        mode: "fill",
        width: 400,
        height: 300,
        background: "#2b3246"
    )
    .to_json

abort(err) if err


##
# You'll find the full JSON metadata hash within the `meta` variable.
# Remember to always check if the `success` property is set to `true`.

if meta["success"]
    puts meta["output"]["url"]
else
    puts meta["message"]
end
package main

import (
    "fmt"
    "github.com/pixaven/pixaven-go"
)

func main() {

    /**
    * Instantiate new `pix` by calling a constructor
    */

    pix, err := pixaven.NewClient("your-api-key")

    if err != nil {
        panic(err)
    }


    /**
    * Provide a publicly available image URL with Fetch(string) method,
    * resize the image to 400 x 300, set resize mode to "fill"
    * and background color to "#2b3246"
    */

    meta, err := pix.
        Fetch("https://www.website.com/image.jpg").
        Resize(pixaven.P{
            "mode": "fill",
            "width": 400,
            "height": 300,
            "background": "#2b3246"
        }).
        ToJSON()

    if err != nil {
        panic(err)
    }


    /**
    * You'll find the full JSON metadata hash within the `meta` variable.
    * Remember to always check if the `success` property is set to `true`.
    */

    if meta["success"].(map[string]interface{})["success"].(bool) {
        fmt.Println(meta["output"].(map[string]interface{})["url"])
    } else {
        fmt.Println(meta["message"])
    }
}
##
# Import dependencies

from pixaven import pixaven


##
# Instantiate new `client` by calling a constructor

client = pixaven('your-api-key')


##
# Provide a publicly available image URL with fetch(string) method,
# resize the image to 400 x 300, set resize mode to "fill"
# and background color to "#2b3246"

err, meta = (
    client
        .fetch('https://www.website.com/image.jpg')
        .resize({
            'mode': 'fill',
            'width': 400,
            'height': 300,
            'background': '#2b3246'
        })
        .toJSON()
)

if err is not None:
    raise StandardError(err)


##
# You'll find the full JSON metadata hash within the `meta` variable.
# Remember to always check if the `success` property is set to `true`.

if meta['success'] is True:
    print (meta['output']['url'])
else:
    print (meta['message'])
package com.pixaven.examples;

/**
* Import dependencies
*/

import static com.pixaven.OperationConfiguration.settings;
import com.pixaven.Pixaven;
import com.pixaven.Fetch;
import com.pixaven.Response;

public class Resizing {
    public static void main(String[] args) {

        /**
        * Instantiate new `pix` by calling a constructor
        */

        Pixaven pix = new Pixaven("your-api-key");

        /**
        * Provide a publicly available image URL with fetch(string) method,
        * resize the image to 400 x 300, set resize mode to "fill"
        * and background color to "#2b3246"
        */

        final Fetch fetch = pix.fetch("https://www.website.com/image.jpg");

        fetch.resize(
            settings()
                .set("mode", "fill")
                .set("width", 400)
                .set("height", 300)
                .set("background", "#2b3246")
        );

        final Response response = fetch.toJson();

        /**
        * You'll find the full JSON metadata hash within the `Response#getMetadata()` property.
        * Remember to always check if the `Response#successful` property is set to `true`.
        */

        if (response.isSuccessful()) {
            System.out.println(response.getMetadata().getOutput().get("url"));
        } else {
            System.out.println(response.getMessage());
        }
    }
}

We use both proprietary and third-party cookies to improve your browsing experience and to provide you with a better service. By continuing to use this site you consent our use of cookies as described in our Cookie Policy×