Cloudinary Blog

Image opacity manipulation and dynamic watermark generation

Modifying an image opacity so the image is semi-transparent is a common requirement when implementing modern graphics design. Reducing image opacity allows background images to feel less dominant. Reducing opacity also allows layering of multiple images one on top of the other, an important step when adding watermarks, badges and textual overlays to images.
 
Modern web browsers support opacity manipulation via CSS directives. This however does not solve the problem completely. Watermarks need to be embedded as part of the original image and can't be added on the client's side. In addition, manipulating the opacity of the image itself allows for a consistent view across all your service's mediums - website, mobile application, emails (notifications) and PDFs (reports). Emails in particular do not support many of the modern CSS directives.
 
In this blog post we wanted to show how you can use Cloudinary's cloud-based image transformations to easily manipulate the opacity of images and how to use this technique to add watermarks to images.
 

Dynamically changing Image Opacity

Let's look at the following image the was uploaded to the cloud using the 'mountain' public ID.
 
 
You might want to use an image like the one above as a background image for a section of your web or mobile application. Simply set the 'opacity' parameter (or 'o' for URLs) to the desired percentage and Cloudinary will automatically modify the opacity of the image on-the-fly. As always, the resulting image is stored persistently in the cloud  and delivered optimized and cached to your worldwide users through a fast CDN.
 
The following example reduced the mountain image opacity to 20%. Now you can safely place text and other graphical elements above this image.
 
 
 
Below are examples of generating a transformation URL with modified opacity using our client libraries for Rails, PHP, Django and Node.js
<%= cl_image_tag("mountain.jpg", :opacity => 20) %>
<?php echo cl_image_tag("mountain.jpg", array("opacity" => 20)) ?>
import cloudinary
img = cloudinary.CloudinaryImage("mountain.jpg")
img.image(opacity=20)
cloudinary.image("mountain.jpg", { opacity: 20 });
 

Grayed-out Logos

Another common graphic design practice is to display a list of logos of customers and partners in your web site. Instead of the original, colorful logos, many web designers prefer to display semi-transparent grayed versions of these logos so they don't take attention from the website's messaging. 
 
With Cloudinary you can dynamically gray out images, and easily modify them in case your graphic designer has a change of heart.
 
In the following example, we've uploaded multiple logos to Cloudinary. We've went further and used Cloudinary's sprite-generation capabilities to merge these logos into a single sprite image for better performance:
 
 
 
By simply setting the 'effect' parameter (or 'e' for URLs) to 'grayscale' and setting the 'opacity' parameter ('o' for URLs), Cloudinary generates a semi-transparent gray-scale version of the logos for embedding in your website:
 

 

Generating Watermarks

In a previous blog post, we've shown how you can easily add overlays to images. Such overlays could be used to add watermarks to images using a previously uploaded semi-transparent PNG image of such watermark. With the new opacity manipulation transformation, you can upload your non-transparent watermark image and manipulate its opacity dynamically to make it semi-transparent, ready for adding as a watermark overlay.
 
The following example adds the previously uploaded image 'cloudinary_icon' as a 200 pixels wide overlay above the mountain image:
 
 
 
Now, by setting opacity to 40%, the overlay becomes semi transparent:
 
 
 
 
 
You can also apply an effect or filter on the overlay. In the following example we've increased the brightness of the overlay to make it white and reduced opacity to 30%:
 
 
 
The code samples below detail how to build the same URL in Ruby, PHP, Django and Node.js:
 
<%= cl_image_tag("mountain.jpg", :opacity => 30, :effect => "brightness:20", 
                  :width => 200, :overlay => "cloudinary_icon") %>
<?php echo cl_image_tag("mountain.jpg", array("opacity" => 30, 
  "effect" => "brightness:20", "width" => 200, "overlay" => "cloudinary_icon")) ?>
import cloudinary
img = cloudinary.CloudinaryImage("mountain.jpg")
img.image(opacity=30, effect="brightness:20", width=200, overlay="cloudinary_icon")
cloudinary.image("mountain.jpg", 
  { opacity: 30, effect: "brightness:20", width: 200, overlay: "cloudinary_icon" });
 

Summary

Dynamic opacity manipulation and watermark generation are some of the newest Cloudinary capabilities in your image manipulation tool-belt. These capabilities further simplify your web and mobile applications tedious image management tasks. 
 
With a simple URL (or one line of code) you can generate images that match your ever evolving graphic requirements and deliver them quickly to your users. You don't have to deal with complex non-standard CSS directives and you don't have to use over-qualified graphical software like Photoshop to generate images in your desired color balance and opacity.
 
Please share your thoughts and let us know how we can further improve Cloudinary's growing feature set.

Recent Blog Posts

Hipcamp Optimizes Images and Improves Page Load Times With Cloudinary

When creating a website that allows campers to discover great destinations, Hipcamp put a strong emphasis on featuring high-quality images that showcased the list of beautiful locations, regardless of whether users accessed the site on a desktop, tablet, or phone. Since 2015, Hipcamp has relied on Cloudinary’s image management solution to automate cropping and image optimization, enabling instant public delivery of photos, automatic tagging based on content recognition, and faster loading of webpages. In addition, Hipcamp was able to maintain the high standards it holds for the look and feel of its website.

Read more
New Image File Format: FUIF: Why Do We Need a New Image Format

In my last post, I introduced FUIF, a new, free, and universal image format I’ve created. In this post and other follow-up pieces, I will explain the why, what, and how of FUIF.

Even though JPEG is still the most widely-used image file format on the web, it has limitations, especially the subset of the format that has been implemented in browsers and that has, therefore, become the de facto standard. Because JPEG has a relatively verbose header, it cannot be used (at least not as is) for low-quality image placeholders (LQIP), for which you need a budget of a few hundred bytes. JPEG cannot encode alpha channels (transparency); it is restricted to 8 bits per channel; and its entropy coding is no longer state of the art. Also, JPEG is not fully “responsive by design.” There is no easy way to find a file’s truncation offsets and it is limited to a 1:8 downscale (the DC coefficients). If you want to use the same file for an 8K UHD display (7,680 pixels wide) and for a smart watch (320 pixels wide), 1:8 is not enough. And finally, JPEG does not work well with nonphotographic images and cannot do fully lossless compression.

Read more
 New Image File Format: FUIF:Lossy, Lossless, and Free

I've been working to create a new image format, which I'm calling FUIF, or Free Universal Image Format. That’s a rather pretentious name, I know. But I couldn’t call it the Free Lossy Image Format (FLIF) because that acronym is not available any more (see below) and FUIF can do lossless, too, so it wouldn’t be accurate either.

Read more
Optimizing Video Streaming and Delivery: Q&A with Doug Sillars

Doug Sillars, a digital nomad and a freelance mobile-performance expert, answers questions about video streaming and delivery, website optimization, and more.

Doug Sillars, a freelance mobile-performance expert and developer advocate, is a Google Developer Expert and the author of O’Reilly’s High Performance Android Apps. Given his extensive travels across the globe—from the UK to Siberia—with his wife, kids, and 11-year-old dog, Max, he has been referred to as a “digital nomad.” So far in 2018, Doug has spoken at more than 75 meetups and conferences!

Read more