Cloudinary Blog

Increase engagement with cloud-based artistic image filters

Cloud-based image filter transformations for developers

Every picture has a story to tell. But the story it tells can change when you change the color tone, saturation, contrast, or other elements of a photo.

A few years ago, post-processing a digital image generally required a high level of skill and expensive software such as PhotoShop. But in recent years, popular photo sharing apps such as Instagram, Flickr, and Snapchat started offering built-in filters. Professionals take advantage of filters to make subtle corrections or adjustments. Casual users often apply more prominent filters that add their own unique touch or just make their images more fun.

These easy-to-apply filters have made photo post-processing an almost integral and expected part of the process; so much so that people feel the need to make a point of noting when they've actually posted an unaltered photo: the #nofilter hashtag.

But research shows that filtered photos increase engagement. According to a recent study by Yahoo Labs and Georgia Tech, filtered images are 21% more likely to be viewed and 45% more likely to be commented on than non-filtered counterparts.

So filters can be really valuable, both for your own site photos and to add value for your users, but developing a set of proprietary filters would be a hefty project. No worries. Cloudinary now offers 21 artistic filter transformations for Web and app developers to choose from. This makes it easy to adjust your photos on-the-fly to match the message and design of a particular page, or to pass them on as a feature to the users who upload photos to your site or app.

Webinar
How to Optimize for Page Load Speed

How does it work?

Normally, generating these effects on your site or app would involve complex client-side CSS, javascript coding, and SVG rendering to achieve the desired combinations of blurring, sharpening, gradient overlays, recoloring, and blending effects.

But when you use Cloudinary's artistic filters, we handle all the image processing on the cloud. All you have to do is pick the filter you want, add it as an e_art:<filter-name> transformation in the image URL, or using any of our SDK framework languages, and deliver. For example:

Ruby:
Copy to clipboard
cl_image_tag("bicycle.jpg", :effect=>"art:red_rock")
PHP:
Copy to clipboard
cl_image_tag("bicycle.jpg", array("effect"=>"art:red_rock"))
Python:
Copy to clipboard
CloudinaryImage("bicycle.jpg").image(effect="art:red_rock")
Node.js:
Copy to clipboard
cloudinary.image("bicycle.jpg", {effect: "art:red_rock"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().effect("art:red_rock")).imageTag("bicycle.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('bicycle.jpg', {effect: "art:red_rock"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("bicycle.jpg", {effect: "art:red_rock"})
React:
Copy to clipboard
<Image publicId="bicycle.jpg" >
  <Transformation effect="art:red_rock" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="bicycle.jpg" >
  <cld-transformation effect="art:red_rock" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="bicycle.jpg" >
  <cl-transformation effect="art:red_rock">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("art:red_rock")).BuildImageTag("bicycle.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().effect("art:red_rock")).generate("bicycle.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("art:red_rock")).generate("bicycle.jpg")!, cloudinary: cloudinary)

Sandbox

OK, so you wanna play too? Here’s a sandbox where you can try out all the available filters on a few images with different kinds of content.

Choose a source image and then click one of the filter buttons below to see the effect:
sandbox golf sand Jeep sand old man

al_dente athena audrey aurora daguerre eucalyptus fes frost hairspray hokusai incognito linen peacock primavera quartz red_rock refresh sizzle sonnet ukulele zorro
No filter

Taking it up a notch

Above, you can see how simple it is to apply any of the available artistic filters to any photo, but you don’t have to stop there...

  • double the fun: If no single artistic filter achieves exactly the effect or impact you are looking for, don’t limit yourself to one. If you want to increase the aggressiveness of a filter, simply chain the same filter in consecutive transformation components. For example, here’s the sandbox photo with no filter, a single athena filter, and a double athena (.../upload/e_art:athena/e_art:athena/sandbox.jpg) filter. Each application of the filter adds a bit more of a yellow sunny center and slightly more washed out color at the edges.

    original image - no filter Original athena artistic filter Athena X 1 athena X 2 Athena X 2

    In the same way, you can also chain transformations to apply two (or more) different filters, making the possibilities endless. For example, below we take advantage of the telescopic effect of zorro along with the historical grays of daguerre.

    Ruby:
    Copy to clipboard
    cl_image_tag("sandbox.jpg", :transformation=>[
      {:effect=>"art:zorro"},
      {:effect=>"art:daguerre"},
      {:width=>300, :crop=>"scale"}
      ])
    PHP:
    Copy to clipboard
    cl_image_tag("sandbox.jpg", array("transformation"=>array(
      array("effect"=>"art:zorro"),
      array("effect"=>"art:daguerre"),
      array("width"=>300, "crop"=>"scale")
      )))
    Python:
    Copy to clipboard
    CloudinaryImage("sandbox.jpg").image(transformation=[
      {'effect': "art:zorro"},
      {'effect': "art:daguerre"},
      {'width': 300, 'crop': "scale"}
      ])
    Node.js:
    Copy to clipboard
    cloudinary.image("sandbox.jpg", {transformation: [
      {effect: "art:zorro"},
      {effect: "art:daguerre"},
      {width: 300, crop: "scale"}
      ]})
    Java:
    Copy to clipboard
    cloudinary.url().transformation(new Transformation()
      .effect("art:zorro").chain()
      .effect("art:daguerre").chain()
      .width(300).crop("scale")).imageTag("sandbox.jpg");
    JS:
    Copy to clipboard
    cloudinary.imageTag('sandbox.jpg', {transformation: [
      {effect: "art:zorro"},
      {effect: "art:daguerre"},
      {width: 300, crop: "scale"}
      ]}).toHtml();
    jQuery:
    Copy to clipboard
    $.cloudinary.image("sandbox.jpg", {transformation: [
      {effect: "art:zorro"},
      {effect: "art:daguerre"},
      {width: 300, crop: "scale"}
      ]})
    React:
    Copy to clipboard
    <Image publicId="sandbox.jpg" >
      <Transformation effect="art:zorro" />
      <Transformation effect="art:daguerre" />
      <Transformation width="300" crop="scale" />
    </Image>
    Vue.js:
    Copy to clipboard
    <cld-image publicId="sandbox.jpg" >
      <cld-transformation effect="art:zorro" />
      <cld-transformation effect="art:daguerre" />
      <cld-transformation width="300" crop="scale" />
    </cld-image>
    Angular:
    Copy to clipboard
    <cl-image public-id="sandbox.jpg" >
      <cl-transformation effect="art:zorro">
      </cl-transformation>
      <cl-transformation effect="art:daguerre">
      </cl-transformation>
      <cl-transformation width="300" crop="scale">
      </cl-transformation>
    </cl-image>
    .Net:
    Copy to clipboard
    cloudinary.Api.UrlImgUp.Transform(new Transformation()
      .Effect("art:zorro").Chain()
      .Effect("art:daguerre").Chain()
      .Width(300).Crop("scale")).BuildImageTag("sandbox.jpg")
    Android:
    Copy to clipboard
    MediaManager.get().url().transformation(new Transformation()
      .effect("art:zorro").chain()
      .effect("art:daguerre").chain()
      .width(300).crop("scale")).generate("sandbox.jpg");
    iOS:
    Copy to clipboard
    imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
      .setEffect("art:zorro").chain()
      .setEffect("art:daguerre").chain()
      .setWidth(300).setCrop("scale")).generate("sandbox.jpg")!, cloudinary: cloudinary)
    Two different filters applied


    Note that while you will get a similar result if you reverse the order of the chained artistic filters, it is not identical, so it’s always worth trying in both directions.

  • mix and match: You can also achieve unique results by chaining an artistic filter before or after other effects, such as tint, blur, sharpen, pixelate, vignette, contrast, vibrance, oil paint and more. Check out what happens when we decide to both pixelate and add the red_rock filter to this dog:

Ruby:
Copy to clipboard
cl_image_tag("dog.jpg", :transformation=>[
  {:width=>200, :crop=>"scale"},
  {:effect=>"pixelate:3"},
  {:effect=>"art:red_rock"}
  ])
PHP:
Copy to clipboard
cl_image_tag("dog.jpg", array("transformation"=>array(
  array("width"=>200, "crop"=>"scale"),
  array("effect"=>"pixelate:3"),
  array("effect"=>"art:red_rock")
  )))
Python:
Copy to clipboard
CloudinaryImage("dog.jpg").image(transformation=[
  {'width': 200, 'crop': "scale"},
  {'effect': "pixelate:3"},
  {'effect': "art:red_rock"}
  ])
Node.js:
Copy to clipboard
cloudinary.image("dog.jpg", {transformation: [
  {width: 200, crop: "scale"},
  {effect: "pixelate:3"},
  {effect: "art:red_rock"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .width(200).crop("scale").chain()
  .effect("pixelate:3").chain()
  .effect("art:red_rock")).imageTag("dog.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('dog.jpg', {transformation: [
  {width: 200, crop: "scale"},
  {effect: "pixelate:3"},
  {effect: "art:red_rock"}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("dog.jpg", {transformation: [
  {width: 200, crop: "scale"},
  {effect: "pixelate:3"},
  {effect: "art:red_rock"}
  ]})
React:
Copy to clipboard
<Image publicId="dog.jpg" >
  <Transformation width="200" crop="scale" />
  <Transformation effect="pixelate:3" />
  <Transformation effect="art:red_rock" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="dog.jpg" >
  <cld-transformation width="200" crop="scale" />
  <cld-transformation effect="pixelate:3" />
  <cld-transformation effect="art:red_rock" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="dog.jpg" >
  <cl-transformation width="200" crop="scale">
  </cl-transformation>
  <cl-transformation effect="pixelate:3">
  </cl-transformation>
  <cl-transformation effect="art:red_rock">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(200).Crop("scale").Chain()
  .Effect("pixelate:3").Chain()
  .Effect("art:red_rock")).BuildImageTag("dog.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .width(200).crop("scale").chain()
  .effect("pixelate:3").chain()
  .effect("art:red_rock")).generate("dog.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(200).setCrop("scale").chain()
  .setEffect("pixelate:3").chain()
  .setEffect("art:red_rock")).generate("dog.jpg")!, cloudinary: cloudinary)
original image Original pixelate effect Pixelate effect pixelate + red_rock filter effects Pixelate + red_rock filter

  • on condition: Different types of filters may be appropriate for different subject matter. Some are better for outdoors, some for inanimate objects, and so on. Consider using conditions in your transformation to apply a particular filter only for images with a particular tag. For example, the URL below applies the bright-day effect of the peacock filter only if the image has nature in it’s tag set:
    Ruby:
    Copy to clipboard
    cl_image_tag("sandbox.jpg", :transformation=>[
      {:if=>"!nature!_in_tags", :height=>160, :width=>240, :effect=>"art:peacock", :crop=>"fill"},
      {:if=>"else", :height=>400, :width=>600, :crop=>"fill"}
      ])
    PHP:
    Copy to clipboard
    cl_image_tag("sandbox.jpg", array("transformation"=>array(
      array("if"=>"!nature!_in_tags", "height"=>160, "width"=>240, "effect"=>"art:peacock", "crop"=>"fill"),
      array("if"=>"else", "height"=>400, "width"=>600, "crop"=>"fill")
      )))
    Python:
    Copy to clipboard
    CloudinaryImage("sandbox.jpg").image(transformation=[
      {'if': "!nature!_in_tags", 'height': 160, 'width': 240, 'effect': "art:peacock", 'crop': "fill"},
      {'if': "else", 'height': 400, 'width': 600, 'crop': "fill"}
      ])
    Node.js:
    Copy to clipboard
    cloudinary.image("sandbox.jpg", {transformation: [
      {if: "!nature!_in_tags", height: 160, width: 240, effect: "art:peacock", crop: "fill"},
      {if: "else", height: 400, width: 600, crop: "fill"}
      ]})
    Java:
    Copy to clipboard
    cloudinary.url().transformation(new Transformation()
      .if("!nature!_in_tags").height(160).width(240).effect("art:peacock").crop("fill").chain()
      .if("else").height(400).width(600).crop("fill")).imageTag("sandbox.jpg");
    JS:
    Copy to clipboard
    cloudinary.imageTag('sandbox.jpg', {transformation: [
      {if: "!nature!_in_tags", height: 160, width: 240, effect: "art:peacock", crop: "fill"},
      {if: "else", height: 400, width: 600, crop: "fill"}
      ]}).toHtml();
    jQuery:
    Copy to clipboard
    $.cloudinary.image("sandbox.jpg", {transformation: [
      {if: "!nature!_in_tags", height: 160, width: 240, effect: "art:peacock", crop: "fill"},
      {if: "else", height: 400, width: 600, crop: "fill"}
      ]})
    React:
    Copy to clipboard
    <Image publicId="sandbox.jpg" >
      <Transformation if="!nature!_in_tags" height="160" width="240" effect="art:peacock" crop="fill" />
      <Transformation if="else" height="400" width="600" crop="fill" />
    </Image>
    Vue.js:
    Copy to clipboard
    <cld-image publicId="sandbox.jpg" >
      <cld-transformation if="!nature!_in_tags" height="160" width="240" effect="art:peacock" crop="fill" />
      <cld-transformation if="else" height="400" width="600" crop="fill" />
    </cld-image>
    Angular:
    Copy to clipboard
    <cl-image public-id="sandbox.jpg" >
      <cl-transformation if="!nature!_in_tags" height="160" width="240" effect="art:peacock" crop="fill">
      </cl-transformation>
      <cl-transformation if="else" height="400" width="600" crop="fill">
      </cl-transformation>
    </cl-image>
    .Net:
    Copy to clipboard
    cloudinary.Api.UrlImgUp.Transform(new Transformation()
      .If("!nature!_in_tags").Height(160).Width(240).Effect("art:peacock").Crop("fill").Chain()
      .If("else").Height(400).Width(600).Crop("fill")).BuildImageTag("sandbox.jpg")
    Android:
    Copy to clipboard
    MediaManager.get().url().transformation(new Transformation()
      .if("!nature!_in_tags").height(160).width(240).effect("art:peacock").crop("fill").chain()
      .if("else").height(400).width(600).crop("fill")).generate("sandbox.jpg");
    iOS:
    Copy to clipboard
    imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
      .setIf("!nature!_in_tags").setHeight(160).setWidth(240).setEffect("art:peacock").setCrop("fill").chain()
      .setIf("else").setHeight(400).setWidth(600).setCrop("fill")).generate("sandbox.jpg")!, cloudinary: cloudinary)
    sandbox


    The sandbox image has the nature tag, so the peacock filter is applied, but if you use the exact same transformation for the partners_table.jpg image, it is not. You could of course add several if components to cover a number of different tags and corresponding filters to apply.

    Note: For the purposes of the above example, the two conditions also use different dimensions so that it's easy to see which condition was applied to each one.

What’s in a name?

After having seen and experimented with our list of filters, maybe you are wondering where those names came from and what each one is good for? Like most photo filters available out there, our filter names have a variety of origins. And filters tend to have different impacts on different content, so there are no hard and fast rules. But below, we share a bit of background on some of the names and where they might come in handy.

In the monochrome family, we decided to name our sharp black and white filter after Audrey Hepburn, while the more fuzzy gray-toned filter is named for Louis-Jacques-Mandé Daguerre (1787 - 1851), inventor of the daguerreotype process of photography. On the other hand, incognito gives you a dark monochrome with a mysterious, subtle purplish tone.

For cooler colors, primavera (meaning ‘spring’ in many romance languages) gives a high contrast, blue-sky effect to your nature scenes. Peacock adds a bright blue tint with a high exposure that can brighten your outdoor shots, but may make people look slightly pale. Eucalyptus, not surprisingly, has a light green touch, which gives grass and trees a healthy look. Try linen for a crisp, clean feel, or frost for modern images and inanimate objects.

When you want to go for warmth, athena, the Greek goddess of arts and literature, and daughter of sun god, Zeus, can make almost any day look yellow and sunny. Or maybe you want to give your pictures a pinkish tone and the gentle spotlight effect of aurora, named for the polar light seen in arctic regions. If you are looking for a warm retro feel with a soft purple-pink hue, consider fes (a Moroccan city). Or perhaps go for a nostalgic faded look with hokusai, named for the Japanese artist who painted in that style.

Well, you get the idea. You’ll really have to play with them all to decide what’s best for your photos. But if you are not sure, do keep in mind that according to the study mentioned above, filters that increase warmth, exposure, and contrast seem to boost views and comments.

Now it’s your turn

You’ve read how the right filter can increase user engagement, and you now know that all it takes to apply filters to your photos is a simple e_art transformation. Letting your users express their own personality with the photos they upload to your site or app is just as easy. You’ve had a chance to toy around with the filters on our sandbox photos. Now it’s time to let your creativity run wild on your own images.

The artistic filters, along with many other upload and manipulation features, are available with all of Cloudinary’s plans including the free plan.

We invite you to comment below to tell us your favorite filters and to share your unique ideas for combining them with other features.

Recent Blog Posts

A New, Simple Tool for Creating Text Overlays for Images

Many Cloudinary users desire a UI for tasks like creating text overlays for images, which they then embed on webpages or download for marketing campaigns. Generating such overlays with the Cloudinary Media Library UI involves a bit of a learning curve, especially if they require multiple fonts or text lines, which even experienced users might find challenging to implement.

Read more
Transitioning JPEG-Based to JPEG XL-Based Images for Web Platforms

When the JPEG codec was being developed in the late 1980s, no standardized, lossy image-compression formats existed. JPEG became ready at exactly the right time in 1992, when the World Wide Web and digital cameras were about to become a thing. The introduction of HTML’s <img> tag in 1995 ensured the recognition of JPEG as the web format—at least for photographs. During the 1990s, digital cameras replaced analog ones and, given the limited memory capacities of that era, JPEG became the standard format for photography, especially for consumer-grade cameras.

Read more

Amplify Your Jamstack With Video

By Alex Patterson
Amplify Your Jamstack With Cloudinary Video

As defined by Amazon Web Services (AWS), Amplify is a set of products and tools with which mobile and front-end web developers can build and deploy AWS-powered, secure, and scalable full-stack apps. Also, you can efficiently configure their back ends, connect them to your app with just a few lines of code, and deploy static web apps in only three steps. Historically, because of their performance issues, managing images and videos is a daunting challenge for developers. Even though you can easily load media to an S3 bucket with AWS Amplify, transforming, compressing, and responsively delivering them is labor intensive and time consuming.

Read more
Cloudinary Helps Move James Hardie’s Experience Online

While COVID has affected most businesses, it has been particularly hard on those that sell products for the physical ‘brick and mortar’ world. One company that literally fits that bill is our Australian customer James Hardie, the largest global manufacturer of fibre cement products used in both domestic and commercial construction. These are materials that its buyers ideally want to see up close, in detail. When customers have questions, they expect personal service.

Read more