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.
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 (
- The font size in pixels (
- The label (
- The positioning of the overlay (
20), i.e., 20 pixels from the top of the image, as defined by the
gravityparameter, which is set to
g_northin the URL)
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:
Below is again the photo labeled Sea Shell, now in Courier font, boldfaced, italicized, and underlined.
You can also modify image colors and opacity with Cloudinary.
- To specify the color of a text overlay, set the
cofor 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.
- To fine-tune the opaqueness of the text in an overlay, set the
ofor URLs) to a value between 0 and 100. The example below shows an overlay with a semitransparent caption in red.
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.
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:
fitcrop mode, defined with a maximum
widthof 200 pixels, which tells Cloudinary to automatically wrap the text
ain the URL), with a nine-degree rotation for the text layer so that it fits better in the background image
I_textparameter with an attribute of
Neucha_16_center, which stands for the Neucha font, a 16-pixel size, and center alignment
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?
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.
Have a look at these articles:
- Image-Editing Basics and a Tutorial for Automation With AI
- How to Automatically Remove Photo Backgrounds in Seconds With AI
- Top 7 jQuery Sliders and Three Ways in Which to Create Your Own
- Adding Image Watermarks, Credits, Badges and Text Overlays to Images
- Add the 360 Product Viewer to Your Commerce Site with Cloudinary
- New AI-Based Image Auto-Crop Algorithm Sticks to the Subject
- Integrating Cloudinary Into Your Shopify Store
- How to Overlay Text on Image Easily, Pixel Perfect and With No CSS/HTML
- Taking Cloudinary’s Magento Extension to the Next Level