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.

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’: https://res.cloudinary.com/demo/image/upload/sample_watermark.png

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: 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:

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: https://res.cloudinary.com/demo/image/text/dark_name.png 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: .../image/upload/ l_text:dark_name,g_south_east,x_5,y_5 /face_center.jpg

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: .../image/upload/w_200,h_170,c_fill,g_face/

l_text:dark_name,g_south_east,x_5,y_5/

w_50,g_north_west,x_23,y_5,l_sample_watermark/face_center.jpg

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: : 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.