Overlay

Introduction about overlays
You can overlay images or text over other images for watermarking or creating a dynamic banner using custom text.
Overlay logo over another image
The above image is created using below URL:
​https://ik.imagekit.io/demo/tr:oi-logo-white_SJwqB4Nfe.png/medium_cafe_B1iTdD0C.jpg​
Let's first understand what all is possible in overlay and then you can deep dive into different options available based on what you need. To help you understand, we have added many examples in this documentation.
Position of overlay image
You can control the position of overlay image relative to base image using overlay focus (ofo), overlay X position (ox) or overlay Y position (oy).
Dimension of overlay image
You can control the dimension of overlay image using overlay height (oh) and overlay width (ow).
Related blog post for creating photo collage
How to create a photo collage
ImageKit.io Blog
​
Common overlay options
The following options are available for both image and text overlay.
Overlay X position - (ox)
Used to provide granular control over the position of the overlay image relative to the base 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.
X=35
X=N35 (Negative value)
URL - https://ik.imagekit.io/demo/tr:oi-logo-white_SJwqB4Nfe.png,ox-35/medium_cafe_B1iTdD0C.jpg​
URL - https://ik.imagekit.io/demo/tr:oi-logo-white_SJwqB4Nfe.png,ox-N35/medium_cafe_B1iTdD0C.jpg​
Overlay Y position - (oy)
Used to provide granular control over the position of the overlay image relative to the base 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.
Y=30
Y=N30 (Negative value)
X=35 and Y=30
URL - https://ik.imagekit.io/demo/tr:oi-logo-white_SJwqB4Nfe.png,oy-30/medium_cafe_B1iTdD0C.jpg​
URL - https://ik.imagekit.io/demo/tr:oi-logo-white_SJwqB4Nfe.png,oy-N30/medium_cafe_B1iTdD0C.jpg​
URL - https://ik.imagekit.io/demo/tr:oi-logo-white_SJwqB4Nfe.png,ox-35,oy-30/medium_cafe_B1iTdD0C.jpg​
Overlay height - (oh)
Used to specify the height of the overlay image.
Using both oh and ow parameters together will crop the overlay image.
oh=20
oh=30
URL - https://ik.imagekit.io/demo/tr:oi-logo-white_SJwqB4Nfe.png,oh-20/medium_cafe_B1iTdD0C.jpg​
URL - https://ik.imagekit.io/demo/tr:oi-logo-white_SJwqB4Nfe.png,oh-30/medium_cafe_B1iTdD0C.jpg​
Overlay width - (ow)
Used to specify the width of the overlaid image.
Using both oh and ow parameters together will crop the overlay image.
ow=50
ow=100
URL - https://ik.imagekit.io/demo/tr:oi-logo-white_SJwqB4Nfe.png,ow-50/medium_cafe_B1iTdD0C.jpg​
URL - https://ik.imagekit.io/demo/tr:oi-logo-white_SJwqB4Nfe.png,ow-100/medium_cafe_B1iTdD0C.jpg​
Overlay Background - (obg)
If you want to overlay a solid color block over a base image, use obg parameter.

Possible Values- Valid RGB Hex Code with optional alpha component
For example - 00AAFF (solid color) or 00AAFF55 (with 55% opacity)
Overlay Background Transparency is supported via alpha component in RGB hex code which takes a numeric value between 00 and 99.
If both obg and oa are set in a single transformation and obg has an alpha component, then that value is used to set overlay background transparency. Otherwise, oa value is used .
obg=00AAFF
obg=00AAFF55 (55% opacity)
URL - https://ik.imagekit.io/demo/tr:obg-00FFFF,oh-50,ow-600,ofo-bottom/medium_cafe_B1iTdD0C.jpg​
URL - https://ik.imagekit.io/demo/tr:obg-00FFFF55,oh-50,ow-600,ofo-bottom/medium_cafe_B1iTdD0C.jpg​
Overlay focus - (ofo)
You can control the relative position of overlay image using ofo parameter. This position is relative to base image.
Possible values include center , top , left , bottom , right , top_left , top_right , bottom_left , and bottom_right .

Default Value- center
Default center
Top
Bottom left
URL - https://ik.imagekit.io/demo/tr:oi-logo-white_SJwqB4Nfe.png/medium_cafe_B1iTdD0C.jpg​
URL - https://ik.imagekit.io/demo/tr:oi-logo-white_SJwqB4Nfe.png,ofo-top/medium_cafe_B1iTdD0C.jpg​
URL - https://ik.imagekit.io/demo/tr:oi-logo-white_SJwqB4Nfe.png,ofo-bottom_left/medium_cafe_B1iTdD0C.jpg​
ow=50
ow=100
URL - https://ik.imagekit.io/demo/tr:oi-logo-white_SJwqB4Nfe.png,ow-100/medium_cafe_B1iTdD0C.jpg​
Image overlay
Overlay image - (oi)
Used to overlay an image on top of another image (base image). This helps you generate watermarked images. 
Let's say base image URL is - https://ik.imagekit.io/demo/medium_cafe_B1iTdD0C.jpg​
Overlay image logo URL is - https://ik.imagekit.io/demo/logo-white_SJwqB4Nfe.png​
Now to overlay this logo over the base image we will pass the path of overlay image in oi parameter i.e. logo-white_SJwqB4Nfe.png
1.ImageKit.io currently supports JPEG/JPG and PNG images for overlay.
2.The overlay image path should be accessible using your ImageKit.io account.
Final URL - 
https://ik.imagekit.io/demo/tr:oi-logo-white_SJwqB4Nfe.png/medium_cafe_B1iTdD0C.jpg​
URL structure
1
                        overlay image path        base image path                                    
2
                     ┌──────────────────────┐┌───────────────────────┐
3
{url-endpoint}/tr:oi-logo-white_SJwqB4Nfe.png/medium_cafe_B1iTdD0C.jpg
Copied!
Using overlay image that are stored in a nested folder
In the above example, overlay image logo was stored in home folder i.e. /, so there was no slash in the overlay image path. However it could be possible that you have overlay images stored within a specific folder, in that case there will be slashes (/) in overlay image path. To overcome this you need to replace slash / with @@.
For example, if the overlay image is at https://ik.imagekit.io/demo/path/to/overlay.jpg
Then it can be used as an overlay like below:
https://ik.imagekit.io/demo/tr:[email protected]@[email protected]@overlay.jpg/medium_cafe_B1iTdD0C.jpg
Trimming of the overlay image
By default, ImageKit.io trims the overlay image before overlaying it on the base image. Trimming removes the similar colored pixels from the edges. By default, overlay image is trimmed.
There might be cases where you do not need such trimming to happen. Then, you can do that from the URL itself using the overlay trim (oit) parameter and specifying it as false.
Possible values include true , false and integer values between 1  and 99 that specify the threshold level for considering a particular pixel as "background".
For example, consider the image below, which has the same white logo to be overlaid but this time inside a black rectangular box.
Overlay image logo with black rectangular box - https://ik.imagekit.io/demo/logo_white_black_bg.png​
With trimming (default)
Without trimming
Trim equal to 55
Trim equal to 80
URL - https://ik.imagekit.io/demo/tr:oi-logo_white_black_bg.png/medium_cafe_B1iTdD0C.jpg​
URL - https://ik.imagekit.io/demo/tr:oi-logo_white_black_bg.png,oit-false/medium_cafe_B1iTdD0C.jpg​
URL - https://ik.imagekit.io/ikmedia/tr:w-710,h-610:oi-women-dress-2.jpg,ox-0,oy-0,ow-600,oh-600,oib-5_FFFFFF,oit-99:oi-women-dress-1.jpg,ox-500,oy-150,ow-200,oh-300,oib-5_FFFFFF,oit-55/white-canvas.png​
URL - https://ik.imagekit.io/ikmedia/tr:w-710,h-610:oi-women-dress-2.jpg,ox-0,oy-0,ow-600,oh-600,oib-5_FFFFFF,oit-99:oi-women-dress-1.jpg,ox-500,oy-150,ow-200,oh-300,oib-5_FFFFFF,oit-80/white-canvas.png​
​
Overlay image aspect ratio (oiar)
It is used to specify the aspect ratio of the overlay image or the ratio of width to height of the overlay image. 
This parameter must be used along with either the overlay height(oh) or overlay width(ow) parameter. The format for specifying this transformation is oiar-<width>-<height>.
If you specify both overlay height(oh) and overlay width(ow) in the URL along with this parameter, then the overlay image aspect ratio (oiar) is ignored.
oiar=4:3 & 3:4
oiar=4:3 & 9:16
URL - https://ik.imagekit.io/ikmedia/tr:w-715,h-460:oi-women-dress-2.jpg,ox-0,oy-0,ow-600,oib-5_FFFFFF,oiar-4-3:oi-women-dress-1.jpg,ox-500,oy-100,ow-200,oiar-3-4,oib-5_0F0F0F/white-canvas.png​
URL - https://ik.imagekit.io/ikmedia/tr:w-715,h-460:oi-women-dress-2.jpg,ox-0,oy-0,ow-600,oib-5_FFFFFF,oiar-4-3:oi-women-dress-1.jpg,ox-500,oy-50,ow-200,oiar-9-16,oib-5_0F0F0F/white-canvas.png​
Overlay image background (oibg)
It is used to specify the background color in RGB Hex Code (e.g. FF0000) or an RGBA Code (e.g. FFAABB50) that must be used for the overlay image. If you specify an 8 character background, the last two characters must be a number between 00 and 99, which is used to indicate the opacity level of the overlay image background. 
00 represents an opacity level of 0.00, 01  represents opacity level 0.01, and so on.
Default Value -  Black 00000
Possible Values - Valid RGB Hex Code
oibg=0F0F0F
URL - https://ik.imagekit.io/ikmedia/white-canvas.png?tr=w-666,h-1000:oi-women-dress-1.jpg,ox-0,oy-0,ow-666,oh-500,oicm-pad_resize,oifo-left,oibg-0F0F0F:oi-women-dress-4.jpg,ox-0,oy-500,ow-666,oh-500,oicm-pad_resize,oifo-right,oibg-0F0F0F:b-5_0F0F0F​
Overlay image border (oib)
This adds a border to the overlay image. It accepts two parameters - the width of the border and the color of the border.
Usage - oib-<border-width>-<hex code>
The width is specified as a number that is equivalent to the border width in pixels. The color code is specified as a 6-character hex code RRGGBB.
oib=10_FAD6A5 and 10_D73B3E
ob=5_FFFFFF
ob=10_FFFFFF and 10_0F0F0F
URL - https://ik.imagekit.io/ikmedia/tr:w-1240,h-620:oi-women-dress-2.jpg,ox-0,oy-0,ow-600,oh-600,oib-10_FAD6A5:oi-women-dress-1.jpg,ox-620,oy-150,ow-600,oh-600,oib-10_D73B3E/white-canvas.png​
URL - https://ik.imagekit.io/ikmedia/tr:w-710,h-610:oi-women-dress-2.jpg,ox-0,oy-0,ow-600,oh-600,oib-5_FFFFFF,oit-99:oi-women-dress-1.jpg,ox-500,oy-150,ow-200,oh-300,oib-5_FFFFFF/white-canvas.png​
URL - https://ik.imagekit.io/ikmedia/tr:w-730,h-620:oi-women-dress-2.jpg,ox-0,oy-0,ow-600,oh-600,oib-10_FFFFFF,oit-99:oi-women-dress-1.jpg,ox-500,oy-150,ow-200,oh-300,oib-10_0F0F0F/white-canvas.png​
Overlay image DPR (oidpr)
It is used to specify the device pixel ratio that is used to calculate the dimensions of the overlay image. Extremely helpful when creating image transformations for devices with high device pixel ratio (DPR > 1), like the iPhone or high-end Android devices. 
The oidpr parameter can only be used when either the height or width of the desired output overlay image is specified. If the output image's height or width after considering the specified DPR  is less than 1px or greater than 5000px, the value of oidpr is not considered and the overlay height or width used in the URL is used. 
Possible Values - 0.1  to 5 .
oidpr=1.1
URL - https://ik.imagekit.io/ikmedia/tr:w-730,h-620:oi-women-dress-2.jpg,ox-0,oy-0,ow-600,oh-600,oib-10_FFFFFF,oit-99:oi-women-dress-1.jpg,ox-500,oy-130,ow-200,oh-300,oib-10_0F0F0F,oidpr-1.1/white-canvas.png​
Overlay image quality (oiq)
It is used to specify the quality of the overlay image for lossy formats like JPEG and WebP.  A large quality number results in a bigger image file size with high overlay image quality. A small quality number results in a smaller image file size with lower overlay image quality. 
Default Value - 80 (can be managed from image settings in dashboard)
oiq=10 and 100
URL - https://ik.imagekit.io/ikmedia/tr:w-715,h-610:oi-women-dress-2.jpg,ox-0,oy-0,ow-600,oh-600,oib-5_FFFFFF,oiq-10:oi-women-dress-1.jpg,ox-500,oy-150,ow-200,oh-300,oib-5_0F0F0F,oiq-100/white-canvas.png​
Overlay image cropping
Cropping in overlay behave the same way as cropping works in ImageKit.io in general. The only difference is that all cropping and focus related parameters are prefixed with oi.
So essentially:
​c-at_least becomes oic-at_least​
​c-at_max becomes oic-at_max​
​c-force becomes oic-force​
​c-maintain_ratio becomes oic-maintain_ratio​
​cm-extract becomes oicm-extract​
​cm-pad_extract becomes oicm-pad_extract​
​cm-pad_resize becomes oicm-pad_resize​
​fo becomes oifo​
​fo-auto becomes oifo-auto​
​fo-custom becomes oifo-custom​
​fo-face becomes oifo-face​
​x becomes oix​
​y becomes oiy​
​xc becomes oixc​
​yc becomes oiyc​
oic-at_least
It works same as c-at_least but used in context of overlay images only.
oic-at_max
It works same as c-at_max but used in context of overlay images only.
oic-force
It works same as c-force but used in context of overlay images only.
oic-maintain_ratio
It works same as c-maintain_ratio but used in context of overlay images only.
oicm-extract
It works same as cm-extract but used in context of overlay images only.
oicm-pad_extract
It works same as cm-pad_extract but used in context of overlay images only.
oicm-pad_resize
It works same as cm-pad_resize but used in context of overlay images only.
oifo
It works same as fo but used in context of overlay images only.
oifo-auto
It works same as fo-auto but used in context of overlay images only.
oifo-custom
It works same as fo-custom but used in context of overlay images only.
oifo-face
It works same as fo-face but used in context of overlay images only.
oix
It works same as x but used in context of overlay images only.
oiy
It works same as y but used in context of overlay images only.
oixc
It works same as xc but used in context of overlay images only.
oiyc
It works same as yc but used in context of overlay images only.
Overlay trimming - (oit)
By default, ImageKit.io trims the overlay image before overlaying it on the base image. Trimming removes the similar colored pixels from the edges. There might be cases where you do not need such trimming to happen. Then, you can do that from the URL using oit-false.
This removes the transparency of the overlaid image.

Default Value - true
Learn more from example here.
Text overlay
Overlay text - (ot)
To overlay text on an image. Supported characters include all alphabets, numbers, spaces, _, -, %, !, @, and &.
Base image
Text overlay example
URL - https://ik.imagekit.io/demo/medium_cafe_B1iTdD0C.jpg​
URL - https://ik.imagekit.io/demo/tr:ot-overlay%20made%20easy,ots-45/medium_cafe_B1iTdD0C.jpg​
Font size is set to 45 using ots parameter.
Overlay text encoded - (ote)
It is similar to overlay text (ot) but it allows you to overlay special unicode characters (e.g. ©, ®, ™ etc.) that you cannot otherwise pass in a URL as plain string. It accepts base64 string.
1.The base64 string should be made URL safe to ensure that all padding characters(=) are included correctly. A function like encodeUri() can be used for this.
2.Input above the length of 144 characters will be truncated.
Example URL - https://ik.imagekit.io/demo/tr:ote-b3ZlcmxheSBtYWRlIGVhc3k%3D,ots-45/medium_cafe_B1iTdD0C.jpg​
Here b3ZlcmxheSBtYWRlIGVhc3k%3D is the base64 string for "overlay made easy"
Overlay text width - (otw)
To specify the maximum width (in pixels) of the overlaid text on the image. The text is wrapped so that any words in a line that go beyond the given width are sent to the next line. Height of the text box is calculated automatically based on the total number of lines.
Possible values include any integer.
Example URL - https://ik.imagekit.io/demo/tr:ot-overlays%20made%20easy,ots-45,otc-00FFFF,otw-200/medium_cafe_B1iTdD0C.jpg​
otw=200
otw=400
URL -  https://ik.imagekit.io/demo/tr:ot-overlays%20made%20easy,ots-45,otc-00FFFF,otw-200/medium_cafe_B1iTdD0C.jpg​
Overlay text color is controlled using otc parameter.
URL - https://ik.imagekit.io/demo/tr:ot-overlays%20made%20easy,ots-45,otc-00FFFF,otw-400/medium_cafe_B1iTdD0C.jpg​
Overlay text background - (otbg)
If you want to give the text block a solid background color (and transparency), use this parameter.
Possible Values - Valid RGB Hex Code with optional alpha component
Example values - 00AAFF (solid color) or 00AAFF55 (with 55% opacity)
Overlay text background transparency
This is supported via alpha component in RGB hex code which takes a numeric value between 00 and 99. 
With solid color background
Solid color background with transparency
URL - https://ik.imagekit.io/demo/tr:ot-overlays%20made%20easy,ots-45,otc-000000,otbg-FFFFFF/medium_cafe_B1iTdD0C.jpg​
URL - https://ik.imagekit.io/demo/tr:ot-overlays%20made%20easy,ots-45,otc-000000,otbg-FFFFFF75/medium_cafe_B1iTdD0C.jpg​
Overlay text padding - (otp)
To specify the padding around the overlaid text on the image.
Possible values include any positive integer or a set of positive integers separated by underscores. 
The set of integers follow CSS shorthand order for determining the padding along each side of the overlay. Learn from the examples:
otp=40
otp=40 and otw=300
otp=25_50_75_100
otp=25_75_60
otp=25_75
URL - https://ik.imagekit.io/demo/tr:ot-overlays%20made%20easy,ots-45,otc-000000,otbg-FFFFFF80,otp-40/medium_cafe_B1iTdD0C.jpg​
URL - https://ik.imagekit.io/demo/tr:ot-overlays%20made%20easy,ots-45,otc-000000,otw-300,otbg-FFFFFF80,otp-40/medium_cafe_B1iTdD0C.jpg​
URL - https://ik.imagekit.io/demo/tr:ot-overlay%20made%20easy,ots-45,otc-000000,otbg-FFFFFF80,otp-25_50_75_100/medium_cafe_B1iTdD0C.jpg​
Top padding is 25
Right padding is 50
Bottom padding is 75
Left padding is 100
URL - https://ik.imagekit.io/demo/tr:ot-overlay%20made%20easy,ots-45,otc-000000,otbg-FFFFFF80,otp-25_75_60/medium_cafe_B1iTdD0C.jpg​
Top padding is 25
Right and left paddings are 75
Bottom padding is 60
URL - https://ik.imagekit.io/demo/tr:ot-overlay%20made%20easy,ots-45,otc-000000,otbg-FFFFFF80,otp-25_75/medium_cafe_B1iTdD0C.jpg​
Top and bottom paddings are 25
Right and left paddings are 75
Overlay text inner alignment - (otia)
To specify the alignment of the overlaid text on the image when text is wrapped with overlay text width (otw).
Possible Values include left, right and center (default). 
Left align
Right align
URL - https://ik.imagekit.io/demo/tr:ot-overlays%20made%20easy,ots-45,otc-000000,otw-300,otbg-FFFFFF80,otp-40,otia-left/medium_cafe_B1iTdD0C.jpg​
URL - https://ik.imagekit.io/demo/tr:ot-overlays%20made%20easy,ots-45,otc-000000,otw-300,otbg-FFFFFF80,otp-40,otia-right/medium_cafe_B1iTdD0C.jpg​
Overlay text color - (otc)
To specify the color and transparency of the overlaid text on the image. 

Possible Values: Valid RGB Hex Code with optional alpha component
For example - 00AAFF (solid color) or 00AAFF55 (with 55% opacity)
Overlay Text Transparency is supported via alpha component in RGB hex code which takes a numeric value between 00 and 99.
If both otc and oa are set in a single transformation and otc has an alpha component, then this value is used to set overlay text transparency. Otherwise, oa value is used.
otc=00AAFF (no transparancy)
otc=00FFFF55 (55% opacity)
URL - https://ik.imagekit.io/demo/tr:ot-overlay%20made%20easy,ots-45,otc-00FFFF/medium_cafe_B1iTdD0C.jpg​
URL - https://ik.imagekit.io/demo/tr:ot-overlay%20made%20easy,ots-45,otc-00FFFF55/medium_cafe_B1iTdD0C.jpg​
Overlay text font - (otf)
To specify the font of the overlaid text on the image. You can choose any font from this list or use a custom font. 
otf = Open Sans
otf = Roboto
URL - https://ik.imagekit.io/demo/tr:ot-overlays%20made%20easy,ots-45,otc-00FFFF,otf-Open%20Sans/medium_cafe_B1iTdD0C.jpg​
URL - https://ik.imagekit.io/demo/tr:ot-overlays%20made%20easy,ots-45,otc-00FFFF,otf-Roboto/medium_cafe_B1iTdD0C.jpg​
Using custom fonts
You can use a custom font in text overlay. Upload the font file in your media library and pass the path in otf parameter.
Text overlay using custom font
URL - https://ik.imagekit.io/demo/tr:otf-Lacquer-Regular_nGqtVsBJT.ttf,ot-Hello%20World,ots-72,otc-FFF000/default-image.jpg​
Note:
Here the font-file is available at path /Lacquer-Regular_nGqtVsBJT.ttf in media library. You will need to pass the whole path including extension.
Overlay text size - (ots)
To specify the size of the overlaid text on the image. 

Possible Values include any integer.
ots=45
ots=60
URL - https://ik.imagekit.io/demo/tr:ot-overlays made easy,ots-45,otc-00FFFF/medium_cafe_B1iTdD0C.jpg​
URL - https://ik.imagekit.io/demo/tr:ot-overlays%20made%20easy,ots-60,otc-00FFFF/medium_cafe_B1iTdD0C.jpg​
Overlay text typography - (ott)
To specify the typography of the font used for the overlaid image. 
Possible Values include bold b  and italics i.
Bold
Italics
URL - https://ik.imagekit.io/demo/tr:ot-overlays%20made%20easy,ots-45,ott-b,otc-00FFFF/medium_cafe_B1iTdD0C.jpg​
URL - https://ik.imagekit.io/demo/tr:ot-overlays%20made%20easy,ots-45,ott-i,otc-00FFFF/medium_cafe_B1iTdD0C.jpg​
Overlay radius - (or)
To add rounded corners to an overlay background, or to print a circular overlay, use this parameter.
Possible Values include any positive integer.
Note: Radius cannot exceed half the length of the shorter side of the overlay element. ‌
or=30 & otbg=FFFFFF80
Circle (or=150 & oh,ow=300)
or=40 & obg=00FFFF80
URL - https://ik.imagekit.io/demo/tr:ot-overlay%20made%20easy,or-30,otbg-FFFFFF80,ots-45,otc-000000,otp-40/medium_cafe_B1iTdD0C.jpg​
URL - https://ik.imagekit.io/demo/tr:obg-FFFFFF80,or-150,oh-300,ow-300,ofo-center/medium_cafe_B1iTdD0C.jpg​
URL - https://ik.imagekit.io/demo/tr:obg-00FFFF80,or-40,oh-80,ow-400,ofo-bottom/medium_cafe_B1iTdD0C.jpg​
Overlay transparency - (oa)
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. It applies to overlay backgrounds only if alpha component is not set in obg parameter.
oa=5
oa=2
URL - https://ik.imagekit.io/demo/tr:ot-overlays%20made%20easy,oa-5,ots-45/medium_cafe_B1iTdD0C.jpg​
URL - https://ik.imagekit.io/demo/tr:ot-overlays%20made%20easy,oa-2,ots-45/medium_cafe_B1iTdD0C.jpg​