Optidash Blog

Control Global Image Opacity and Frame Delay

Enhance your images with new pixel adjustment features: set global opacity and adjust frame delay for animated formats like GIFs. Discover the latest updates!

This week we are bringing two convenient additions to pixel adjustment operations as well as output format settings - opacity and delay. You can now set a global opacity (alpha-transparency) on the resulting image as well as fine-tune the delay between the frames in formats that support animation such as GIF or animated PNG.

Image Opacity

This operation, applied as a last step right before rendering the final image, controls global alpha-transparency. You can now use a new opacity key within the adjust hash that takes a positive float between 0.0 and 1.0:

{
    "adjust": {
        "opacity": 0.75
    }
}

You will find updated API docs and examples for image opacity here.

GIF and APNG Frame Delay

We also extended the output hash with delay parameter which takes a positive float and describes a delay between the frames in formats that support animation - GIF and animated PNG. This effectively controls the speed at which those visuals will be animated when displayed in the browser or app.

{
    "output": {
        "format": "apng",
        "delay": 0.045
    }
}

Please check out updated API docs for animated PNG and GIF output formats.

Here’s a quick example of how to use our newly-introduced controls with our official Node integration:

const Optidash = require("optidash");

/**
* Instantiate `opti`
*/

const opti = new Optidash("your-api-key");

/**
* Upload a file from disk with upload(string) method,
* resize it to a maximum width of 320, set animated PNG as output format,
* adjust opacity to 0.75 and set frame delay to 0.045
*/

opti
    .upload("/srv/storage/animation.gif")
    .resize({
        width: 320
    })
    .adjust({
        opacity: 0.75
    })
    .output({
        format: "apng",
        delay: 0.045
    })
    .toJSON((err, meta) => {
        if (err) {
            return console.log(err);
        }
    });

Should you have questions about those controls or requests for other features do not hesitate to contact us anytime.