Cloudinary cookbook background

Cloudinary Cookbook

← View popular recipes
Find recipes by tags:
View all tags

Convert image to grayscale

Convert images to grayscale by setting the effect parameter to grayscale (e_grayscale in URLs). You can add further transformations in order to achieve the exact result you need.

Here's an original image for example:

URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidAll
URL:
https://res.cloudinary.com/demo/image/upload/happy_dog.jpg
Ruby:
cl_image_tag("happy_dog.jpg")
PHP:
cl_image_tag("happy_dog.jpg")
Python:
CloudinaryImage("happy_dog.jpg").image()
Node.js:
cloudinary.image("happy_dog.jpg")
Java:
cloudinary.url().imageTag("happy_dog.jpg")
JS:
cl.imageTag('happy_dog.jpg').toHtml();
jQuery:
$.cloudinary.image("happy_dog.jpg")
React:
<Image publicId="happy_dog.jpg" >

</Image>
Angular:
<cl-image public-id="happy_dog.jpg" >

</cl-image>
.Net:
cloudinary.Api.UrlImgUp.BuildImageTag("happy_dog.jpg")
Android:
MediaManager.get().url().generate("happy_dog.jpg")
Original

Here's how to apply the 'grayscale' effect:

URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidAll
URL:
https://res.cloudinary.com/demo/image/upload/e_grayscale/happy_dog.jpg
Ruby:
cl_image_tag("happy_dog.jpg", :effect=>"grayscale")
PHP:
cl_image_tag("happy_dog.jpg", array("effect"=>"grayscale"))
Python:
CloudinaryImage("happy_dog.jpg").image(effect="grayscale")
Node.js:
cloudinary.image("happy_dog.jpg", {effect: "grayscale"})
Java:
cloudinary.url().transformation(new Transformation().effect("grayscale")).imageTag("happy_dog.jpg")
JS:
cl.imageTag('happy_dog.jpg', {effect: "grayscale"}).toHtml();
jQuery:
$.cloudinary.image("happy_dog.jpg", {effect: "grayscale"})
React:
<Image publicId="happy_dog.jpg" >
  <Transformation effect="grayscale" />
</Image>
Angular:
<cl-image public-id="happy_dog.jpg" >
  <cl-transformation effect="grayscale">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("grayscale")).BuildImageTag("happy_dog.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().effect("grayscale")).generate("happy_dog.jpg")
Grayscale

You can also apply the grayscale effect on overlay images. For example, here's Cloudinary's logo:

URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidAll
URL:
https://res.cloudinary.com/demo/image/upload/cloudinary_icon.png
Ruby:
cl_image_tag("cloudinary_icon.png")
PHP:
cl_image_tag("cloudinary_icon.png")
Python:
CloudinaryImage("cloudinary_icon.png").image()
Node.js:
cloudinary.image("cloudinary_icon.png")
Java:
cloudinary.url().imageTag("cloudinary_icon.png")
JS:
cl.imageTag('cloudinary_icon.png').toHtml();
jQuery:
$.cloudinary.image("cloudinary_icon.png")
React:
<Image publicId="cloudinary_icon.png" >

</Image>
Angular:
<cl-image public-id="cloudinary_icon.png" >

</cl-image>
.Net:
cloudinary.Api.UrlImgUp.BuildImageTag("cloudinary_icon.png")
Android:
MediaManager.get().url().generate("cloudinary_icon.png")
Cloudinary's logo
 We'll add it as a grayscaled overlay and make it half transparent by setting the opacity parameter to 50 (o_50 in URLs):
URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidAll
URL:
https://res.cloudinary.com/demo/image/upload/l_cloudinary_icon,e_grayscale,w_1500,o_50/happy_dog.jpg
Ruby:
cl_image_tag("happy_dog.jpg", :overlay=>"cloudinary_icon", :effect=>"grayscale", :width=>1500, :opacity=>50)
PHP:
cl_image_tag("happy_dog.jpg", array("overlay"=>"cloudinary_icon", "effect"=>"grayscale", "width"=>1500, "opacity"=>50))
Python:
CloudinaryImage("happy_dog.jpg").image(overlay="cloudinary_icon", effect="grayscale", width=1500, opacity=50)
Node.js:
cloudinary.image("happy_dog.jpg", {overlay: "cloudinary_icon", effect: "grayscale", width: 1500, opacity: 50})
Java:
cloudinary.url().transformation(new Transformation().overlay("cloudinary_icon").effect("grayscale").width(1500).opacity(50)).imageTag("happy_dog.jpg")
JS:
cl.imageTag('happy_dog.jpg', {overlay: "cloudinary_icon", effect: "grayscale", width: 1500, opacity: 50}).toHtml();
jQuery:
$.cloudinary.image("happy_dog.jpg", {overlay: "cloudinary_icon", effect: "grayscale", width: 1500, opacity: 50})
React:
<Image publicId="happy_dog.jpg" >
  <Transformation overlay="cloudinary_icon" effect="grayscale" width="1500" opacity="50" />
</Image>
Angular:
<cl-image public-id="happy_dog.jpg" >
  <cl-transformation overlay="cloudinary_icon" effect="grayscale" width="1500" opacity="50">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay("cloudinary_icon").Effect("grayscale").Width(1500).Opacity(50)).BuildImageTag("happy_dog.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().overlay("cloudinary_icon").effect("grayscale").width(1500).opacity(50)).generate("happy_dog.jpg")
Grayscale overlay

Here's a more advanced and interesting example of applying the grayscale effect on overlays. This time, we'll use the dog's image as a texture to the logo (Using the same technique as the recipe - Use images as text textures):

URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidAll
URL:
https://res.cloudinary.com/demo/image/upload/l_cloudinary_icon,fl_cutter/happy_dog.png
Ruby:
cl_image_tag("happy_dog.png", :overlay=>"cloudinary_icon", :flags=>"cutter")
PHP:
cl_image_tag("happy_dog.png", array("overlay"=>"cloudinary_icon", "flags"=>"cutter"))
Python:
CloudinaryImage("happy_dog.png").image(overlay="cloudinary_icon", flags="cutter")
Node.js:
cloudinary.image("happy_dog.png", {overlay: "cloudinary_icon", flags: "cutter"})
Java:
cloudinary.url().transformation(new Transformation().overlay("cloudinary_icon").flags("cutter")).imageTag("happy_dog.png")
JS:
cl.imageTag('happy_dog.png', {overlay: "cloudinary_icon", flags: "cutter"}).toHtml();
jQuery:
$.cloudinary.image("happy_dog.png", {overlay: "cloudinary_icon", flags: "cutter"})
React:
<Image publicId="happy_dog.png" >
  <Transformation overlay="cloudinary_icon" flags="cutter" />
</Image>
Angular:
<cl-image public-id="happy_dog.png" >
  <cl-transformation overlay="cloudinary_icon" flags="cutter">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay("cloudinary_icon").Flags("cutter")).BuildImageTag("happy_dog.png")
Android:
MediaManager.get().url().transformation(new Transformation().overlay("cloudinary_icon").flags("cutter")).generate("happy_dog.png")
Logo cutter
 Now we'll apply the grayscale effect:
URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidAll
URL:
https://res.cloudinary.com/demo/image/upload/e_grayscale/l_cloudinary_icon,fl_cutter/happy_dog.png
Ruby:
cl_image_tag("happy_dog.png", :transformation=>[
  {:effect=>"grayscale"},
  {:overlay=>"cloudinary_icon", :flags=>"cutter"}
  ])
PHP:
cl_image_tag("happy_dog.png", array("transformation"=>array(
  array("effect"=>"grayscale"),
  array("overlay"=>"cloudinary_icon", "flags"=>"cutter")
  )))
Python:
CloudinaryImage("happy_dog.png").image(transformation=[
  {"effect": "grayscale"},
  {"overlay": "cloudinary_icon", "flags": "cutter"}
  ])
Node.js:
cloudinary.image("happy_dog.png", {transformation: [
  {effect: "grayscale"},
  {overlay: "cloudinary_icon", flags: "cutter"}
  ]})
Java:
cloudinary.url().transformation(new Transformation()
  .effect("grayscale").chain()
  .overlay("cloudinary_icon").flags("cutter")).imageTag("happy_dog.png")
JS:
cl.imageTag('happy_dog.png', {transformation: [
  {effect: "grayscale"},
  {overlay: "cloudinary_icon", flags: "cutter"}
  ]}).toHtml();
jQuery:
$.cloudinary.image("happy_dog.png", {transformation: [
  {effect: "grayscale"},
  {overlay: "cloudinary_icon", flags: "cutter"}
  ]})
React:
<Image publicId="happy_dog.png" >
  <Transformation effect="grayscale" />
  <Transformation overlay="cloudinary_icon" flags="cutter" />
</Image>
Angular:
<cl-image public-id="happy_dog.png" >
  <cl-transformation effect="grayscale">
  </cl-transformation>
  <cl-transformation overlay="cloudinary_icon" flags="cutter">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Effect("grayscale").Chain()
  .Overlay("cloudinary_icon").Flags("cutter")).BuildImageTag("happy_dog.png")
Android:
MediaManager.get().url().transformation(new Transformation()
  .effect("grayscale").chain()
  .overlay("cloudinary_icon").flags("cutter")).generate("happy_dog.png")
Grayscale logo
 Finally, we'll add the original image as an 'underlay' to get the following cool result:
URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidAll
URL:
https://res.cloudinary.com/demo/image/upload/e_grayscale/l_cloudinary_icon,fl_cutter.relative,w_0.7/u_happy_dog/happy_dog.jpg
Ruby:
cl_image_tag("happy_dog.jpg", :transformation=>[
  {:effect=>"grayscale"},
  {:overlay=>"cloudinary_icon", :flags=>["cutter", "relative"], :width=>0.7},
  {:underlay=>"happy_dog"}
  ])
PHP:
cl_image_tag("happy_dog.jpg", array("transformation"=>array(
  array("effect"=>"grayscale"),
  array("overlay"=>"cloudinary_icon", "flags"=>array("cutter", "relative"), "width"=>0.7),
  array("underlay"=>"happy_dog")
  )))
Python:
CloudinaryImage("happy_dog.jpg").image(transformation=[
  {"effect": "grayscale"},
  {"overlay": "cloudinary_icon", "flags": ["cutter", "relative"], "width": 0.7},
  {"underlay": "happy_dog"}
  ])
Node.js:
cloudinary.image("happy_dog.jpg", {transformation: [
  {effect: "grayscale"},
  {overlay: "cloudinary_icon", flags: ["cutter", "relative"], width: "0.7"},
  {underlay: "happy_dog"}
  ]})
Java:
cloudinary.url().transformation(new Transformation()
  .effect("grayscale").chain()
  .overlay("cloudinary_icon").flags("cutter", "relative").width(0.7).chain()
  .underlay("happy_dog")).imageTag("happy_dog.jpg")
JS:
cl.imageTag('happy_dog.jpg', {transformation: [
  {effect: "grayscale"},
  {overlay: "cloudinary_icon", flags: ["cutter", "relative"], width: "0.7"},
  {underlay: "happy_dog"}
  ]}).toHtml();
jQuery:
$.cloudinary.image("happy_dog.jpg", {transformation: [
  {effect: "grayscale"},
  {overlay: "cloudinary_icon", flags: ["cutter", "relative"], width: "0.7"},
  {underlay: "happy_dog"}
  ]})
React:
<Image publicId="happy_dog.jpg" >
  <Transformation effect="grayscale" />
  <Transformation overlay="cloudinary_icon" flags={["cutter", "relative"]} width="0.7" />
  <Transformation underlay="happy_dog" />
</Image>
Angular:
<cl-image public-id="happy_dog.jpg" >
  <cl-transformation effect="grayscale">
  </cl-transformation>
  <cl-transformation overlay="cloudinary_icon" flags={{["cutter", "relative"]}} width="0.7">
  </cl-transformation>
  <cl-transformation underlay="happy_dog">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Effect("grayscale").Chain()
  .Overlay("cloudinary_icon").Flags("cutter", "relative").Width(0.7).Chain()
  .Underlay("happy_dog")).BuildImageTag("happy_dog.jpg")
Android:
MediaManager.get().url().transformation(new Transformation()
  .effect("grayscale").chain()
  .overlay("cloudinary_icon").flags("cutter", "relative").width(0.7).chain()
  .underlay("happy_dog")).generate("happy_dog.jpg")
Grayscale logo overlay

Note that you can use a similar practice to grayscale only certain parts of the image:

URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidAll
URL:
https://res.cloudinary.com/demo/image/upload/l_happy_dog,w_2082,h_500,c_crop,g_north,e_grayscale/g_north,fl_layer_apply/l_happy_dog,w_2082,h_500,c_crop,e_grayscale/fl_layer_apply/l_happy_dog,w_2082,h_500,c_crop,g_south,e_grayscale/g_south,fl_layer_apply/happy_dog.jpg
Ruby:
cl_image_tag("happy_dog.jpg", :transformation=>[
  {:overlay=>"happy_dog", :width=>2082, :height=>500, :gravity=>"north", :effect=>"grayscale", :crop=>"crop"},
  {:gravity=>"north", :flags=>"layer_apply"},
  {:overlay=>"happy_dog", :width=>2082, :height=>500, :effect=>"grayscale", :crop=>"crop"},
  {:flags=>"layer_apply"},
  {:overlay=>"happy_dog", :width=>2082, :height=>500, :gravity=>"south", :effect=>"grayscale", :crop=>"crop"},
  {:gravity=>"south", :flags=>"layer_apply"}
  ])
PHP:
cl_image_tag("happy_dog.jpg", array("transformation"=>array(
  array("overlay"=>"happy_dog", "width"=>2082, "height"=>500, "gravity"=>"north", "effect"=>"grayscale", "crop"=>"crop"),
  array("gravity"=>"north", "flags"=>"layer_apply"),
  array("overlay"=>"happy_dog", "width"=>2082, "height"=>500, "effect"=>"grayscale", "crop"=>"crop"),
  array("flags"=>"layer_apply"),
  array("overlay"=>"happy_dog", "width"=>2082, "height"=>500, "gravity"=>"south", "effect"=>"grayscale", "crop"=>"crop"),
  array("gravity"=>"south", "flags"=>"layer_apply")
  )))
Python:
CloudinaryImage("happy_dog.jpg").image(transformation=[
  {"overlay": "happy_dog", "width": 2082, "height": 500, "gravity": "north", "effect": "grayscale", "crop": "crop"},
  {"gravity": "north", "flags": "layer_apply"},
  {"overlay": "happy_dog", "width": 2082, "height": 500, "effect": "grayscale", "crop": "crop"},
  {"flags": "layer_apply"},
  {"overlay": "happy_dog", "width": 2082, "height": 500, "gravity": "south", "effect": "grayscale", "crop": "crop"},
  {"gravity": "south", "flags": "layer_apply"}
  ])
Node.js:
cloudinary.image("happy_dog.jpg", {transformation: [
  {overlay: "happy_dog", width: 2082, height: 500, gravity: "north", effect: "grayscale", crop: "crop"},
  {gravity: "north", flags: "layer_apply"},
  {overlay: "happy_dog", width: 2082, height: 500, effect: "grayscale", crop: "crop"},
  {flags: "layer_apply"},
  {overlay: "happy_dog", width: 2082, height: 500, gravity: "south", effect: "grayscale", crop: "crop"},
  {gravity: "south", flags: "layer_apply"}
  ]})
Java:
cloudinary.url().transformation(new Transformation()
  .overlay("happy_dog").width(2082).height(500).gravity("north").effect("grayscale").crop("crop").chain()
  .gravity("north").flags("layer_apply").chain()
  .overlay("happy_dog").width(2082).height(500).effect("grayscale").crop("crop").chain()
  .flags("layer_apply").chain()
  .overlay("happy_dog").width(2082).height(500).gravity("south").effect("grayscale").crop("crop").chain()
  .gravity("south").flags("layer_apply")).imageTag("happy_dog.jpg")
JS:
cl.imageTag('happy_dog.jpg', {transformation: [
  {overlay: "happy_dog", width: 2082, height: 500, gravity: "north", effect: "grayscale", crop: "crop"},
  {gravity: "north", flags: "layer_apply"},
  {overlay: "happy_dog", width: 2082, height: 500, effect: "grayscale", crop: "crop"},
  {flags: "layer_apply"},
  {overlay: "happy_dog", width: 2082, height: 500, gravity: "south", effect: "grayscale", crop: "crop"},
  {gravity: "south", flags: "layer_apply"}
  ]}).toHtml();
jQuery:
$.cloudinary.image("happy_dog.jpg", {transformation: [
  {overlay: "happy_dog", width: 2082, height: 500, gravity: "north", effect: "grayscale", crop: "crop"},
  {gravity: "north", flags: "layer_apply"},
  {overlay: "happy_dog", width: 2082, height: 500, effect: "grayscale", crop: "crop"},
  {flags: "layer_apply"},
  {overlay: "happy_dog", width: 2082, height: 500, gravity: "south", effect: "grayscale", crop: "crop"},
  {gravity: "south", flags: "layer_apply"}
  ]})
React:
<Image publicId="happy_dog.jpg" >
  <Transformation overlay="happy_dog" width="2082" height="500" gravity="north" effect="grayscale" crop="crop" />
  <Transformation gravity="north" flags="layer_apply" />
  <Transformation overlay="happy_dog" width="2082" height="500" effect="grayscale" crop="crop" />
  <Transformation flags="layer_apply" />
  <Transformation overlay="happy_dog" width="2082" height="500" gravity="south" effect="grayscale" crop="crop" />
  <Transformation gravity="south" flags="layer_apply" />
</Image>
Angular:
<cl-image public-id="happy_dog.jpg" >
  <cl-transformation overlay="happy_dog" width="2082" height="500" gravity="north" effect="grayscale" crop="crop">
  </cl-transformation>
  <cl-transformation gravity="north" flags="layer_apply">
  </cl-transformation>
  <cl-transformation overlay="happy_dog" width="2082" height="500" effect="grayscale" crop="crop">
  </cl-transformation>
  <cl-transformation flags="layer_apply">
  </cl-transformation>
  <cl-transformation overlay="happy_dog" width="2082" height="500" gravity="south" effect="grayscale" crop="crop">
  </cl-transformation>
  <cl-transformation gravity="south" flags="layer_apply">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Overlay("happy_dog").Width(2082).Height(500).Gravity("north").Effect("grayscale").Crop("crop").Chain()
  .Gravity("north").Flags("layer_apply").Chain()
  .Overlay("happy_dog").Width(2082).Height(500).Effect("grayscale").Crop("crop").Chain()
  .Flags("layer_apply").Chain()
  .Overlay("happy_dog").Width(2082).Height(500).Gravity("south").Effect("grayscale").Crop("crop").Chain()
  .Gravity("south").Flags("layer_apply")).BuildImageTag("happy_dog.jpg")
Android:
MediaManager.get().url().transformation(new Transformation()
  .overlay("happy_dog").width(2082).height(500).gravity("north").effect("grayscale").crop("crop").chain()
  .gravity("north").flags("layer_apply").chain()
  .overlay("happy_dog").width(2082).height(500).effect("grayscale").crop("crop").chain()
  .flags("layer_apply").chain()
  .overlay("happy_dog").width(2082).height(500).gravity("south").effect("grayscale").crop("crop").chain()
  .gravity("south").flags("layer_apply")).generate("happy_dog.jpg")
Grayscale overlays

Here's another example of using the gradient_fade effect (e_gradient in URLs) to create a smooth transition from grayscale to color:

URLRubyPHPPythonNode.jsJavaJSjQueryReactAngular.NetAndroidAll
URL:
https://res.cloudinary.com/demo/image/upload/e_gradient_fade,x_0.9/u_happy_dog,e_grayscale/happy_dog.jpg
Ruby:
cl_image_tag("happy_dog.jpg", :transformation=>[
  {:effect=>"gradient_fade", :x=>0.9},
  {:underlay=>"happy_dog", :effect=>"grayscale"}
  ])
PHP:
cl_image_tag("happy_dog.jpg", array("transformation"=>array(
  array("effect"=>"gradient_fade", "x"=>0.9),
  array("underlay"=>"happy_dog", "effect"=>"grayscale")
  )))
Python:
CloudinaryImage("happy_dog.jpg").image(transformation=[
  {"effect": "gradient_fade", "x": 0.9},
  {"underlay": "happy_dog", "effect": "grayscale"}
  ])
Node.js:
cloudinary.image("happy_dog.jpg", {transformation: [
  {effect: "gradient_fade", x: "0.9"},
  {underlay: "happy_dog", effect: "grayscale"}
  ]})
Java:
cloudinary.url().transformation(new Transformation()
  .effect("gradient_fade").x(0.9).chain()
  .underlay("happy_dog").effect("grayscale")).imageTag("happy_dog.jpg")
JS:
cl.imageTag('happy_dog.jpg', {transformation: [
  {effect: "gradient_fade", x: "0.9"},
  {underlay: "happy_dog", effect: "grayscale"}
  ]}).toHtml();
jQuery:
$.cloudinary.image("happy_dog.jpg", {transformation: [
  {effect: "gradient_fade", x: "0.9"},
  {underlay: "happy_dog", effect: "grayscale"}
  ]})
React:
<Image publicId="happy_dog.jpg" >
  <Transformation effect="gradient_fade" x="0.9" />
  <Transformation underlay="happy_dog" effect="grayscale" />
</Image>
Angular:
<cl-image public-id="happy_dog.jpg" >
  <cl-transformation effect="gradient_fade" x="0.9">
  </cl-transformation>
  <cl-transformation underlay="happy_dog" effect="grayscale">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Effect("gradient_fade").X(0.9).Chain()
  .Underlay("happy_dog").Effect("grayscale")).BuildImageTag("happy_dog.jpg")
Android:
MediaManager.get().url().transformation(new Transformation()
  .effect("gradient_fade").x(0.9).chain()
  .underlay("happy_dog").effect("grayscale")).generate("happy_dog.jpg")
Gradient fade

by Itay Taragano
Tags: