Cloudinary Blog http://cloudinary.com/blog Cloudinary is a SaaS that takes the hassle out of managing your websites images. en-us 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.
]]> Nadav Soferman Wed, 12 Jun 2013 13:18:07 +0000 http://cloudinary.com/blog/automatic_cloud_based_image_improvements_and_effects http://cloudinary.com/blog/automatic_cloud_based_image_improvements_and_effects How to manage images in a fashion website Fashion outlets have evolved dramatically in the last decade. In the past, if you wanted to be on top of the latest fashion trends, you had to subscribe to all the latest magazines and every month wait for the mailman to drop them off. If you wanted to remember a certain outfit or designer, you could either dog ear the page ('bookmark') or cut out the model or design and literally pin it to your cork board.
 
Today, it's a whole new ball (game). After all, who would've thought that pinning things would become a term meant for virtual pinboards and the good old cork type would be long gone? 
 

Modern fashion websites (and apps)

Fashion is no longer just about glossy magazines, it's about websites, apps and virtual stores. These fashion sites are incredibly image rich and media packed. No longer will the common visitor be satisfied with one image per article. They now expect an image from every angle, the option to change colors, to see it on a model and on the rack, to turn it around 360 degrees and don't get me started on designing your own one-of-a-kind article. Every fashion website now also needs all these images adapted not only to your regular desktop computer, but also to smartphones and handheld devices and to look wonderful in each! Not stretched, not tiny, just right. 
 
These new demands from the fashion consumers require a better image infrastructure. The website developers now need more than just a CMS, and being able to support their images becomes a real issue now. Every image needs to be uploaded, normalized, retouched, watermarked, cropped to many different sizes and aspect ratios, fit all viewing devices at all angles, it's exhausting! These images also need to be optimized and available to users all over the world, quickly. After all, you don’t want your viewers to waste valuable time waiting for all these images to load.
 
That ends up being quite a headache for the developer, and this is where Cloudinary comes in. 
 
   

Image management done right

Whenever images are involved, Cloudinary can dramatically cut the development and IT time and save all the headaches. 
 
With Cloudinary you can easily upload images to the cloud. Automatically perform smart image resizing, cropping (including face detection based cropping), merging, overlay, watermark, apply effects, rotations, format conversions, without installing any complex software. Using Cloudinary you can now upload a single high resolution image and ask Cloudinary to automatically scale it down according to the medium used.
 
Consider for example the following sample dress images. These thumbnails were automatically generated by Cloudinary:
 
w_100
w_50,h_50,c_fill
e_hue:40
e_hue:100,e_brightness:30
a_20,e_hue:20
Watermark overlay
 
 
 
 
 
 
 
 
 
All your images are then seamlessly delivered through a fast CDN, optimized and using industry best practices. Cloudinary offers comprehensive APIs and administration capabilities and is easy to integrate with new and existing web and mobile applications. 
 

How might a fashion website benefit from Cloudinary? 

Take a classic photo laden fashion site. All the product photos need to be high end. By uploading these photos directly to Cloudinary, they are not only safely stored and backed up in the cloud, they are also ready to be transformed on the fly and placed seamlessly on the website exactly as the graphics designer intended.
 
Did the graphics designer envision a thumbnail of different aspect ratio than the original image? Just tell Cloudinary to crop it to the required aspect ratio. It's as simple as changing your image's URL. Want your brand's watermarked on all your photos? Cloudinary will easily add it for you.
 
What about the mobile version of your website? Cloudinary can resize all your images and reduce their quality just a notch so that your mobile users will get the best viewing experience possible and won’t waste precious bandwidth and time when browsing your online site. Same goes for your native apps, and this all happens on-the-fly.
 
Modern fashion sites offer a more social experience. Do you allow your users to upload and share their own images? These photos are uploaded in all sorts of types, different formats and sizes. Cloudinary will normalize all these images for you - same type, same dimensions, same effects. Cloudinary can even fetch your user's profile images from Facebook and Twitter. 
 
Now you can spend your time on your core proposition and avoid image-related headaches.
 

Who uses Cloudinary in the fashion world?

Below are a two examples of companies in the fashion vertical that use Cloudinary's expertise to create the best user experience possible: 
 
 
 
Stylight allows users to create their own mood boards with their own outfit photos, favourite songs, videos and items from a selection of over 500.000 products available on the site. Users can share their mood boards with others in the community and gain inspiration from other users.
Stylight is one of the first fashion communities to have a revenue model that works internationally. Stylight uses Cloudinary to manage all of their images.
 
 
oBaz (short for online bazaar) is an ecommerce and content platform where brands and bloggers can connect to help people discover new products, trends and sales. 
Fashion bloggers use oBaz as a simple platform to write about favorite trends and build a following from an engaged and relevant audience. Brands use oBaz for direct sales while gaining access to shoppers and influential bloggers.
oBaz's media rich website leverages Cloudinary for their image management.  
 

What now?

So what do you think? Worth a try? Head over to Cloudinary and sign up to our free plan. Within minutes you can get going!
 
Got other great uses for Cloudnary? We would love to hear your ideas in the comment thread below! 
 
]]> Orly Bogler Tue, 04 Jun 2013 12:52:08 +0000 http://cloudinary.com/blog/how_to_manage_images_in_a_fashion_website http://cloudinary.com/blog/how_to_manage_images_in_a_fashion_website Webhooks, upload notifications and background image processing Web applications and web APIs are usually programmed to perform requests in a synchronous manner. A common web-based access flow will start with a requester accessing a remote service. The remote service in turn will process the request and quickly return the result. 
 
But sometimes a web application will need to perform actions asynchronously in the background. 
 
Consider, for example, a computing intensive web request. Such a request might take a very long time to finish. UI wise, you might not want your users to actively wait so long for this command to finish. Technically, such a long running HTTP request might even time-out completely. 
 
In this case, you will probably want to employ a different access flow. In this flow, when the requester accesses the remote service, the remote service will return immediately with a 'pending' result. The remote service will then continue to perform the action in the background. Finally, when the remote service is finished, it will notify the requester that the required action was completed. 
 
The same concepts apply to Cloudinary's image management APIs. 
 
So far, Cloudinarys APIs were synchronous. For example, if you wanted an image transformed, you would have to wait synchronously until the transformation was finished.
 
In this blog post we wanted to introduce Cloudinary's new notifications and background processing capabilities that further extend the image management solution available when using Cloudinary.
 

Webhooks and upload notifications

Many mobile and web applications upload images and files to Cloudinary. Such uploading can be performed either from these services' backend or directly from their users' browsers or mobile applications. In such cases you might want to make sure your server is notified when an upload is completed. 
 
You can do that by setting the notification_url parameter of Cloudinary's upload API to any valid HTTP (or HTTPS) public URL.
 
For example, in PHP:
$result = \Cloudinary\Uploader::upload("sample.jpg", 
   array("notification_url" => "http://mysite/my_notification_endpoint"));
When the upload is completed, an HTTP POST request will be sent to the notification URL you provided. The post data will contain all upload result details as returned by our upload API (public ID, URLs, image dimensions, semantic data if requested and more). The request will also contain a signature of the sent data so you can verify the sender.
 
Here's a sample POST request with a JSON of the upload result:
POST /my_notification_endpoint HTTP/1.1
X-Cld-Timestamp: 1368881627
X-Cld-Signature: 29a383e289bc569310a8ca9899019a3167b4909e
Content-Type: application/json

{"public_id":"djhoeaqcynvogt9xzbn9","version":1368881626,"width":864,"height":576,"format":"jpg","resource_type":"image","created_at":"2013-05-18T12:53:46Z","bytes":120253,"type":"upload","url":"http://res.cloudinary.com/1233456ab/image/upload/v1368881626/djhoeaqcynvogt9xzbn9.jpg","secure_url":"https://cloudinary-a.akamaihd.net/1233456ab/image/upload/v1368881626/djhoeaqcynvogt9xzbn9.jpg"}
By the way, you can use RequestBin to test notifications received during development.
 
The signature is calculated as follows:     
SHA1-Hex-Digest("{data}{timestamp}{api_secret}")
Your server application can use this notification to update your model and database regarding the uploaded images or to cleanup unused uploaded files.
 
Here's another example in Ruby on Rails for generating a file input field that performs direct uploading from the browser using a jQuery plugin.
<%= cl_image_upload_tag(:picture, 
      :notification_url => "http://mysite/my_notification_endpoint") %>

Eager transformations in the background

By default, when you access Cloudinary delivery URLs, transformed images are generated dynamically if they don't already exist, according to the transformation parameters. You can also use Cloudinary's eager transformations, in which case multiple transformed versions of an image are created eagerly while uploading so they are ready for fast delivery even for the first download request.
 
Sometimes, you might need to create a single time consuming transformation or many eager transformations of an uploaded image. Creating such transformations might take seconds, especially if the original image is very large. In such cases, you probably don't want your user to wait for the process to complete. 
 
Using Cloudinary's asynchronous eager transformations, you can now define multiple eager transformations while uploading. The upload request will return immediately, the transformations will be performed in the background by Cloudinary and you will get notified (if you want) when the transformations are ready.
 
You can enable asynchronous eager transformations by setting the new eager_async upload API parameter to true. In addition, you can set the optional eager_notification_url to receive an HTTP POST request when the transformation generation is completed.
 
The following example in Python (or Django) creates multiple transformations eagerly in the background.
cloudinary.uploader.upload("sample.jpg", 
   eager=[dict(crop="fill", width="150", height="100"), 
          dict(effect="sepia", width="0.5", crop="scale")], 
   eager_async=True, eager_notification_url="http://mysite/my_notification_endpoint")
Here's an example of how the notification post request might look like:
POST /my_notification_endpoint HTTP/1.1
X-Cld-Timestamp: 1368883736
X-Cld-Signature: 09ef8c16f6e0ff85f5345d4813973de8f746448d
Content-Type: application/json

{"batch_id":"c0ed79e610f0636d15a1353a0a866933","notification_type":"eager","eager":[{"width":150,"height":100,"url":"http://res.cloudinary.com/1233456ab/image/upload/c_fill,h_100,w_150/v1368883730/noapoaq60varndxnh2or.jpg","secure_url":"https://cloudinary-a.akamaihd.net/1233456ab/image/upload/c_fill,h_100,w_150/v1368883730/noapoaq60varndxnh2or.jpg"},{"width":432,"height":288,"url":"http://res.cloudinary.com/1233456ab/image/upload/c_scale,e_sepia,w_0.5/v1368883730/noapoaq60varndxnh2or.jpg","secure_url":"https://cloudinary-a.akamaihd.net/1233456ab/image/upload/c_scale,e_sepia,w_0.5/v1368883730/noapoaq60varndxnh2or.jpg"}]}


Background sprites, animated GIFs and PDFs handling 

Cloudinary supports generating sprites: merging multiple images into a single large image for a more efficient browser loading using a generated dynamic CSS. 
 
Sometimes you might want to merge tens or even hundreds of images into a single sprite. 
 
Cloudinary's image manipulation are fast and efficient, but transforming and merging so many images might take more that your API client request can wait. In this case an HTTP request timeout might occur.
 
You can now tell Cloudinary to perform such sprite generations in the background by setting the async API parameter to true. In addition, you can set the notification_url parameter for receiving a webhook request when the process is completed (as explained above).
 
The following Ruby example requests for a sprite generation to be performed in the background:
Cloudinary::Uploader.generate_sprite("faces", :width => 150, :height => 100, 
   :crop => :fill, :async => true, 
   :notification_url => "http://mysite/my_notification_endpoint")
 => {"status"=>"processing", "batch_id"=>"163a919cde8f9317d6ee0fbfe6375dc4"} 
The API returns immediately with the response below while the later notification will include the final generated sprite details:
POST /my_notification_endpoint HTTP/1.1
X-Cld-Timestamp: 1368882586
X-Cld-Signature: d91bccba5f1bb38905fc6a9284914e8959fb4a7b
Content-Type: application/json

{"batch_id":"f97c6bf03074d9641f1a9c9b6bcebef7","css_url":"http://res.cloudinary.com/1233456ab/image/sprite/c_fill,h_100,w_150/v1368882583/faces.css","image_url":"http://res.cloudinary.com/1233456ab/image/sprite/c_fill,h_100,w_150/v1368882583/faces.png","secure_css_url":"https://cloudinary-a.akamaihd.net/1233456ab/image/sprite/c_fill,h_100,w_150/v1368882583/faces.css","json_url":"http://res.cloudinary.com/1233456ab/image/sprite/c_fill,h_100,w_150/v1368882583/faces.json","version":1368882583,"image_infos":{"face_center_eer8ss":{"width":150,"height":100,"x":0,"y":0},"face_left_b7ikxf":{"width":150,"height":100,"x":152,"y":0},"face_top_usjwvk":{"width":150,"height":100,"x":0,"y":102},"front_face_cywiib":{"width":150,"height":100,"x":152,"y":102}},"notification_type":"sprite"}
You can now create an animated GIF or a multi-page PDF document in a similar fashion. 
 
You can also "explode" a PDF in the background into multiple separated images representing all of its pages. All this is done using Cloudinary's 'multi' and 'explode' methods by setting the async parameter to true and optionally setting a notification_url. Here are some examples in Ruby:
Cloudinary::Uploader.multi("faces", :format => 'gif', :width => 150, :height => 100, 
   :crop => :scale, :async => true, 
   :notification_url => "http://mysite/my_notification_endpoint")
Cloudinary::Uploader.explode("multi_page_pdf", :format => 'png', :width => 200, 
   :height => 300, :crop => :scale, :page => :all, :async => true, 
   :notification_url => "http://mysite/my_notification_endpoint")

Summary 

As always, our goal with Cloudinary is to solve all of your web and mobile app's image management and image manipulation aspects for you and let you focus on your core business logic.
 
As a developer, you are probably familiar with the complexities involved in managing background processing and push notifications yourself. We believe that Cloudinary’s new webhooks and the ability to perform computing intensive image manipulations asynchronously in the background will prove as very useful tools in your image management tool-belt.
 
We're anxious to hear your feedback about these new features. Make sure you drop us a line in the comment thread below!
 
]]> Tal Lev-Ami Tue, 21 May 2013 09:06:20 +0000 http://cloudinary.com/blog/webhooks_upload_notifications_and_background_image_processing http://cloudinary.com/blog/webhooks_upload_notifications_and_background_image_processing How Mediavine handled image load in a 50M+ page-views Rails site
 
We are often asked to share our customer stories with the rest of the Cloudinary community. Whether it's for learning about others experiences managing images with Cloudinary, or just to reaffirm Cloudinary's solution - we love to hear your stories and we're happy to share them.
 
Today, we wanted to introduce you to Mediavine Inc., one of the largest online entertainment networks on the web, and how they utilized Cloudinary to solve their image management needs.
 
 

The customer

Mediavine, Inc. owns and operates some of the web's largest entertainment and lifestyle properties. Mediavine's network of sites include:

       TV Fanatic
     
        Movie Fanatic
         
       Food Fanatic
         

 
 
 
 
 
 
 
 
 
Combined, these websites garner a traffic of nearly 50 million page views a month. 
As modern media outlets go, Mediavine's websites are incredibly image rich. 
 

The challenge

Mediavine's sites run on a custom Ruby on Rails CMS hosted on Heroku. Like many other Rails sites, they started off using the Carrierwave and mini_magick gems to handle their image needs. 
 
However, as their page views and image processing needs grew, they quickly ran into performance problems. 
 
"No matter how much we optimized image uploads - including moving all version processing to background workers - uploading several high resolution files was just not going to be possible through the dyno manifold." Says Eric Hochberger, founder and head of development at Mediavine. "We knew we needed to go directly to our image store, S3. We looked into rolling out our own solutions, such as carrierwave_direct, but they were far too complex after way too many hours of struggling. And they would still require additional image processing!"
 
 
 

The solution

We asked Eric if he could share his experience with Cloudinary: 
 
"With Cloudinary we got direct upload to the cloud working within minutes. But it didn't just stop there. Cloudinary solved our timeout issue, while greatly speeding up our uploading process, thanks to its easy-to-implement javascript upload." Eric said.
 
"Cloudinary did more than that though. It helped us solve problems we had previously never thought were fixable," Eric added. "Scaling animated gifs worked perfectly without any of our previous imagemagick glitches. As for face detection we thought only the geniuses at Facebook could possess?  Yeah. We have it now. Full ITPC data?  Just try getting that out of mini_magick. Now we can pull locations out of images."
 
What about the integration with Cloudinary? "This all came in ridiculously easy fashion. Really, when it comes to any headaches with dealing with images, Cloudinary has solved them all. Its URLs even solve CDN cache busting. Working with Cloudinary's gem and carrierwave implementation has been a programmer's dream."
 

Recommendation

"It's rare when you can outsource a problem and save money but somehow Cloudinary managed to do that." says Eric. "We were able to knock our direct image hosting costs in half from S3/CloudFront, thanks to Cloudinary's generous pricing and optimization. Even better, we were able to significantly reduce Heroku usage, courtesy of seriously reducing worker dynos with outsourcing thumbnail and version generation. Talk about a win-win."
 
"Even if you have a 'working' solution," continues Eric, "we promise Cloudinary will do it better. Don't worry if you have to migrate from an existing system. They even come with code to help you do that. We had our hundreds of thousands of images migrated in less than an hour. And thanks to the fact they support carrierwave, we had minimal code changes."
 
 

Final words

We were very impressed by just how fast Mediavine managed to wrap their heads around the Cloudinary service, migrate their images and complete the full integration. 
 
We are extremely excited to have Mediavine using Cloudinary, and wanted to thank Eric for taking the time and sharing his experience.
 
Cloudinary users - let us know if you want to share your own unique experience using Cloudinary. We'd love to feature your services here and we're sure that all of Cloudinary's customers will find your insights helpful.
 
]]> Itai Lahan Wed, 01 May 2013 12:26:48 +0000 http://cloudinary.com/blog/how_mediavine_handled_image_load_in_a_50m_page_views_rails_site http://cloudinary.com/blog/how_mediavine_handled_image_load_in_a_50m_page_views_rails_site A story about production systems, Rails, monitoring and off-hour notifications Cloudinary's image management service is used by thousands of world-wide websites and mobile apps. For many of our clients, Cloudinary has become a central, mission-critical component used for managing image uploads, transformations and delivery.
 
This is why we've built Cloudinary from the ground up to be a very robust service. We put a lot of emphasis on availability, scalability and support and we take our users' confidence in us extremely seriously.
 
So far, we've been quite satisfied with our ability to keep Cloudinary at an average of > 99.99% uptime.
 
However, on April 4th, the Cloudinary service experienced outages for a few hours. We wanted to explain what happened, our conclusions and the steps we've taken to make sure this won’t happen again.
 

The upgrade

Cloudinary's core service is built with Ruby on Rails. The service is tested thoroughly and upgrades are handled with uttermost care. This is why we've preferred to stay with Rails v3.0 for a long time rather than rock the boat with an upgrade to the latest Rails 3.2.
 
A few weeks ago a security vulnerability was discovered in Rails. As always, we wanted to apply the security fix as soon as possible. However, the Rails team stopped releasing fixes for Rails 3.0. We had to upgrade to v3.2.
 
We've upgraded to Rails 3.2 in our lab and modified our code to support it (Rails upgrades tend to be non backward compatible and break code built with previous versions). We've tested our code extensively and verified that our thousands of unit tests passed correctly. We've successfully finished a thorough manual QA of the system in our staging environment. It all went quite smoothly.
 
We scheduled the upgrade for April 4th. As usual, we deployed the system gradually to all of our production servers. Deployment went smoothly as well. We performed additional sanity testing after the system was deployed and closely monitored the system during the working day.
 
We went to sleep happy and relaxed.
 

The issues

At about 1am at night things started to shake.
 
Apparently, Rails 3.2 changed the defaults of one simple configuration parameter - response caching was turned on by default when certain cache headers are returned.
 
As a result, after long hours of service requests, the local application disk for some of our servers became full due to the cached responses. This caused certain requests that required disk space to fail, depending on the exact request and the size of the response.
 
Annoyingly enough, the automatic monitoring service that regularly verifies our APIs, was performing a request that required very little disk space and continued to operate regularly. This service is configured to send notifications to our engineering team's mobile phones during the night. But since no errors were detected, no notification was sent.
 
Fortunately for us, our co-founder's toddler woke him up early in the morning. He naturally (?) checked his inbox, understood that something was very wrong. He quickly cleared the disk space and modified Rails 3.2 cache settings. The system was fully working again.
 
It's important to note that during these ~5 hours, all existing images and transformed images were delivered successfully to users through our delivery service and tens of thousands of worldwide CDN edges (Akamai + CloudFront). Still, part of the upload API calls did fail during this time and we are very sorry for this.
 

Going forward

Naturally, we've immediately started to improve our outage prevention mechanisms.
 
We've added additional disk space tests to our QA list and added abnormal disk usage monitoring to our urgent notification service. We're also adding a wider set of API requests to our automatic service monitoring.
 
We've integrated with Twilio to enhance our off-hour notifications. Specifically, our engineering team will now receive automatic voice calls to their mobile phones in addition to our previous notification methods.
 
To make sure we keep you in the know during outages, we've pushed up the priority of a public status page. This page will include automatic monitoring details as well as human written notes.
 

Summary & conclusions 

We are happy that Cloudinary had nearly zero availability issues in almost 2 years of operations. On the other hand, no online service is perfect and every service experienced or will experience outages. 
 
We will continue to enhance our service with additional image-related features. On the same time, we'll continue to work hard on having Cloudinary's uptime as close to 100% as possible.
 
Thank you for trusting us with your images!
]]> Nadav Soferman Thu, 25 Apr 2013 10:19:53 +0000 http://cloudinary.com/blog/a_story_about_production_systems_rails_monitoring_and_off_hour_notifications http://cloudinary.com/blog/a_story_about_production_systems_rails_monitoring_and_off_hour_notifications Windows Azure add-on for cloud-based image management Call us prejudice, but as a hardcore Linux guys, the name Microsoft always caused us to flinch a little. That was our initial reaction when we were approached by the Azure team. We have been integrating Cloudinary with many PaaS providers to make our platform as accessible as possible, and Azure actually made perfect sense. Still, we were a bit hesitant at first as we never considered Microsoft a leading player in the world of rapid web & mobile development. 
 
As you may have figured out, we were very impressed by Microsoft's Windows Azure cloud platform and the great team behind it. The Windows Azure platform boasts powerful built-in support for modern development frameworks popular among both enterprises and small startup companies. You can deploy your web and mobile applications in Azure's class using PHP, Python & Django, Node.js, Java and of course .NET.
 
 
 
 
With this in mind - we are very excited to announce Cloudinary's add-on for the Windows Azure cloud platform.
 

What does Windows Azure offer? 

Azure is a PaaS that offers cloud-based deployment and hosting for your web-based applications. Azure also offers virtual machines for running your apps, a hosted & managed SQL database, cloud-based storage and more. All of this is smoothly integrated with visual studio and can be managed via a powerful web interface.
 
Last but not least, the Windows Azure Store offers plenty of add-ons to enhance your applications.
 

What do we get when using Cloudinary as an Azure Add-on?

Cloudinary's Azure add-on allows you to easily upload your web application images to the cloud. Your images are stored on a safe and highlighly available location with automatic backups and historical revisions.
 
Once on Cloudinary, you can manipulate and transform your images in the cloud to match your graphic design: resize, crop, alter shape, apply effects, add watermarks and more without installing any software on your side. All your images are automatically optimized and delivered to your website visitors through a fast, world-wide CDN with advanced content caching.
 
Cloudinary is easy to integrate with and offers open-source client integration libraries for your PHP, Python & Django, Node.js, Java and .NET applications.
 
You can register to your Cloudinary account from within the Azure portal using just a few clicks. Registration and integration is free and you can upgrade to a paid plan once your application gains traction and requires larger resource quotas.
 
 
 
 
If you want to see how easy to use and how powerful Cloudinary is, check out this integration guide. 
 
So whether you are a Microsoft fan or just looking for a great cloud service provider, you should take time to check out Windows Azure. Once there, if you need a cloud-based solution for image uploading, storage, manipulation, optimization and delivery, make sure you add Cloudinary to your list of add-ons.
 
]]> Nadav Soferman Tue, 23 Apr 2013 10:40:59 +0000 http://cloudinary.com/blog/windows_azure_add_on_for_cloud_based_image_management http://cloudinary.com/blog/windows_azure_add_on_for_cloud_based_image_management 10 Startup companies that manage their images in the cloud - Part 2 As Cloudinary continues to grow, the number of companies using Cloudinary to manage their images grows with us. Each company has its own unique product and utilizes Cloudinary in a different, fascinating way. In this post, we wanted to introduce you to several cool startup companies, and with them, the many different ways that Cloudinary’s services can be used. 
 
In the spirit of making a tradition out of it, we present Cloudinary's "10 Startup companies that manage their images in the cloud" - Part 2. (click here for Part 1).
 
 
 
JustGo Music is a social music newspaper and content syndication platform launched in the fast growing electronic dance music industry for fans and pros alike. JustGo Music's media rich website leverages Cloudinary for embedding Facebook profile pictures of your favorite artists.
 
 
Tint helps you build web pages made up of all your social website images, feeds and hashtags. All the images shown in Tintup's widgets are fetched by Cloudinary from every available social network. Cloudinary then optimizes and deliver the images to Tintup's viewers.
 
 
Milkster is a crowd-curated catalog of remarkable lifestyle products from around the world and across the web. Milkster utilizes Cloudinary to upload, manipulate and deliver all of these great images.
 
 
Givey 
Givey is a Social Donation Platform that makes giving to the causes you care about effortless. 
Givey makes sharing, caring and charity in general, easy by connecting people that care about similar causes and allowing to donate to those charities.
 
 
Apartable provides personalized apartment matching and recommendations to renters, suggesting relevant apartments and giving them all the information they need to make an informed decision. All the apartment images, there to give you a better idea of what you're heading in to, are managed by Cloudinary. 
 
 
SunnyBump helps new parents discover, curate, share, & buy the best baby products on the market today. With the help of parents who've been there before and the industry experts who know, SunnyBump helps find all the baby products around. 
 
 
Tunezy 
Tunezy is a social platform for the recorded music industry, which creates a platform where fans and musicians can build experiences together. Tunezy utilizes Cloudinary to streamline their image management needs. 
 
 
Toogethr  
Toogethr is an online and mobile transportation service that lets you make best use of social networks. Toogethr's mission is to make mobility affordable, sustainable and social, by optimizing the billions of empty car seats in this world, and building a door-to-door rideshare network.
 
 
Not a startup per-se, SeeYourImpact is a non-for-profit that offers a revolutionary method to help those in need by a way of gift giving. These gifts will go on to change people's lives. Following the donation, a photo and story is sent over to the gift donor showing his impact on the world. The photo, and all other images on site, are delivered via Cloudinary. 
 
 
Roomz 
Roomz goal, as its name implies, is to help find the best roommate for you. A roommate that loves your flat, furniture, dog, cat and goldfish. Roomz is a platform to connect people looking to share cold pasta and cheesy 80's movies in a great apartment. Cloudinary is here to deliver all the images involved, so you'll know exactly where you're headed, what bedroom you're going get and how your potential roommate looks like first thing in the morning.
 
 
As you can imagine, it was difficult to choose only 10 companies, but we tried to keep the fields of interest varied and to show as many different integration methods with Cloudinary. We hope to continue with this tradition, so if you're not on this list and would like to be - drop us a line! We would be happy to include you in the next one, and to thank you for using our services of course. 
 
]]> Orly Bogler Wed, 10 Apr 2013 11:13:34 +0000 http://cloudinary.com/blog/10_startup_companies_that_manage_their_images_in_the_cloud_part_2 http://cloudinary.com/blog/10_startup_companies_that_manage_their_images_in_the_cloud_part_2 Automatic image sharpening and blurring in the cloud Images. Your web (or mobile) application is probably filled to the brim with images. You might be surprised at just how much impact these images have on your visitors. From their graphical appeal to their size and access times - these images determine your visitors browsing experience and ultimately their conversion to repeating visitors and paying clients.
 
Now, while your graphic designer has created a cool graphical concept, many of the images you need to embed inside it are not in your direct control. Social websites contain profile photos uploaded by their users. E-commerce solutions contain many product photos that can't be edited one at a time. Media outlets contain many photographs of different consistency.
 
Having a tool in your belt that offers automatic tweaks and retouches for all these images is quite handy. Here a couple of things you can do with Cloudinary that can really improve your website.

Image sharpening

How can you make your website "pop"? it's easy if you control the exact content across your web application - a great graphics design can make wonders. But what can we do to improve user uploaded images? 
 
Let's look look at the following image uploaded to Cloudinary:
  
 
The photo looks good. But just take a look at what a bit of sharpness can do to it. 
You can add sharpness by setting the effect transformation parameter to sharpen (or e_sharpen for URLs):
 
 
 
Here's the same example in Rails:
<%= cl_image_tag("front_face.jpg", :effect => "sharpen") %>
You can control the strength of the sharpen effect to match your taste. Here's a more intense sharpening of the same image by setting the sharpen level to 300. Quite a nice photographic effect.
 
 

 
Same example in PHP:
<?php echo cl_image_tag("front_face.jpg", array("effect" => "sharpen:300")) ?>
Sharpening is also useful in making text elements in thumbnails clearer. For example, the following screenshot was uploaded to Cloudinary. As you can see the small gray text snippets are not so clear here.
 
 
 
 
Sharpening such an screenshot would make the text more readable. The following example sharpened this image. This time using the unsharp_mask effect that is similar to sharpen but uses a different algorithm. Much more readable:
 
 
 
 
Same example in Django:
img = cloudinary.CloudinaryImage("front_face.jpg")
img.image(effect="unsharp_mask")

Image blurring

Image sharpening is useful for improving images and making them "pop". But sometimes you would want to aim for the opposite effect. Quora, for example, is using dynamically created blurred snippets of text if you're browsing an answer while being logged out. How can you do that using Cloudinary?
 
To blur images, you can use Cloudinary's blur effect (e_blur for URLs). Here's an example: 
 
 
 
 
You can also make the blurring more intense by passing a numeric level. The following example applies the blur effect with a 400 intensity on the sample image:
 
 
 
In the following example, we blurred the image intensely and also reduced its opacity. Then we added a text overlay that calls users to sign up to your site if they want to view the full content:
 
 
 
Sample example in Rails:
<%= cl_image_tag("front_face.jpg", 
                 :overlay => "text:bold_dark:Sign up to see more",
                 :gravity => :center,  
                 :transformation => {:effect => "blur:500", :opacity => 50}) %>
Sometimes you want to blur only a certain region of an image. You can use the blur_region effect together with exact coordinates specified by x, y, width and height parameters. Here's an example that blurs only part of an uploaded screenshot:
 
 
 
Same example in Node.js:
cloudinary.image("front_face.jpg", { effect: "blur_region", x: 0, y: 0.5, w: 1.0 });
You can also automatically blur all faces detected in an image using Cloudinary's blur_faces. In the following example the face was automatically detected and blurred using the default level:
 
 
 
Same example in .NET:
string url = cloudinary.Api.UrlImgUp.Transform(
  new CloudinaryDotNet.Transformation().Effect("blur_faces")).BuildUrl("front_face.jpg");


Summary

Automatic image sharpening and blurring can do wonders to a website. For static assets, you can do that manually using your favorite image manipulation software. With Cloudinary such effects can be automatically applied to millions of user-uploaded images with ease. And if you decide to spruce up the graphical effects in your site's images, you can simply modify the transformation parameters in your development framework of choice. All images will be regenerated on the fly using the updated effect and will be served to your users optimized through a fast CDN.
 
It would be great if you try out the new filters and tell us when you think. If you don't have a Cloudinary account yet, you can create one for free.
 
]]> Nadav Soferman Wed, 20 Mar 2013 10:25:03 +0000 http://cloudinary.com/blog/automatic_image_sharpening_and_blurring_in_the_cloud http://cloudinary.com/blog/automatic_image_sharpening_and_blurring_in_the_cloud Cloud-based media library management for Web and mobile applications Can your users upload their own images to your web or mobile application? What about your content partners - do they upload their images directly to your service? 
 
We frequently hear complaints that as the service owner, you don't get enough visibility into the images uploaded to your service. In this blog post, we wanted to help you change that.
 
At Cloudinary, we aim at covering all image-related tasks required when developing websites and mobile applications. Specifically, Cloudinary offers an end-to-end solution to your main image management pipeline - image uploads, storage, manipulation, and delivery. 
 
In the past year, we've put a lot of emphasis on enhancing Cloudinary's APIs with a thorough set of manipulations, transformations and effects capabilities. Lately, we've been buffing up the online media management capabilities of Cloudinary.
 

Your online media Library 

Once images are uploaded to Cloudinary, they are first provided with a safe and secure online storage location. Once there, we tried to offer a better visibility and better manageability to your website’s growing online media library.
 
In this blog post we wanted to introduce you to Cloudinary's new cloud-based Media Library and image transformations management UI. Some highlights:
  • Easily browse through all of your websites images. 
  • View detailed image information.
  • Manually upload multiple local or remote files.
  • Assign tags to images and select images to be deleted.
  • Interactively apply any desired image transformation.
  • Define powerful cloud-based image transformations and name them for future reuse.
 

Media library browsing 

If you ever visited Cloudinary's dashboard, you probably saw the overall statistics views - total number of images, derived images and transformations, storage and bandwidth usage charts, etc.
 
 
Now you can also easily navigate through all of your images, view automatically generated thumbnails, search images by their name (public ID) or assigned tags. 
 
 

Manual image uploading 

You can use our new cloud-based media library for manually uploading images. You can drag & drop or select multiple files. 
 
 
Our advanced uploading menu also allows you to define custom public IDs for uploaded images, assign one or more tags for later referencing them by and perform uploading from a remote HTTP URL instead of from your desktop machine.
 
 
 
By the way - this uploading interface was implemented using Cloudinary's jQuery plugin.  You too can use our jQuery plugin in your web application to create a great looking image upload form that allows direct uploading from the browser to Cloudinary, support drag & drop, multiple images uploading, progress indications and more.
 

Visual transformation generation

Clicking on an image will get you to our new visual transformation page. From here, you can interactively apply any desired cloud-based image manipulation supported by Cloudinary: resize, crop, detect faces, round corners, rotate, apply effects, modify opacity, add border, add a watermark and more. An easy to use visual interface lets you generate Cloudinary's CDN-based transformation URLs and see a live preview of the result.
 
  

Transformation management

With our new Transformations console, you can browse through all the transformations dynamically generated by your website or mobile application. Click a transformation to view a live sample preview and apply further fine tuning.
 
 
 
You can also use the new user interface to apply any advanced transformation options supported by Cloudinary. You can chain multiple transformations together to reach more complex results and add one or more overlays and underlays. After you’ve finished designing the transformation that best matches your graphics design requirements, you can assign it with a short name for easily re-using it in your web and mobile applications.
 
 

Summary

We are very excited about the new media library and transformation management UI. We hope you like it too and find it a useful tool for easily managing your website’s cloud-based images. 
 
As always, we have many future plans down the road for our cloud-based media library management - view powerful insights and reports, seamless CMS integration, code sample generation, pre-defined set of useful transformations, and more. Stay tuned for updates.
 
As always, we would appreciate any feedback or comment you have regarding the new media library. Try it out and tell us what you think? If you don't have a Cloudinary account yet, click here to create a free account.
]]> Nadav Soferman Tue, 12 Mar 2013 13:54:51 +0000 http://cloudinary.com/blog/cloud_based_media_library_management_for_web_and_mobile_applications http://cloudinary.com/blog/cloud_based_media_library_management_for_web_and_mobile_applications Announcing new support portal, knowledge base and community forums Since its inception, one of Cloudinary's main pillars was to always be there for our customers. Every question you ever asked us helped us better understand what image solutions are most important to you. Every support request helped us find and fix gaps in our product and our documentation. Nearly every feature request we got was immediately given top priority and helped us shape Cloudinary into the service it is today. Without a doubt, we owe much of Cloudinary's success today to the amount of open communication we have going with our community.
 
We are extremely excited to see how fast our customer base extends and have decided to make it a priority to upgrade our support infrastructure as soon as possible. In addition to quick response, we wanted to offer a new, simpler ways of extending Cloudinary's combined knowledge base, offering a place where our community can quickly find answers to burning questions, a location where you can share your Cloudinary experience and best practices for the whole community to enjoy.
 
Without further ado, we're happy to announce our newest addition to Cloudinary - our new support portal.
 

The Knowledge Base

While brand new, we hope that our knowledge base will grow to give answers to many of your most urgent questions. Our knowledge base is detailed and broken down into topics, for easy browsing. There is also a quick search option to simplify the browsing even further. The knowledge base should cover anything from image uploading and transformations, client libraries and how to integrate with them, plans, billing and security to name a few. 
 
So far, we have done our best to punch in all the questions and answers that we have seen come up often, with easy to use solutions and explanations. These Q&A's always have room for improvement. For each question and answer there is an option to comment, ask a follow up question or clarification. 
 
 

Support Tickets  

If you can't find your answer in our knowledge base, just contact our support team. For any technical issues and queries you run into, large or small, we'll do our best to offer a quick advice. 
 
With our new ticketing system, you can insert all the details of your query and have a way to track it. You will be able to know at every moment what its status is, what team member is helping you and more. This will allow closer monitoring and promise faster responses and results.
 
 

Email & Chat Support 

Don't like forms? Just email us at support@cloudinary.com, it reaches the same ticketing system, only without the dropdown & fill-in form.
 
Do you prefer a more personal question & answer session? Just click the small Contact Us button at the bottom-right of your cloudinary.com browser window. If we're there, we'll be happy to chat, and if not - just leave a message and we'll get back to you asap.
 

Community Forums  

Do you have a feature request? Cloudinary usage tips & tricks you can share? Best practices and recommendations? Please head to our community forums and share your Cloudinary thoughts with the rest our community. This way everyone will be able to enjoy your insights!
 
Contemplating between different possible usage scenarios? Have burning questions you want to share with other developers like you? In our community forums you can share your thoughts with others just like you.
 

Outside Cloudinary 

Cloudinary's support team is also very active on other technical forums throughout the web. Any Cloudinary related question asked on Stack Overflow should get a quick answer, and we constantly monitor GitHub requests for anything related to Cloudinary's various open-source client integration libraries. 
 
Prefer social networking? We are always active on Twitter and Facebook, offering support and occasional tips and waiting to hear your feedback close and personal.
 

To Summarize

We are doing our best to make Cloudinary as simple and as effective to use as we possibly can. In time, we hope that our new support infrastructure will be a place that can both improve your Cloudinary experience and at the same time help us understand what's important to you, allowing us to continue building the best cloud-based image storage, management, manipulation and delivery platform available.
 
Let us know what you think - does the knowledge base answers your questions? Do you find our ticketing system easier to work with? Can our community forums offer solid advice? We would love to get your feedback!
 
]]> Orly Bogler Wed, 20 Feb 2013 13:32:29 +0000 http://cloudinary.com/blog/announcing_new_support_portal_knowledge_base_and_community_forums http://cloudinary.com/blog/announcing_new_support_portal_knowledge_base_and_community_forums