Image Processing Supports Watermark

We've extended our Image Processing service with a new watermark feature! This new operation allows an image to be placed on top of another image. It seamlessly integrates into our existing service. The image overlay process consists of two parts, the base image and the overlay image. The base image can still be transformed and optimized with any image processing parameter. Once the base image has been modified, the overlay image is added on top.

Overlay parameters overview

The following image processing parameters have been added:

• olurl defines the URL of the overlay image. The URL can be plain or encoded.
• olalign modifies the alignment of the overlay image (default is center).
• olx and oly specifies the location of the overlay image based on pixel coordinates.
• olwidth adjusts the width of the overlay image relative to the base image if <=1 or in absolute pixel if >2.
• olheight sets the height of the overlay image relative to the base image if <=1 or in absolute pixel if >2.
• olscale scales the width of the overlay image in percent to the width of the base image.
• olpadding adds padding to the overlay image in pixels (default is 10).
• olalpha makes the overlay image transparent.
• olrepeat repeats the overlay image multiple times on the base image.

In order to use the overlay operation, the Image Processing setting needs to be enabled. The overlay image format can be svg, jpeg, png, or webp. We recommend using svg as it scales without resolution loss.

Overlay examples

The following example simply adds the defined overlay image to the center of the base image:

    
        https://ip.keycdn.com/example.jpg?olurl=https://logos.keycdn.com/keycdn-logo-white.svg
    

A common watermark is a semi-transparent overlay image, for example:

    
        https://ip.keycdn.com/example.jpg?olurl=https://logos.keycdn.com/keycdn-logo-white.svg&olalpha=40&olscale=70
    

A logo can easily be placed in a corner of an image, for example:

    
        https://ip.keycdn.com/example.jpg?olurl=https://logos.keycdn.com/keycdn-icon-white.svg&olalign=bottomright&olwidth=80&olpadding=10
    

The overlay image can also be added repeatedly with a defined padding, for example:

    
        https://ip.keycdn.com/example.jpg?olurl=https://logos.keycdn.com/keycdn-icon-white.svg&olheight=100&olpadding=40&olalpha=30&olrepeat=1
    

Summary

Image overlay is a great way to effectively add an image over another. You only need to define the query string and we take care of the rest. If there is another feature that you're looking for we'd love to hear your feedback.

Happy image transforming!