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

Using smart-cropping for automatic art direction

Note: this article was originally published in Smashing Magazine.

Four years ago, Jason Grigsby asked a surprisingly difficult question: How do you pick responsive images breakpoints? A year later, he had an answer: ideally, we’d set responsive image performance budgets to achieve “sensible jumps in file size”. Cloudinary built a tool that implemented this idea, and the response from the community was universal: “Great! Now – what else can it do?” Today, we have an answer: art direction!

Read more
As video use and requirements grow - so do the challenges
Video is an increasingly important component for websites and apps, as consumer demand for and consumption of video content is growing. It’s not only for wired devices, though. More and more, consumers are accessing video where they want it, when they want it, on whatever device that happens to be nearby.
Read more
An interview with Jason Grigsby about Responsive Images

In the conclusion of this three-part interview the Jason Grigsby, we examine what the future may hold for images on the web. Previously: Part 1, Part 2.

EP: I want to go back to the idea that we started with, that images are fundamentally complicated; that they’ll always present us with problems. What do you think we are going to be working on and talking about in five-to-10 years with regard to images?

Read more
Improve user experience with responsive websites and applications
This article originally appeared on Inc. Magazine and is reprinted with permission.

Back in the day, responsive website design wasn't the business imperative that it is now. In fact, just having a functioning website was all that it took to set you apart, and if it had images that loaded correctly within a few minutes, then that was a nice bonus. Needless to say, but I'll say it anyway, those days are long gone.
Read more