Overlay

These transformations are used to overlay one image over another. An ideal use case for this would be to watermark your images.

Parameters

Description

oi Overlay Image

Used to overlay an image on top of your main image. This helps you generate watermarked images, if necessary. https://ik.imagekit.io/demo/tr:h-300,oi-logo-white_SJwqB4Nfe.png/medium_cafe_B1iTdD0C.jpg

ofo Overlay Focus

Used to specify the position of the overlaid image relative to the input image. Possible values include center , top , left , bottom , right , top_left , top_right , bottom_left , and bottom_right . Default Valuecenter

ox Overlay X Position

Used to provide granular control over the position of the overlay image relative to the input image. The top left corner of the input image is considered as (0,0), and the bottom right corner as (w,h), where w is the width and h is the height of the input image. If ox  is 100, then the overlay image is placed at 100px from the left edge of the input image. If the ox value exceeds the dimensions of the input image, the values are adjusted and made equal to the corresponding dimension of the input image. Negative values are also supported with a leading N in front of the provided value.  Possible Values include any positive integer. If prefixed with N , then treated as a negative integer. https://ik.imagekit.io/demo/tr:h-300,oi-logo-white_SJwqB4Nfe.png,ox-35,oy-30/medium_cafe_B1iTdD0C.jpg

oy Overlay Y Position

Used to provide granular control over the position of the overlay image relative to the input image. The top left corner of the input image is considered as (0,0), and the bottom right corner as (w, h), where w is the width and h is the height of the input image.  If oy  is 150, then the overlay image is placed at 150px from the top edge of the input image. If the oy value exceeds the dimensions of the input image, the values are adjusted and made equal to the corresponding dimension of the input image. Negative values are also supported with a leading N in front of the provided value.  Possible Values include any positive integer. If prefixed with N , then treated as a negative integer.https://ik.imagekit.io/demo/tr:h-300,oi-logo-white_SJwqB4Nfe.png,ox-35,oy-30/medium_cafe_B1iTdD0C.jpg

oh Overlay Height

Used to specify the height of the overlaid image. In the URL below, the height of the overlaid image is set to 20px. https://ik.imagekit.io/demo/tr:oi-logo-white_SJwqB4Nfe.png,oh-20/medium_cafe_B1iTdD0C.jpg

ow Overlay Width

Used to specify the width of the overlaid image. In the URL below, the width of the overlaid image is set to 20px. https://ik.imagekit.io/demo/tr:oi-logo-whiteSJwqB4Nfe.png,ow-20/medium cafe_B1iTdD0C.jpg

ot Overlay Text

Used to overlay text on an image. Supported characters include all alphabets, numbers, spaces, _, -, %, !, @, and &. https://ik.imagekit.io/demo/tr:ot-overlay made easy,ots-45/medium_cafe_B1iTdD0C.jpg

oit Overlay Image Trim

Used to trim overlay images. This removes the transparency of the overlaid image. Default Valuetrue

otc Overlay Text Color

Used to specify the color of the overlaid text on the image.  Possible Values - Valid RGB Hex Code  https://ik.imagekit.io/demo/tr:ot-overlay made easy,ots-45,otc-00FFFF/medium_cafe_B1iTdD0C.jpg

otf Overlay Text Font

Used to specify the font of the overlaid text on the image. Currently, we support these fonts. https://ik.imagekit.io/demo/tr:ot-overlays made easy,ots-45,otc-00FFFF,otf-ubuntu/medium_cafe_B1iTdD0C.jpg

ots Overlay Text Size

Used to specify the size of the overlaid text on the image.  Possible Values include any integer. https://ik.imagekit.io/demo/tr:ot-overlays made easy,ots-45,otc-00FFFF/medium_cafe_B1iTdD0C.jpg

ott Overlay Text Typography

Used to specify the typography of the font used for the overlaid image.  Possible Values include bold b  and italics i .

oa Overlay Transparency

Used to specify the transparency level of the overlaid image.  Possible Values include integers from 1  to 9 . Note: Overlay Transparency is currently supported for overlay texts and backgrounds only. https://ik.imagekit.io/demo/tr:ot-overlays made easy,oa-5,ots-45/medium_cafe_B1iTdD0C.jpg

obg Overlay Background

Used to specify the color of a single-color block that is to be overlaid on the image.  Possible ValuesValid RGB Hex Code  Note: Overlay Transparency is currently supported for backgrounds. https://ik.imagekit.io/demo/tr:obg-00FFFF,oh-50,ow-600,ofo-bottom/medium_cafe_B1iTdD0C.jpg

Note: ImageKit.io currently supports JPEG/JPG and PNG images for overlay.