Cloudinary examples for applying effects to your images

11th of July, 2012

So yesterday I blogged about the basic functionality about Cloudinary, but there are so much more than scaling images that you can do.

examples from Cloudinary’s own blog.

Mojolicious::Plugin::Cloudinary, but you can also use the Cloudinary module directly if you are not inside a mojo template.


You can apply a variety of effects to your images using the “effect” argument to cloudinary_image() or url_for(). Here is the original image:

%= cloudinary_image 'horses.jpg'; # no effects
Original image

The following examples modify the color saturation of the image. A negative saturation value will reduce saturation and a positive will increase it:

%= cloudinary_image 'horses.jpg', { effect => 'saturation:-70' }
%= cloudinary_image 'horses.jpg', { effect => 'saturation:70' }
With saturation:-70 effect
With saturation:70 effect

You can also change the brightness or apply an sepia effect:

%= cloudinary_image 'horses.jpg', { effect => 'brightness:-50' }
%= cloudinary_image 'horses.jpg', { effect => 'sepia:50' }
With brightness:-50 effect
With sepia:50 effect

They even added an “oil-paint” effect.

%= cloudinary_image 'horses.jpg', { effect => 'oil_paint' }
With oil_paint effect

Chained Transformations

Cloudinary also provide other transformations and they can all be chained. Here is an example with Arianna Huffington’s Facebok profile picture:

%= cloudinary_image 'AriannaHuffington.png', { type => 'facebook' }
%= cloudinary_image 'AriannaHuffington.png', { type => 'facebook', width => 150, height => 150, crop => 'thumb', gravity => 'face', radius => 20, effect => 'sepia' }
Chained effects

as shown in the Cloudinary blog. (Will either take pull request or implement it on request).

Tweaking a web site’s color scheme

Cloudinary provides the “hue” effect to change the color scheme of an image. This can be quite useful when you tweak the CSS color scheme and don’t want to jump into gimp or photoshop to make changes to the background image or other assets included in your design.

This example use the background image from the Cloudinary web site:

%= cloudinary_image 'site_bg.jpg';
%= cloudinary_image 'site_bg.jpg', { effect => 'hue:40' }
With hue:40 effect

Want to try out the module? Complete API is documented on metacpan: