Cloudinary Blog

Top 10 Tips for Making Cloudinary Work Well for You

10 Tips for Making Cloudinary Work Well for You

Typically, with Cloudinary, you want to do two complementary things for a remarkable user experience: save bandwidth and load your site as fast as possible because the smaller the sizes of the resources, the faster your site loads. And it’s been proven time and again that the longer your site takes to load, the smaller the number of visitors who will return. No matter whether you’re a developer or content creator, you will find Cloudinary’s tools that optimize digital media (aka digital assets) simple, intuitive, and effective.

Below are 10 tips for using Cloudinary that are sure to reduce page-loading times and make your audience happy.

Tip 1: Generate Eager Transformations for Assets Before the Latter Are Requested for Access.

Whenever a transformation is requested for the first time, Cloudinary generates it on the fly. Compared to subsequent pre-generated and cached requests, that initial request always takes longer to fulfill. Plus, loading times depend on other factors, such as the original file size, the requested dimensions, and the applied effects. In light of all that, why not generate eager transformations ahead of time? Do that in either of these two ways:

  • In the Media Library with upload presets. Here, you specify the desired eager transformations in the upload call. A good practice is to turn on Eager Async to have the transformations occur in the background instead of as part of the upload call itself.

Eager Transformation

  • In the upload API. Here, you generate eager transformations with the upload method and, in the case of pre-existing resources, the explicit method. See this example:
Ruby:
Cloudinary::Uploader.upload("sample.jpg",
  :eager => [
    {:width => 400, :height => 300, :crop => :pad}, 
    {:width => 260, :height => 200, :crop => :crop, :gravity => :north}])
PHP:
\Cloudinary\Uploader::upload("sample.jpg", array( 
  "eager" => array(
    array("width" => 400, "height" => 300, "crop" => "pad"),
    array("width" => 260, "height" => 200, "crop" => "crop", "gravity" => "north"))));
Python:
cloudinary.uploader.upload("sample.jpg", 
  eager = [
    {"width": 400, "height": 300, "crop": "pad"},
    {"width": 260, "height": 200, "crop": "crop", "gravity": "north"}])
Node.js:
cloudinary.v2.uploader.upload("sample.jpg", 
  { eager: [
    { width: 400, height: 300, crop: "pad" }, 
    { width: 260, height: 200, crop: "crop", gravity: "north"} ]}, 
  function(error, result) {console.log(result, error); });
Java:
cloudinary.uploader().upload("sample.jpg", 
  ObjectUtils.asMap(
    "eager", Arrays.asList(
      new Transformation().width(400).height(300).crop("pad"),
      new Transformation().width(260).height(200).crop("crop").gravity("north"))));

|net
var uploadParams = new ImageUploadParams(){
  File = new FileDescription(@"sample.jpg"),
  EagerTransforms = new List<Transformation>(){
   new Transformation().Width(400).Height(300).Crop("pad"),
   new Transformation().Width(260).Height(200).Crop("crop").Gravity("north")}};
var uploadResult = cloudinary.Upload(uploadParams);

Tip 2: Deliver Assets at the Desired Size.

At times, developers load original images on to a page and then resize on the client side with CSS. You want to avoid this because not only would you increase the page-loading time by loading larger assets, but you’d also waste your and your users’ bandwidth. Besides, you might lose the images’ main focus with CSS resizing.

Instead, generate using Cloudinary img or video tags in HTML with the desired dimensions and then embed the transformed images or videos in your site with a simple call to the cl_image_tag or cl_video_tag methods.

For example, calling

cl_image_tag(“sample.jpg”, :width=>300, :height=>100, :crop=>”scale”)

results in this HTML code

<img src=”https://res.cloudinary.com/demo/image/upload/w_300,h_100,c_scale/sample.jpg”>
Ruby:
cl_image_tag("sample.jpg", :width=>300, :height=>100, :crop=>"scale")
PHP:
cl_image_tag("sample.jpg", array("width"=>300, "height"=>100, "crop"=>"scale"))
Python:
CloudinaryImage("sample.jpg").image(width=300, height=100, crop="scale")
Node.js:
cloudinary.image("sample.jpg", {width: 300, height: 100, crop: "scale"})
Java:
cloudinary.url().transformation(new Transformation().width(300).height(100).crop("scale")).imageTag("sample.jpg");
JS:
cloudinary.imageTag('sample.jpg', {width: 300, height: 100, crop: "scale"}).toHtml();
jQuery:
$.cloudinary.image("sample.jpg", {width: 300, height: 100, crop: "scale"})
React:
<Image publicId="sample.jpg" >
  <Transformation width="300" height="100" crop="scale" />
</Image>

|vuejs
<cld-image publicId="sample.jpg" >
  <cld-transformation width="300" height="100" crop="scale" />
</cld-image>
Angular:
<cl-image public-id="sample.jpg" >
  <cl-transformation width="300" height="100" crop="scale">
  </cl-transformation>
</cl-image>

|net
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(300).Height(100).Crop("scale")).BuildImageTag("sample.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().width(300).height(100).crop("scale")).generate("sample.jpg");

|ios
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(300).setHeight(100).setCrop("scale")).generate("sample.jpg")!, cloudinary: cloudinary)

Tip 3: Apply f_auto to Automatically Deliver Images in the Optimal Format.

The requirements for optimal display of images vary, depending on the browser. For example, you could potentially deliver a further compressed image by delivering the WebP version instead of a JPG when rendering it on Chrome. Fulfilling that requirement is a breeze with Cloudinary, which detects what browser is requesting the image, automatically converting the image to the optimal format or delivering it as-is if no format optimizations are required. Please note that using f_auto may result in the generation of up to 4 transformations per image (original format, webp, awebp and wdp) depending on which formats are requested.

For example, to apply f_auto to your image, it’s this simple:

Ruby:
cl_image_tag("sample.jpg", :width=>500, :fetch_format=>:auto, :crop=>"scale")
PHP:
cl_image_tag("sample.jpg", array("width"=>500, "fetch_format"=>"auto", "crop"=>"scale"))
Python:
CloudinaryImage("sample.jpg").image(width=500, fetch_format="auto", crop="scale")
Node.js:
cloudinary.image("sample.jpg", {width: 500, fetch_format: "auto", crop: "scale"})
Java:
cloudinary.url().transformation(new Transformation().width(500).fetchFormat("auto").crop("scale")).imageTag("sample.jpg");
JS:
cloudinary.imageTag('sample.jpg', {width: 500, fetchFormat: "auto", crop: "scale"}).toHtml();
jQuery:
$.cloudinary.image("sample.jpg", {width: 500, fetch_format: "auto", crop: "scale"})
React:
<Image publicId="sample.jpg" >
  <Transformation width="500" fetchFormat="auto" crop="scale" />
</Image>
Angular:
<cl-image public-id="sample.jpg" >
  <cl-transformation width="500" fetch-format="auto" crop="scale">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(500).FetchFormat("auto").Crop("scale")).BuildImageTag("sample.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().width(500).fetchFormat("auto").crop("scale")).generate("sample.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(500).setFetchFormat("auto").setCrop("scale")).generate("sample.jpg")!, cloudinary: cloudinary)

Tip 4: Apply q_auto to Automatically Deliver Images at the Optimal File Size and Visual Quality.

With q_auto applied to your images, Cloudinary automatically analyzes them, ultimately delivering a version with the optimal quality and file compression level as well as encoding settings—with no detectable changes in visible quality.

Here’s an example of an image URL with q_auto applied:

Ruby:
cl_image_tag("sofa_cat.jpg", :quality=>"auto")
PHP:
cl_image_tag("sofa_cat.jpg", array("quality"=>"auto"))
Python:
CloudinaryImage("sofa_cat.jpg").image(quality="auto")
Node.js:
cloudinary.image("sofa_cat.jpg", {quality: "auto"})
Java:
cloudinary.url().transformation(new Transformation().quality("auto")).imageTag("sofa_cat.jpg");
JS:
cloudinary.imageTag('sofa_cat.jpg', {quality: "auto"}).toHtml();
jQuery:
$.cloudinary.image("sofa_cat.jpg", {quality: "auto"})
React:
<Image publicId="sofa_cat.jpg" >
  <Transformation quality="auto" />
</Image>
Angular:
<cl-image public-id="sofa_cat.jpg" >
  <cl-transformation quality="auto">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Quality("auto")).BuildImageTag("sofa_cat.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().quality("auto")).generate("sofa_cat.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setQuality("auto")).generate("sofa_cat.jpg")!, cloudinary: cloudinary)

Original Original - 1.49 MB Original q_auto - 929.63 KB

Tip 5: Apply Transformations to Images for Optimization.

When applying any transformations to your images, Cloudinary further optimizes them by performing the pertinent tasks, such as metadata stripping and more. No manual effort is required.

You can specify auto for the format and quality transformations, in which case Cloudinary applies the optimum algorithms. Alternatively, specify a quality level; the default is 80. The user interface can’t be more straightforward:.

Default Image Quality

Tip 6: Crop Images by Leveraging Cloudinary’s AI-Based Smart-Cropping Capability.

With Cloudinary’s smart-cropping capability, available with the Object-Aware Cropping add-on, you can pick from a list of supported categories and objects what to focus on in your image, optionally applying transformations afterwards. You can specify an object (such as handbag, cake, motorbike) or an object category (such as electronic, appliance, sports) to set as the focal point of the image.

Here you can see the difference between our g_auto:classic and new g_auto:bicycle:

Original Original Original g_auto:classic Original g_auto:bicycle

Tip 7: Generate Low-Quality Image Placeholders for Lazy Loading of Images.

Viewing high-quality images often requires longer page loading times, which can cause users to shy away from. To alleviate that scenario, when lazy-loading images, save bandwidth and loading time by using Cloudinary to generate Low Quality Image Placeholders (LQIP). This way you won’t load your high-quality images unless they’re coming into the viewport.

Below are two examples:

A low-quality, blurry image, about 1 KB in size. The original size is 486.91 KB.

Ruby:
cl_image_tag("string_1.jpg", :transformation=>[
  {:width=>640, :crop=>"scale"},
  {:effect=>"blur:1000", :quality=>1},
  {:effect=>"grayscale"}
  ])
PHP:
cl_image_tag("string_1.jpg", array("transformation"=>array(
  array("width"=>640, "crop"=>"scale"),
  array("effect"=>"blur:1000", "quality"=>1),
  array("effect"=>"grayscale")
  )))
Python:
CloudinaryImage("string_1.jpg").image(transformation=[
  {'width': 640, 'crop': "scale"},
  {'effect': "blur:1000", 'quality': 1},
  {'effect': "grayscale"}
  ])
Node.js:
cloudinary.image("string_1.jpg", {transformation: [
  {width: 640, crop: "scale"},
  {effect: "blur:1000", quality: 1},
  {effect: "grayscale"}
  ]})
Java:
cloudinary.url().transformation(new Transformation()
  .width(640).crop("scale").chain()
  .effect("blur:1000").quality(1).chain()
  .effect("grayscale")).imageTag("string_1.jpg");
JS:
cloudinary.imageTag('string_1.jpg', {transformation: [
  {width: 640, crop: "scale"},
  {effect: "blur:1000", quality: 1},
  {effect: "grayscale"}
  ]}).toHtml();
jQuery:
$.cloudinary.image("string_1.jpg", {transformation: [
  {width: 640, crop: "scale"},
  {effect: "blur:1000", quality: 1},
  {effect: "grayscale"}
  ]})
React:
<Image publicId="string_1.jpg" >
  <Transformation width="640" crop="scale" />
  <Transformation effect="blur:1000" quality="1" />
  <Transformation effect="grayscale" />
</Image>
Angular:
<cl-image public-id="string_1.jpg" >
  <cl-transformation width="640" crop="scale">
  </cl-transformation>
  <cl-transformation effect="blur:1000" quality="1">
  </cl-transformation>
  <cl-transformation effect="grayscale">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(640).Crop("scale").Chain()
  .Effect("blur:1000").Quality(1).Chain()
  .Effect("grayscale")).BuildImageTag("string_1.jpg")
Android:
MediaManager.get().url().transformation(new Transformation()
  .width(640).crop("scale").chain()
  .effect("blur:1000").quality(1).chain()
  .effect("grayscale")).generate("string_1.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(640).setCrop("scale").chain()
  .setEffect("blur:1000").setQuality(1).chain()
  .setEffect("grayscale")).generate("string_1.jpg")!, cloudinary: cloudinary)
LQIP

An SVG placeholder using our e_vectorize feature, about 1 KB in size. The original size is 397.33 KB.

Ruby:
cl_image_tag("docs/lion.svg", :effect=>"vectorize:colors:2:detail:0.02:paths:0")
PHP:
cl_image_tag("docs/lion.svg", array("effect"=>"vectorize:colors:2:detail:0.02:paths:0"))
Python:
CloudinaryImage("docs/lion.svg").image(effect="vectorize:colors:2:detail:0.02:paths:0")
Node.js:
cloudinary.image("docs/lion.svg", {effect: "vectorize:colors:2:detail:0.02:paths:0"})
Java:
cloudinary.url().transformation(new Transformation().effect("vectorize:colors:2:detail:0.02:paths:0")).imageTag("docs/lion.svg");
JS:
cloudinary.imageTag('docs/lion.svg', {effect: "vectorize:colors:2:detail:0.02:paths:0"}).toHtml();
jQuery:
$.cloudinary.image("docs/lion.svg", {effect: "vectorize:colors:2:detail:0.02:paths:0"})
React:
<Image publicId="docs/lion.svg" >
  <Transformation effect="vectorize:colors:2:detail:0.02:paths:0" />
</Image>
Angular:
<cl-image public-id="docs/lion.svg" >
  <cl-transformation effect="vectorize:colors:2:detail:0.02:paths:0">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("vectorize:colors:2:detail:0.02:paths:0")).BuildImageTag("docs/lion.svg")
Android:
MediaManager.get().url().transformation(new Transformation().effect("vectorize:colors:2:detail:0.02:paths:0")).generate("docs/lion.svg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("vectorize:colors:2:detail:0.02:paths:0")).generate("docs/lion.svg")!, cloudinary: cloudinary)
LQIP

Tip 8: Make Your Images Search-Engine Friendly with SEO-Friendly URLs.

To make it easier for search engines to index and rank your site, ensure that your image URLs having meaningful public IDs. An example being the following image which uses the public ID “basketball_shot” to give an accurate depiction of what the image is, thus making it easier to index. You can also shorten the path of the image by deleting the default image/upload portion of the URL as so:

Ruby:
cl_image_tag("basketball_shot.jpg", :use_root_path=>true)
PHP:
cl_image_tag("basketball_shot.jpg", array("use_root_path"=>true))
Python:
CloudinaryImage("basketball_shot.jpg").image(use_root_path=True)
Node.js:
cloudinary.image("basketball_shot.jpg", {use_root_path: true})
Java:
cloudinary.url().useRootPath(true).imageTag("basketball_shot.jpg");
JS:
cloudinary.imageTag('basketball_shot.jpg', {useRootPath: true}).toHtml();
jQuery:
$.cloudinary.image("basketball_shot.jpg", {use_root_path: true})
React:
<Image publicId="basketball_shot.jpg" useRootPath="true">

</Image>
Angular:
<cl-image public-id="basketball_shot.jpg" use-root-path="true">

</cl-image>
.Net:
cloudinary.Api.UrlImgUp.UseRootPath(true).BuildImageTag("basketball_shot.jpg")
Android:
MediaManager.get().url().useRootPath(true).generate("basketball_shot.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setUseRootPath( true).generate("basketball_shot.jpg")!, cloudinary: cloudinary)

Alternatively, if you use non-descriptive public IDs, replace image/upload with images to utilize Cloudinary’s dynamic SEO suffixes that allow for multiple descriptions. In the examples below, both images have the public ID “ltepu4mm0qzw6lkfxt1m” but are still able to describe the image in two different languages allowing for further indexing:

Image with a dynamic SEO suffix

Ruby:
cl_image_tag("ltepu4mm0qzw6lkfxt1m.jpg", :url_suffix=>"basketball-game-in-college")
PHP:
cl_image_tag("ltepu4mm0qzw6lkfxt1m.jpg", array("url_suffix"=>"basketball-game-in-college"))
Python:
CloudinaryImage("ltepu4mm0qzw6lkfxt1m.jpg").image(url_suffix="basketball-game-in-college")
Node.js:
cloudinary.image("ltepu4mm0qzw6lkfxt1m.jpg", {url_suffix: "basketball-game-in-college"})
Java:
cloudinary.url().suffix("basketball-game-in-college").imageTag("ltepu4mm0qzw6lkfxt1m.jpg");
JS:
cloudinary.imageTag('ltepu4mm0qzw6lkfxt1m.jpg', {urlSuffix: "basketball-game-in-college"}).toHtml();
jQuery:
$.cloudinary.image("ltepu4mm0qzw6lkfxt1m.jpg", {url_suffix: "basketball-game-in-college"})
React:
<Image publicId="ltepu4mm0qzw6lkfxt1m.jpg" urlSuffix="basketball-game-in-college">

</Image>
Angular:
<cl-image public-id="ltepu4mm0qzw6lkfxt1m.jpg" url-suffix="basketball-game-in-college">

</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Suffix("basketball-game-in-college").BuildImageTag("ltepu4mm0qzw6lkfxt1m.jpg")
Android:
MediaManager.get().url().suffix("basketball-game-in-college").generate("ltepu4mm0qzw6lkfxt1m.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setSuffix( "basketball-game-in-college").generate("ltepu4mm0qzw6lkfxt1m.jpg")!, cloudinary: cloudinary)
Image with a dynamic SEO suffix

Image with a dynamic SEO suffix in Spanish

Ruby:
cl_image_tag("ltepu4mm0qzw6lkfxt1m.jpg", :url_suffix=>"baloncesto-juego-en-universidad")
PHP:
cl_image_tag("ltepu4mm0qzw6lkfxt1m.jpg", array("url_suffix"=>"baloncesto-juego-en-universidad"))
Python:
CloudinaryImage("ltepu4mm0qzw6lkfxt1m.jpg").image(url_suffix="baloncesto-juego-en-universidad")
Node.js:
cloudinary.image("ltepu4mm0qzw6lkfxt1m.jpg", {url_suffix: "baloncesto-juego-en-universidad"})
Java:
cloudinary.url().suffix("baloncesto-juego-en-universidad").imageTag("ltepu4mm0qzw6lkfxt1m.jpg");
JS:
cloudinary.imageTag('ltepu4mm0qzw6lkfxt1m.jpg', {urlSuffix: "baloncesto-juego-en-universidad"}).toHtml();
jQuery:
$.cloudinary.image("ltepu4mm0qzw6lkfxt1m.jpg", {url_suffix: "baloncesto-juego-en-universidad"})
React:
<Image publicId="ltepu4mm0qzw6lkfxt1m.jpg" urlSuffix="baloncesto-juego-en-universidad">

</Image>
Angular:
<cl-image public-id="ltepu4mm0qzw6lkfxt1m.jpg" url-suffix="baloncesto-juego-en-universidad">

</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Suffix("baloncesto-juego-en-universidad").BuildImageTag("ltepu4mm0qzw6lkfxt1m.jpg")
Android:
MediaManager.get().url().suffix("baloncesto-juego-en-universidad").generate("ltepu4mm0qzw6lkfxt1m.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setSuffix( "baloncesto-juego-en-universidad").generate("ltepu4mm0qzw6lkfxt1m.jpg")!, cloudinary: cloudinary)

Furthermore, if you’d like your images to be delivered under your company’s domain, you can set up a CNAME, such as cdn.example.com. Please note that CNAMEs are available on the Advanced plan and up.

Tip 9: Adopt Adaptive Bitrate Streaming to Automate Adjustment of Video Quality in Real Time.

Cloudinary’s Adaptive Bitrate Streaming (ABS) capability adjusts video quality in real time to deliver the best-possible quality for the current viewing device and network connection. You can then—

  • Eliminate buffering time.
  • Save bandwidth by displaying a lower-resolution video to keep the audience engaged if the network connection is too weak to display the high-resolution version.

As an example, the following code eagerly and asynchronously generates the video “big_buck_bunny.mp4” in HLS format, one of the two supported adaptive streaming formats, using the “full_hd” streaming profile.

Ruby:
Cloudinary::Uploader.upload("big_buck_bunny.mp4", :resource_type => :video, 
          :eager => [{:streaming_profile => "full_hd", :format => "m3u8"}], 
          :eager_async => true,
          :eager_notification_url => "https://mysite.example.com/notify_endpoint",
          :public_id => "bb_bunny")
PHP:
\Cloudinary\Uploader::upload("big_buck_bunny.mp4", array(
            "resource_type" => "video", 
            "eager" => array("streaming_profile" => "full_hd", "format" => "m3u8"),
            "eager_async" => true,
            "eager_notification_url" => "https://mysite.example.com/notify_endpoint"
            "public_id" => "bb_bunny"
            );
Python:
cloudinary.uploader.upload("big_buck_bunny.mp4", resource_type = "video",
            eager = [
              {"streaming_profile": "full_hd", "format": "m3u8"}]
            eager_async = true,
            eager_notification_url = "https://mysite.example.com/notify_endpoint")
            public_id = "bb_bunny")
Node.js:
var up_options = 
   {resource_type: "video", 
    eager: [
      { streaming_profile: "full_hd", format: "m3u8" }],                                   
    eager_async: true,
    eager_notification_url: "https://mysite.example.com/notify_endpoint",
    public_id: "bb_bunny"};
cloudinary.v2.uploader.upload("big_buck_bunny.mp4", up_options, function(result) {console.log(result); };
Java:
cloudinary.uploader().upload("big_buck_bunny.mp4", 
        ObjectUtils.asMap("resource_type", "video",
        "eager", Arrays.asList(
              new Transformation().streamingProfile("full_hd").format("m3u8"),
            "eager_async", true,
            "eager_notification_url", "https://mysite.example.com/notify_endpoint"
            "public_id", "bb_bunny"));

Note that you want to deliver the video using the corresponding file format, such as .m3u8 (HLS) here, and include the streaming profile (sp_) and other transformations exactly matching what you generated in your eager transformation. You also want to make sure that you’re playing the video in a video player which supports HLS, such as the Cloudinary Video Player, as not all browsers inherently support it.

Tip 10: Set up Cloudinary Breakpoints for the Appropriate Image Size and Resolution According to the Viewing Device.

By using Cloudinary’s breakpoints you can utilize responsive viewing by generating a defined number of images to match the image width and DPR of each device requesting your images. The closest sized image will then be delivered to each device based on the viewing width detected for that device. You can do this by defining the number of steps in bytes to take per image, the maximum and minimum widths for your images, and the maximum number of images to be generated, as in this example:

Ruby:
Cloudinary::Uploader.upload("dog.jpg",
            :responsive_breakpoints => 
            {:create_derived => true, :bytes_step => 20000, 
             :min_width => 200, :max_width => 1000,
             :max_images => 20},
             :public_id => "dog")
PHP:
\Cloudinary\Uploader::upload("dog.jpg", array( 
            "responsive_breakpoints" => array(
              array("create_derived" => "true", "bytes_step" => 20000,
                  "min_width" => 200, "max_width" => 1000,
                  "max_images" => 20)), 
              "public_id" => "dog"));
Python:
cloudinary.uploader.upload("dog.jpg", 
            responsive_breakpoints = [
              {"create_derived": "true", "bytes_step": 20000,
                  "min_width": 200,
                  "max_width": 1000, "max_images": 20}],
            public_id = "dog")
Node.js:
cloudinary.v2.uploader.upload("dog.jpg", 
        { responsive_breakpoints: [{
          create_derived: true, bytes_step: 20000,
          min_width: 200, max_width: 1000,
          max_images: 20}], public_id: "dog"}, 
        function(error, result) {console.log(result); });
Java:
cloudinary.uploader().upload("dog.jpg", 
        ObjectUtils.asMap(
        "responsive_breakpoints", 
          new ResponsiveBreakpoint().createDerived("true").bytesStep(20000).minWidth(200).maxWidth(1000).maxImages(20), 
        "public_id", "dog"));

This code generates at most 20 images starting at the minimum width of 200, increasing the size by the specified 20000 bytes per image with the max width of the largest image being no larger than the specified 1000 max width.

Additionally, Cloudinary’s responsive breakpoint generator creates an HTML5 img, which you can copy paste into your code to easily embed in your site. The srcset attribute of the img tag is set to list the image versions and width values according to the selected breakpoints. See this example of the generated img tag matching the calculated images:

Original aspect ratio

Cloudinary delivers as advertised. Do familiarize yourself with the above tips; you’ll marvel at the impressive results.

Additional Resources

Recent Blog Posts

Converting Videos to GIFs in Kotlin-Based Android Apps

Among the image formats available today, Graphics Interchange Format (GIF) works for both static and animated images. A popular use of GIF images—commonly called GIFs—is to repeatedly loop motions, which you cannot in real life. Many people have turned themselves into online celebrities through effective application of GIFs.

Read more
Simple Steps to Make Your Site Accessible With Cloudinary

Web accessibility (a11y) is about gaining an insight into—

It’s a blurry line between accessibility and usability (or user experience) and one might argue that they are actually the same thing. Nonetheless, if your audience can't use your app with ease and confidence, then it’s not accessible enough and the user experience is not good enough.

Read more
Learn three ways in which to tell appealing stories on video.

Video storytelling is one of the most effective means of conveying messages to your audience. It’s also a popular marketing tool because most people are automatically drawn to video. In eCommerce, if accompanied by attractive images and a compelling narrative, video storytelling uniquely connect with potential customers without fail.

Read more