Apply a sepia effect

Add a warm, antique feeling to your photos using the 'Sepia' filter effect. This is done by setting the effect parameter to sepia (e_sepia in URLs). You can also customize the strength of the Sepia effect.

Here's an original example image:

URL Ruby PHP v1 PHP v2 Python Node.js Java JS jQuery React Vue.js Angular .NET Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/coast.jpg

Ruby:

cl_image_tag("coast.jpg")

PHP v1:

cl_image_tag("coast.jpg")

PHP v2:

(new ImageTag('coast.jpg'));

Python:

CloudinaryImage("coast.jpg").image()

Node.js:

cloudinary.image("coast.jpg")

Java:

cloudinary.url().imageTag("coast.jpg");

JS:

cloudinary.imageTag('coast.jpg').toHtml();

jQuery:

$.cloudinary.image("coast.jpg")

React:

<Image publicId="coast.jpg" >

</Image>

Vue.js:

<cld-image publicId="coast.jpg" >

</cld-image>

Angular:

<cl-image public-id="coast.jpg" >

</cl-image>

.NET:

cloudinary.Api.UrlImgUp.BuildImageTag("coast.jpg")

Android:

MediaManager.get().url().generate("coast.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().generate("coast.jpg")!, cloudinary: cloudinary)

And here's the same image after applying the sepia effect:

URL Ruby PHP v1 PHP v2 Python Node.js Java JS jQuery React Vue.js Angular .NET Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/e_sepia/coast.jpg

Ruby:

cl_image_tag("coast.jpg", :effect=>"sepia")

PHP v1:

cl_image_tag("coast.jpg", array("effect"=>"sepia"))

PHP v2:

(new ImageTag('coast.jpg'))
  ->effect(Effect::sepia());

Python:

CloudinaryImage("coast.jpg").image(effect="sepia")

Node.js:

cloudinary.image("coast.jpg", {effect: "sepia"})

Java:

cloudinary.url().transformation(new Transformation().effect("sepia")).imageTag("coast.jpg");

JS:

cloudinary.imageTag('coast.jpg', {effect: "sepia"}).toHtml();

jQuery:

$.cloudinary.image("coast.jpg", {effect: "sepia"})

React:

<Image publicId="coast.jpg" >
  <Transformation effect="sepia" />
</Image>

Vue.js:

<cld-image publicId="coast.jpg" >
  <cld-transformation effect="sepia" />
</cld-image>

Angular:

<cl-image public-id="coast.jpg" >
  <cl-transformation effect="sepia">
  </cl-transformation>
</cl-image>

.NET:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("sepia")).BuildImageTag("coast.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().effect("sepia")).generate("coast.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("sepia")).generate("coast.jpg")!, cloudinary: cloudinary)

In order to customize the effect's strength you add a colon and the strength of the effect. While the default value is 80, you can specify the strength between 1 and 100. For example:

URL Ruby PHP v1 PHP v2 Python Node.js Java JS jQuery React Vue.js Angular .NET Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/e_sepia:50/coast.jpg

Ruby:

cl_image_tag("coast.jpg", :effect=>"sepia:50")

PHP v1:

cl_image_tag("coast.jpg", array("effect"=>"sepia:50"))

PHP v2:

(new ImageTag('coast.jpg'))
  ->effect(Effect::sepia()->level(50));

Python:

CloudinaryImage("coast.jpg").image(effect="sepia:50")

Node.js:

cloudinary.image("coast.jpg", {effect: "sepia:50"})

Java:

cloudinary.url().transformation(new Transformation().effect("sepia:50")).imageTag("coast.jpg");

JS:

cloudinary.imageTag('coast.jpg', {effect: "sepia:50"}).toHtml();

jQuery:

$.cloudinary.image("coast.jpg", {effect: "sepia:50"})

React:

<Image publicId="coast.jpg" >
  <Transformation effect="sepia:50" />
</Image>

Vue.js:

<cld-image publicId="coast.jpg" >
  <cld-transformation effect="sepia:50" />
</cld-image>

Angular:

<cl-image public-id="coast.jpg" >
  <cl-transformation effect="sepia:50">
  </cl-transformation>
</cl-image>

.NET:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("sepia:50")).BuildImageTag("coast.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().effect("sepia:50")).generate("coast.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("sepia:50")).generate("coast.jpg")!, cloudinary: cloudinary)

You can add any further transformations, for example - changing the strength to a higher value, resizing, cropping to a circle, and adding a watermark:

URL Ruby PHP v1 PHP v2 Python Node.js Java JS jQuery React Vue.js Angular .NET Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/w_200,h_200,c_fill/e_sepia:100/l_sample_watermark,w_150/r_max/coast.jpg

Ruby:

cl_image_tag("coast.jpg", :transformation=>[
  {:width=>200, :height=>200, :crop=>"fill"},
  {:effect=>"sepia:100"},
  {:overlay=>"sample_watermark", :width=>150},
  {:radius=>"max"}
  ])

PHP v1:

cl_image_tag("coast.jpg", array("transformation"=>array(
  array("width"=>200, "height"=>200, "crop"=>"fill"),
  array("effect"=>"sepia:100"),
  array("overlay"=>"sample_watermark", "width"=>150),
  array("radius"=>"max")
  )))

PHP v2:

(new ImageTag('coast.jpg'))
  ->resize(Resize::fill()->width(200)->height(200))
  ->effect(Effect::sepia()->level(100))
  ->overlay(
      Overlay::source(Source::image('sample_watermark')
        ->transformation((new ImageTransformation())
          ->resize(Resize::scale()->width(150)))))
    ->roundCorners(RoundCorners::max());

Python:

CloudinaryImage("coast.jpg").image(transformation=[
  {'width': 200, 'height': 200, 'crop': "fill"},
  {'effect': "sepia:100"},
  {'overlay': "sample_watermark", 'width': 150},
  {'radius': "max"}
  ])

Node.js:

cloudinary.image("coast.jpg", {transformation: [
  {width: 200, height: 200, crop: "fill"},
  {effect: "sepia:100"},
  {overlay: "sample_watermark", width: 150},
  {radius: "max"}
  ]})

Java:

cloudinary.url().transformation(new Transformation()
  .width(200).height(200).crop("fill").chain()
  .effect("sepia:100").chain()
  .overlay(new Layer().publicId("sample_watermark")).width(150).chain()
  .radius("max")).imageTag("coast.jpg");

JS:

cloudinary.imageTag('coast.jpg', {transformation: [
  {width: 200, height: 200, crop: "fill"},
  {effect: "sepia:100"},
  {overlay: new cloudinary.Layer().publicId("sample_watermark"), width: 150},
  {radius: "max"}
  ]}).toHtml();

jQuery:

$.cloudinary.image("coast.jpg", {transformation: [
  {width: 200, height: 200, crop: "fill"},
  {effect: "sepia:100"},
  {overlay: new cloudinary.Layer().publicId("sample_watermark"), width: 150},
  {radius: "max"}
  ]})

React:

<Image publicId="coast.jpg" >
  <Transformation width="200" height="200" crop="fill" />
  <Transformation effect="sepia:100" />
  <Transformation overlay="sample_watermark" width="150" />
  <Transformation radius="max" />
</Image>

Vue.js:

<cld-image publicId="coast.jpg" >
  <cld-transformation width="200" height="200" crop="fill" />
  <cld-transformation effect="sepia:100" />
  <cld-transformation :overlay="sample_watermark" width="150" />
  <cld-transformation radius="max" />
</cld-image>

Angular:

<cl-image public-id="coast.jpg" >
  <cl-transformation width="200" height="200" crop="fill">
  </cl-transformation>
  <cl-transformation effect="sepia:100">
  </cl-transformation>
  <cl-transformation overlay="sample_watermark" width="150">
  </cl-transformation>
  <cl-transformation radius="max">
  </cl-transformation>
</cl-image>

.NET:

cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(200).Height(200).Crop("fill").Chain()
  .Effect("sepia:100").Chain()
  .Overlay(new Layer().PublicId("sample_watermark")).Width(150).Chain()
  .Radius("max")).BuildImageTag("coast.jpg")

Android:

MediaManager.get().url().transformation(new Transformation()
  .width(200).height(200).crop("fill").chain()
  .effect("sepia:100").chain()
  .overlay(new Layer().publicId("sample_watermark")).width(150).chain()
  .radius("max")).generate("coast.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(200).setHeight(200).setCrop("fill").chain()
  .setEffect("sepia:100").chain()
  .setOverlay("sample_watermark").setWidth(150).chain()
  .setRadius("max")).generate("coast.jpg")!, cloudinary: cloudinary)