Adding watermarks to images and videos, a common practice at major news outlets and blogs, ensures that no one can circulate those media without owner authorization and that no one takes undue credit for their creation. Watermarks are also a must for stock-photo sites that offer previews of images and videos for purchase. Embedding the photographer’s name to or crediting a source in photos is a standard routine.
This post describes how to apply overlays to images with Cloudinary’s image transformation techniques, which are effective text-overlay tools. Besides adding watermarks, you can also edit them by, say, adjusting their opacity or brightness. Additionally, you can embed custom badges and medals to your users’ profile pictures, merge arbitrary text to images on your site, and input other enhancement tweaks.
1. Upload a semitransparent PNG to your Cloudinary account and assign it an easy-to-remember public ID. This image contains a watermark overlay—the Cloudinary logo, whose public ID is ‘sample_watermark’:
When retrieving images, consider lazily resizing both the image and its watermark for a perfect fit. Take this JPEG, which has been resized to a 300-px. width with the Cloudinary watermark resized to be 280 px. wide:
To downsize the watermark and position it arbitrarily, add the ‘gravity‘, ‘x‘, and ‘y‘ transformation parameters. For example, the following URL adds an 80-px. wide watermark 5 px. from the bottom-right corner of an uploaded image that is resized to fill a 300×200-rectangle based on the face-detection capability:
In the examples above, Cloudinary adds the watermark to the transformed versions of the uploaded image only; the original, watermarkless image remains accessible through the original URL. To circumvent that, add the watermark to the original image on upload with the ‘transformation’ parameter of Cloudinary’s upload API. Here’s a Ruby example:
Many social sites, such as Foursquare and Friendize.me (a cool service that offers advice on social-based purchases), award badges and medals to users for ongoing in-app achievements by overlaying those trophies to the users’ profile pictures with CSS on the HTML page. Such a technique does not work in emails, however, because of lack of support from modern web-based email clients.
The solution? Dynamically create profile images with embedded badges, again with Cloudinary’s overlay-transformation parameter.
For example, the dynamic URL below generates an image from the Facebook profile-picture of Friendize.me’s Mark Shteiman with a badge that depicts him as a member of the founding team.
Here’s the process: The URL request directs Cloudinary to access Facebook’s API, download the latest profile-picture that matches the dimensions as specified, create a face-thumbnail crop with the face-detection technique, round the corners for a nicer look, add a badge icon, and deliver the final version through a fast content delivery network (CDN) with smart caching. Isn’t that just amazing?
To overlay text on an image, add the related parameters to the dynamic URL. The uploaded image below is labeled with Sea Shell as a text overlay in 60-px. Arial font and positioned 20 px. from the top.
Note: If you do not specify a public ID for an image, Cloudinary assigns the latter a unique identifier, persistently mapping the ID to the text and style settings. That way, Cloudinary generates only one version of an image for the same text and style.
Recall that the `I` parameter in URLs overlays text overlays on images. The following example embeds the text ‘dark_name’ 5 px. from the bottom-right corner of the image:
Say, you want to place a two-dimensional image on a curved surface, such as a mug or bottle, to create a product mockup or highlight printing capabilities. Thanks to Cloudinary’s displacement-mapping feature, that’s easy to do. Here’s how displacement mapping works. By means of a map image, the algorithm displaces…