Add a Text Overlay to an Image

Before you begin

Using a text overlay allows the text to stay crystal sharp regardless of the scaled size of the image. To create a text overlay to an image, locate the URL of the image you want to overlay the text on. For example, you can use the following image:
Here is the same image with the text overlay:

Now create the policy for your text overlay.

How to

  1. Open the application.
    • In the new Akamai Control Center UI, go to > CDN > Image Manager.
    • In the classic Luna UI, on the Configure menu, go to Image Manager and click Policy Manager.
  2. Select a contract and a policy set name, then click Manage Policies.
  3. Click Add New Policy.
    The Name Your Policy window appears:
  4. Enter Text_Overlay in the Policy Name field and click OK.
    The Image Policy Editor appears.
  5. Clicking on the “+” symbol next to Transformations. A text overlay is considered a watermark or composite transformation.
  6. Select the Watermark/Composite transformation to add it to your Workflow section.
  7. Change the Image Type field from URL of Applied Image to Text under the Watermark/Composite transformation.
  8. Next you can adjust a series of settings to get your text to say and look the way you want. We recommend first typing out the text you’d like to overlay and setting the font and size.
    Note: When you link to a hosted font file, it must be either a .ttf or .woff (v1) file. At this time we do not support .woff2 files. Woff files offer much better backwards compatibility.
  9. As you make setting changes in the policy, preview your changes live by clicking on the refresh arrow above the preview viewer.
  10. Once you have the text, font, color, and size that you want, you can adjust the placement. In the Watermark/Composite transformation, set the Horizontal and Vertical offset as padding for the text placement. This allows you to move the text further from the gravity location you selected. Gravity selects the main anchor point for the text. You can think of it like a compass (North, South, East, West). In our example, we selected North so that the text was centered at the top.
  11. Once you have your text how you like it, click Save and Test on Staging to save and activate it on the Staging network and test it live.

Next steps

For more information about adding artistic transformations to images, see the Image Manager Help