Adding Watermarks, Credits, Badges, and Text Overlays to Images

Media owners face a common problem with digital media: it’s easy to share anyone’s content, and the source is quickly lost. A common practice at major news outlets and blogs is to mark their work with an indelible mark to show ownership, with tactics such as: 

• Add watermark to image.
• Add text to image.
• Add credit to image.
• Add badge to image.

These tactics can also be applied to videos as well. The goal is to ensure that no one can circulate those media without owner authorization and that no one takes undue credit for their creation. Watermarks are also a must for stock-photo sites that offer previews of images and videos for purchase. Embedding the photographer’s name to or crediting a source in photos is a standard routine. Simple in theory, but to manage this process at scale can be a challenge.

This post describes how to apply overlays to images with Cloudinary’s image transformation techniques, which are effective text-overlay tools. Besides adding watermarks, you can also edit them by, say, adjusting their opacity or brightness. Additionally, you can embed custom badges and medals to your users’ profile pictures, merge arbitrary text to images on your site, and input other enhancement tweaks.

Before we go too far, if you’re not already using Cloudinary, take two minutes to register, and you’ll get free use of Cloudinary for life! Once you’re set up, you’ll be able to do everything we talk about in this article.

2. Add Cloudinary’s overlay transformation parameter (‘l‘ in dynamic URLs). For example, this URL generates a watermarked version of the uploaded image ‘brown_sheep.jpg’:

When retrieving images, consider lazily resizing both the image and its watermark for a perfect fit. Take this JPEG, which has been resized to a 300-px. width with the Cloudinary watermark resized to be 280 px. wide:

To downsize the watermark and position it arbitrarily, add the ‘gravity‘, ‘x‘, and ‘y‘ transformation parameters. For example, the following URL adds an 80-px. wide watermark 5 px. from the bottom-right corner of an uploaded image that is resized to fill a 300×200-rectangle based on the face-detection capability:

<%= cl_image_tag("face_center.jpg", 
                 :transformation => {
                   :width => 300, :height => 200, 
                   :gravity => :face, :crop => :fill
                 }, 
                 :overlay => "sample_watermark", 
                 :width => 80, :crop => :scale, 
                 :gravity => :south_east, :x => 5, :y => 5, 
                 :html_width => 300, :html_height => 200) %>

Cloudinary::Uploader.upload("sample_upload.jpg", 
                            :transformation => {
                              :overlay => "sample_watermark"
                            })

The solution? Dynamically create profile images with embedded badges, again with Cloudinary’s overlay-transformation parameter.

For example, the dynamic URL below generates an image from the Facebook profile-picture of Friendize.me’s Mark Shteiman with a badge that depicts him as a member of the founding team.

Here’s the process: The URL request directs Cloudinary to access Facebook’s API, download the latest profile-picture that matches the dimensions as specified, create a face-thumbnail crop with the face-detection technique, round the corners for a nicer look, add a badge icon, and deliver the final version through a fast content delivery network (CDN) with smart caching. Isn’t that just amazing?

Cloudinary::Uploader.text("Sample Name",
                          :public_id => "dark_name",
                          :font_family => "Arial", :font_size => 12,
                          :font_color => 'black', :opacity => 90)

 

cl_image_tag("face_center.jpg", :overlay => "text:dark_name", 
             :gravity => :south_east, :x => 5, :y => 5)

With Cloudinary, adding watermarks, credits, badges, and text overlays becomes effortless and scalable—no matter how many images you manage. These tools don’t just protect your visual assets; they also help reinforce your brand identity across every channel. From simple watermarks to dynamic, data-driven overlays, Cloudinary’s transformation capabilities put total creative control in your hands. Start experimenting today and see how easy it is to protect, personalize, and elevate your media.

Below, find additional links to content to help you dig deeper with how to add watermark to image and more: