{"id":21174,"date":"2013-01-17T11:44:43","date_gmt":"2013-01-17T11:44:43","guid":{"rendered":"http:\/\/image_opacity_manipulation_and_dynamic_watermark_generation"},"modified":"2025-11-10T09:55:12","modified_gmt":"2025-11-10T17:55:12","slug":"image_opacity_manipulation_and_dynamic_watermark_generation","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/image_opacity_manipulation_and_dynamic_watermark_generation","title":{"rendered":"Image Opacity Transformation and Dynamic Watermark Generation With Cloudinary"},"content":{"rendered":"<div>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.<\/div>\n<div><\/div>\n<div>Modern web browsers support opacity transformation via CSS directives. This however does not solve the problem completely. Watermarks need to be embedded as part of the original image and can&#8217;t be added on the client&#8217;s side. In addition, transforming the opacity of the image itself allows for a consistent view across all your service&#8217;s mediums &#8211; website, mobile application, emails (notifications) and PDFs (reports). Emails in particular do not support many of the modern CSS directives.<\/div>\n<div><\/div>\n<div>In this blog post we wanted to show how you can use Cloudinary&#8217;s cloud-based <a href=\"https:\/\/cloudinary.com\/documentation\/image_transformations\">image transformations<\/a> to easily transform the opacity of images and how to use this technique to add watermarks to images.<\/div>\n<div><\/div>\n<h3>Dynamically changing Image Opacity<\/h3>\n<div>Let&#8217;s look at the following image the was uploaded to the cloud using the &#8216;mountain&#8217; public ID.<\/div>\n<div><\/div>\n<div><img loading=\"lazy\" decoding=\"async\" style=\"margin-left: auto; margin-right: auto;\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_0.2\/mountain.jpg\" alt=\"\" width=\"273\" height=\"409\" \/><\/div>\n<div><\/div>\n<div>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 &#8216;<span style=\"color: #bb0000;\"><strong>opacity<\/strong><\/span>&#8216; parameter (or &#8216;<span style=\"color: #bb0000;\"><strong>o<\/strong><\/span>&#8216; 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 \u00a0and delivered optimized and cached to your worldwide users through a fast CDN.<\/div>\n<div><\/div>\n<div>The following example reduced the mountain image opacity to 20%. Now you can safely place text and other graphical elements above this image.<\/div>\n<div><\/div>\n<div style=\"text-align: center;\"><strong><a href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/o_20\/mountain.jpg\" target=\"_blank\" rel=\"noopener\">https:\/\/res.cloudinary.com\/demo\/image\/upload\/<span style=\"color: #bb0000;\">o_20<\/span>\/mountain.jpg<\/a><\/strong><\/div>\n<div><\/div>\n<div><img loading=\"lazy\" decoding=\"async\" style=\"margin-left: auto; margin-right: auto;\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_0.2,o_20\/mountain.jpg\" alt=\"\" width=\"273\" height=\"409\" \/><\/div>\n<div><\/div>\n<div>Below are examples of generating a transformation URL with modified opacity using our client libraries for <strong>Rails<\/strong>, <strong>PHP<\/strong>, <strong>Django<\/strong> and <strong>Node.js<\/strong>:<\/div>\n<pre>&lt;%= cl_image_tag(\"mountain.jpg\", :opacity =&gt; 20) %&gt;\n<\/pre>\n<pre>&lt;?php echo cl_image_tag(\"mountain.jpg\", array(\"opacity\" =&gt; 20)) ?&gt;\n<\/pre>\n<pre>import cloudinary\nimg = cloudinary.CloudinaryImage(\"mountain.jpg\")\nimg.image(opacity=20)\n<\/pre>\n<pre>cloudinary.image(\"mountain.jpg\", { opacity: 20 });<\/pre>\n<div><\/div>\n<h3>Grayed-out Logos<\/h3>\n<div>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&#8217;t take attention from the website&#8217;s messaging.<\/div>\n<div><\/div>\n<div>With Cloudinary you can dynamically gray out images, and easily modify them in case your graphic designer has a change of heart.<\/div>\n<div><\/div>\n<div>In the following example, we&#8217;ve uploaded multiple logos to Cloudinary. We&#8217;ve went further and used Cloudinary&#8217;s <a href=\"https:\/\/cloudinary.com\/documentation\/sprite_generation\" target=\"_blank\" rel=\"noopener\">sprite-generation capabilities<\/a> to merge these logos into a single sprite image for better performance:<\/div>\n<div><\/div>\n<div style=\"text-align: center;\"><strong><a href=\"https:\/\/res.cloudinary.com\/demo\/image\/sprite\/w_160,h_60,c_fit\/logo.png\" target=\"_blank\" rel=\"noopener\">&#8230;\/image\/sprite\/w_160,h_60,c_fit\/logo.png<\/a><\/strong><\/div>\n<div><\/div>\n<div><img loading=\"lazy\" decoding=\"async\" style=\"margin-left: auto; margin-right: auto;\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/sprite\/w_160,h_60,c_fit\/logo.png\" alt=\"\" width=\"160\" height=\"211\" \/><\/div>\n<div><\/div>\n<div>By simply setting the &#8216;<span style=\"color: #bb0000;\"><strong>effect<\/strong><\/span>&#8216; parameter (or &#8216;<span style=\"color: #bb0000;\"><strong>e<\/strong><\/span>&#8216; for URLs) to &#8216;<span style=\"color: #bb0000;\"><strong>grayscale<\/strong><\/span>&#8216; and setting the &#8216;<span style=\"color: #bb0000;\"><strong>opacity<\/strong><\/span>&#8216; parameter (&#8216;<span style=\"color: #bb0000;\"><strong>o<\/strong><\/span>&#8216; for URLs), Cloudinary generates a semi-transparent gray-scale version of the logos for embedding in your website:<\/div>\n<div><\/div>\n<div style=\"text-align: center;\"><strong><a href=\"https:\/\/res.cloudinary.com\/demo\/image\/sprite\/w_160,h_60,c_fit,e_grayscale,o_50\/logo.png\" target=\"_blank\" rel=\"noopener\">&#8230;\/image\/sprite\/w_160,h_60,c_fit,<span style=\"color: #bb0000;\">e_grayscale,o_50<\/span>\/logo.png<\/a><\/strong><\/div>\n<div style=\"text-align: center;\"><strong>\u00a0<\/strong><\/div>\n<div><img loading=\"lazy\" decoding=\"async\" style=\"margin-left: auto; margin-right: auto;\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/sprite\/w_160,h_60,c_fit,e_grayscale,o_50\/logo.png\" alt=\"\" width=\"160\" height=\"211\" \/><\/div>\n<h3>Generating Watermarks<\/h3>\n<div>In a <a href=\"https:\/\/cloudinary.com\/blog\/adding_watermarks_credits_badges_and_text_overlays_to_images\">previous blog post<\/a>, we&#8217;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 transformation transformation, you can <a href=\"https:\/\/cloudinary.com\/blog\/automating_file_upload_and_sharing\" target=\"_blank\" rel=\"noopener\">file upload<\/a> your non-transparent watermark image and transform its opacity dynamically to make it semi-transparent, ready for adding as a watermark overlay.<\/div>\n<div><\/div>\n<div>The following example adds the previously uploaded image &#8216;cloudinary_icon&#8217; as a 200 pixels wide overlay above the mountain image:<\/div>\n<div><\/div>\n<div style=\"text-align: center;\"><strong><a href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_0.2\/l_cloudinary_icon,w_200\/mountain.jpg\" target=\"_blank\" rel=\"noopener\">&#8230;\/image\/upload\/l_cloudinary_icon,w_200\/mountain.jpg<\/a><\/strong><\/div>\n<div><\/div>\n<div><img loading=\"lazy\" decoding=\"async\" style=\"margin-left: auto; margin-right: auto;\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_0.2\/l_cloudinary_icon,w_200\/mountain.jpg\" alt=\"\" width=\"273\" height=\"409\" \/><\/div>\n<div><\/div>\n<div>Now, by setting opacity to 40%, the overlay becomes semi transparent:<\/div>\n<div><\/div>\n<div style=\"text-align: center;\"><a href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_0.2\/l_cloudinary_icon,w_200,o_40\/mountain.jpg\" target=\"_blank\" rel=\"noopener\"><strong>&#8230;\/image\/upload\/l_cloudinary_icon,w_200,<span style=\"color: #bb0000;\">o_40<\/span>\/mountain.jpg<\/strong><\/a><\/div>\n<div><\/div>\n<div><\/div>\n<div><img loading=\"lazy\" decoding=\"async\" style=\"margin-left: auto; margin-right: auto;\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_0.2\/l_cloudinary_icon,w_200,o_40\/mountain.jpg\" alt=\"\" width=\"273\" height=\"409\" \/><\/div>\n<div><\/div>\n<div><\/div>\n<div>You can also apply an effect or filter on the overlay. In the following example we&#8217;ve increased the brightness of the overlay to make it white and reduced opacity to 30%:<\/div>\n<div><\/div>\n<div><strong><a href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_0.2\/l_cloudinary_icon,w_200,o_30,e_brightness:200\/mountain.jpg\" target=\"_blank\" rel=\"noopener\">&#8230;\/image\/upload\/l_cloudinary_icon,w_200,<span style=\"color: #bb0000;\">o_30,e_brightness:200<\/span>\/mountain.jpg<\/a><\/strong><\/div>\n<div><\/div>\n<div><img loading=\"lazy\" decoding=\"async\" style=\"margin-left: auto; margin-right: auto;\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_0.2\/l_cloudinary_icon,w_200,o_30,e_brightness:200\/mountain.jpg\" alt=\"\" width=\"273\" height=\"409\" \/><\/div>\n<div><\/div>\n<div>The code samples below detail how to build the same URL in <strong>Ruby<\/strong>, <strong>PHP<\/strong>, <strong>Django<\/strong> and <strong>Node.js<\/strong>:<\/div>\n<div><\/div>\n<pre>&lt;%= cl_image_tag(\"mountain.jpg\", :opacity =&gt; 30, :effect =&gt; \"brightness:20\", \n                  :width =&gt; 200, :overlay =&gt; \"cloudinary_icon\") %&gt;\n<\/pre>\n<pre>&lt;?php echo cl_image_tag(\"mountain.jpg\", array(\"opacity\" =&gt; 30, \n  \"effect\" =&gt; \"brightness:20\", \"width\" =&gt; 200, \"overlay\" =&gt; \"cloudinary_icon\")) ?&gt;\n<\/pre>\n<pre>import cloudinary\nimg = cloudinary.CloudinaryImage(\"mountain.jpg\")\nimg.image(opacity=30, effect=\"brightness:20\", width=200, overlay=\"cloudinary_icon\")\n<\/pre>\n<pre>cloudinary.image(\"mountain.jpg\", \n  { opacity: 30, effect: \"brightness:20\", width: 200, overlay: \"cloudinary_icon\" });<\/pre>\n<div><\/div>\n<h3>Summary<\/h3>\n<div>Dynamic opacity transformation and watermark generation are some of the newest Cloudinary capabilities in your image transformation tool-belt. These capabilities further simplify your web and mobile applications tedious image management tasks.<\/div>\n<div><\/div>\n<div>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&#8217;t have to deal with complex non-standard CSS directives and you don&#8217;t have to use over-qualified graphical software like Photoshop to generate images in your desired color balance and opacity.<\/div>\n<div><\/div>\n<div>Please share your thoughts and <a href=\"https:\/\/cloudinary.com\/contact\" target=\"_blank\" rel=\"noopener\">let us know<\/a> how we can further improve Cloudinary&#8217;s growing feature set.<\/div>\n","protected":false},"excerpt":{"rendered":"<p>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 [&hellip;]<\/p>\n","protected":false},"author":41,"featured_media":23423,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[91,165,214,229,257],"class_list":["post-21174","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-django","tag-image-transformation","tag-node","tag-php","tag-ruby-on-rails"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Image Opacity Transformation and Dynamic Watermark Generation With Cloudinary<\/title>\n<meta name=\"description\" content=\"Modifying an image opacity so the image is semi-transparent is a common requirement when implementing modern graphics design. Reducing image opacity\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/image_opacity_manipulation_and_dynamic_watermark_generation\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Image Opacity Transformation and Dynamic Watermark Generation With Cloudinary\" \/>\n<meta property=\"og:description\" content=\"Modifying an image opacity so the image is semi-transparent is a common requirement when implementing modern graphics design. Reducing image opacity\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/image_opacity_manipulation_and_dynamic_watermark_generation\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2013-01-17T11:44:43+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-10T17:55:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1647372819\/54_img_transparency\/54_img_transparency.jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"1100\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/image_opacity_manipulation_and_dynamic_watermark_generation#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/image_opacity_manipulation_and_dynamic_watermark_generation\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Image Opacity Transformation and Dynamic Watermark Generation With Cloudinary\",\"datePublished\":\"2013-01-17T11:44:43+00:00\",\"dateModified\":\"2025-11-10T17:55:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/image_opacity_manipulation_and_dynamic_watermark_generation\"},\"wordCount\":768,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/image_opacity_manipulation_and_dynamic_watermark_generation#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1647372819\/54_img_transparency\/54_img_transparency.jpg?_i=AA\",\"keywords\":[\"Django\",\"Image Transformation\",\"Node\",\"PHP\",\"Ruby on Rails\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2013\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/image_opacity_manipulation_and_dynamic_watermark_generation\",\"url\":\"https:\/\/cloudinary.com\/blog\/image_opacity_manipulation_and_dynamic_watermark_generation\",\"name\":\"Image Opacity Transformation and Dynamic Watermark Generation With Cloudinary\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/image_opacity_manipulation_and_dynamic_watermark_generation#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/image_opacity_manipulation_and_dynamic_watermark_generation#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1647372819\/54_img_transparency\/54_img_transparency.jpg?_i=AA\",\"datePublished\":\"2013-01-17T11:44:43+00:00\",\"dateModified\":\"2025-11-10T17:55:12+00:00\",\"description\":\"Modifying an image opacity so the image is semi-transparent is a common requirement when implementing modern graphics design. Reducing image opacity\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/image_opacity_manipulation_and_dynamic_watermark_generation#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/image_opacity_manipulation_and_dynamic_watermark_generation\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/image_opacity_manipulation_and_dynamic_watermark_generation#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1647372819\/54_img_transparency\/54_img_transparency.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1647372819\/54_img_transparency\/54_img_transparency.jpg?_i=AA\",\"width\":2000,\"height\":1100},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/image_opacity_manipulation_and_dynamic_watermark_generation#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Image Opacity Transformation and Dynamic Watermark Generation With Cloudinary\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Image Opacity Transformation and Dynamic Watermark Generation With Cloudinary","description":"Modifying an image opacity so the image is semi-transparent is a common requirement when implementing modern graphics design. Reducing image opacity","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/image_opacity_manipulation_and_dynamic_watermark_generation","og_locale":"en_US","og_type":"article","og_title":"Image Opacity Transformation and Dynamic Watermark Generation With Cloudinary","og_description":"Modifying an image opacity so the image is semi-transparent is a common requirement when implementing modern graphics design. Reducing image opacity","og_url":"https:\/\/cloudinary.com\/blog\/image_opacity_manipulation_and_dynamic_watermark_generation","og_site_name":"Cloudinary Blog","article_published_time":"2013-01-17T11:44:43+00:00","article_modified_time":"2025-11-10T17:55:12+00:00","og_image":[{"width":2000,"height":1100,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1647372819\/54_img_transparency\/54_img_transparency.jpg?_i=AA","type":"image\/jpeg"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/image_opacity_manipulation_and_dynamic_watermark_generation#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/image_opacity_manipulation_and_dynamic_watermark_generation"},"author":{"name":"","@id":""},"headline":"Image Opacity Transformation and Dynamic Watermark Generation With Cloudinary","datePublished":"2013-01-17T11:44:43+00:00","dateModified":"2025-11-10T17:55:12+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/image_opacity_manipulation_and_dynamic_watermark_generation"},"wordCount":768,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/image_opacity_manipulation_and_dynamic_watermark_generation#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1647372819\/54_img_transparency\/54_img_transparency.jpg?_i=AA","keywords":["Django","Image Transformation","Node","PHP","Ruby on Rails"],"inLanguage":"en-US","copyrightYear":"2013","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/image_opacity_manipulation_and_dynamic_watermark_generation","url":"https:\/\/cloudinary.com\/blog\/image_opacity_manipulation_and_dynamic_watermark_generation","name":"Image Opacity Transformation and Dynamic Watermark Generation With Cloudinary","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/image_opacity_manipulation_and_dynamic_watermark_generation#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/image_opacity_manipulation_and_dynamic_watermark_generation#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1647372819\/54_img_transparency\/54_img_transparency.jpg?_i=AA","datePublished":"2013-01-17T11:44:43+00:00","dateModified":"2025-11-10T17:55:12+00:00","description":"Modifying an image opacity so the image is semi-transparent is a common requirement when implementing modern graphics design. Reducing image opacity","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/image_opacity_manipulation_and_dynamic_watermark_generation#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/image_opacity_manipulation_and_dynamic_watermark_generation"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/image_opacity_manipulation_and_dynamic_watermark_generation#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1647372819\/54_img_transparency\/54_img_transparency.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1647372819\/54_img_transparency\/54_img_transparency.jpg?_i=AA","width":2000,"height":1100},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/image_opacity_manipulation_and_dynamic_watermark_generation#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Image Opacity Transformation and Dynamic Watermark Generation With Cloudinary"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1647372819\/54_img_transparency\/54_img_transparency.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21174","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=21174"}],"version-history":[{"count":4,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21174\/revisions"}],"predecessor-version":[{"id":39236,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21174\/revisions\/39236"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/23423"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=21174"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=21174"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=21174"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}