Deliver the Perfect Image to Every User with Cloudinary

Holly Lloyd
๐Ÿ‘๏ธ 2,501 views
๐Ÿ’ฌ comments

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.

Cloudinary Home Page

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.

Table of Contents

    • 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:

    Cloudinary Person Face


    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:

    Cloudinary Face Crop

    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.

    Cloudinary Auto Crop

    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:


    Cloudinary Original Image

    Automatic quality optimization - 65.9 KB:


    Cloudinary Auto Quality

    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.

    Cloudinary Auto Format

    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.


    With these features, ย you can now upload one high resolution copy of any image and then automatically adapt the image, in real-time, to focus on the most important region of the image, select optimal quality and encoding settings and responsively deliver the image on any device in any resolution or pixel density.

    Be sure to sign up for a free account and explore all that Cloudinary has to offer.

    This post is sponsored by Cloudinary through Syndicate.

    This content is sponsored via Syndicate Ads

    Holly Lloyd

    13 posts

    I go to algorithms anonymous.