In one of our previous articles, we covered image overlays which allow you to overlay an image over another image. In this section we will look at overlaying text on to an image.

We will be using this image as our base image. Credits: pexels.com

Basic text overlay

Let's write the text "Hand with a green plant" on this image. This can be done using the 'ot' transformation parameter. If you text contains spaces, then you can write it as is, without modifications.

https://ik.imagekit.io/demo/img/tr:ot-Hand%20with%20a%20green%20plant/plant.jpeg

Positioning the text

Positioning works in the same way as images - using relative position like top_left using the 'ofo' parameter or using absolute x and coordinates using the 'ox' and 'oy' parameters. This positioning has been explained here.


Let's position this text 10px from the top edge and 10px from the left edge. 

https://ik.imagekit.io/demo/img/tr:ot-Hand%20with%20a%20green%20plant,ox-10,oy-10/plant.jpeg

Color of the text

Let's say we want to turn this text to green color to match that of the plant. This can be done using the 'otc' transformation parameter. You can specify a 6-character Hex code for the color with this parameter.

Here is the example
https://ik.imagekit.io/demo/img/tr:ot-Hand%20with%20a%20green%20plant,otc-264120,ox-10,oy-10/plant.jpeg

Size of the text

The above text is very small in terms of font size compared to the rest of the image. The default font size used is 14px. You can change the font size using the 'ots' transformation parameter. You can specify the numerical value of the font size along with this parameter.

Here is an example of changing the font size to 30px

https://ik.imagekit.io/demo/img/tr:ot-Hand%20with%20a%20green%20plant,otc-264120,ots-30,ox-10,oy-10/plant.jpeg

Changing the typography of the text (bold or italic)

We may want to make the text bold or italic or both. This can be done using the 'ott' transformation parameter. The valid values can be 'b' (for bold) or 'i' (for italics) or 'bi' / 'ib' (for bold and italics).

Here is an example for making the text bold
https://ik.imagekit.io/demo/img/tr:ot-Hand%20with%20a%20green%20plant,otc-264120,ots-30,ott-b,ox-10,oy-10/plant.jpeg

Here is an example making the text bold and italics

https://ik.imagekit.io/demo/img/tr:ot-Hand%20with%20a%20green%20plant,otc-264120,ots-30,ott-ib,ox-10,oy-10/plant.jpeg

Changing the font of the text

The font of the text too can be changed directly from the URL. By default, the font family used is Open Sans. The font can be changed using the 'otf' transformation parameter. The following fonts are supported by ImageKit

Let's change the font family to PT Mono. As it doesn't support bold or italics, we are removing the typography 'ott' parameter.

https://ik.imagekit.io/demo/img/tr:ot-Hand%20with%20a%20green%20plant,otc-264120,ots-30,otf-PT%20Mono,ox-10,oy-10/plant.jpeg

Changing text opacity

The text opacity can be changed using the 'oa' transformation parameter in the URL. It can have integral values from 1 (10% or 0.1 opacity) to 9 (90% or 0.9 opacity). 

Here is an example of giving 50% (or 5) opacity to the text. To provide a better understanding of the text opacity, we have removed the x and y positioning parameters from the URL. As it is evident from the image below, the hand and the plant are partially visible behind the text.

https://ik.imagekit.io/demo/img/tr:ot-Hand%20with%20a%20green%20plant,otc-264120,ots-30,ott-ib,oa-5/plant.jpeg

Characters supported in text overlays

The following characters can be used in text overlays

  • All digits and alphabets (lower and upper case)
  • Spaces, underscores and hyphen
  • Percentage (%), alias (@), ampersand (&) and single quote (')

These characters may have to be encoded before specifying in the URL

Here is an example image using these characters
https://ik.imagekit.io/demo/img/tr:ot-Ab1%20_-'%25%40%26,ox-10,oy-10,otc-264120,ots-30,ott-ib,oa-5/plant.jpeg

If you have any questions or feature request for text overlays, reach out to us at support@imagekit.io

Did this answer your question?