Add overlays on images

ImageKit enables you to creatively enhance your images by adding overlays such as images, text, or solid color blocks using layers. This guide provides quick links to examples demonstrating these features.

For further details and in-depth examples, refer to the corresponding sections within this guide. Ensure to review the limits on resource-intensive transformations before deploying these features in production.

You can add an image over a base image using the following syntax.

         URL endpoint         Base image            Image layer
┌──────────────────────────┐┌────────────┐    ┌──────────────────────┐
https://ik.imagekit.io/demo/base-image.jpg?tr=l-image,i-logo.png,l-end

URL - https://ik.imagekit.io/demo/tr:l-image,i-logo-white_SJwqB4Nfe.png,l-end/medium_cafe_B1iTdD0C.jpg

You can control image layer position using the lx and ly parameters. If the lx or ly value exceeds the dimensions of the input image, the values are adjusted to fit within the image. To change the direction, negative values are also supported by prefixing the value with 'N'.

Learn more about positional parameters in layers.

Inside an image layer, you can apply these supported transformations to the image overlay before it is placed on the base image. You can chain the transformations one after the other to achieve the desired outcome.

For example, let's resize the overlay image to 400x400 and add a yellow background to fill the image layer's background.

URL - https://ik.imagekit.io/demo/tr:l-image,i-women-dress.jpeg,h-400,w-400,cm-pad_resize,bg-yellow,l-end/medium_cafe_B1iTdD0C.jpg

You can also apply additional transformations, such as e-grayscale, to modify the overlay image. Here's an example of turning the overlay image into a grayscale version.

URL - https://ik.imagekit.io/demo/tr:l-image,i-women-dress.jpeg,h-400,w-400,e-grayscale,cm-pad_resize,bg-yellow,l-end/medium_cafe_B1iTdD0C.jpg

A layer can have nested layers up to 3 levels.

                       Parent image layer
┌──────────────────────────────────────────────────────────────┐
l-image,i-outer.png,l-image,i-inner.png,lfo-top_left,l-end,l-end
                    └──────────────────┬──────────────────┘
                                       │
                              Nested image layer

In the following example, we overlay the resized women-dress.jpeg with a red border on the bottom left corner of the base image and then add the imagekit.io logo on the top right corner of the women-dress.jpeg image. lfo parameter is used to control the position of layer in relative terms.

URL - https://ik.imagekit.io/demo/tr:l-image,i-women-dress.jpeg,h-400,b-10_red,lfo-bottom_left,l-image,i-logo-white_SJwqB4Nfe.png,w-150,lfo-top_right,l-end,l-end/medium_cafe_B1iTdD0C.jpg

You can add any text string over a base image using the following syntax.

You can also control the position of the text overlay using these positional parameters.

         URL endpoint         Base image           Text layer
┌──────────────────────────┐┌────────────┐    ┌──────────────────┐
https://ik.imagekit.io/demo/base-image.jpg?tr=l-text,i-hello,l-end

         URL endpoint         Base image              Text layer
┌──────────────────────────┐┌────────────┐    ┌────────────────────────┐
https://ik.imagekit.io/demo/base-image.jpg?tr=l-text,ie-aGVsbG8%3D,l-end

You can control text layer position using the lx and ly parameters. To change the direction, negative values are also supported by prefixing the value with 'N'.

Learn more about positional parameters in layers.

You can control the width, font size, font family, color, inner alignment, padding, transparency level, typography, background color, corner radius, rotation, and line height of the text overlay using these supported transformations parameters.

For example, let's add a white background with padding and a bigger font size.

You can add padding to the text overlay using the pa parameter. The padding can be controlled individually for each side using the CSS shorthand notation.

You can change the font family in the text overlay using the ff parameter. You can use the standard fonts available in ImageKit or upload your custom font file to use it in text overlays.

To use a custom font in text overlays, upload the font file in your media library and pass its path in the ff parameter in a text layer.

For example, Lacquer-Regular_nGqtVsBJT.ttf is a custom font file uploaded to the root of the media library and accessible at the URL https://ik.imagekit.io/demo/Lacquer-Regular_nGqtVsBJT.ttf.

URL - https://ik.imagekit.io/demo/tr:l-text,i-overlay%20made%20easy,ff-Lacquer-Regular_nGqtVsBJT.ttf,co-yellow,fs-45,l-end/medium_cafe_B1iTdD0C.jpg

If your custom font file is in a nested folder, then replace the slashes /in the path with @@. For example, a font file available at path /font-folder/font-subfolder/my-custom-font.ttf will be used as follows:

https://ik.imagekit.io/demo/tr:l-text,i-Hello%20World,ff-font-folder@@font-subfolder@@my-custom-font.ttf,fs-72,co-FFF000,l-end/default-image.jpg

You can overlay text in any language with custom fonts, for example.

URL - https://ik.imagekit.io/ikmedia/tr:w-600,h-600:l-text,i-इमेजकिट के साथ,ff-fonts@@Poppins-Regular_Q15GrYWmL.ttf,fs-42,ia-left,pa-10,ly-N100,bg-FFFFFF75,co-145FDD,l-end:l-text,i-दुनिया के कोने-कोने में लोगों तक पहुंचें,pa-5,ly-N35,lx-300,fs-28,ia-right,ff-fonts@@Poppins-Regular_Q15GrYWmL.ttf,bg-FFFFFF75,l-end/girl_in_white.jpg

You can add a solid color block over a base image using the following example.

Use i-ik_canvas with the bg parameter to add a solid color block overlay on an image.

https://ik.imagekit.io/demo/base-image.jpg?tr=l-image,i-ik_canvas,bg-FF0000,w-300,h-100,l-end

The following transformation parameters are supported on the solid color block overlay inside a layer.

ImageKit.io currently supports the following fonts out of the box.

Besides this you can use any custom font by uploading the font file in your media library and passing its path in the ff parameter in a text layer. See custom font example here.