Cloudinary Blog

Help users 'toon' into your site with a cartoon effect

Increase engagement with on-the-fly cartoon effect

We all know that images attract interest and increase engagement, but with the huge overload of images out there, we sometimes need to get creative to stand out in the crowd. Your users who upload photos to your site or app may also be looking for those same creative opportunities. A quick look at the most popular social media apps and their continually increasing toolbox of special photo effects shows the increasing trend in popularity and demand for these fun ways of expressing one’s identity.

Cartoonifying a photo is one great way to accomplish this.

Graphic designers can manually apply a cartoon effect to photos using a combination of features in sophisticated graphics applications. There are also a variety of online applications where you can upload a photo and get a cartoon version (of varying quality) returned. But these manual methods don’t scale if you have many photos where you want to apply this effect. And offering this feature to your users for the content they upload to your site requires a complex algorithm.

Webinar
How to Optimize for Page Load Speed

In short, you need a simple way to apply cartoon effects programmatically.

Cloudinary’s image management solution includes a broad set of cloud-based image manipulation capabilities. The manipulation takes place on-the-fly when the dynamic image URLs are first accessed, and then they are immediately cached on CDN servers for even faster delivery.

The new cartoonify effect is yet another way that Cloudinary enables its customers to quickly, easily, and optimally deliver transformed photos that have just the right impact. With a single parameter and a couple optional attributes, you can give any image a unique cartoonified look and feel.

How does it work?

For a default cartoonify effect, it couldn’t be simpler! Just add the cartoonify parameter (e_cartoonify) to your image tag definition, and the original image gets cartoonified and delivered on-the-fly. Of-course you can also combine this cartoon effect with any other transformation your heart desires.

Original Original Cartoonified Cartoonified Cartoon and other transformations Cartoon and
other transformations

Here’s the transformation code for that last image, which takes advantage of the text overlay, placement gravity, radius, outline, and background color features, in addition to cartoonify:

Ruby:
Copy to clipboard
cl_image_tag("actor.jpg", :transformation=>[
  {:effect=>"cartoonify"},
  {:radius=>"max"},
  {:effect=>"outline:100", :color=>"lightblue"},
  {:background=>"lightblue"},
  {:overlay=>{:font_family=>"times", :font_size=>120, :text=>"James%20Stewart"}, :gravity=>"south_east", :y=>30, :angle=>315}
  ])
PHP v1:
Copy to clipboard
cl_image_tag("actor.jpg", array("transformation"=>array(
  array("effect"=>"cartoonify"),
  array("radius"=>"max"),
  array("effect"=>"outline:100", "color"=>"lightblue"),
  array("background"=>"lightblue"),
  array("overlay"=>array("font_family"=>"times", "font_size"=>120, "text"=>"James%20Stewart"), "gravity"=>"south_east", "y"=>30, "angle"=>315)
  )))
PHP v2:
Copy to clipboard
(new ImageTag('actor.jpg'))
  ->effect(Effect::cartoonify())
  ->roundCorners(RoundCorners::max())
  ->effect(Effect::outline()->width(100)->color(Color::LIGHTBLUE))
  ->backgroundColor(Color::LIGHTBLUE)
  ->overlay(
      Overlay::source(Source::text('James Stewart', (new TextStyle('times', 120)))
        ->transformation((new ImageTransformation())
          ->rotate(Rotate::byAngle(315))))
      ->position((new Position())
        ->gravity(Gravity::compass(Compass::southEast()))
        ->offsetY(30)
  ));
Python:
Copy to clipboard
CloudinaryImage("actor.jpg").image(transformation=[
  {'effect': "cartoonify"},
  {'radius': "max"},
  {'effect': "outline:100", 'color': "lightblue"},
  {'background': "lightblue"},
  {'overlay': {'font_family': "times", 'font_size': 120, 'text': "James%20Stewart"}, 'gravity': "south_east", 'y': 30, 'angle': 315}
  ])
Node.js:
Copy to clipboard
cloudinary.image("actor.jpg", {transformation: [
  {effect: "cartoonify"},
  {radius: "max"},
  {effect: "outline:100", color: "lightblue"},
  {background: "lightblue"},
  {overlay: {font_family: "times", font_size: 120, text: "James%20Stewart"}, gravity: "south_east", y: 30, angle: 315}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .effect("cartoonify").chain()
  .radius("max").chain()
  .effect("outline:100").color("lightblue").chain()
  .background("lightblue").chain()
  .overlay(new TextLayer().fontFamily("times").fontSize(120).text("James%20Stewart")).gravity("south_east").y(30).angle(315)).imageTag("actor.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('actor.jpg', {transformation: [
  {effect: "cartoonify"},
  {radius: "max"},
  {effect: "outline:100", color: "lightblue"},
  {background: "lightblue"},
  {overlay: new cloudinary.TextLayer().fontFamily("times").fontSize(120).text("James%20Stewart"), gravity: "south_east", y: 30, angle: 315}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("actor.jpg", {transformation: [
  {effect: "cartoonify"},
  {radius: "max"},
  {effect: "outline:100", color: "lightblue"},
  {background: "lightblue"},
  {overlay: new cloudinary.TextLayer().fontFamily("times").fontSize(120).text("James%20Stewart"), gravity: "south_east", y: 30, angle: 315}
  ]})
React:
Copy to clipboard
<Image publicId="actor.jpg" >
  <Transformation effect="cartoonify" />
  <Transformation radius="max" />
  <Transformation effect="outline:100" color="lightblue" />
  <Transformation background="lightblue" />
  <Transformation overlay={{fontFamily: "times", fontSize: 120, text: "James%20Stewart"}} gravity="south_east" y="30" angle="315" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="actor.jpg" >
  <cld-transformation effect="cartoonify" />
  <cld-transformation radius="max" />
  <cld-transformation effect="outline:100" color="lightblue" />
  <cld-transformation background="lightblue" />
  <cld-transformation :overlay="{fontFamily: 'times', fontSize: 120, text: 'James%20Stewart'}" gravity="south_east" y="30" angle="315" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="actor.jpg" >
  <cl-transformation effect="cartoonify">
  </cl-transformation>
  <cl-transformation radius="max">
  </cl-transformation>
  <cl-transformation effect="outline:100" color="lightblue">
  </cl-transformation>
  <cl-transformation background="lightblue">
  </cl-transformation>
  <cl-transformation overlay="text:times_120:James%20Stewart" gravity="south_east" y="30" angle="315">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Effect("cartoonify").Chain()
  .Radius("max").Chain()
  .Effect("outline:100").Color("lightblue").Chain()
  .Background("lightblue").Chain()
  .Overlay(new TextLayer().FontFamily("times").FontSize(120).Text("James%20Stewart")).Gravity("south_east").Y(30).Angle(315)).BuildImageTag("actor.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .effect("cartoonify").chain()
  .radius("max").chain()
  .effect("outline:100").color("lightblue").chain()
  .background("lightblue").chain()
  .overlay(new TextLayer().fontFamily("times").fontSize(120).text("James%20Stewart")).gravity("south_east").y(30).angle(315)).generate("actor.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setEffect("cartoonify").chain()
  .setRadius("max").chain()
  .setEffect("outline:100").setColor("lightblue").chain()
  .setBackground("lightblue").chain()
  .setOverlay("text:times_120:James%20Stewart").setGravity("south_east").setY(30).setAngle(315)).generate("actor.jpg")!, cloudinary: cloudinary)

For more details on all the available transformations, see the image transformation guide and reference.

For added control on your cartoonified image, you can adjust the line strength of the black outlines and the color reduction impact. (As you increase the color_reduction value, and thus decrease the number of colors in the image, the image also gets a higher saturation boost, and a few other adjustments, all leading to a less realistic look).

For example, the following images show the original image, compared to cartoonified versions with different adjustments in line strength and color reduction.

Original Original

Above average line thickness, below average color reduction Above average line thickness, below average color reduction

Below average line thickness, above average color reduction Below average line thickness, above average color reduction

And here’s what your code would look like for the last cartoonified car:

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

Oh, and you can also choose to generate a black and white cartoon if that suits your fancy.

Original Above average line thickness, below average color reduction

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

Details for all of the above can be found in the effect parameter section of the image transformation reference.

Your turn to toon

Looks like fun, doesn’t it? Want to try it yourself?

Click one of the images below or    Upload an image

dog guitarist beach flowers golden gate

Adjust line strength: APPLY     Adjust color reduction: APPLY
* Enter values between 1-100. For black and white, enter 'bw' in color reduction.    

Th...th...th...that’s all folks!

Yes, it’s that simple: one parameter added to your delivery URL or passed on as an option to your users when they upload their profile pics or other images, and the required cartoonification algorithms are automatically applied to the photo.

And don’t forget that cartoon-like images are more than just another cool effect. Cartoonified images can help capture an audience, and they may be more memorable to your users among the plethora of regular photos in every web page on the net.

Additionally, when used in the appropriate context, cartoonified images may be able to express an intended tone, emotion, or personality better than the original photo. And according to marketing consultant, Marcia Hoeck, emotion is (not surprisingly) better at triggering the circuits in the brain that activate behavior and decisions than logic is.

You now know how simple it can be to programmatically cartoonify any image with Cloudinary. And you can do it with any Cloudinary account, including a free one.

So the next time you are looking for just the right creative image that will get your users to tune into your message, consider 'tooning it.

Recent Blog Posts

Creating an API With Python Flask to Upload Files to Cloudinary

Code

Cloudinary offers SDKs for many programming languages and frameworks. Even though it also offers an Upload API endpoint for both back-end and front-end code, most developers find the SDKs very helpful. If you're working with a powerful back-end framework like Python Flask, you'll be happy to hear that a Python SDK is now available.
This tutorial walks you through the process of building an API to upload images to Cloudinary. You can also upload other file types, including video and even nonmedia files, with the API.

Read more
How to Use the Cloudinary Media Editor Widget

At Cloudinary, we manage the entire pipeline of media assets for thousands of customers of varying sizes from numerous verticals.

As part of our commitment to support the entire flow of media assets, we are now introducing an intuitive media editing widget: an out­-of­-the-­box, interactive UI providing your users with a set of common image editing actions for immediate use on your website or web app. The widget is interactive and simple, built on Cloudinary's transformation capabilities, and requiring only a few lines of code to integrate. Afterwards, you can seamlessly and effortlessly add content to your site or app with no need for in-house image editing capabilities.

Read more
Shoppable Video Is Becoming Popular in E-Commerce

As pandemic restrictions necessitated, many shopping trips in 2020 took place outside the traditional brick-and-mortar store, or at least void of the physical aisle-browsing experience. Same-day curbside pickup became a safe and convenient alternative, and e-commerce transactions skyrocketed as consumers shopped online. In fact, Digital Commerce 360 estimates that, compared to 2019, e-commerce transactions grew by more than 40% last year.

Read more
Enhance Your Travel Site With Cloudinary in Anticipation of a Return to New Normal

Read more
The Benefits of Headless DAMs

Headless is not a buzzword anymore. In fact, the concept of headless architecture is gaining momentum due to the flexibility it offers for composing new experiences and for tackling the undue complexity of an ever-evolving technology stack. That’s because while the evolution of the martech landscape has enabled disruptive, digital innovations, the approach of buying point solutions for solving specific challenges can expose companies to the complicated nature of new technologies, systems, and platforms.

Read more