Overlaying Text on Images, Pixel Perfect With No CSS Or HTML

Written By Nadav Soferman Sep-20-2020 4 Min Read

Overlaying text on images is a versatile and effective way in which to spotlight captions, names, copyright watermarks, and such. You can also overlay text over dynamic images (advertisement banners, coupons, greeting cards, business cards) in e-commerce-oriented emails.

Our customers frequently ask about how to dynamically overlay text on images. One common approach is to do that with HTML elements, CSS, or native mobile-UI controls. Oftentimes, however, it’s more efficient to overlay text on images while creating them, simplifying the process of displaying them on channels and devices later on.

By leveraging Cloudinary’s cloud-based media-management service, you can upload images or videos, specify text, and dynamically overlay it over them on the fly with authenticated API calls. You can also build dynamic banners with text layers.

Dynamic Styles

Newly available from Cloudinary are dynamic URLs through which you can overlay text—in a font of your choice—to images in real time. You can also further customize and transform text layers for the look and feel you desire. The entire process occurs in the cloud with no need for authenticated API calls.

For example, the following dynamic URL for a previously-uploaded image named sea_shell.jpg and labeled Sea Shell contains the l_text: parameter with the following attributes:

The font name (arial)
The font size in pixels (60)
The label (Sea Shell)
The positioning of the overlay (20), i.e., 20 pixels from the top of the image, as defined by the gravity parameter, which is set to north (g_north in the URL)

Loading code examples

Cloudinary offers hundreds of fonts, including Google Fonts. To specify a font choice, add its name (case insensitive) to the URL as shown in the above example. For further customization, append one or more of these attributes: bold, italic, underline, strikethrough, center, left, and right.

Below is again the photo labeled Sea Shell, now in Courier font, boldfaced, italicized, and underlined.

Loading code examples

Colors and Opacity

You can also modify image colors and opacity with Cloudinary.

To specify the color of a text overlay, set the color parameter (co for URLs) to the name of the color or its RGB representation. See the example below with a blue caption in boldfaced, 80-pixel Helvetica font.

Loading code examples

To fine-tune the opaqueness of the text in an overlay, set the opacity parameter (or o for URLs) to a value between 0 and 100. The example below shows an overlay with a semitransparent caption in red.

Loading code examples

A common use for text overlays is to add a caption with a description and credits. The overlay in the example above credits the photographer. In the example below, the credit caption in white is in Doppio font with a semitransparent, black overlay that makes the caption stand out.

Loading code examples

Justification and Wrapping of Multiline Text

For multiline text embedded in images, you’d want to see automatic line wraps and to be able to align the text as you desire.

The example below shows seven lines of text, automatically wrapped and center aligned, overlaid on an uploaded image named ‘envelope.jpg’. Here are the parameter settings in its URL:

The fit crop mode, defined with a maximum width of 200 pixels, which tells Cloudinary to automatically wrap the text
The angle parameter (a in the URL), with a nine-degree rotation for the text layer so that it fits better in the background image
The I_text parameter with an attribute of Neucha_16_center, which stands for the Neucha font, a 16-pixel size, and center alignment

Loading code examples

Print Material With Multiple Text Layers

All the examples above showcase a single text overlay only. You can also chain multiple overlays by setting parameters in Cloudinary’s URLs, generating optimized images for delivery to your audience through a content delivery network (CDN).

To build chained transformation URLs with multiple text overlays, use Cloudinary’s client libraries or separate the URL components with the slash symbol (/).

Below is the envelope.jpg image again, this time with three text overlays, each formatted with a different font family, font size, color, and positioning. Doesn’t it look cool and professional?

Loading code examples

Summary

As attested by many of our customers, text overlays on images are an excellent feature for many use cases. Cloudinary’s capability of adding text styles on the fly to images uploaded to your media library on our platform is simple and dynamic. You can embed transformed images in your website, mobile apps, or marketing emails, rest assured that your audience can view them without having to configure their browser or device.

Cloudinary’s overlay-related capabilities described in this post are available in all our subscription plans, including the free tier. Do sign up for a free account and have a try.

Comments? Questions? Fill out the form below or contact us on Facebook or Twitter.