Add a text overlay

Add a text overlay to an image that stays crystal clear when the image is scaled to different sizes.

Use a text overlay to share sale prices, announce a new product, or highlight any exciting information. The Composite (Watermark) transformation lets you overlay text on an image.

Here's the image before and after we've used a text overlay to announce a holiday sale:

How to

  1. Go to > CDN > Image and Video 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 a name for the policy in the Policy Name field and click OK .
    The Image Policy Editor appears.
  5. Add the Composite (Watermark) transformation by expanding the Transformations section and select Composite (Watermark).
  6. Change the Image Type field to Text.
  7. 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.
  8. As you make setting changes in the policy, preview your changes live by clicking on the refresh arrow above the preview viewer.
  9. 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.
  10. 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 and Video Manager Help