Cloudinary Blog

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

Adding image watermarks, credits, badges and text overlays to images
Adding watermarks to your images and videos is a common practice used to make sure that your media is not circulated without their owner's authorization and that no one takes undue credit for their creation. Image 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 and videos before purchase. Image manipulation that includes 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 use image manipulation techniques, such as adding image watermarks and including textual credits to your source images. Adding a watermark image over your base image is done using Cloudinary's image overlay feature, which allows you to both add a watermark and manipulate it, for example, by adjusting the watermark opacity or brightness. The image overlay feature can also 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.
 
page load speed
 

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’:
 
 
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:
 
 
Sample Watermark
 
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:
 
 
Sample Watermark
 
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:
 
 
Badge
 
Same examples in Ruby on Rails:
Copy to clipboard
<%= 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:
Copy to clipboard
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:
 
 
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.
Copy to clipboard
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:
 
 
Text
 
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:
 
 
 Text and Watermark
 
Same example in Rails:
Copy to clipboard
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:
 
 
watermark
 
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.
 
Here’s an example of how a dynamic URL can be used to add the label 'Sea Shell' as a text overlay on a previously-uploaded image. The overlay is positioned 20 pixels from the top of the containing image and uses the Arial font of size 60 pixels.
 
 
 

Recent Blog Posts

Maya Shavin: How I Built My Website

Besides working as a senior front-end developer at Cloudinary, I'm also a content creator, a blogger, and an open-source developer. Follow me at @mayashavin and on mayashavin.com.

In the beginning, my website, mayashavin.com, was mainly for showcasing the status of my development projects and keeping me organized with my speaking schedule. Initially, I built it with Vue.js, later on switching to Nuxt.js (aka Nuxt) for a higher SEO score, and deployed it with Netlify. After some time, I added a blog section with Netlify CMS as the content management system (CMS). Everything was fine until I added more content and features, which led to a significant decline in the site’s performance. Also, the site design needed a modern look. So, I gave the site a makeover.

Read more
Automation Frees Up PetRescue’s Staff to Help Pets Find Their Forever Homes

As we spend more time at home, many of us are adopting pets for the joy, companionship and a surprising range of health benefits. In Australia, where our nonprofit customer PetRescue is located, there’s a shortage of pets to adopt. Last August, the Guardian reported that dog shelters in Australia emptied and adoption fees for puppies were running as high as $AUS1800.

Read more
Cloudinary and Contentful Make Modern Content Management Easier

I am pleased to share that Cloudinary and Contentful have joined forces to further streamline the creation, processing, and delivery of online content through Cloudinary’s digital asset management (DAM) solution and advanced transformation and delivery capabilities for images and video. What’s more, the partnership delivers a headless approach to DAM. By leveraging APIs for media management tasks, marketers and developers alike benefit from an integrated stack of optimized assets for optimization and automation. As a result, page loads are fast and beautiful, and at scale—with less overhead and effort.

Read more
Introducing Cloudinary's Nuxt Module

Since its initial release in October 2016 by the Chopin brothers as a server-side framework that runs on top of Vue.js, Nuxt (aka Nuxt.js) has gained prominence in both intuitiveness and performance. The framework offers numerous built-in features based on a modular architecture, bringing ease and simplicity to web development. Not surprisingly, Nuxt.js has seen remarkable growth in adoption by the developer community along with accolades galore. At this writing, Nuxt has earned over 30K stars on GitHub and 96 active modules with over a million downloads per month. And the upward trend is ongoing.

Read more
How Quality and Quantity can go Hand in Hand

When it comes to quality versus quantity, you’ll often hear people say, “It’s the quality that counts, not the quantity”. While that’s true in many situations, there are also cases where you want both quality and quantity. You may have thousands of images on your website and you want them all to look great. This is especially important if your website allows users to upload their own content, for example, to sell their own products or services. You don't want their poor quality images to reflect badly on your brand.

Read more