{"id":21198,"date":"2013-06-12T13:18:07","date_gmt":"2013-06-12T13:18:07","guid":{"rendered":"http:\/\/automatic_cloud_based_image_improvements_and_effects"},"modified":"2024-08-15T12:56:31","modified_gmt":"2024-08-15T19:56:31","slug":"automatic_cloud_based_image_improvements_and_effects","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/automatic_cloud_based_image_improvements_and_effects","title":{"rendered":"Automatic cloud-based image improvements and effects with Cloudinary"},"content":{"rendered":"
<\/div>\n
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? Just a few years ago, almost all photos were displayed and shared as-is. Image transformations\u00a0and improvements were left to the Photoshop experts. Then came the more user-friendly desktop apps, like Picasa and Instagram<\/strong>, that allowed any user to easily improve their photos.<\/a><\/div>\n
<\/div>\n
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?<\/div>\n
<\/div>\n
In this blog post we introduce Cloudinary’s image improvement filters and effects<\/strong>. With these new capabilities, you can now embed better looking images in your websites and mobile apps with ease.<\/div>\n
<\/div>\n

A fully automated image improvement filter<\/h3>\n
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<\/strong><\/span>‘ effect (e_improve<\/strong><\/span> for URLs) will make it look much better, don’t you think?<\/div>\n
<\/div>\n
https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_200,e_improve<\/span>\/orly.jpg<\/a><\/strong><\/div>\n
<\/div>\n

\"\"\u00a0 \u00a0 \u00a0\"\"<\/p>\n

<\/div>\n
<\/div>\n
The following Ruby on Rails code generates a transformation URL with the same ‘improve<\/strong><\/span>‘ effect:<\/div>\n
<%= cl_image_tag(\"orly.jpg\", :crop => :scale, :width => 200, :effect => :improve) %>\n<\/pre>\n
Here’s another example of the powerful impact of the ‘improve<\/strong>‘ effect:<\/div>\n
<\/div>\n
https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_300,e_improve<\/span>\/gray_mountain.jpg<\/a><\/strong><\/div>\n
<\/div>\n
\"\"\u00a0 \u00a0 \u00a0\"\"<\/div>\n
<\/div>\n
<\/div>\n
You can simply set the ‘effect<\/strong><\/span>‘ parameter to ‘improve<\/strong><\/span>‘ and most images and thumbnails on your website would automatically look much better. Here’s a PHP code for reaching the same result.<\/div>\n
<?php echo cl_image_tag(\"gray_mountain.jpg\",\n     array(\"width\" => 300, \"crop\" => \"scale\", \"effect\" => \"improve\")); ?>\n<\/pre>\n
<\/div>\n
Automatic color, brightness and contrast balancing<\/h3>\n
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.<\/div>\n
<\/div>\n
Automatic contrast balancing is available by setting the ‘effect<\/strong><\/span>‘ parameter to ‘auto_contrast<\/strong><\/span>‘ (or e_auto_contrast<\/strong><\/span> for URLs). The following example shows the uploaded image before and after contrast balancing.<\/div>\n
<\/div>\n
https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_300,e_auto_contrast<\/span>\/turtles.jpg<\/a><\/strong><\/div>\n
<\/div>\n
\"\"\u00a0 \u00a0 \u00a0\"\"<\/div>\n
<\/div>\n
Two additional effects are automatic color balancing and brightness balancing. You can apply them by setting the ‘effect<\/strong><\/span>‘ parameter to ‘auto_color<\/strong><\/span>‘ or ‘auto_brightness<\/strong><\/span>‘ (e_auto_color<\/strong><\/span> or e_auto_brightness<\/strong><\/span> for URLs).<\/div>\n
<\/div>\n
The following example shows the impact of applying both ‘auto_color’ and ‘auto_brightness’ on an uploaded image:<\/div>\n
<\/div>\n
…\/image\/upload\/e_auto_color<\/span>\/e_auto_brightness<\/span>\/nice_beach.jpg<\/a><\/strong><\/div>\n
<\/div>\n
\"\"\u00a0 \u00a0 \u00a0\"\"<\/div>\n
Same example in Django:<\/div>\n
cloudinary.CloudinaryImage(\"nice_beach.jpg\").image(transformation =\u00a0\n\u00a0 [dict(width=300, crop=\"scale\"), dict(effect=\"auto_color\"), \n   dict(effect=\"auto_brightness\")])\n<\/pre>\n
<\/div>\n
Fill light strengthening\u00a0<\/span><\/h3>\n
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.<\/div>\n
<\/div>\n
The new fill-light effect can be used to fix this exact scenario. The following example increases the fill light by setting the ‘effect<\/strong>‘ parameter to ‘fill_light<\/strong><\/span>‘ (e_fill_light<\/strong> for URLs).<\/div>\n
<\/div>\n
…\/image\/upload\/w_300,e_fill_light<\/span>\/street.jpg<\/a><\/strong><\/div>\n
<\/div>\n
\"\"\u00a0 \u00a0 \u00a0\"\"<\/div>\n
<\/div>\n
Same example in .NET:<\/div>\n
cloudinary.Api.UrlImgUp.Transform(\n\u00a0 new CloudinaryDotNet.Transformation().Width(300).Crop(\"scale\").Effect(\"fill_light\")).\n\u00a0 \u00a0 BuildImageTag(\"street.jpg\");<\/pre>\n
“Artistic” filters\u00a0<\/span><\/h3>\n
Cloudinary’s set of automatic image improvement filters, together with its custom filters and effects<\/a>, allows you to easily generate ‘cool’ chained effects that should match your taste and graphic requirements.<\/div>\n
<\/div>\n
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\u2019s corners and adds a wide border. All done via a simple URL. Isn’t that cool?<\/div>\n
<\/div>\n
…\/image\/upload\/e_improve\/e_sharpen\/e_red:-20\/e_blue:80\/e_brightness:30\/e_gradient_fade\/bo_5px_solid_rgb:505672,r_30\/orly.jpg<\/a><\/strong><\/div>\n
<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\"\"\u00a0 \u00a0 \u00a0\"\"<\/div>\n
<\/div>\n
If you don’t want to embed such long URLs in your website, you can always define a named transformation<\/strong> 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:<\/div>\n
<\/div>\n
…\/demo\/image\/upload\/t_sample_artistic<\/span>\/orly.jpg<\/a><\/strong><\/div>\n
<\/div>\n
You can also use Cloudinary’s overlays<\/a>, underlays, opacity changes<\/a> and text layers to dynamically and automatically create cool results, like the one below, for any uploaded image:<\/div>\n
<\/div>\n
<\/div>\n
\"\"<\/a><\/p>\n
<\/div>\n
<\/div>\n
Summary\u00a0<\/span><\/h3>\n
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.<\/div>\n
<\/div>\n
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.<\/div>\n
<\/div>\n
If you don’t have a Cloudinary account yet, you can sign up now for free<\/strong><\/a>.<\/div>\n
<\/div>\n
\n
Further Reading on Image Optimization<\/span><\/strong><\/p>\n