Pixelate an image or a region

Apply a pixelization effect to an image by setting the effect parameter to pixelate (e_pixelate in URLs). You can choose to pixelate the whole image or just a certain region of the image, and the size of the squares is customizable.

Here's an original image fetched on-the-fly from a public remote HTTP URL at Wikimedia Commons:

Ruby:
cl_image_tag("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg", :type=>"fetch")
PHP:
cl_image_tag("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg", array("type"=>"fetch"))
Python:
CloudinaryImage("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg").image(type="fetch")
Node.js:
cloudinary.image("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg", {type: "fetch"})
Java:
cloudinary.url().type("fetch").imageTag("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg")
jQuery:
$.cloudinary.image("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg", {type: "fetch"})
.Net:
cloudinary.Api.UrlImgUp.Type("fetch").BuildImageTag("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg")
Original

Using the pixelate effect to apply pixelization on the whole image:

Ruby:
cl_image_tag("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg", :effect=>"pixelate", :type=>"fetch")
PHP:
cl_image_tag("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg", array("effect"=>"pixelate", "type"=>"fetch"))
Python:
CloudinaryImage("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg").image(effect="pixelate", type="fetch")
Node.js:
cloudinary.image("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg", {effect: "pixelate", type: "fetch"})
Java:
cloudinary.url().transformation(new Transformation().effect("pixelate")).type("fetch").imageTag("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg")
jQuery:
$.cloudinary.image("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg", {effect: "pixelate", type: "fetch"})
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("pixelate")).Type("fetch").BuildImageTag("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg")
Pixeling an image

Control the effect’s intensity by specifying the size of the pixelization squares (numeric value, in pixels). In the following example, we applied the pixelate effect using 10 pixel blocks on the image:

Ruby:
cl_image_tag("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg", :effect=>"pixelate:10", :type=>"fetch")
PHP:
cl_image_tag("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg", array("effect"=>"pixelate:10", "type"=>"fetch"))
Python:
CloudinaryImage("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg").image(effect="pixelate:10", type="fetch")
Node.js:
cloudinary.image("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg", {effect: "pixelate:10", type: "fetch"})
Java:
cloudinary.url().transformation(new Transformation().effect("pixelate:10")).type("fetch").imageTag("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg")
jQuery:
$.cloudinary.image("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg", {effect: "pixelate:10", type: "fetch"})
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("pixelate:10")).Type("fetch").BuildImageTag("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg")
Custom squares size

You can also blur only a certain region of the image based on the position (x, y) and dimensions (width and height) of the region by using the pixelate_region effect. This technique can be used to pixelate only the car's license plates in the following example:

Ruby:
cl_image_tag("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg", :effect=>"pixelate_region", :height=>80, :width=>200, :x=>170, :y=>260, :crop=>"fill", :type=>"fetch")
PHP:
cl_image_tag("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg", array("effect"=>"pixelate_region", "height"=>80, "width"=>200, "x"=>170, "y"=>260, "crop"=>"fill", "type"=>"fetch"))
Python:
CloudinaryImage("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg").image(effect="pixelate_region", height=80, width=200, x=170, y=260, crop="fill", type="fetch")
Node.js:
cloudinary.image("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg", {effect: "pixelate_region", height: 80, width: 200, x: 170, y: 260, crop: "fill", type: "fetch"})
Java:
cloudinary.url().transformation(new Transformation().effect("pixelate_region").height(80).width(200).x(170).y(260).crop("fill")).type("fetch").imageTag("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg")
jQuery:
$.cloudinary.image("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg", {effect: "pixelate_region", height: 80, width: 200, x: 170, y: 260, crop: "fill", type: "fetch"})
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("pixelate_region").Height(80).Width(200).X(170).Y(260).Crop("fill")).Type("fetch").BuildImageTag("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg")
Pixeling a region

The pixelate_region effect also supports customizing the squares' size, this time we'll make them bigger:

Ruby:
cl_image_tag("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg", :effect=>"pixelate_region:30", :height=>80, :width=>200, :x=>170, :y=>260, :crop=>"fill", :type=>"fetch")
PHP:
cl_image_tag("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg", array("effect"=>"pixelate_region:30", "height"=>80, "width"=>200, "x"=>170, "y"=>260, "crop"=>"fill", "type"=>"fetch"))
Python:
CloudinaryImage("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg").image(effect="pixelate_region:30", height=80, width=200, x=170, y=260, crop="fill", type="fetch")
Node.js:
cloudinary.image("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg", {effect: "pixelate_region:30", height: 80, width: 200, x: 170, y: 260, crop: "fill", type: "fetch"})
Java:
cloudinary.url().transformation(new Transformation().effect("pixelate_region:30").height(80).width(200).x(170).y(260).crop("fill")).type("fetch").imageTag("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg")
jQuery:
$.cloudinary.image("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg", {effect: "pixelate_region:30", height: 80, width: 200, x: 170, y: 260, crop: "fill", type: "fetch"})
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("pixelate_region:30").Height(80).Width(200).X(170).Y(260).Crop("fill")).Type("fetch").BuildImageTag("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg")
Pixeling a region

With the pixelate effect you can create nice looking effects, for example:

Ruby:
cl_image_tag("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg", :type=>"fetch", :transformation=>[
  {:angle=>45},
  {:effect=>"pixelate:10"},
  {:angle=>-45},
  {:effect=>"trim"},
  {:width=>0.9, :crop=>"crop"}
  ])
PHP:
cl_image_tag("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg", array("type"=>"fetch", "transformation"=>array(
  array("angle"=>45),
  array("effect"=>"pixelate:10"),
  array("angle"=>-45),
  array("effect"=>"trim"),
  array("width"=>0.9, "crop"=>"crop")
  )))
Python:
CloudinaryImage("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg").image(type="fetch", transformation=[
  {"angle": 45},
  {"effect": "pixelate:10"},
  {"angle": -45},
  {"effect": "trim"},
  {"width": 0.9, "crop": "crop"}
  ])
Node.js:
cloudinary.image("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg", {type: "fetch", transformation: [
  {angle: 45},
  {effect: "pixelate:10"},
  {angle: -45},
  {effect: "trim"},
  {width: 0.9, crop: "crop"}
  ]})
Java:
cloudinary.url().transformation(new Transformation()
  .angle(45).chain()
  .effect("pixelate:10").chain()
  .angle(-45).chain()
  .effect("trim").chain()
  .width(0.9).crop("crop")).type("fetch").imageTag("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg")
jQuery:
$.cloudinary.image("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg", {type: "fetch", transformation: [
  {angle: 45},
  {effect: "pixelate:10"},
  {angle: -45},
  {effect: "trim"},
  {width: 0.9, crop: "crop"}
  ]})
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Angle(45).Chain()
  .Effect("pixelate:10").Chain()
  .Angle(-45).Chain()
  .Effect("trim").Chain()
  .Width(0.9).Crop("crop")).Type("fetch").BuildImageTag("http://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Austin_A110_Westminster_MkII_tail.jpg/550px-Austin_A110_Westminster_MkII_tail.jpg")
Nice Pixelate effect

by Itay Taragano