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.
 

Watermarks

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:
Cloudinary::Uploader.upload("sample_upload.jpg", 
                            :transformation => {
                              :overlay => "sample_watermark"
                            })


Badges & Medals

Many social sites such as Foursquare and Friendize.me (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, Friendize.me'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

Embed Images in Email Campaigns at Scale

By Sourav Kundu
Embed Images in Email Campaigns at Scale

We live in an era of information overload and attention is the real currency. Marketers are constantly looking for new ways to reach you, to advertise products and services that they think could improve your lives.

Read more
Build the Back-End For Your Own Instagram-style App with Cloudinary

Github Repo

Managing media files (processing, storage and manipulation) is one of the biggest challenges we encounter as practical developers. These challenges include:

A great service called Cloudinary can help us overcome many of these challenges. Together with Cloudinary, let's work on solutions to these challenges and hopefully have a simpler mental model towards media management.

Read more

Build A Miniflix in 10 Minutes

By Prosper Otemuyiwa
Build A Miniflix in 10 Minutes

Developers are constantly faced with challenges of building complex products every single day. And there are constraints on the time needed to build out the features of these products.

Engineering and Product managers want to beat deadlines for projects daily. CEOs want to roll out new products as fast as possible. Entrepreneurs need their MVPs like yesterday. With this in mind, what should developers do?

Read more

Your Web Image is Unnecessarily Bloated

By Christian Nwamba
Your Web Image is Unnecessarily Bloated

As a developer, it seems inefficient to serve a 2000kb JPEG image when we could compress images to optimize the performance without degrading the visual quality.

We are not new to this kind of responsibility. But our productivity will end up being questioned if we do not deliver fast. In order to do so, the community has devised several patterns to help improve productivity. Let's review few of these patterns based on their categories:

Read more

Google For Nigeria: We saw it all…

By Christian Nwamba
Google For Nigeria: We saw it all…

Note from Cloudinary: Christian Nwamba, a frequent Cloudinary contributor, recently attended, and was a main speaker, at the Google Developer Group (GDG) Conference in Lagos, Nigeria. Christian led a session teaching more than 500 developers how to “Build Offline Apps for the Next Billion Users.” The stack he used included JS (Vue), Firebase, Service Workers and Cloudinary. Below is his account of the conference and his talk.

Read more
Viral Images: Securing Images and Video uploads to your systems

When was the last time you got paid $40,000 for a few days of work? That is what happened last year to Russian independent security researcher Andrey Leonov, who discovered that if you upload a specially constructed image file to Facebook, you can make Facebook's internal servers, nested deep within their firewalls, run arbitrary commands to expose sensitive internal files in a way that could easily lead to a data breach.

Read more