Cloudinary Blog

Automatic cloud-based image improvements and effects

Do you like to show your photos exactly as they were taken or do you usually tweak them a little to get that extra punch? What about applying artistic filters before sharing them with your friends and family? 
 
Just a few years ago, almost all photos were displayed and shared as-is. Image manipulations and improvements were left to the Photoshop experts. Then came the more user-friendly desktop apps, like Picasa, that allowed any user to easily improve their photos. A single click on the "I'm feeling lucky" button would instantly make a photo pop, and if the result wasn't satisfactory, you could have always played with the intuitive image adjustment controls.
 
With the rising adoption of smartphone based cameras, we experienced an explosion of photo taking & sharing mobile apps such as Instagram. With a single touch, users can now enhance the colors of their photos, apply artistic filter effects that match their taste and mood, and add fancy looking frames. The photos such users share with the world are eye-catching, and with the right personal touch - look very professional. 
 
Even if you prefer your photos to be as realistic as possible and perfectly match the captured scenes, you'll probably agree that the more amateur photographers amongst us can greatly benefit from gentle photo retouches, colors and lighting fixes. After all, people neglect to pay attention to their camera’s white balance settings, and not all cameras can perform equally well on different lighting situations.
 
In the comfort of your own home, you can manually retouch your images one by one. But how does this scale to your website or mobile app? When you have many visitors uploading their photos to your online service, how can you retouch these automatically?
 
In this blog post we wanted to introduce Cloudinary's image improvement filters and effects. With these new capabilities, you can now embed better looking images in your websites and mobile apps with ease. You can even mix and match multiple improvement filters together to create cool, "artistic" results.
 

A fully automated image improvement filter 

Take a look at left-most image below. This image was uploaded to Cloudinary, and doesn't look optimal. Applying Cloudinary's new cloud-based 'improve' effect (e_improve for URLs) will make it look much better, don't you think?
 
 
                         
 
     
The following Ruby on Rails code generates a transformation URL with the same 'improve' effect:
<%= cl_image_tag("orly.jpg", :crop => :scale, :width => 200, :effect => :improve) %>
Here's another example of the powerful impact of the 'improve' effect:
 
 
     
 
 
You can simply set the 'effect' parameter to 'improve' and most images and thumbnails on your website would automatically look much better. Here's a PHP code for reaching the same result.
<?php echo cl_image_tag("gray_mountain.jpg",
     array("width" => 300, "crop" => "scale", "effect" => "improve")); ?>
 

Automatic color, brightness and contrast balancing

The 'improve' effect gives you a powerful improvement filter. Occasionally though, you may want to fine-tune your image tweaking. To do that, Cloudinary offers granular filters you can use individually or combined, to create customized effects.
 
Automatic contrast balancing is available by setting the 'effect' parameter to 'auto_contrast' (or e_auto_contrast for URLs). The following example shows the uploaded image before and after contrast balancing.
 
 
     
 
Two additional effects are automatic color balancing and brightness balancing. You can apply them by setting the 'effect' parameter to 'auto_color' or 'auto_brightness' (e_auto_color or e_auto_brightness for URLs).
 
The following example shows the impact of applying both 'auto_color' and 'auto_brightness' on an uploaded image:
 
 
     
Same example in Django:
cloudinary.CloudinaryImage("nice_beach.jpg").image(transformation = 
  [dict(width=300, crop="scale"), dict(effect="auto_color"), 
   dict(effect="auto_brightness")])
 

Fill light strengthening 

Brightness level adjustment is very useful to fix dark images. However, on certain scenarios, you might encounter images that have both bright and dark sections. In this case simply increasing the brightness might overexpose the brighter areas of the image.
 
The new fill-light effect can be used to fix this exact scenario. The following example increases the fill light by setting the 'effect' parameter to 'fill_light' (e_fill_light for URLs).
 
 
     
   
Same example in .NET:
cloudinary.Api.UrlImgUp.Transform(
  new CloudinaryDotNet.Transformation().Width(300).Crop("scale").Effect("fill_light")).
    BuildImageTag("street.jpg");

"Artistic" filters 

Cloudinary's set of automatic image improvement filters, together with its custom filters and effects, allows you to easily generate 'cool' chained effects that should match your taste and graphic requirements.
 
The following example applies multiple transformations to reach a unique, custom filter. It applies the auto improve effect, increases sharpness level, reduces the red levels and increases the blues. It also increases brightness, adds a gradient fade effect, rounds the image’s corners and adds a wide border. All done via a simple URL. Isn't that cool?
 
 
                        
   
If you don't want to embed such long URLs in your website, you can always define a named transformation instead. For example, we defined a transformation named 'sample_artistic' that applies all the above effects. Simply add t_simple_artitistic your code and all images will be automatically modified accordingly. Here's a much shorter URL that generates the same result:
 
 
You can also use Cloudinary's overlays, underlays, opacity changes and text layers to dynamically and automatically create cool results, like the one below, for any uploaded image:
 
 
 
 

Summary 

Do you work on a site or app that allows you or your users to upload images? Using Cloudinary and a tiny transformation URL change, you can have your site's images look much more vibrant and professional and make your visitors happier.
 
You can always use Cloudinary's face detection based cropping to focus on the relevant parts of the photo. Now you can also improve your images, make them look more vivid and balanced. With Cloudinary you can also easily change your mind and modify the default filters being applied. With just one more change to your URLs and all your images will be dynamically recreated for you with the updated filters, delivered optimized through a fast CDN.
 
If you don't have a Cloudinary account yet, you can sign up now for free.

Recent Blog Posts

ImageCon17: Delivering Responsive Images

By Jason Grigsby

After five years many specifications, some inflamed Twitter battles and other conversations, responsive images have finally landed and there's a sound. Which is really exciting right? People have been climbing for this for quite some time and we've reached a point where they're available in modern browsers. So people were excited, they wanted to go use them it's something that designers and developers have had as a point of frustration for a long time.

Read more
Auto padding images with content-aware color padding

How you present the content of your website can be just as important as the content itself. The images you display need to conform to the graphic design of your site, and every image needs to fit within a predefined size. Although that may be simple enough to achieve when you are dealing with your own images, the task can be more challenging when displaying images uploaded by your users.

Read more

Bounce! Hacking Jazzfest with Social Videos

By Eric Normand
Bounce! Hacking Jazzfest with Social Videos

Last week, I was invited to an exclusive hackathon to build apps for musicians. The app team I was assigned to was tasked with building a video upload site for Bounce videos. Bounce is a style of music that originated in New Orleans. The app would be called BounceDotCom.com and there were plans to have Big Freedia, the Queen of Bounce, promote it. I knew the organizer could make things happen, so I jumped at the chance.

Read more
Getting a Better React-ion with Progressive Web Apps

This is part 2 of a 3 part series

React has become more popular, as well as more mature, over the last four years since its release by Facebook. It has become one of the go-to technologies for people looking to componentize the front-end of any web application. It also helps that an entire mobile stack is built around React in the form of ReactNative. The components are wonderful, however there can be a burdensome learning curve. But, in the end, there’s the payoff of highly reusable code and a better user experience.

Read more
Build an Image Library with React & Cloudinary

This article was originally posted on Scotch.io

React is a good tool when it comes to building flexible and reusable UI components. However, it's "one of those libraries" that cannot handle all the tasks involved in building a full fleshed UI project. Other supporting tools - such as a recently announced React SDK from Cloudinary - are available to provide solutions that the React core cannot.

Read more
Getting Started with Vue JS: The Progressive JavaScript Framework

The most challenging aspect of building a product with a front-end framework is focusing on the complexity of the tool rather than the complexity of the actual problem being solved. It’s perhaps more frustrating when the tool is complex but the problem is a simple one (e.g. complex webpack config for a todo app). The term progressive, is used by Vue.js to describe how this challenge can be mitigated. Building a basic demo or small app? Vue.js is simple enough to handle that. How about a complex enterprise app? Vue.js is capable of produce cutting-edge solutions, as well.

Read more