Deliver the Perfect Image to Every User with Cloudinary

Cloudinary makes delivering perfectly sized and cropped images easy.

What is Cloudinary?

Cloudinary has reinvented the way that media is managed online. It provides a comprehensive cloud-based image and video management solution used by web and mobile application developers at major companies around the world to streamline media management and deliver an optimal end user experience.

Main Features

• On-the-fly image and video manipulation
• Responsive image delivery
• Image optimization
• Digital asset management
• World-wide CDN network
• Image/video upload
• Cloud storage
• Robust management dashboard
• SDKs for popular development frameworks

New Features

We'll be taking a look at the new features Cloudinary has announced that make image manipulation and delivery so much simpler.

• Automatic content-aware cropping
• Intelligent content-aware encoding
• Dynamic format selection
• Automatic responsive images

Automatic Content-aware Cropping

One of the coolest new features includes content aware cropping. Cloudinary automatically detects the region of interest in every image and then crops them on the fly to fit the graphic design and layout, on any device, without losing focus on important content.
It's as easy as setting the gravity transformation parameter to auto.
Take the following url:

http://res.cloudinary.com/demo/image/upload/face_left.jpg

Here we're asking to simply return the uploaded image, face_left.jpg.
Now say we want to crop the image, we can set width and height to 200px and request an ordinary crop:

http://res.cloudinary.com/demo/image/upload/w_200,h_200,c_fill/face_left.jpg

Here we set crop equal to fill, which sets gravity to center by default, but as you can see her face is partially cut off. Let's set gravity to auto and see what happens.

http://res.cloudinary.com/demo/image/upload/w_200,h_200,c_fill,g_auto/face_left.jpg

And just like that, the addition of a single parameter allows us to intelligently crop any image we upload on the fly.
Here's another example

Intelligent Content-aware Encoding

Another problem we face with images is determining the trade-off between image quality and file size. Precise adjustment of compression level complemented by fine tuning of encoding settings can significantly reduce the file size without any noticeable degradation to the human eye. Using Cloudinary's quality transformation parameter, we can automate the file size versus quality trade-off decision based on the specific image content and format.
Cloudinary will deliver  the image with optimal compression and encoding settings, generally resulting in a huge reduction of file size without any noticeable difference in image quality.
Original upload - 569 KB:

http://res.cloudinary.com/demo/image/upload/woman.jpg

Automatic quality optimization - 65.9 KB:

http://res.cloudinary.com/demo/image/upload/q_auto:best/woman.jpg

Comparing the two images, we can see a significant decrease in file size while still maintaining the quality of the image, all done by adding a single parameter to the url.

Dynamic Format Selection

Another way to optimize our images is by utilizing Cloudinary's automatic format selection. This feature allows us to request the best image format based on the user's viewing browser. For instance, we can save bandwidth by delivering WebP images to Chrome users or JPEG-XR to Internet Explorer users, simply by setting fetch_format to auto.
For example, the following jpg image when scaled down to a width of 500 pixels is delivered as WebP to Chrome browsers at 22.4 KB, JPEG-XR to Internet Explorer browsers at 48 KB or delivered as a regular JPEG at 57.5 KB to browsers that don’t support either formats.

http://res.cloudinary.com/demo/image/upload/w_500,f_auto/sample.jpg

Automatic Responsive Images

Last but not least, we'll explore how Cloudinary handles the automatic delivery of responsive images. As developers, we have to make sure we consider the huge range of device screen resolutions that our app may be displayed on. A big problem a lot of us face is deciding what size image to serve depending on the screen size. One resolution just isn't going to cut it anymore.

Our next problem is that it's not always easy to decide just how many versions of the same image should be created.

Should you create 3 different versions of one image? Five? Ten? Cloudinary offers a way to intelligently generate the optimal image sizes for any image on your site. If can easily determine the cost/benefit of every size reduction and only create the number of images necessary. This can all be requested on the fly using just one url.