Cloudinary Blog

Adding watermarks, credits, badges and text overlays to images

Adding watermarks to photos is a common practice used to make sure that photos aren't circulated without their owner's authorization and that no one takes undue credit for their creation. Watermarks are common practice at major news outlets and breaking-news blogs. It is also a must for stock photo sites that show you previews of premium images before purchase. Embedding the photographer’s name to photos or crediting a source is also a commonly used practice. 
This post describes how you too can easily add watermarks and textual credits to your own images by using Cloudinary's new Image overlay feature. This same method can be used to embed custom badges and medals to your users’ profile pictures, merge arbitrary text to your website’s selected images, and much more.


Want to add a watermark to your images in a snap? 
First, upload a semi-transparent PNG file to your Cloudinary account and give it an easy to remember Public ID. We’ll start with a previously uploaded semi-transparent Cloudinary logo that we’ve named ‘sample_watermark’:
To add this watermark to images, simply use Cloudinary's the new overlay transformation parameter. Or 'l' in dynamic URLs. For example, the following URL generates a watermarked version of the uploaded 'brown_sheep.jpg' image:
When retrieving the image, we can also lazily resize both the image and the watermark for a perfect fit. The following example shows our 'white_chicken' image resized to 300 pixels width while adding the Cloudinary watermark resized to 280 pixels width:
You can also make the watermark smaller and position it arbitrarily using the 'gravity', 'x' and 'y' transformation parameters. For example, the following URL adds an 80 pixels width watermark 5 pixels from the bottom right corner of an uploaded image that is resized to fill a 300x200 rectangle based on face detection:
Same examples in Ruby on Rails:
<%= 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) %>
In the examples above, the watermark was added only to the transformed versions of the uploaded image, while the original image is still accessible without the watermark, using the original URL. To circumvent that, you can add the watermark to the original image at the time of its upload. Simply define an incoming transformation using the ‘transformation’ parameter of our upload API. Here’s a Ruby example:
                            :transformation => {
                              :overlay => "sample_watermark"

Badges & Medals

Many social sites such as Foursquare and (a cool new service that offers social-based buying advices) give badges and medals to their users according to their ongoing in-app achievements. A common graphical concept is to pin the badges to the profile picture itself. The badge can be added as an overlay element in the HTML page using CSS techniques, but what if you want to show it in emails? even modern web-based email clients don’t support adding overlays using CSS.
The solution? Dynamically create the users' profile images while embedding the badges within the images themselves. This can be easily accomplished with Cloudinary using the overlay transformation parameter.
For example, the following dynamic URL generates an image based on the Facebook profile picture of Mark Shteiman,'s founder, with his 'Founding team member' badge:
This single URL request motioned Cloudinary to access Facebook’s API, download the latest profile picture matching the requested dimensions, use face detection to create a perfect face thumbnail crop, round the corners for a nicer look, add a badge icon to the picture and deliver the final image through a fast CDN with smart caching. Isn't that just amazing? 

Text overlays

You can now use Cloudinary to generate an image of a given textual string, dynamically. You can use this textual image as an overlay for other images.
To generate an image for a given text, simply use our API. The following Ruby example generates an image containing the “Sample Name” string. Various font, color and style parameters can be specified to customize the look & feel of the text. See our documentation for a full list of options.
Cloudinary::Uploader.text("Sample Name",
                          :public_id => "dark_name",
                          :font_family => "Arial", :font_size => 12,
                          :font_color => 'black', :opacity => 90)
The generated image is available through a CDN URL:
By the way, not specifying a public ID would generate a unique identifier that is persistently mapped to the given text and style settings. This way, you can keep using Cloudinary’s API for generating texts. Cloudinary will make sure not to generate multiple images for the same text and style.
Adding the text overlay is done using the 'overlay' parameters ('l' for URLs). The following example takes the ‘dark_name’ text layer we’ve generated above and embeds it 5 pixels from the bottom right corner of the image:
Same example in Rails:
cl_image_tag("face_center.jpg", :overlay => "text:dark_name", 
             :gravity => :south_east, :x => 5, :y => 5)
The sharp-eyed readers might have noticed that Cloudinary supports chained transformations. You can apply multiple transformation and add multiple overlays using the same URL. For example:
As before, if you want to make sure that the text overlay is added to the originally uploaded image, you can add it as part of the image’s incoming transformation. See the watermarks section above for an example.
The ability to add image and text overlays so easily and mix them with image resizing and CDN delivery opens the door to exciting new web development capabilities. In this post we showed some basic usage examples. We are sure you have plenty more ideas on how to use these new image overlay capabilities in your web applications. Why don’t you share them with us?
UPDATE - May 2014: Text overlays were enhanced to support fonts, styles and custom texts using dynamic URLs. See: How to overlay text on image easily, pixel perfect and with no CSS/HTML.

Recent Blog Posts

React.js Tutorial: How to develop a React library

Developing a library requires a different approach from developing an application. You must consider the use of the library in someone else’s application and design for it. React is well suited for this purpose. And if the library you are creating is an adapter to another library, you can dynamically generate the component's properties definition to ensure they are forward compatible. There is however more than one way to achieve the same goal, with some conventions to follow and others to cautiously not follow. In particular, I chose to use the context function even though it is an experimental feature because it is useful when you don’t know, or can’t dictate, the way your library's components will be utilized.

Read more
Learn about AdonisJs and how to set up a CMS with it

Even though Node is fun, easy and cheap to work with, we spend a lot of time writing boilerplate codes because structure and organization is missing.

What happened to Convention Over Configuration?

While Node is simple, it requires you to make a lot of decisions, which ultimately causes confusion because it leaves you with several options. Languages like PHP, Ruby, C# and Python have one or more Molde-View-Controller (MVC) frameworks, such as Laravel, Rails, ASP.Net and Django. These help developers to achieve structure and write maintainable code with these languages. That was not the case for Node until AdonisJs was introduced.

Read more
Cloud-based image filter transformations for developers

Every picture has a story to tell. But the story it tells can change when you change the color tone, saturation, contrast, or other elements of a photo.

A few years ago, post-processing a digital image generally required a high level of skill and expensive software such as PhotoShop. But in recent years, popular photo sharing apps such as Instagram, Flickr, and Snapchat started offering built-in filters. Professionals take advantage of filters to make subtle corrections or adjustments. Casual users often apply more prominent filters that add their own unique touch or just make their images more fun.

Read more
Optimized media delivery with multi-CDN solutions
This article originally appeared on Venture Beat Magazine and is reprinted with permission.
As we all know, content that takes forever to load will increase your site’s bounce rates, decrease your conversions, and undeniably scar your bottom line. And by “forever” I mean more than a few seconds. A recent study by KISS Metrics found that page abandonment rates increase drastically after a load time of just four seconds or more.
Read more