{"id":21919,"date":"2019-07-29T17:44:51","date_gmt":"2019-07-29T17:44:51","guid":{"rendered":"http:\/\/top_10_tips_for_making_cloudinary_work_well_for_you"},"modified":"2024-09-07T12:06:29","modified_gmt":"2024-09-07T19:06:29","slug":"top_10_tips_for_making_cloudinary_work_well_for_you","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/top_10_tips_for_making_cloudinary_work_well_for_you","title":{"rendered":"Top 10 Tips for Making Cloudinary Work Well for You"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>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\u2019s 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\u2019re a developer or content creator, you will find Cloudinary\u2019s tools that optimize digital media (aka digital assets) simple, intuitive, and effective.<\/p>\n<p>Below are 10 tips for using Cloudinary that are sure to reduce page-loading times and make your audience happy.<\/p>\n<p><a href=\"https:\/\/cloudinary.com\/imagecon\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/image\/upload\/w_700,c_fill,f_auto,q_auto,dpr_2.0\/Web_Assets\/blog\/ic__tt_banner.png\" alt=\"Maximize Your Cloudinary Use\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"700\" height=\"188\"\/><\/a><\/p>\n<h2>Tip 1: Generate Eager Transformations for Assets Before the Latter Are Requested for Access.<\/h2>\n<p>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 <a href=\"https:\/\/cloudinary.com\/documentation\/transformations_on_upload#eager_transformations\">eager transformations<\/a> ahead of time? Do that in either of these two ways:<\/p>\n<ul>\n<li>\n<strong>In the Media Library with upload presets.<\/strong> 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.<\/li>\n<\/ul>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-res.cloudinary.com\/image\/upload\/w_700,c_fill,f_auto,q_auto,dpr_2.0\/eager_transformation.png\" alt=\"Eager Transformation\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1400\" height=\"374\"\/><\/p>\n<ul>\n<li>\n<strong>In the <code>upload<\/code> API.<\/strong> Here, you generate eager transformations with the <code>upload<\/code> method and, in the case of pre-existing resources, the <code>explicit<\/code> method. See this example:<\/li>\n<\/ul>\n<cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[{&quot;sdkId&quot;:&quot;ruby&quot;,&quot;framework&quot;:&quot;ruby&quot;,&quot;language&quot;:&quot;ruby&quot;,&quot;displayName&quot;:&quot;Ruby&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;rawCodeSnippet&quot;:&quot;Cloudinary::Uploader.upload(\\&quot;sample.jpg\\&quot;,\\n  :eager =&gt; [\\n    {:width =&gt; 400, :height =&gt; 300, :crop =&gt; :pad}, \\n    {:width =&gt; 260, :height =&gt; 200, :crop =&gt; :crop, :gravity =&gt; :north}])&quot;,&quot;codeSnippet&quot;:&quot;Cloudinary::Uploader.upload(\\&quot;sample.jpg\\&quot;,\\n  :eager =&gt; [\\n    {:width =&gt; 400, :height =&gt; 300, :crop =&gt; :pad}, \\n    {:width =&gt; 260, :height =&gt; 200, :crop =&gt; :crop, :gravity =&gt; :north}])&quot;},{&quot;sdkId&quot;:&quot;php&quot;,&quot;framework&quot;:&quot;php&quot;,&quot;language&quot;:&quot;php&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;rawCodeSnippet&quot;:&quot;\\\\Cloudinary\\\\Uploader::upload(\\&quot;sample.jpg\\&quot;, array( \\n  \\&quot;eager\\&quot; =&gt; array(\\n    array(\\&quot;width\\&quot; =&gt; 400, \\&quot;height\\&quot; =&gt; 300, \\&quot;crop\\&quot; =&gt; \\&quot;pad\\&quot;),\\n    array(\\&quot;width\\&quot; =&gt; 260, \\&quot;height\\&quot; =&gt; 200, \\&quot;crop\\&quot; =&gt; \\&quot;crop\\&quot;, \\&quot;gravity\\&quot; =&gt; \\&quot;north\\&quot;))));&quot;,&quot;codeSnippet&quot;:&quot;\\\\Cloudinary\\\\Uploader::upload(\\&quot;sample.jpg\\&quot;, array( \\n  \\&quot;eager\\&quot; =&gt; array(\\n    array(\\&quot;width\\&quot; =&gt; 400, \\&quot;height\\&quot; =&gt; 300, \\&quot;crop\\&quot; =&gt; \\&quot;pad\\&quot;),\\n    array(\\&quot;width\\&quot; =&gt; 260, \\&quot;height\\&quot; =&gt; 200, \\&quot;crop\\&quot; =&gt; \\&quot;crop\\&quot;, \\&quot;gravity\\&quot; =&gt; \\&quot;north\\&quot;))));&quot;},{&quot;sdkId&quot;:&quot;python&quot;,&quot;framework&quot;:&quot;python&quot;,&quot;language&quot;:&quot;python&quot;,&quot;displayName&quot;:&quot;Python&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.uploader.upload(\\&quot;sample.jpg\\&quot;, \\n  eager = [\\n    {\\&quot;width\\&quot;: 400, \\&quot;height\\&quot;: 300, \\&quot;crop\\&quot;: \\&quot;pad\\&quot;},\\n    {\\&quot;width\\&quot;: 260, \\&quot;height\\&quot;: 200, \\&quot;crop\\&quot;: \\&quot;crop\\&quot;, \\&quot;gravity\\&quot;: \\&quot;north\\&quot;}])&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.uploader.upload(\\&quot;sample.jpg\\&quot;, \\n  eager = [\\n    {\\&quot;width\\&quot;: 400, \\&quot;height\\&quot;: 300, \\&quot;crop\\&quot;: \\&quot;pad\\&quot;},\\n    {\\&quot;width\\&quot;: 260, \\&quot;height\\&quot;: 200, \\&quot;crop\\&quot;: \\&quot;crop\\&quot;, \\&quot;gravity\\&quot;: \\&quot;north\\&quot;}])&quot;},{&quot;sdkId&quot;:&quot;nodejs&quot;,&quot;framework&quot;:&quot;nodejs&quot;,&quot;language&quot;:&quot;javascript&quot;,&quot;displayName&quot;:&quot;Node.js&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.v2.uploader.upload(\\&quot;sample.jpg\\&quot;, \\n  { eager: [\\n    { width: 400, height: 300, crop: \\&quot;pad\\&quot; }, \\n    { width: 260, height: 200, crop: \\&quot;crop\\&quot;, gravity: \\&quot;north\\&quot;} ]}, \\n  function(error, result) {console.log(result, error); });&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.v2.uploader.upload(\\&quot;sample.jpg\\&quot;, \\n  { eager: [\\n    { width: 400, height: 300, crop: \\&quot;pad\\&quot; }, \\n    { width: 260, height: 200, crop: \\&quot;crop\\&quot;, gravity: \\&quot;north\\&quot;} ]}, \\n  function(error, result) {console.log(result, error); });&quot;},{&quot;sdkId&quot;:&quot;java&quot;,&quot;framework&quot;:&quot;java&quot;,&quot;language&quot;:&quot;java&quot;,&quot;displayName&quot;:&quot;Java&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.uploader().upload(\\&quot;sample.jpg\\&quot;, \\n  ObjectUtils.asMap(\\n    \\&quot;eager\\&quot;, Arrays.asList(\\n      new Transformation().width(400).height(300).crop(\\&quot;pad\\&quot;),\\n      new Transformation().width(260).height(200).crop(\\&quot;crop\\&quot;).gravity(\\&quot;north\\&quot;))));\\n\\n|net\\nvar uploadParams = new ImageUploadParams(){\\n  File = new FileDescription(@\\&quot;sample.jpg\\&quot;),\\n  EagerTransforms = new List&lt;Transformation&gt;(){\\n   new Transformation().Width(400).Height(300).Crop(\\&quot;pad\\&quot;),\\n   new Transformation().Width(260).Height(200).Crop(\\&quot;crop\\&quot;).Gravity(\\&quot;north\\&quot;)}};\\nvar uploadResult = cloudinary.Upload(uploadParams);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.uploader().upload(\\&quot;sample.jpg\\&quot;, \\n  ObjectUtils.asMap(\\n    \\&quot;eager\\&quot;, Arrays.asList(\\n      new Transformation().width(400).height(300).crop(\\&quot;pad\\&quot;),\\n      new Transformation().width(260).height(200).crop(\\&quot;crop\\&quot;).gravity(\\&quot;north\\&quot;))));\\n\\n|net\\nvar uploadParams = new ImageUploadParams(){\\n  File = new FileDescription(@\\&quot;sample.jpg\\&quot;),\\n  EagerTransforms = new List&lt;Transformation&gt;(){\\n   new Transformation().Width(400).Height(300).Crop(\\&quot;pad\\&quot;),\\n   new Transformation().Width(260).Height(200).Crop(\\&quot;crop\\&quot;).Gravity(\\&quot;north\\&quot;)}};\\nvar uploadResult = cloudinary.Upload(uploadParams);&quot;}]\"\n      parsed-url=\"[]\"\n      with-url=\"false\"\n    >\n      <span class=\"u-visually-hidden\">Loading code examples<\/span>\n    <\/cld-code-widget>\n<h2>Tip 2: Deliver Assets at the Desired Size.<\/h2>\n<p>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\u2019d also waste your and your users\u2019 bandwidth. Besides, you might lose the images\u2019 main focus with CSS resizing.<\/p>\n<p>Instead, generate using Cloudinary <code>img<\/code> or <code>video<\/code> tags in HTML with the desired dimensions and then embed the transformed images or videos in your site with a simple call to the <a href=\"https:\/\/cloudinary.com\/documentation\/image_transformations#embedding_images_in_web_pages\">cl_image_tag<\/a>  or <a href=\"https:\/\/cloudinary.com\/documentation\/video_manipulation_and_delivery#embedding_videos_in_web_pages\">cl_video_tag<\/a> methods.<\/p>\n<p>For example, calling<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">cl_image_tag(\u201csample.jpg\u201d, :<span class=\"hljs-function\"><span class=\"hljs-params\">width<\/span>=&gt;<\/span><span class=\"hljs-number\">300<\/span>, :<span class=\"hljs-function\"><span class=\"hljs-params\">height<\/span>=&gt;<\/span><span class=\"hljs-number\">100<\/span>, :<span class=\"hljs-function\"><span class=\"hljs-params\">crop<\/span>=&gt;<\/span>\u201dscale\u201d)\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>results in this HTML code<\/p>\n<pre class=\"js-syntax-highlighted\"><code>&lt;img src=\u201dhttps:\/\/res.cloudinary.com\/demo\/image\/upload\/w_300,h_100,c_scale\/sample.jpg\u201d&gt;\n<\/code><\/pre>\n<cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[{&quot;sdkId&quot;:&quot;ruby&quot;,&quot;framework&quot;:&quot;ruby&quot;,&quot;language&quot;:&quot;ruby&quot;,&quot;displayName&quot;:&quot;Ruby&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;sample.jpg\\&quot;, :width=&gt;300, :height=&gt;100, :crop=&gt;\\&quot;scale\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;sample.jpg\\&quot;, :width=&gt;300, :height=&gt;100, :crop=&gt;\\&quot;scale\\&quot;)&quot;},{&quot;sdkId&quot;:&quot;php&quot;,&quot;framework&quot;:&quot;php&quot;,&quot;language&quot;:&quot;php&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;sample.jpg\\&quot;, array(\\&quot;width\\&quot;=&gt;300, \\&quot;height\\&quot;=&gt;100, \\&quot;crop\\&quot;=&gt;\\&quot;scale\\&quot;))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;sample.jpg\\&quot;, array(\\&quot;width\\&quot;=&gt;300, \\&quot;height\\&quot;=&gt;100, \\&quot;crop\\&quot;=&gt;\\&quot;scale\\&quot;))&quot;},{&quot;sdkId&quot;:&quot;python&quot;,&quot;framework&quot;:&quot;python&quot;,&quot;language&quot;:&quot;python&quot;,&quot;displayName&quot;:&quot;Python&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;rawCodeSnippet&quot;:&quot;CloudinaryImage(\\&quot;sample.jpg\\&quot;).image(width=300, height=100, crop=\\&quot;scale\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;sample.jpg\\&quot;).image(width=300, height=100, crop=\\&quot;scale\\&quot;)&quot;},{&quot;sdkId&quot;:&quot;nodejs&quot;,&quot;framework&quot;:&quot;nodejs&quot;,&quot;language&quot;:&quot;javascript&quot;,&quot;displayName&quot;:&quot;Node.js&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(\\&quot;sample.jpg\\&quot;, {width: 300, height: 100, crop: \\&quot;scale\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;sample.jpg\\&quot;, {width: 300, height: 100, crop: \\&quot;scale\\&quot;})&quot;},{&quot;sdkId&quot;:&quot;java&quot;,&quot;framework&quot;:&quot;java&quot;,&quot;language&quot;:&quot;java&quot;,&quot;displayName&quot;:&quot;Java&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().width(300).height(100).crop(\\&quot;scale\\&quot;)).imageTag(\\&quot;sample.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().width(300).height(100).crop(\\&quot;scale\\&quot;)).imageTag(\\&quot;sample.jpg\\&quot;);&quot;},{&quot;sdkId&quot;:&quot;js&quot;,&quot;framework&quot;:&quot;js&quot;,&quot;language&quot;:&quot;javascript&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;cloudinary-core&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.imageTag(&#039;sample.jpg&#039;, {width: 300, height: 100, crop: \\&quot;scale\\&quot;}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;sample.jpg&#039;, {width: 300, height: 100, crop: \\&quot;scale\\&quot;}).toHtml();&quot;},{&quot;sdkId&quot;:&quot;jquery&quot;,&quot;framework&quot;:&quot;jquery&quot;,&quot;language&quot;:&quot;javascript&quot;,&quot;displayName&quot;:&quot;jQuery&quot;,&quot;packageName&quot;:&quot;cloudinary-jquery&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;rawCodeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;sample.jpg\\&quot;, {width: 300, height: 100, crop: \\&quot;scale\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;sample.jpg\\&quot;, {width: 300, height: 100, crop: \\&quot;scale\\&quot;})&quot;},{&quot;sdkId&quot;:&quot;react&quot;,&quot;framework&quot;:&quot;react&quot;,&quot;language&quot;:&quot;javascript&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;cloudinary-react&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;sample.jpg\\&quot; &gt;\\n  &lt;Transformation width=\\&quot;300\\&quot; height=\\&quot;100\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt;\\n&lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;sample.jpg\\&quot; &gt;\\n  &lt;Transformation width=\\&quot;300\\&quot; height=\\&quot;100\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt;\\n&lt;\\\/Image&gt;&quot;},{&quot;sdkId&quot;:&quot;vue&quot;,&quot;framework&quot;:&quot;vue&quot;,&quot;language&quot;:&quot;javascript&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;cloudinary-vue&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;rawCodeSnippet&quot;:&quot;js\\n&lt;cld-image publicId=\\&quot;sample.jpg\\&quot; &gt;\\n  &lt;cld-transformation width=\\&quot;300\\&quot; height=\\&quot;100\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt;\\n&lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;js\\n&lt;cld-image publicId=\\&quot;sample.jpg\\&quot; &gt;\\n  &lt;cld-transformation width=\\&quot;300\\&quot; height=\\&quot;100\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt;\\n&lt;\\\/cld-image&gt;&quot;},{&quot;sdkId&quot;:&quot;angular&quot;,&quot;framework&quot;:&quot;angular&quot;,&quot;language&quot;:&quot;javascript&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/angular-5.x&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;sample.jpg\\&quot; &gt;\\n  &lt;cl-transformation width=\\&quot;300\\&quot; height=\\&quot;100\\&quot; crop=\\&quot;scale\\&quot;&gt;\\n  &lt;\\\/cl-transformation&gt;\\n&lt;\\\/cl-image&gt;\\n\\n|net\\ncloudinary.Api.UrlImgUp.Transform(new Transformation().Width(300).Height(100).Crop(\\&quot;scale\\&quot;)).BuildImageTag(\\&quot;sample.jpg\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;sample.jpg\\&quot; &gt;\\n  &lt;cl-transformation width=\\&quot;300\\&quot; height=\\&quot;100\\&quot; crop=\\&quot;scale\\&quot;&gt;\\n  &lt;\\\/cl-transformation&gt;\\n&lt;\\\/cl-image&gt;\\n\\n|net\\ncloudinary.Api.UrlImgUp.Transform(new Transformation().Width(300).Height(100).Crop(\\&quot;scale\\&quot;)).BuildImageTag(\\&quot;sample.jpg\\&quot;)&quot;},{&quot;sdkId&quot;:&quot;android&quot;,&quot;framework&quot;:&quot;android&quot;,&quot;language&quot;:&quot;java&quot;,&quot;displayName&quot;:&quot;Android&quot;,&quot;packageName&quot;:&quot;cloudinary-android&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;rawCodeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().width(300).height(100).crop(\\&quot;scale\\&quot;)).generate(\\&quot;sample.jpg\\&quot;);\\n\\n|ios\\nimageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(300).setHeight(100).setCrop(\\&quot;scale\\&quot;)).generate(\\&quot;sample.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().width(300).height(100).crop(\\&quot;scale\\&quot;)).generate(\\&quot;sample.jpg\\&quot;);\\n\\n|ios\\nimageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(300).setHeight(100).setCrop(\\&quot;scale\\&quot;)).generate(\\&quot;sample.jpg\\&quot;)!, cloudinary: cloudinary)&quot;}]\"\n      parsed-url=\"[]\"\n      with-url=\"false\"\n    >\n      <span class=\"u-visually-hidden\">Loading code examples<\/span>\n    <\/cld-code-widget>\n<h2>Tip 3: Apply f_auto to Automatically Deliver Images in the Optimal Format.<\/h2>\n<p>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 <a href=\"https:\/\/cloudinary.com\/tools\/compress-jpg\">JPG<\/a> 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.<\/p>\n<p>For example, to apply <a href=\"https:\/\/cloudinary.com\/documentation\/image_transformations#automatic_format_selection\">f_auto<\/a> to your image, it\u2019s this simple:<\/p>\n<p><cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[{&quot;sdkId&quot;:&quot;nodejs&quot;,&quot;framework&quot;:&quot;nodejs&quot;,&quot;language&quot;:&quot;nodejs&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(\\&quot;sample.jpg\\&quot;, {width: 500, fetch_format: \\&quot;auto\\&quot;, crop: \\&quot;scale\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;sample.jpg\\&quot;, {width: 500, fetch_format: \\&quot;auto\\&quot;, crop: \\&quot;scale\\&quot;})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Node.js&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_2&quot;,&quot;framework&quot;:&quot;react_2&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;sample.jpg\\&quot;)\\n  .resize(scale().width(500))\\n  .delivery(format(auto()));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;sample.jpg\\&quot;)\\n  .resize(scale().width(500))\\n  .delivery(format(auto()));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;react&quot;,&quot;framework&quot;:&quot;react&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;sample.jpg\\&quot; &gt; &lt;Transformation width=\\&quot;500\\&quot; fetchFormat=\\&quot;auto\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;sample.jpg\\&quot; &gt;\\n\\t&lt;Transformation width=\\&quot;500\\&quot; fetchFormat=\\&quot;auto\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt;\\n&lt;\\\/Image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;cloudinary-react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue_2&quot;,&quot;framework&quot;:&quot;vue_2&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;sample.jpg\\&quot;)\\n  .resize(scale().width(500))\\n  .delivery(format(auto()));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;sample.jpg\\&quot;)\\n  .resize(scale().width(500))\\n  .delivery(format(auto()));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/vue&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue&quot;,&quot;framework&quot;:&quot;vue&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;sample.jpg\\&quot; &gt; &lt;cld-transformation width=\\&quot;500\\&quot; fetch-format=\\&quot;auto\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;sample.jpg\\&quot; &gt;\\n\\t&lt;cld-transformation width=\\&quot;500\\&quot; fetch-format=\\&quot;auto\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt;\\n&lt;\\\/cld-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;cloudinary-vue&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular_2&quot;,&quot;framework&quot;:&quot;angular_2&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;sample.jpg\\&quot;)\\n  .resize(scale().width(500))\\n  .delivery(format(auto()));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;sample.jpg\\&quot;)\\n  .resize(scale().width(500))\\n  .delivery(format(auto()));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/ng&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular&quot;,&quot;framework&quot;:&quot;angular&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;sample.jpg\\&quot; &gt; &lt;cl-transformation width=\\&quot;500\\&quot; fetch-format=\\&quot;auto\\&quot; crop=\\&quot;scale\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;sample.jpg\\&quot; &gt;\\n\\t&lt;cl-transformation width=\\&quot;500\\&quot; fetch-format=\\&quot;auto\\&quot; crop=\\&quot;scale\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n&lt;\\\/cl-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/angular-5.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js_2&quot;,&quot;framework&quot;:&quot;js_2&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;sample.jpg\\&quot;)\\n  .resize(scale().width(500))\\n  .delivery(format(auto()));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;sample.jpg\\&quot;)\\n  .resize(scale().width(500))\\n  .delivery(format(auto()));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js&quot;,&quot;framework&quot;:&quot;js&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.imageTag(&#039;sample.jpg&#039;, {width: 500, fetchFormat: \\&quot;auto\\&quot;, crop: \\&quot;scale\\&quot;}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;sample.jpg&#039;, {width: 500, fetchFormat: \\&quot;auto\\&quot;, crop: \\&quot;scale\\&quot;}).toHtml();&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;cloudinary-core&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;python&quot;,&quot;framework&quot;:&quot;python&quot;,&quot;language&quot;:&quot;python&quot;,&quot;rawCodeSnippet&quot;:&quot;CloudinaryImage(\\&quot;sample.jpg\\&quot;).image(width=500, fetch_format=\\&quot;auto\\&quot;, crop=\\&quot;scale\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;sample.jpg\\&quot;).image(width=500, fetch_format=\\&quot;auto\\&quot;, crop=\\&quot;scale\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Python&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;php_2&quot;,&quot;framework&quot;:&quot;php_2&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;(new ImageTag(&#039;sample.jpg&#039;))\\n\\t-&gt;resize(Resize::scale()-&gt;width(500))\\n\\t-&gt;delivery(Delivery::format(\\n\\tFormat::auto()));&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;sample.jpg&#039;))\\n\\t-&gt;resize(Resize::scale()-&gt;width(500))\\n\\t-&gt;delivery(Delivery::format(\\n\\tFormat::auto()));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;php&quot;,&quot;framework&quot;:&quot;php&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;sample.jpg\\&quot;, array(\\&quot;width\\&quot;=&gt;500, \\&quot;fetch_format\\&quot;=&gt;\\&quot;auto\\&quot;, \\&quot;crop\\&quot;=&gt;\\&quot;scale\\&quot;))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;sample.jpg\\&quot;, array(\\&quot;width\\&quot;=&gt;500, \\&quot;fetch_format\\&quot;=&gt;\\&quot;auto\\&quot;, \\&quot;crop\\&quot;=&gt;\\&quot;scale\\&quot;))&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;java&quot;,&quot;framework&quot;:&quot;java&quot;,&quot;language&quot;:&quot;java&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().width(500).fetchFormat(\\&quot;auto\\&quot;).crop(\\&quot;scale\\&quot;)).imageTag(\\&quot;sample.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().width(500).fetchFormat(\\&quot;auto\\&quot;).crop(\\&quot;scale\\&quot;)).imageTag(\\&quot;sample.jpg\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Java&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;ruby&quot;,&quot;framework&quot;:&quot;ruby&quot;,&quot;language&quot;:&quot;ruby&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;sample.jpg\\&quot;, width: 500, fetch_format: \\&quot;auto\\&quot;, crop: \\&quot;scale\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;sample.jpg\\&quot;, width: 500, fetch_format: \\&quot;auto\\&quot;, crop: \\&quot;scale\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Ruby&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;csharp&quot;,&quot;framework&quot;:&quot;csharp&quot;,&quot;language&quot;:&quot;csharp&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(500).FetchFormat(\\&quot;auto\\&quot;).Crop(\\&quot;scale\\&quot;)).BuildImageTag(\\&quot;sample.jpg\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(500).FetchFormat(\\&quot;auto\\&quot;).Crop(\\&quot;scale\\&quot;)).BuildImageTag(\\&quot;sample.jpg\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;.NET&quot;,&quot;packageName&quot;:&quot;CloudinaryDotNet&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;dart&quot;,&quot;framework&quot;:&quot;dart&quot;,&quot;language&quot;:&quot;dart&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;sample.jpg&#039;).transformation(Transformation()\\n\\t.resize(Resize.scale().width(500))\\n\\t.delivery(Delivery.format(\\n\\tFormat.auto())));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;sample.jpg&#039;).transformation(Transformation()\\n\\t.resize(Resize.scale().width(500))\\n\\t.delivery(Delivery.format(\\n\\tFormat.auto())));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Dart&quot;,&quot;packageName&quot;:&quot;cloudinary_dart&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;swift&quot;,&quot;framework&quot;:&quot;swift&quot;,&quot;language&quot;:&quot;swift&quot;,&quot;rawCodeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(500).setFetchFormat(\\&quot;auto\\&quot;).setCrop(\\&quot;scale\\&quot;)).generate(\\&quot;sample.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(500).setFetchFormat(\\&quot;auto\\&quot;).setCrop(\\&quot;scale\\&quot;)).generate(\\&quot;sample.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;iOS&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;5.x&quot;},{&quot;sdkId&quot;:&quot;android&quot;,&quot;framework&quot;:&quot;android&quot;,&quot;language&quot;:&quot;android&quot;,&quot;rawCodeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().width(500).fetchFormat(\\&quot;auto\\&quot;).crop(\\&quot;scale\\&quot;)).generate(\\&quot;sample.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().width(500).fetchFormat(\\&quot;auto\\&quot;).crop(\\&quot;scale\\&quot;)).generate(\\&quot;sample.jpg\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Android&quot;,&quot;packageName&quot;:&quot;cloudinary-android&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;flutter&quot;,&quot;framework&quot;:&quot;flutter&quot;,&quot;language&quot;:&quot;flutter&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;sample.jpg&#039;).transformation(Transformation()\\n\\t.resize(Resize.scale().width(500))\\n\\t.delivery(Delivery.format(\\n\\tFormat.auto())));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;sample.jpg&#039;).transformation(Transformation()\\n\\t.resize(Resize.scale().width(500))\\n\\t.delivery(Delivery.format(\\n\\tFormat.auto())));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Flutter&quot;,&quot;packageName&quot;:&quot;cloudinary_flutter&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;kotlin&quot;,&quot;framework&quot;:&quot;kotlin&quot;,&quot;language&quot;:&quot;kotlin&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;sample.jpg\\&quot;)\\n\\t resize(Resize.scale() { width(500) })\\n\\t delivery(Delivery.format(\\n\\tFormat.auto())) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;sample.jpg\\&quot;)\\n\\t resize(Resize.scale() { width(500) })\\n\\t delivery(Delivery.format(\\n\\tFormat.auto())) \\n}.generate()&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Kotlin&quot;,&quot;packageName&quot;:&quot;kotlin-url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;jquery&quot;,&quot;framework&quot;:&quot;jquery&quot;,&quot;language&quot;:&quot;jquery&quot;,&quot;rawCodeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;sample.jpg\\&quot;, {width: 500, fetch_format: \\&quot;auto\\&quot;, crop: \\&quot;scale\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;sample.jpg\\&quot;, {width: 500, fetch_format: \\&quot;auto\\&quot;, crop: \\&quot;scale\\&quot;})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;jQuery&quot;,&quot;packageName&quot;:&quot;cloudinary-jquery&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_native&quot;,&quot;framework&quot;:&quot;react_native&quot;,&quot;language&quot;:&quot;react_native&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;sample.jpg\\&quot;)\\n  .resize(scale().width(500))\\n  .delivery(format(auto()));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;sample.jpg\\&quot;)\\n  .resize(scale().width(500))\\n  .delivery(format(auto()));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React Native&quot;,&quot;packageName&quot;:&quot;cloudinary-react-native&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;}]\"\n      parsed-url=\"{&quot;url&quot;:&quot;https:\\\/\\\/res.cloudinary.com\\\/demo\\\/image\\\/upload\\\/w_500,f_auto\\\/sample.jpg&quot;,&quot;cloud_name&quot;:&quot;demo&quot;,&quot;host&quot;:&quot;res.cloudinary.com&quot;,&quot;type&quot;:&quot;upload&quot;,&quot;resource_type&quot;:&quot;image&quot;,&quot;transformation&quot;:[{&quot;width&quot;:&quot;500&quot;,&quot;format&quot;:&quot;auto&quot;}],&quot;transformation_string&quot;:&quot;w_500,f_auto&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;sample.jpg&quot;,&quot;extension&quot;:&quot;jpg&quot;,&quot;format&quot;:&quot;jpg&quot;,&quot;format_code&quot;:true,&quot;url_code&quot;:false,&quot;signature&quot;:&quot;&quot;,&quot;private_cdn&quot;:false,&quot;result_asset_type&quot;:&quot;image&quot;}\"\n      with-url=\"false\"\n    >\n      <span class=\"u-visually-hidden\">Loading code examples<\/span>\n    <\/cld-code-widget><\/p>\n<h2>Tip 4: Apply q_auto to Automatically Deliver Images at the Optimal File Size and Visual Quality.<\/h2>\n<p>With <code>q_auto<\/code> 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\u2014with no detectable changes in visible quality.<\/p>\n<p>Here\u2019s an example of an image URL with <a href=\"https:\/\/cloudinary.com\/documentation\/image_optimization#use_q_auto_automatic_quality_and_encoding\">q_auto<\/a> applied:\n<cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[{&quot;sdkId&quot;:&quot;nodejs&quot;,&quot;framework&quot;:&quot;nodejs&quot;,&quot;language&quot;:&quot;nodejs&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(\\&quot;sofa_cat.jpg\\&quot;, {quality: \\&quot;auto\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;sofa_cat.jpg\\&quot;, {quality: \\&quot;auto\\&quot;})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Node.js&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_2&quot;,&quot;framework&quot;:&quot;react_2&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;sofa_cat.jpg\\&quot;).delivery(quality(auto()));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;sofa_cat.jpg\\&quot;).delivery(quality(auto()));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;react&quot;,&quot;framework&quot;:&quot;react&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;sofa_cat.jpg\\&quot; &gt; &lt;Transformation quality=\\&quot;auto\\&quot; \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;sofa_cat.jpg\\&quot; &gt;\\n\\t&lt;Transformation quality=\\&quot;auto\\&quot; \\\/&gt;\\n&lt;\\\/Image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;cloudinary-react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue_2&quot;,&quot;framework&quot;:&quot;vue_2&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;sofa_cat.jpg\\&quot;).delivery(quality(auto()));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;sofa_cat.jpg\\&quot;).delivery(quality(auto()));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/vue&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue&quot;,&quot;framework&quot;:&quot;vue&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;sofa_cat.jpg\\&quot; &gt; &lt;cld-transformation quality=\\&quot;auto\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;sofa_cat.jpg\\&quot; &gt;\\n\\t&lt;cld-transformation quality=\\&quot;auto\\&quot; \\\/&gt;\\n&lt;\\\/cld-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;cloudinary-vue&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular_2&quot;,&quot;framework&quot;:&quot;angular_2&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;sofa_cat.jpg\\&quot;).delivery(quality(auto()));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;sofa_cat.jpg\\&quot;).delivery(quality(auto()));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/ng&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular&quot;,&quot;framework&quot;:&quot;angular&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;sofa_cat.jpg\\&quot; &gt; &lt;cl-transformation quality=\\&quot;auto\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;sofa_cat.jpg\\&quot; &gt;\\n\\t&lt;cl-transformation quality=\\&quot;auto\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n&lt;\\\/cl-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/angular-5.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js_2&quot;,&quot;framework&quot;:&quot;js_2&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;sofa_cat.jpg\\&quot;).delivery(quality(auto()));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;sofa_cat.jpg\\&quot;).delivery(quality(auto()));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js&quot;,&quot;framework&quot;:&quot;js&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.imageTag(&#039;sofa_cat.jpg&#039;, {quality: \\&quot;auto\\&quot;}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;sofa_cat.jpg&#039;, {quality: \\&quot;auto\\&quot;}).toHtml();&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;cloudinary-core&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;python&quot;,&quot;framework&quot;:&quot;python&quot;,&quot;language&quot;:&quot;python&quot;,&quot;rawCodeSnippet&quot;:&quot;CloudinaryImage(\\&quot;sofa_cat.jpg\\&quot;).image(quality=\\&quot;auto\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;sofa_cat.jpg\\&quot;).image(quality=\\&quot;auto\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Python&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;php_2&quot;,&quot;framework&quot;:&quot;php_2&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;(new ImageTag(&#039;sofa_cat.jpg&#039;))\\n\\t-&gt;delivery(Delivery::quality(\\n\\tQuality::auto()));&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;sofa_cat.jpg&#039;))\\n\\t-&gt;delivery(Delivery::quality(\\n\\tQuality::auto()));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;php&quot;,&quot;framework&quot;:&quot;php&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;sofa_cat.jpg\\&quot;, array(\\&quot;quality\\&quot;=&gt;\\&quot;auto\\&quot;))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;sofa_cat.jpg\\&quot;, array(\\&quot;quality\\&quot;=&gt;\\&quot;auto\\&quot;))&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;java&quot;,&quot;framework&quot;:&quot;java&quot;,&quot;language&quot;:&quot;java&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().quality(\\&quot;auto\\&quot;)).imageTag(\\&quot;sofa_cat.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().quality(\\&quot;auto\\&quot;)).imageTag(\\&quot;sofa_cat.jpg\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Java&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;ruby&quot;,&quot;framework&quot;:&quot;ruby&quot;,&quot;language&quot;:&quot;ruby&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;sofa_cat.jpg\\&quot;, quality: \\&quot;auto\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;sofa_cat.jpg\\&quot;, quality: \\&quot;auto\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Ruby&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;csharp&quot;,&quot;framework&quot;:&quot;csharp&quot;,&quot;language&quot;:&quot;csharp&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Quality(\\&quot;auto\\&quot;)).BuildImageTag(\\&quot;sofa_cat.jpg\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Quality(\\&quot;auto\\&quot;)).BuildImageTag(\\&quot;sofa_cat.jpg\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;.NET&quot;,&quot;packageName&quot;:&quot;CloudinaryDotNet&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;dart&quot;,&quot;framework&quot;:&quot;dart&quot;,&quot;language&quot;:&quot;dart&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;sofa_cat.jpg&#039;).transformation(Transformation()\\n\\t.delivery(Delivery.quality(\\n\\tQuality.auto())));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;sofa_cat.jpg&#039;).transformation(Transformation()\\n\\t.delivery(Delivery.quality(\\n\\tQuality.auto())));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Dart&quot;,&quot;packageName&quot;:&quot;cloudinary_dart&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;swift&quot;,&quot;framework&quot;:&quot;swift&quot;,&quot;language&quot;:&quot;swift&quot;,&quot;rawCodeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setQuality(\\&quot;auto\\&quot;)).generate(\\&quot;sofa_cat.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setQuality(\\&quot;auto\\&quot;)).generate(\\&quot;sofa_cat.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;iOS&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;5.x&quot;},{&quot;sdkId&quot;:&quot;android&quot;,&quot;framework&quot;:&quot;android&quot;,&quot;language&quot;:&quot;android&quot;,&quot;rawCodeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().quality(\\&quot;auto\\&quot;)).generate(\\&quot;sofa_cat.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().quality(\\&quot;auto\\&quot;)).generate(\\&quot;sofa_cat.jpg\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Android&quot;,&quot;packageName&quot;:&quot;cloudinary-android&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;flutter&quot;,&quot;framework&quot;:&quot;flutter&quot;,&quot;language&quot;:&quot;flutter&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;sofa_cat.jpg&#039;).transformation(Transformation()\\n\\t.delivery(Delivery.quality(\\n\\tQuality.auto())));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;sofa_cat.jpg&#039;).transformation(Transformation()\\n\\t.delivery(Delivery.quality(\\n\\tQuality.auto())));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Flutter&quot;,&quot;packageName&quot;:&quot;cloudinary_flutter&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;kotlin&quot;,&quot;framework&quot;:&quot;kotlin&quot;,&quot;language&quot;:&quot;kotlin&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;sofa_cat.jpg\\&quot;)\\n\\t delivery(Delivery.quality(\\n\\tQuality.auto())) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;sofa_cat.jpg\\&quot;)\\n\\t delivery(Delivery.quality(\\n\\tQuality.auto())) \\n}.generate()&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Kotlin&quot;,&quot;packageName&quot;:&quot;kotlin-url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;jquery&quot;,&quot;framework&quot;:&quot;jquery&quot;,&quot;language&quot;:&quot;jquery&quot;,&quot;rawCodeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;sofa_cat.jpg\\&quot;, {quality: \\&quot;auto\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;sofa_cat.jpg\\&quot;, {quality: \\&quot;auto\\&quot;})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;jQuery&quot;,&quot;packageName&quot;:&quot;cloudinary-jquery&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_native&quot;,&quot;framework&quot;:&quot;react_native&quot;,&quot;language&quot;:&quot;react_native&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;sofa_cat.jpg\\&quot;).delivery(quality(auto()));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;sofa_cat.jpg\\&quot;).delivery(quality(auto()));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React Native&quot;,&quot;packageName&quot;:&quot;cloudinary-react-native&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;}]\"\n      parsed-url=\"{&quot;url&quot;:&quot;https:\\\/\\\/res.cloudinary.com\\\/demo\\\/image\\\/upload\\\/q_auto\\\/sofa_cat.jpg&quot;,&quot;cloud_name&quot;:&quot;demo&quot;,&quot;host&quot;:&quot;res.cloudinary.com&quot;,&quot;type&quot;:&quot;upload&quot;,&quot;resource_type&quot;:&quot;image&quot;,&quot;transformation&quot;:[{&quot;quality&quot;:&quot;auto&quot;}],&quot;transformation_string&quot;:&quot;q_auto&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;sofa_cat.jpg&quot;,&quot;extension&quot;:&quot;jpg&quot;,&quot;format&quot;:&quot;jpg&quot;,&quot;format_code&quot;:true,&quot;url_code&quot;:false,&quot;signature&quot;:&quot;&quot;,&quot;private_cdn&quot;:false,&quot;result_asset_type&quot;:&quot;image&quot;}\"\n      with-url=\"false\"\n    >\n      <span class=\"u-visually-hidden\">Loading code examples<\/span>\n    <\/cld-code-widget><\/p>\n<div style=\"clear: both; margin-bottom: 20px\">\n<\/div>\n<div style=\"text-align:center;\">\n<span style=\"display:inline-block;vertical-align:top;\">\n<a href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/sofa_cat.jpg\" target =\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/h_200\/sofa_cat.jpg\" alt=\"Original\" title=\"Original\" style=\"margin-right: 30px;display:block;\" \/><\/a>\n<small><b style=\"margin-right: 30px;display:block;\">Original &#8211; 1.49 MB<\/b><\/small>\n<\/span>\n<span style=\"display:inline-block;vertical-align:top;\">\n<a href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/q_auto\/sofa_cat.jpg\" target =\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/q_auto,h_200\/sofa_cat.jpg\" alt=\"Original\" title=\"Original\" style=\"margin-right: 30px;display:block;\" \/><\/a>\n<small><b style=\"margin-right: 30px;display:block;\">q_auto &#8211; 929.63 KB<\/b><\/small>\n<\/span>\n<\/div>\n<div style=\"clear: both; margin-bottom: 20px\">\n<\/div>\n<h2>Tip 5: Apply Transformations to Images for Optimization.<\/h2>\n<p>When applying any <a href=\"https:\/\/cloudinary.com\/documentation\/transformation_reference\">transformations<\/a> to your images, Cloudinary further optimizes them by performing the pertinent tasks, such as metadata stripping and more. No manual effort is required.<\/p>\n<p>You can specify <code>auto<\/code> for the format and quality transformations, in which case Cloudinary applies the optimum algorithms. Alternatively, specify a quality level; the default is 80.\nThe user interface can\u2019t be more straightforward:.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-res.cloudinary.com\/image\/upload\/w_700,c_fill,f_auto,q_auto,dpr_2.0\/default_image_quality.png\" alt=\"Default Image Quality\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1400\" height=\"217\"\/><\/p>\n<h2>Tip 6: Crop Images by Leveraging Cloudinary\u2019s AI-Based Smart-Cropping Capability.<\/h2>\n<p>With Cloudinary\u2019s smart-cropping capability, available with the <a href=\"https:\/\/cloudinary.com\/documentation\/cloudinary_ai_content_analysis_addon\">Object-Aware Cropping add-on<\/a>, 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.<\/p>\n<p>Here you can see the difference between our <code>g_auto:classic<\/code> and new <code>g_auto:bicycle<\/code>:<\/p>\n<div style=\"clear: both; margin-bottom: 20px\">\n<\/div>\n<div style=\"text-align:center;\">\n<span style=\"display:inline-block;vertical-align:top;\">\n<a href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/docs\/bike.jpg\" target =\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/h_200\/docs\/bike.jpg\" alt=\"Original\" title=\"Original\" style=\"margin-right: 30px;display:block;\" \/><\/a>\n<small><b style=\"margin-right: 30px;display:block;\">Original<\/b><\/small>\n<\/span>\n<span style=\"display:inline-block;vertical-align:top;\">\n<a href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_1000,ar_1,c_crop,g_auto:classic\/docs\/bike.jpg\" target =\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/c_fill,h_ih,ar_0.65,g_auto:classic\/h_200\/docs\/bike.jpg\" alt=\"Original\" title=\"Original\" style=\"margin-right: 30px;display:block;\" \/><\/a>\n<small><b style=\"margin-right: 30px;display:block;\">g_auto:classic<\/b><\/small>\n<\/span>\n<span style=\"display:inline-block;vertical-align:top;\">\n<a href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_1000,ar_1,c_crop,g_auto:bicycle\/docs\/bike.jpg\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/c_fill,h_ih,ar_0.65,g_auto:bicycle\/h_200\/docs\/bike.jpg\" alt=\"Original\" title=\"Original\" style=\"margin-right: 30px;display:block;\" \/><\/a>\n<small><b style=\"margin-right: 30px;display:block;\">g_auto:bicycle<\/b><\/small>\n<\/span>\n<\/div>\n<div style=\"clear: both; margin-bottom: 20px\">\n<\/div>\n<h2>Tip 7: Generate Low-Quality Image Placeholders for Lazy Loading of Images.<\/h2>\n<p>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 <a href=\"https:\/\/cloudinary.com\/blog\/low_quality_image_placeholders_lqip_explained\">Low Quality Image Placeholders (LQIP)<\/a>. This way you won\u2019t load your high-quality images unless they\u2019re coming into the viewport.<\/p>\n<p>Below are two examples:<\/p>\n<p>A low-quality, blurry image, about 1 KB in size. The original size is 486.91 KB.\n<cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[{&quot;sdkId&quot;:&quot;nodejs&quot;,&quot;framework&quot;:&quot;nodejs&quot;,&quot;language&quot;:&quot;nodejs&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(\\&quot;string_1.jpg\\&quot;, {transformation: [ {width: 640, crop: \\&quot;scale\\&quot;}, {effect: \\&quot;blur:1000\\&quot;, quality: 1}, {effect: \\&quot;grayscale\\&quot;} ]})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;string_1.jpg\\&quot;, {transformation: [\\n  {width: 640, crop: \\&quot;scale\\&quot;},\\n  {effect: \\&quot;blur:1000\\&quot;, quality: 1},\\n  {effect: \\&quot;grayscale\\&quot;}\\n  ]})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Node.js&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_2&quot;,&quot;framework&quot;:&quot;react_2&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;string_1.jpg\\&quot;)\\n  .resize(scale().width(640))\\n  .effect(blur().strength(1000))\\n  .delivery(format(auto()))\\n  .delivery(quality(1))\\n  .effect(grayscale());&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;string_1.jpg\\&quot;)\\n  .resize(scale().width(640))\\n  .effect(blur().strength(1000))\\n  .delivery(format(auto()))\\n  .delivery(quality(1))\\n  .effect(grayscale());&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;react&quot;,&quot;framework&quot;:&quot;react&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;string_1.jpg\\&quot; &gt; &lt;Transformation width=\\&quot;640\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt; &lt;Transformation effect=\\&quot;blur:1000\\&quot; quality=\\&quot;1\\&quot; \\\/&gt; &lt;Transformation effect=\\&quot;grayscale\\&quot; \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;string_1.jpg\\&quot; &gt;\\n\\t&lt;Transformation width=\\&quot;640\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt;\\n\\t&lt;Transformation effect=\\&quot;blur:1000\\&quot; quality=\\&quot;1\\&quot; \\\/&gt;\\n\\t&lt;Transformation effect=\\&quot;grayscale\\&quot; \\\/&gt;\\n&lt;\\\/Image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;cloudinary-react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue_2&quot;,&quot;framework&quot;:&quot;vue_2&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;string_1.jpg\\&quot;)\\n  .resize(scale().width(640))\\n  .effect(blur().strength(1000))\\n  .delivery(format(auto()))\\n  .delivery(quality(1))\\n  .effect(grayscale());&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;string_1.jpg\\&quot;)\\n  .resize(scale().width(640))\\n  .effect(blur().strength(1000))\\n  .delivery(format(auto()))\\n  .delivery(quality(1))\\n  .effect(grayscale());&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/vue&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue&quot;,&quot;framework&quot;:&quot;vue&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;string_1.jpg\\&quot; &gt; &lt;cld-transformation width=\\&quot;640\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt; &lt;cld-transformation effect=\\&quot;blur:1000\\&quot; quality=\\&quot;1\\&quot; \\\/&gt; &lt;cld-transformation effect=\\&quot;grayscale\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;string_1.jpg\\&quot; &gt;\\n\\t&lt;cld-transformation width=\\&quot;640\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt;\\n\\t&lt;cld-transformation effect=\\&quot;blur:1000\\&quot; quality=\\&quot;1\\&quot; \\\/&gt;\\n\\t&lt;cld-transformation effect=\\&quot;grayscale\\&quot; \\\/&gt;\\n&lt;\\\/cld-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;cloudinary-vue&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular_2&quot;,&quot;framework&quot;:&quot;angular_2&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;string_1.jpg\\&quot;)\\n  .resize(scale().width(640))\\n  .effect(blur().strength(1000))\\n  .delivery(format(auto()))\\n  .delivery(quality(1))\\n  .effect(grayscale());&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;string_1.jpg\\&quot;)\\n  .resize(scale().width(640))\\n  .effect(blur().strength(1000))\\n  .delivery(format(auto()))\\n  .delivery(quality(1))\\n  .effect(grayscale());&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/ng&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular&quot;,&quot;framework&quot;:&quot;angular&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;string_1.jpg\\&quot; &gt; &lt;cl-transformation width=\\&quot;640\\&quot; crop=\\&quot;scale\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;cl-transformation effect=\\&quot;blur:1000\\&quot; quality=\\&quot;1\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;cl-transformation effect=\\&quot;grayscale\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;string_1.jpg\\&quot; &gt;\\n\\t&lt;cl-transformation width=\\&quot;640\\&quot; crop=\\&quot;scale\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n\\t&lt;cl-transformation effect=\\&quot;blur:1000\\&quot; quality=\\&quot;1\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n\\t&lt;cl-transformation effect=\\&quot;grayscale\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n&lt;\\\/cl-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/angular-5.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js_2&quot;,&quot;framework&quot;:&quot;js_2&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;string_1.jpg\\&quot;)\\n  .resize(scale().width(640))\\n  .effect(blur().strength(1000))\\n  .delivery(format(auto()))\\n  .delivery(quality(1))\\n  .effect(grayscale());&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;string_1.jpg\\&quot;)\\n  .resize(scale().width(640))\\n  .effect(blur().strength(1000))\\n  .delivery(format(auto()))\\n  .delivery(quality(1))\\n  .effect(grayscale());&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js&quot;,&quot;framework&quot;:&quot;js&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.imageTag(&#039;string_1.jpg&#039;, {transformation: [ {width: 640, crop: \\&quot;scale\\&quot;}, {effect: \\&quot;blur:1000\\&quot;, quality: 1}, {effect: \\&quot;grayscale\\&quot;} ]}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;string_1.jpg&#039;, {transformation: [\\n  {width: 640, crop: \\&quot;scale\\&quot;},\\n  {effect: \\&quot;blur:1000\\&quot;, quality: 1},\\n  {effect: \\&quot;grayscale\\&quot;}\\n  ]}).toHtml();&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;cloudinary-core&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;python&quot;,&quot;framework&quot;:&quot;python&quot;,&quot;language&quot;:&quot;python&quot;,&quot;rawCodeSnippet&quot;:&quot;CloudinaryImage(\\&quot;string_1.jpg\\&quot;).image(transformation=[ {&#039;width&#039;: 640, &#039;crop&#039;: \\&quot;scale\\&quot;}, {&#039;effect&#039;: \\&quot;blur:1000\\&quot;, &#039;quality&#039;: 1}, {&#039;effect&#039;: \\&quot;grayscale\\&quot;} ])&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;string_1.jpg\\&quot;).image(transformation=[\\n  {&#039;width&#039;: 640, &#039;crop&#039;: \\&quot;scale\\&quot;},\\n  {&#039;effect&#039;: \\&quot;blur:1000\\&quot;, &#039;quality&#039;: 1},\\n  {&#039;effect&#039;: \\&quot;grayscale\\&quot;}\\n  ])&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Python&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;php_2&quot;,&quot;framework&quot;:&quot;php_2&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;(new ImageTag(&#039;string_1.jpg&#039;))\\n\\t-&gt;resize(Resize::scale()-&gt;width(640))\\n\\t-&gt;effect(Effect::blur()-&gt;strength(1000))\\n\\t-&gt;delivery(Delivery::format(\\n\\tFormat::auto()))\\n\\t-&gt;delivery(Delivery::quality(1))\\n\\t-&gt;effect(Effect::grayscale());&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;string_1.jpg&#039;))\\n\\t-&gt;resize(Resize::scale()-&gt;width(640))\\n\\t-&gt;effect(Effect::blur()-&gt;strength(1000))\\n\\t-&gt;delivery(Delivery::format(\\n\\tFormat::auto()))\\n\\t-&gt;delivery(Delivery::quality(1))\\n\\t-&gt;effect(Effect::grayscale());&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;php&quot;,&quot;framework&quot;:&quot;php&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;string_1.jpg\\&quot;, array(\\&quot;transformation\\&quot;=&gt;array( array(\\&quot;width\\&quot;=&gt;640, \\&quot;crop\\&quot;=&gt;\\&quot;scale\\&quot;), array(\\&quot;effect\\&quot;=&gt;\\&quot;blur:1000\\&quot;, \\&quot;quality\\&quot;=&gt;1), array(\\&quot;effect\\&quot;=&gt;\\&quot;grayscale\\&quot;) )))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;string_1.jpg\\&quot;, array(\\&quot;transformation\\&quot;=&gt;array(\\n  array(\\&quot;width\\&quot;=&gt;640, \\&quot;crop\\&quot;=&gt;\\&quot;scale\\&quot;),\\n  array(\\&quot;effect\\&quot;=&gt;\\&quot;blur:1000\\&quot;, \\&quot;quality\\&quot;=&gt;1),\\n  array(\\&quot;effect\\&quot;=&gt;\\&quot;grayscale\\&quot;)\\n  )))&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;java&quot;,&quot;framework&quot;:&quot;java&quot;,&quot;language&quot;:&quot;java&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().width(640).crop(\\&quot;scale\\&quot;).chain() .effect(\\&quot;blur:1000\\&quot;).quality(1).chain() .effect(\\&quot;grayscale\\&quot;)).imageTag(\\&quot;string_1.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation()\\n  .width(640).crop(\\&quot;scale\\&quot;).chain()\\n  .effect(\\&quot;blur:1000\\&quot;).quality(1).chain()\\n  .effect(\\&quot;grayscale\\&quot;)).imageTag(\\&quot;string_1.jpg\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Java&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;ruby&quot;,&quot;framework&quot;:&quot;ruby&quot;,&quot;language&quot;:&quot;ruby&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;string_1.jpg\\&quot;, transformation: [ {width: 640, crop: \\&quot;scale\\&quot;}, {effect: \\&quot;blur:1000\\&quot;, quality: 1}, {effect: \\&quot;grayscale\\&quot;} ])&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;string_1.jpg\\&quot;, transformation: [\\n  {width: 640, crop: \\&quot;scale\\&quot;},\\n  {effect: \\&quot;blur:1000\\&quot;, quality: 1},\\n  {effect: \\&quot;grayscale\\&quot;}\\n  ])&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Ruby&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;csharp&quot;,&quot;framework&quot;:&quot;csharp&quot;,&quot;language&quot;:&quot;csharp&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(640).Crop(\\&quot;scale\\&quot;).Chain() .Effect(\\&quot;blur:1000\\&quot;).Quality(1).Chain() .Effect(\\&quot;grayscale\\&quot;)).BuildImageTag(\\&quot;string_1.jpg\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation()\\n  .Width(640).Crop(\\&quot;scale\\&quot;).Chain()\\n  .Effect(\\&quot;blur:1000\\&quot;).Quality(1).Chain()\\n  .Effect(\\&quot;grayscale\\&quot;)).BuildImageTag(\\&quot;string_1.jpg\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;.NET&quot;,&quot;packageName&quot;:&quot;CloudinaryDotNet&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;dart&quot;,&quot;framework&quot;:&quot;dart&quot;,&quot;language&quot;:&quot;dart&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;string_1.jpg&#039;).transformation(Transformation()\\n\\t.resize(Resize.scale().width(640))\\n\\t.effect(Effect.blur().strength(1000))\\n\\t.delivery(Delivery.format(\\n\\tFormat.auto()))\\n\\t.delivery(Delivery.quality(1))\\n\\t.effect(Effect.grayscale()));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;string_1.jpg&#039;).transformation(Transformation()\\n\\t.resize(Resize.scale().width(640))\\n\\t.effect(Effect.blur().strength(1000))\\n\\t.delivery(Delivery.format(\\n\\tFormat.auto()))\\n\\t.delivery(Delivery.quality(1))\\n\\t.effect(Effect.grayscale()));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Dart&quot;,&quot;packageName&quot;:&quot;cloudinary_dart&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;swift&quot;,&quot;framework&quot;:&quot;swift&quot;,&quot;language&quot;:&quot;swift&quot;,&quot;rawCodeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(640).setCrop(\\&quot;scale\\&quot;).chain() .setEffect(\\&quot;blur:1000\\&quot;).setQuality(1).chain() .setEffect(\\&quot;grayscale\\&quot;)).generate(\\&quot;string_1.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()\\n  .setWidth(640).setCrop(\\&quot;scale\\&quot;).chain()\\n  .setEffect(\\&quot;blur:1000\\&quot;).setQuality(1).chain()\\n  .setEffect(\\&quot;grayscale\\&quot;)).generate(\\&quot;string_1.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;iOS&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;5.x&quot;},{&quot;sdkId&quot;:&quot;android&quot;,&quot;framework&quot;:&quot;android&quot;,&quot;language&quot;:&quot;android&quot;,&quot;rawCodeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().width(640).crop(\\&quot;scale\\&quot;).chain() .effect(\\&quot;blur:1000\\&quot;).quality(1).chain() .effect(\\&quot;grayscale\\&quot;)).generate(\\&quot;string_1.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation()\\n  .width(640).crop(\\&quot;scale\\&quot;).chain()\\n  .effect(\\&quot;blur:1000\\&quot;).quality(1).chain()\\n  .effect(\\&quot;grayscale\\&quot;)).generate(\\&quot;string_1.jpg\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Android&quot;,&quot;packageName&quot;:&quot;cloudinary-android&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;flutter&quot;,&quot;framework&quot;:&quot;flutter&quot;,&quot;language&quot;:&quot;flutter&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;string_1.jpg&#039;).transformation(Transformation()\\n\\t.resize(Resize.scale().width(640))\\n\\t.effect(Effect.blur().strength(1000))\\n\\t.delivery(Delivery.format(\\n\\tFormat.auto()))\\n\\t.delivery(Delivery.quality(1))\\n\\t.effect(Effect.grayscale()));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;string_1.jpg&#039;).transformation(Transformation()\\n\\t.resize(Resize.scale().width(640))\\n\\t.effect(Effect.blur().strength(1000))\\n\\t.delivery(Delivery.format(\\n\\tFormat.auto()))\\n\\t.delivery(Delivery.quality(1))\\n\\t.effect(Effect.grayscale()));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Flutter&quot;,&quot;packageName&quot;:&quot;cloudinary_flutter&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;kotlin&quot;,&quot;framework&quot;:&quot;kotlin&quot;,&quot;language&quot;:&quot;kotlin&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;string_1.jpg\\&quot;)\\n\\t resize(Resize.scale() { width(640) })\\n\\t effect(Effect.blur() { strength(1000) })\\n\\t delivery(Delivery.format(\\n\\tFormat.auto()))\\n\\t delivery(Delivery.quality(1))\\n\\t effect(Effect.grayscale()) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;string_1.jpg\\&quot;)\\n\\t resize(Resize.scale() { width(640) })\\n\\t effect(Effect.blur() { strength(1000) })\\n\\t delivery(Delivery.format(\\n\\tFormat.auto()))\\n\\t delivery(Delivery.quality(1))\\n\\t effect(Effect.grayscale()) \\n}.generate()&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Kotlin&quot;,&quot;packageName&quot;:&quot;kotlin-url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;jquery&quot;,&quot;framework&quot;:&quot;jquery&quot;,&quot;language&quot;:&quot;jquery&quot;,&quot;rawCodeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;string_1.jpg\\&quot;, {transformation: [ {width: 640, crop: \\&quot;scale\\&quot;}, {effect: \\&quot;blur:1000\\&quot;, quality: 1}, {effect: \\&quot;grayscale\\&quot;} ]})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;string_1.jpg\\&quot;, {transformation: [\\n  {width: 640, crop: \\&quot;scale\\&quot;},\\n  {effect: \\&quot;blur:1000\\&quot;, quality: 1},\\n  {effect: \\&quot;grayscale\\&quot;}\\n  ]})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;jQuery&quot;,&quot;packageName&quot;:&quot;cloudinary-jquery&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_native&quot;,&quot;framework&quot;:&quot;react_native&quot;,&quot;language&quot;:&quot;react_native&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;string_1.jpg\\&quot;)\\n  .resize(scale().width(640))\\n  .effect(blur().strength(1000))\\n  .delivery(format(auto()))\\n  .delivery(quality(1))\\n  .effect(grayscale());&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;string_1.jpg\\&quot;)\\n  .resize(scale().width(640))\\n  .effect(blur().strength(1000))\\n  .delivery(format(auto()))\\n  .delivery(quality(1))\\n  .effect(grayscale());&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React Native&quot;,&quot;packageName&quot;:&quot;cloudinary-react-native&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;}]\"\n      parsed-url=\"{&quot;url&quot;:&quot;https:\\\/\\\/res.cloudinary.com\\\/demo\\\/image\\\/upload\\\/w_640\\\/e_blur:1000,q_1,f_auto\\\/e_grayscale\\\/string_1.jpg&quot;,&quot;cloud_name&quot;:&quot;demo&quot;,&quot;host&quot;:&quot;res.cloudinary.com&quot;,&quot;type&quot;:&quot;upload&quot;,&quot;resource_type&quot;:&quot;image&quot;,&quot;transformation&quot;:[{&quot;width&quot;:&quot;640&quot;},{&quot;effect&quot;:&quot;blur:1000&quot;,&quot;quality&quot;:&quot;1&quot;,&quot;format&quot;:&quot;auto&quot;},{&quot;effect&quot;:&quot;grayscale&quot;}],&quot;transformation_string&quot;:&quot;w_640\\\/e_blur:1000,q_1,f_auto\\\/e_grayscale&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;string_1.jpg&quot;,&quot;extension&quot;:&quot;jpg&quot;,&quot;format&quot;:&quot;jpg&quot;,&quot;format_code&quot;:true,&quot;url_code&quot;:false,&quot;signature&quot;:&quot;&quot;,&quot;private_cdn&quot;:false,&quot;result_asset_type&quot;:&quot;image&quot;}\"\n      with-url=\"true\"\n    >\n      <span class=\"u-visually-hidden\">Loading code examples<\/span>\n    <\/cld-code-widget><a class=\"c-image-link\" href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_640\/e_blur:1000,q_1,f_auto\/e_grayscale\/string_1.jpg\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_640\/e_blur:1000,q_1,f_auto\/e_grayscale\/string_1.jpg\" alt=\"LQIP\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"640\" height=\"376\"\/><\/a><\/p>\n<p>An SVG placeholder using our <a href=\"https:\/\/cloudinary.com\/blog\/upscaling_raster_image_to_vector_graphic_conversions\">e_vectorize feature<\/a>, about 1 KB in size. The original size is 397.33 KB.\n<cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[{&quot;sdkId&quot;:&quot;nodejs&quot;,&quot;framework&quot;:&quot;nodejs&quot;,&quot;language&quot;:&quot;nodejs&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(\\&quot;docs\\\/lion.svg\\&quot;, {effect: \\&quot;vectorize:colors:2:detail:0.02:paths:0\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;docs\\\/lion.svg\\&quot;, {effect: \\&quot;vectorize:colors:2:detail:0.02:paths:0\\&quot;})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Node.js&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_2&quot;,&quot;framework&quot;:&quot;react_2&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/lion.svg\\&quot;).effect(\\n  vectorize().numOfColors(2).detailsLevel(0.02).paths(0)\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/lion.svg\\&quot;).effect(\\n  vectorize().numOfColors(2).detailsLevel(0.02).paths(0)\\n);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;react&quot;,&quot;framework&quot;:&quot;react&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;docs\\\/lion.svg\\&quot; &gt; &lt;Transformation effect=\\&quot;vectorize:colors:2:detail:0.02:paths:0\\&quot; \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;docs\\\/lion.svg\\&quot; &gt;\\n\\t&lt;Transformation effect=\\&quot;vectorize:colors:2:detail:0.02:paths:0\\&quot; \\\/&gt;\\n&lt;\\\/Image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;cloudinary-react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue_2&quot;,&quot;framework&quot;:&quot;vue_2&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/lion.svg\\&quot;).effect(\\n  vectorize().numOfColors(2).detailsLevel(0.02).paths(0)\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/lion.svg\\&quot;).effect(\\n  vectorize().numOfColors(2).detailsLevel(0.02).paths(0)\\n);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/vue&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue&quot;,&quot;framework&quot;:&quot;vue&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;docs\\\/lion.svg\\&quot; &gt; &lt;cld-transformation effect=\\&quot;vectorize:colors:2:detail:0.02:paths:0\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;docs\\\/lion.svg\\&quot; &gt;\\n\\t&lt;cld-transformation effect=\\&quot;vectorize:colors:2:detail:0.02:paths:0\\&quot; \\\/&gt;\\n&lt;\\\/cld-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;cloudinary-vue&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular_2&quot;,&quot;framework&quot;:&quot;angular_2&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/lion.svg\\&quot;).effect(\\n  vectorize().numOfColors(2).detailsLevel(0.02).paths(0)\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/lion.svg\\&quot;).effect(\\n  vectorize().numOfColors(2).detailsLevel(0.02).paths(0)\\n);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/ng&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular&quot;,&quot;framework&quot;:&quot;angular&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;docs\\\/lion.svg\\&quot; &gt; &lt;cl-transformation effect=\\&quot;vectorize:colors:2:detail:0.02:paths:0\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;docs\\\/lion.svg\\&quot; &gt;\\n\\t&lt;cl-transformation effect=\\&quot;vectorize:colors:2:detail:0.02:paths:0\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n&lt;\\\/cl-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/angular-5.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js_2&quot;,&quot;framework&quot;:&quot;js_2&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/lion.svg\\&quot;).effect(\\n  vectorize().numOfColors(2).detailsLevel(0.02).paths(0)\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/lion.svg\\&quot;).effect(\\n  vectorize().numOfColors(2).detailsLevel(0.02).paths(0)\\n);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js&quot;,&quot;framework&quot;:&quot;js&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.imageTag(&#039;docs\\\/lion.svg&#039;, {effect: \\&quot;vectorize:colors:2:detail:0.02:paths:0\\&quot;}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;docs\\\/lion.svg&#039;, {effect: \\&quot;vectorize:colors:2:detail:0.02:paths:0\\&quot;}).toHtml();&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;cloudinary-core&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;python&quot;,&quot;framework&quot;:&quot;python&quot;,&quot;language&quot;:&quot;python&quot;,&quot;rawCodeSnippet&quot;:&quot;CloudinaryImage(\\&quot;docs\\\/lion.svg\\&quot;).image(effect=\\&quot;vectorize:colors:2:detail:0.02:paths:0\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;docs\\\/lion.svg\\&quot;).image(effect=\\&quot;vectorize:colors:2:detail:0.02:paths:0\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Python&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;php_2&quot;,&quot;framework&quot;:&quot;php_2&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;(new ImageTag(&#039;docs\\\/lion.svg&#039;))\\n\\t-&gt;effect(Effect::vectorize()-&gt;numOfColors(2)\\n-&gt;detailsLevel(0.02)\\n-&gt;paths(0));&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;docs\\\/lion.svg&#039;))\\n\\t-&gt;effect(Effect::vectorize()-&gt;numOfColors(2)\\n-&gt;detailsLevel(0.02)\\n-&gt;paths(0));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;php&quot;,&quot;framework&quot;:&quot;php&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;docs\\\/lion.svg\\&quot;, array(\\&quot;effect\\&quot;=&gt;\\&quot;vectorize:colors:2:detail:0.02:paths:0\\&quot;))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;docs\\\/lion.svg\\&quot;, array(\\&quot;effect\\&quot;=&gt;\\&quot;vectorize:colors:2:detail:0.02:paths:0\\&quot;))&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;java&quot;,&quot;framework&quot;:&quot;java&quot;,&quot;language&quot;:&quot;java&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().effect(\\&quot;vectorize:colors:2:detail:0.02:paths:0\\&quot;)).imageTag(\\&quot;docs\\\/lion.svg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().effect(\\&quot;vectorize:colors:2:detail:0.02:paths:0\\&quot;)).imageTag(\\&quot;docs\\\/lion.svg\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Java&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;ruby&quot;,&quot;framework&quot;:&quot;ruby&quot;,&quot;language&quot;:&quot;ruby&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;docs\\\/lion.svg\\&quot;, effect: \\&quot;vectorize:colors:2:detail:0.02:paths:0\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;docs\\\/lion.svg\\&quot;, effect: \\&quot;vectorize:colors:2:detail:0.02:paths:0\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Ruby&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;csharp&quot;,&quot;framework&quot;:&quot;csharp&quot;,&quot;language&quot;:&quot;csharp&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect(\\&quot;vectorize:colors:2:detail:0.02:paths:0\\&quot;)).BuildImageTag(\\&quot;docs\\\/lion.svg\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect(\\&quot;vectorize:colors:2:detail:0.02:paths:0\\&quot;)).BuildImageTag(\\&quot;docs\\\/lion.svg\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;.NET&quot;,&quot;packageName&quot;:&quot;CloudinaryDotNet&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;dart&quot;,&quot;framework&quot;:&quot;dart&quot;,&quot;language&quot;:&quot;dart&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;docs\\\/lion.svg&#039;).transformation(Transformation()\\n\\t.effect(Effect.vectorize().numOfColors(2)\\n.detailsLevel(0.02)\\n.paths(0)));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;docs\\\/lion.svg&#039;).transformation(Transformation()\\n\\t.effect(Effect.vectorize().numOfColors(2)\\n.detailsLevel(0.02)\\n.paths(0)));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Dart&quot;,&quot;packageName&quot;:&quot;cloudinary_dart&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;swift&quot;,&quot;framework&quot;:&quot;swift&quot;,&quot;language&quot;:&quot;swift&quot;,&quot;rawCodeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect(\\&quot;vectorize:colors:2:detail:0.02:paths:0\\&quot;)).generate(\\&quot;docs\\\/lion.svg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect(\\&quot;vectorize:colors:2:detail:0.02:paths:0\\&quot;)).generate(\\&quot;docs\\\/lion.svg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;iOS&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;5.x&quot;},{&quot;sdkId&quot;:&quot;android&quot;,&quot;framework&quot;:&quot;android&quot;,&quot;language&quot;:&quot;android&quot;,&quot;rawCodeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().effect(\\&quot;vectorize:colors:2:detail:0.02:paths:0\\&quot;)).generate(\\&quot;docs\\\/lion.svg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().effect(\\&quot;vectorize:colors:2:detail:0.02:paths:0\\&quot;)).generate(\\&quot;docs\\\/lion.svg\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Android&quot;,&quot;packageName&quot;:&quot;cloudinary-android&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;flutter&quot;,&quot;framework&quot;:&quot;flutter&quot;,&quot;language&quot;:&quot;flutter&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;docs\\\/lion.svg&#039;).transformation(Transformation()\\n\\t.effect(Effect.vectorize().numOfColors(2)\\n.detailsLevel(0.02)\\n.paths(0)));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;docs\\\/lion.svg&#039;).transformation(Transformation()\\n\\t.effect(Effect.vectorize().numOfColors(2)\\n.detailsLevel(0.02)\\n.paths(0)));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Flutter&quot;,&quot;packageName&quot;:&quot;cloudinary_flutter&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;kotlin&quot;,&quot;framework&quot;:&quot;kotlin&quot;,&quot;language&quot;:&quot;kotlin&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;docs\\\/lion.svg\\&quot;)\\n\\t effect(Effect.vectorize() { numOfColors(2)\\n detailsLevel(0.02F)\\n paths(0) }) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;docs\\\/lion.svg\\&quot;)\\n\\t effect(Effect.vectorize() { numOfColors(2)\\n detailsLevel(0.02F)\\n paths(0) }) \\n}.generate()&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Kotlin&quot;,&quot;packageName&quot;:&quot;kotlin-url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;jquery&quot;,&quot;framework&quot;:&quot;jquery&quot;,&quot;language&quot;:&quot;jquery&quot;,&quot;rawCodeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;docs\\\/lion.svg\\&quot;, {effect: \\&quot;vectorize:colors:2:detail:0.02:paths:0\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;docs\\\/lion.svg\\&quot;, {effect: \\&quot;vectorize:colors:2:detail:0.02:paths:0\\&quot;})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;jQuery&quot;,&quot;packageName&quot;:&quot;cloudinary-jquery&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_native&quot;,&quot;framework&quot;:&quot;react_native&quot;,&quot;language&quot;:&quot;react_native&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/lion.svg\\&quot;).effect(\\n  vectorize().numOfColors(2).detailsLevel(0.02).paths(0)\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/lion.svg\\&quot;).effect(\\n  vectorize().numOfColors(2).detailsLevel(0.02).paths(0)\\n);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React Native&quot;,&quot;packageName&quot;:&quot;cloudinary-react-native&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;}]\"\n      parsed-url=\"{&quot;url&quot;:&quot;https:\\\/\\\/res.cloudinary.com\\\/demo\\\/image\\\/upload\\\/e_vectorize:colors:2:detail:0.02:paths:0\\\/docs\\\/lion.svg&quot;,&quot;cloud_name&quot;:&quot;demo&quot;,&quot;host&quot;:&quot;res.cloudinary.com&quot;,&quot;type&quot;:&quot;upload&quot;,&quot;resource_type&quot;:&quot;image&quot;,&quot;transformation&quot;:[{&quot;effect&quot;:&quot;vectorize:colors:2:detail:0.02:paths:0&quot;}],&quot;transformation_string&quot;:&quot;e_vectorize:colors:2:detail:0.02:paths:0&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:null,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;docs\\\/lion.svg&quot;,&quot;extension&quot;:&quot;svg&quot;,&quot;format&quot;:&quot;svg&quot;,&quot;format_code&quot;:true,&quot;url_code&quot;:false,&quot;signature&quot;:&quot;&quot;,&quot;private_cdn&quot;:false,&quot;result_asset_type&quot;:&quot;image&quot;}\"\n      with-url=\"true\"\n    >\n      <span class=\"u-visually-hidden\">Loading code examples<\/span>\n    <\/cld-code-widget><a class=\"c-image-link\" href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/e_vectorize:colors:2:detail:0.02:paths:0\/docs\/lion.svg\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/e_vectorize:colors:2:detail:0.02:paths:0\/docs\/lion.svg\" alt=\"LQIP\" loading=\"lazy\" class=\"c-transformed-asset\" \/><\/a><\/p>\n<h2>Tip 8: Make Your Images Search-Engine Friendly with SEO-Friendly URLs.<\/h2>\n<p>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 \u201cbasketball_shot\u201d to give an accurate depiction of what the image is, thus making it easier to index. You can also shorten the <a href=\"https:\/\/cloudinary.com\/glossary\/clipping-path\">path<\/a> of the image by deleting the default <code>image\/upload<\/code> portion of the URL as so:<\/p>\n<p><cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[{&quot;sdkId&quot;:&quot;nodejs&quot;,&quot;framework&quot;:&quot;nodejs&quot;,&quot;language&quot;:&quot;nodejs&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(\\&quot;basketball_shot.jpg\\&quot;, {use_root_path: true})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;basketball_shot.jpg\\&quot;, {use_root_path: true})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Node.js&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_2&quot;,&quot;framework&quot;:&quot;react_2&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;basketball_shot.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;basketball_shot.jpg\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;react&quot;,&quot;framework&quot;:&quot;react&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;basketball_shot.jpg\\&quot; useRootPath=\\&quot;true\\&quot;&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;basketball_shot.jpg\\&quot; useRootPath=\\&quot;true\\&quot;&gt;\\n\\n&lt;\\\/Image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;cloudinary-react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue_2&quot;,&quot;framework&quot;:&quot;vue_2&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;basketball_shot.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;basketball_shot.jpg\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/vue&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue&quot;,&quot;framework&quot;:&quot;vue&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;basketball_shot.jpg\\&quot; use-root-path=\\&quot;true\\&quot;&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;basketball_shot.jpg\\&quot; use-root-path=\\&quot;true\\&quot;&gt;\\n\\n&lt;\\\/cld-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;cloudinary-vue&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular_2&quot;,&quot;framework&quot;:&quot;angular_2&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;basketball_shot.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;basketball_shot.jpg\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/ng&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular&quot;,&quot;framework&quot;:&quot;angular&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;basketball_shot.jpg\\&quot; use-root-path=\\&quot;true\\&quot;&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;basketball_shot.jpg\\&quot; use-root-path=\\&quot;true\\&quot;&gt;\\n\\n&lt;\\\/cl-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/angular-5.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js_2&quot;,&quot;framework&quot;:&quot;js_2&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;basketball_shot.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;basketball_shot.jpg\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js&quot;,&quot;framework&quot;:&quot;js&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.imageTag(&#039;basketball_shot.jpg&#039;, {useRootPath: true}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;basketball_shot.jpg&#039;, {useRootPath: true}).toHtml();&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;cloudinary-core&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;python&quot;,&quot;framework&quot;:&quot;python&quot;,&quot;language&quot;:&quot;python&quot;,&quot;rawCodeSnippet&quot;:&quot;CloudinaryImage(\\&quot;basketball_shot.jpg\\&quot;).image(use_root_path=True)&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;basketball_shot.jpg\\&quot;).image(use_root_path=True)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Python&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;php_2&quot;,&quot;framework&quot;:&quot;php_2&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;(new ImageTag(&#039;basketball_shot.jpg&#039;));&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;basketball_shot.jpg&#039;));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;php&quot;,&quot;framework&quot;:&quot;php&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;basketball_shot.jpg\\&quot;, array(\\&quot;use_root_path\\&quot;=&gt;true))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;basketball_shot.jpg\\&quot;, array(\\&quot;use_root_path\\&quot;=&gt;true))&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;java&quot;,&quot;framework&quot;:&quot;java&quot;,&quot;language&quot;:&quot;java&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().useRootPath(true).imageTag(\\&quot;basketball_shot.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().useRootPath(true).imageTag(\\&quot;basketball_shot.jpg\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Java&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;ruby&quot;,&quot;framework&quot;:&quot;ruby&quot;,&quot;language&quot;:&quot;ruby&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;basketball_shot.jpg\\&quot;, use_root_path: true)&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;basketball_shot.jpg\\&quot;, use_root_path: true)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Ruby&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;csharp&quot;,&quot;framework&quot;:&quot;csharp&quot;,&quot;language&quot;:&quot;csharp&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.UseRootPath(true).BuildImageTag(\\&quot;basketball_shot.jpg\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.UseRootPath(true).BuildImageTag(\\&quot;basketball_shot.jpg\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;.NET&quot;,&quot;packageName&quot;:&quot;CloudinaryDotNet&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;dart&quot;,&quot;framework&quot;:&quot;dart&quot;,&quot;language&quot;:&quot;dart&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;basketball_shot.jpg&#039;).transformation(Transformation());&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;basketball_shot.jpg&#039;).transformation(Transformation());&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Dart&quot;,&quot;packageName&quot;:&quot;cloudinary_dart&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;swift&quot;,&quot;framework&quot;:&quot;swift&quot;,&quot;language&quot;:&quot;swift&quot;,&quot;rawCodeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setUseRootPath( true).generate(\\&quot;basketball_shot.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setUseRootPath( true).generate(\\&quot;basketball_shot.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;iOS&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;5.x&quot;},{&quot;sdkId&quot;:&quot;android&quot;,&quot;framework&quot;:&quot;android&quot;,&quot;language&quot;:&quot;android&quot;,&quot;rawCodeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().useRootPath(true).generate(\\&quot;basketball_shot.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().useRootPath(true).generate(\\&quot;basketball_shot.jpg\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Android&quot;,&quot;packageName&quot;:&quot;cloudinary-android&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;flutter&quot;,&quot;framework&quot;:&quot;flutter&quot;,&quot;language&quot;:&quot;flutter&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;basketball_shot.jpg&#039;).transformation(Transformation());&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;basketball_shot.jpg&#039;).transformation(Transformation());&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Flutter&quot;,&quot;packageName&quot;:&quot;cloudinary_flutter&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;kotlin&quot;,&quot;framework&quot;:&quot;kotlin&quot;,&quot;language&quot;:&quot;kotlin&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;basketball_shot.jpg\\&quot;) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;basketball_shot.jpg\\&quot;) \\n}.generate()&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Kotlin&quot;,&quot;packageName&quot;:&quot;kotlin-url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;jquery&quot;,&quot;framework&quot;:&quot;jquery&quot;,&quot;language&quot;:&quot;jquery&quot;,&quot;rawCodeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;basketball_shot.jpg\\&quot;, {use_root_path: true})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;basketball_shot.jpg\\&quot;, {use_root_path: true})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;jQuery&quot;,&quot;packageName&quot;:&quot;cloudinary-jquery&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_native&quot;,&quot;framework&quot;:&quot;react_native&quot;,&quot;language&quot;:&quot;react_native&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;basketball_shot.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;basketball_shot.jpg\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React Native&quot;,&quot;packageName&quot;:&quot;cloudinary-react-native&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;}]\"\n      parsed-url=\"{&quot;url&quot;:&quot;https:\\\/\\\/res.cloudinary.com\\\/demo\\\/basketball_shot.jpg&quot;,&quot;cloud_name&quot;:&quot;demo&quot;,&quot;host&quot;:&quot;res.cloudinary.com&quot;,&quot;type&quot;:&quot;upload&quot;,&quot;resource_type&quot;:&quot;image&quot;,&quot;transformation&quot;:[],&quot;transformation_string&quot;:&quot;&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;basketball_shot.jpg&quot;,&quot;extension&quot;:&quot;jpg&quot;,&quot;format&quot;:&quot;jpg&quot;,&quot;format_code&quot;:true,&quot;url_code&quot;:false,&quot;signature&quot;:&quot;&quot;,&quot;private_cdn&quot;:false,&quot;result_asset_type&quot;:&quot;image&quot;}\"\n      with-url=\"false\"\n    >\n      <span class=\"u-visually-hidden\">Loading code examples<\/span>\n    <\/cld-code-widget><\/p>\n<p>Alternatively, if you use non-descriptive public IDs, replace <code>image\/upload<\/code> with <code>images<\/code> to utilize Cloudinary\u2019s <a href=\"https:\/\/cloudinary.com\/blog\/how_to_dynamically_create_seo_friendly_urls_for_your_site_s_images\">dynamic SEO suffixes<\/a> that allow for multiple descriptions. In the examples below, both images have the public ID \u201cltepu4mm0qzw6lkfxt1m\u201d but are still able to describe the image in two different languages allowing for further indexing:<\/p>\n<p><strong>Image with a dynamic SEO suffix<\/strong>\n<img decoding=\"async\" src=\"https:\/\/demo-res.cloudinary.com\/images\/ltepu4mm0qzw6lkfxt1m\/basketball-game-in-college.jpg\" alt=\"Image with a dynamic SEO suffix\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1920\" height=\"1275\"\/><\/p>\n<p><strong>Image with a dynamic SEO suffix in Spanish<\/strong>\n<cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[]\"\n      parsed-url=\"{&quot;url&quot;:&quot;https:\\\/\\\/demo-res.cloudinary.com\\\/images\\\/ltepu4mm0qzw6lkfxt1m\\\/baloncesto-juego-en-universidad.jpg&quot;,&quot;cloud_name&quot;:&quot;demo&quot;,&quot;host&quot;:&quot;demo-res.cloudinary.com&quot;,&quot;type&quot;:&quot;upload&quot;,&quot;resource_type&quot;:&quot;image&quot;,&quot;transformation&quot;:[],&quot;transformation_string&quot;:&quot;&quot;,&quot;url_suffix&quot;:&quot;baloncesto-juego-en-universidad&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;ltepu4mm0qzw6lkfxt1m.jpg&quot;,&quot;extension&quot;:&quot;jpg&quot;,&quot;format&quot;:&quot;jpg&quot;,&quot;format_code&quot;:true,&quot;url_code&quot;:false,&quot;signature&quot;:&quot;&quot;,&quot;private_cdn&quot;:true,&quot;result_asset_type&quot;:&quot;image&quot;}\"\n      with-url=\"true\"\n    >\n      <span class=\"u-visually-hidden\">Loading code examples<\/span>\n    <\/cld-code-widget><\/p>\n<p>Furthermore, if you\u2019d like your images to be delivered under your company\u2019s domain, you can set up a CNAME, such as <code>cdn.example.com<\/code>. Please note that CNAMEs are available on the Advanced plan and up.<\/p>\n<h2>Tip 9: Adopt Adaptive Bitrate Streaming to Automate Adjustment of Video Quality in Real Time.<\/h2>\n<p>Cloudinary\u2019s <a href=\"https:\/\/cloudinary.com\/documentation\/video_manipulation_and_delivery#adaptive_bitrate_streaming_hls_and_mpeg_dash\">Adaptive Bitrate Streaming (ABS)<\/a> capability adjusts video quality in real time to deliver the best-possible quality for the current viewing device and network connection. You can then\u2014<\/p>\n<ul>\n<li>Eliminate <a href=\"https:\/\/cloudinary.com\/glossary\/buffer\">buffering<\/a> time.<\/li>\n<li>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.<\/li>\n<\/ul>\n<p>As an example, the following code eagerly and <a href=\"https:\/\/cloudinary.com\/glossary\/asynchronous-video\">asynchronously<\/a> generates the video \u201cbig_buck_bunny.mp4\u201d in HLS format, one of the two supported adaptive streaming formats, using the \u201cfull_hd\u201d streaming profile.<\/p>\n<cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[{&quot;sdkId&quot;:&quot;ruby&quot;,&quot;framework&quot;:&quot;ruby&quot;,&quot;language&quot;:&quot;ruby&quot;,&quot;displayName&quot;:&quot;Ruby&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;rawCodeSnippet&quot;:&quot;Cloudinary::Uploader.upload(\\&quot;big_buck_bunny.mp4\\&quot;, :resource_type =&gt; :video, \\n          :eager =&gt; [{:streaming_profile =&gt; \\&quot;full_hd\\&quot;, :format =&gt; \\&quot;m3u8\\&quot;}], \\n          :eager_async =&gt; true,\\n          :eager_notification_url =&gt; \\&quot;https:\\\/\\\/mysite.example.com\\\/notify_endpoint\\&quot;,\\n          :public_id =&gt; \\&quot;bb_bunny\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;Cloudinary::Uploader.upload(\\&quot;big_buck_bunny.mp4\\&quot;, :resource_type =&gt; :video, \\n          :eager =&gt; [{:streaming_profile =&gt; \\&quot;full_hd\\&quot;, :format =&gt; \\&quot;m3u8\\&quot;}], \\n          :eager_async =&gt; true,\\n          :eager_notification_url =&gt; \\&quot;https:\\\/\\\/mysite.example.com\\\/notify_endpoint\\&quot;,\\n          :public_id =&gt; \\&quot;bb_bunny\\&quot;)&quot;},{&quot;sdkId&quot;:&quot;php&quot;,&quot;framework&quot;:&quot;php&quot;,&quot;language&quot;:&quot;php&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;rawCodeSnippet&quot;:&quot;\\\\Cloudinary\\\\Uploader::upload(\\&quot;big_buck_bunny.mp4\\&quot;, array(\\n            \\&quot;resource_type\\&quot; =&gt; \\&quot;video\\&quot;, \\n            \\&quot;eager\\&quot; =&gt; array(\\&quot;streaming_profile\\&quot; =&gt; \\&quot;full_hd\\&quot;, \\&quot;format\\&quot; =&gt; \\&quot;m3u8\\&quot;),\\n            \\&quot;eager_async\\&quot; =&gt; true,\\n            \\&quot;eager_notification_url\\&quot; =&gt; \\&quot;https:\\\/\\\/mysite.example.com\\\/notify_endpoint\\&quot;\\n            \\&quot;public_id\\&quot; =&gt; \\&quot;bb_bunny\\&quot;\\n            );&quot;,&quot;codeSnippet&quot;:&quot;\\\\Cloudinary\\\\Uploader::upload(\\&quot;big_buck_bunny.mp4\\&quot;, array(\\n            \\&quot;resource_type\\&quot; =&gt; \\&quot;video\\&quot;, \\n            \\&quot;eager\\&quot; =&gt; array(\\&quot;streaming_profile\\&quot; =&gt; \\&quot;full_hd\\&quot;, \\&quot;format\\&quot; =&gt; \\&quot;m3u8\\&quot;),\\n            \\&quot;eager_async\\&quot; =&gt; true,\\n            \\&quot;eager_notification_url\\&quot; =&gt; \\&quot;https:\\\/\\\/mysite.example.com\\\/notify_endpoint\\&quot;\\n            \\&quot;public_id\\&quot; =&gt; \\&quot;bb_bunny\\&quot;\\n            );&quot;},{&quot;sdkId&quot;:&quot;python&quot;,&quot;framework&quot;:&quot;python&quot;,&quot;language&quot;:&quot;python&quot;,&quot;displayName&quot;:&quot;Python&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.uploader.upload(\\&quot;big_buck_bunny.mp4\\&quot;, resource_type = \\&quot;video\\&quot;,\\n            eager = [\\n              {\\&quot;streaming_profile\\&quot;: \\&quot;full_hd\\&quot;, \\&quot;format\\&quot;: \\&quot;m3u8\\&quot;}]\\n            eager_async = true,\\n            eager_notification_url = \\&quot;https:\\\/\\\/mysite.example.com\\\/notify_endpoint\\&quot;)\\n            public_id = \\&quot;bb_bunny\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.uploader.upload(\\&quot;big_buck_bunny.mp4\\&quot;, resource_type = \\&quot;video\\&quot;,\\n            eager = [\\n              {\\&quot;streaming_profile\\&quot;: \\&quot;full_hd\\&quot;, \\&quot;format\\&quot;: \\&quot;m3u8\\&quot;}]\\n            eager_async = true,\\n            eager_notification_url = \\&quot;https:\\\/\\\/mysite.example.com\\\/notify_endpoint\\&quot;)\\n            public_id = \\&quot;bb_bunny\\&quot;)&quot;},{&quot;sdkId&quot;:&quot;nodejs&quot;,&quot;framework&quot;:&quot;nodejs&quot;,&quot;language&quot;:&quot;javascript&quot;,&quot;displayName&quot;:&quot;Node.js&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;rawCodeSnippet&quot;:&quot;var up_options = \\n   {resource_type: \\&quot;video\\&quot;, \\n    eager: [\\n      { streaming_profile: \\&quot;full_hd\\&quot;, format: \\&quot;m3u8\\&quot; }],                                   \\n    eager_async: true,\\n    eager_notification_url: \\&quot;https:\\\/\\\/mysite.example.com\\\/notify_endpoint\\&quot;,\\n    public_id: \\&quot;bb_bunny\\&quot;};\\ncloudinary.v2.uploader.upload(\\&quot;big_buck_bunny.mp4\\&quot;, up_options, function(result) {console.log(result); };&quot;,&quot;codeSnippet&quot;:&quot;var up_options = \\n   {resource_type: \\&quot;video\\&quot;, \\n    eager: [\\n      { streaming_profile: \\&quot;full_hd\\&quot;, format: \\&quot;m3u8\\&quot; }],                                   \\n    eager_async: true,\\n    eager_notification_url: \\&quot;https:\\\/\\\/mysite.example.com\\\/notify_endpoint\\&quot;,\\n    public_id: \\&quot;bb_bunny\\&quot;};\\ncloudinary.v2.uploader.upload(\\&quot;big_buck_bunny.mp4\\&quot;, up_options, function(result) {console.log(result); };&quot;},{&quot;sdkId&quot;:&quot;java&quot;,&quot;framework&quot;:&quot;java&quot;,&quot;language&quot;:&quot;java&quot;,&quot;displayName&quot;:&quot;Java&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.uploader().upload(\\&quot;big_buck_bunny.mp4\\&quot;, \\n        ObjectUtils.asMap(\\&quot;resource_type\\&quot;, \\&quot;video\\&quot;,\\n        \\&quot;eager\\&quot;, Arrays.asList(\\n              new Transformation().streamingProfile(\\&quot;full_hd\\&quot;).format(\\&quot;m3u8\\&quot;),\\n            \\&quot;eager_async\\&quot;, true,\\n            \\&quot;eager_notification_url\\&quot;, \\&quot;https:\\\/\\\/mysite.example.com\\\/notify_endpoint\\&quot;\\n            \\&quot;public_id\\&quot;, \\&quot;bb_bunny\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.uploader().upload(\\&quot;big_buck_bunny.mp4\\&quot;, \\n        ObjectUtils.asMap(\\&quot;resource_type\\&quot;, \\&quot;video\\&quot;,\\n        \\&quot;eager\\&quot;, Arrays.asList(\\n              new Transformation().streamingProfile(\\&quot;full_hd\\&quot;).format(\\&quot;m3u8\\&quot;),\\n            \\&quot;eager_async\\&quot;, true,\\n            \\&quot;eager_notification_url\\&quot;, \\&quot;https:\\\/\\\/mysite.example.com\\\/notify_endpoint\\&quot;\\n            \\&quot;public_id\\&quot;, \\&quot;bb_bunny\\&quot;));&quot;}]\"\n      parsed-url=\"[]\"\n      with-url=\"false\"\n    >\n      <span class=\"u-visually-hidden\">Loading code examples<\/span>\n    <\/cld-code-widget>\n<p>Note that you want to deliver the video using the corresponding file format, such as .m3u8 (HLS) here, and include the streaming profile (sp_<profilename>) and other transformations exactly matching what you generated in your eager transformation. You also want to make sure that you\u2019re playing the video in a video player which supports HLS, such as the <a href=\"https:\/\/cloudinary.com\/documentation\/cloudinary_video_player\">Cloudinary Video Player<\/a>, as not all browsers inherently support it.<\/p>\n<h2>Tip 10: Set up Cloudinary Breakpoints for the Appropriate Image Size and Resolution According to the Viewing Device.<\/h2>\n<p>By using Cloudinary\u2019s <a href=\"https:\/\/cloudinary.com\/blog\/introducing_intelligent_responsive_image_breakpoints_solutions\">breakpoints<\/a> 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:<\/p>\n<cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[{&quot;sdkId&quot;:&quot;ruby&quot;,&quot;framework&quot;:&quot;ruby&quot;,&quot;language&quot;:&quot;ruby&quot;,&quot;displayName&quot;:&quot;Ruby&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;rawCodeSnippet&quot;:&quot;Cloudinary::Uploader.upload(\\&quot;dog.jpg\\&quot;,\\n            :responsive_breakpoints =&gt; \\n            {:create_derived =&gt; true, :bytes_step =&gt; 20000, \\n             :min_width =&gt; 200, :max_width =&gt; 1000,\\n             :max_images =&gt; 20},\\n             :public_id =&gt; \\&quot;dog\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;Cloudinary::Uploader.upload(\\&quot;dog.jpg\\&quot;,\\n            :responsive_breakpoints =&gt; \\n            {:create_derived =&gt; true, :bytes_step =&gt; 20000, \\n             :min_width =&gt; 200, :max_width =&gt; 1000,\\n             :max_images =&gt; 20},\\n             :public_id =&gt; \\&quot;dog\\&quot;)&quot;},{&quot;sdkId&quot;:&quot;php&quot;,&quot;framework&quot;:&quot;php&quot;,&quot;language&quot;:&quot;php&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;rawCodeSnippet&quot;:&quot;\\\\Cloudinary\\\\Uploader::upload(\\&quot;dog.jpg\\&quot;, array( \\n            \\&quot;responsive_breakpoints\\&quot; =&gt; array(\\n              array(\\&quot;create_derived\\&quot; =&gt; \\&quot;true\\&quot;, \\&quot;bytes_step\\&quot; =&gt; 20000,\\n                  \\&quot;min_width\\&quot; =&gt; 200, \\&quot;max_width\\&quot; =&gt; 1000,\\n                  \\&quot;max_images\\&quot; =&gt; 20)), \\n              \\&quot;public_id\\&quot; =&gt; \\&quot;dog\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;\\\\Cloudinary\\\\Uploader::upload(\\&quot;dog.jpg\\&quot;, array( \\n            \\&quot;responsive_breakpoints\\&quot; =&gt; array(\\n              array(\\&quot;create_derived\\&quot; =&gt; \\&quot;true\\&quot;, \\&quot;bytes_step\\&quot; =&gt; 20000,\\n                  \\&quot;min_width\\&quot; =&gt; 200, \\&quot;max_width\\&quot; =&gt; 1000,\\n                  \\&quot;max_images\\&quot; =&gt; 20)), \\n              \\&quot;public_id\\&quot; =&gt; \\&quot;dog\\&quot;));&quot;},{&quot;sdkId&quot;:&quot;python&quot;,&quot;framework&quot;:&quot;python&quot;,&quot;language&quot;:&quot;python&quot;,&quot;displayName&quot;:&quot;Python&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.uploader.upload(\\&quot;dog.jpg\\&quot;, \\n            responsive_breakpoints = [\\n              {\\&quot;create_derived\\&quot;: \\&quot;true\\&quot;, \\&quot;bytes_step\\&quot;: 20000,\\n                  \\&quot;min_width\\&quot;: 200,\\n                  \\&quot;max_width\\&quot;: 1000, \\&quot;max_images\\&quot;: 20}],\\n            public_id = \\&quot;dog\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.uploader.upload(\\&quot;dog.jpg\\&quot;, \\n            responsive_breakpoints = [\\n              {\\&quot;create_derived\\&quot;: \\&quot;true\\&quot;, \\&quot;bytes_step\\&quot;: 20000,\\n                  \\&quot;min_width\\&quot;: 200,\\n                  \\&quot;max_width\\&quot;: 1000, \\&quot;max_images\\&quot;: 20}],\\n            public_id = \\&quot;dog\\&quot;)&quot;},{&quot;sdkId&quot;:&quot;nodejs&quot;,&quot;framework&quot;:&quot;nodejs&quot;,&quot;language&quot;:&quot;javascript&quot;,&quot;displayName&quot;:&quot;Node.js&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.v2.uploader.upload(\\&quot;dog.jpg\\&quot;, \\n        { responsive_breakpoints: [{\\n          create_derived: true, bytes_step: 20000,\\n          min_width: 200, max_width: 1000,\\n          max_images: 20}], public_id: \\&quot;dog\\&quot;}, \\n        function(error, result) {console.log(result); });&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.v2.uploader.upload(\\&quot;dog.jpg\\&quot;, \\n        { responsive_breakpoints: [{\\n          create_derived: true, bytes_step: 20000,\\n          min_width: 200, max_width: 1000,\\n          max_images: 20}], public_id: \\&quot;dog\\&quot;}, \\n        function(error, result) {console.log(result); });&quot;},{&quot;sdkId&quot;:&quot;java&quot;,&quot;framework&quot;:&quot;java&quot;,&quot;language&quot;:&quot;java&quot;,&quot;displayName&quot;:&quot;Java&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.uploader().upload(\\&quot;dog.jpg\\&quot;, \\n        ObjectUtils.asMap(\\n        \\&quot;responsive_breakpoints\\&quot;, \\n          new ResponsiveBreakpoint().createDerived(\\&quot;true\\&quot;).bytesStep(20000).minWidth(200).maxWidth(1000).maxImages(20), \\n        \\&quot;public_id\\&quot;, \\&quot;dog\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.uploader().upload(\\&quot;dog.jpg\\&quot;, \\n        ObjectUtils.asMap(\\n        \\&quot;responsive_breakpoints\\&quot;, \\n          new ResponsiveBreakpoint().createDerived(\\&quot;true\\&quot;).bytesStep(20000).minWidth(200).maxWidth(1000).maxImages(20), \\n        \\&quot;public_id\\&quot;, \\&quot;dog\\&quot;));&quot;}]\"\n      parsed-url=\"[]\"\n      with-url=\"false\"\n    >\n      <span class=\"u-visually-hidden\">Loading code examples<\/span>\n    <\/cld-code-widget>\n<p>This code generates at most 20 images starting at the minimum width of 200, increasing the size by the specified 20000 <a href=\"https:\/\/cloudinary.com\/glossary\/time-to-first-byte\">bytes<\/a> per image with the max width of the largest image being no larger than the specified 1000 max width.<\/p>\n<p>Additionally, Cloudinary\u2019s <a href=\"https:\/\/www.responsivebreakpoints.com\/\">responsive breakpoint generator<\/a> creates an HTML5 <code>img<\/code>, 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:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/cloudinary\/image\/upload\/w_700,c_fill,f_auto,q_auto,dpr_2.0\/responsive_image_breakpoints_original_aspect_ratio.jpg\" alt=\"Original aspect ratio\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1400\" height=\"989\"\/><\/p>\n<p>Cloudinary delivers as advertised. Do familiarize yourself with the above tips; you\u2019ll marvel at the impressive results.<\/p>\n<hr \/>\n<h2>Additional Resources<\/h2>\n<ul>\n<li>Learn the top <a href=\"https:\/\/cloudinary.com\/blog\/top_10_mistakes_in_handling_website_images_and_how_to_solve_them\">10 mistakes made with website images<\/a> that increase your site load time &#8211; and how you can solve them for faster site performance.<\/li>\n<li>Discover the <a href=\"https:\/\/cloudinary.com\/blog\/top_10_mistakes_in_handling_website_videos_and_how_to_solve_them\">10 top website video challenges<\/a> for developers and how they can be solved for faster website performance and load times.<\/li>\n<li>With Cloudinary, <a href=\"https:\/\/cloudinary.com\/blog\/best_practices_for_the_mobile_world\">mobile optimization is simple<\/a>, not only reducing your mobile page loading speed, but also improving your SEO and boosting customer experience.<\/li>\n<\/ul>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":21920,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[119,165,251],"class_list":["post-21919","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-file-upload","tag-image-transformation","tag-responsive-images"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>10 Tips for Making Cloudinary Work Well for You<\/title>\n<meta name=\"description\" content=\"The top 10 tips that are guaranteed to save bandwidth and have your site load as fast as possible.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/top_10_tips_for_making_cloudinary_work_well_for_you\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Top 10 Tips for Making Cloudinary Work Well for You\" \/>\n<meta property=\"og:description\" content=\"The top 10 tips that are guaranteed to save bandwidth and have your site load as fast as possible.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/top_10_tips_for_making_cloudinary_work_well_for_you\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2019-07-29T17:44:51+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-09-07T19:06:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1649730229\/Web_Assets\/blog\/Top-10-Tips\/Top-10-Tips-jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"1540\" \/>\n\t<meta property=\"og:image:height\" content=\"847\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/top_10_tips_for_making_cloudinary_work_well_for_you#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/top_10_tips_for_making_cloudinary_work_well_for_you\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Top 10 Tips for Making Cloudinary Work Well for You\",\"datePublished\":\"2019-07-29T17:44:51+00:00\",\"dateModified\":\"2024-09-07T19:06:29+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/top_10_tips_for_making_cloudinary_work_well_for_you\"},\"wordCount\":9,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/top_10_tips_for_making_cloudinary_work_well_for_you#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649730229\/Web_Assets\/blog\/Top-10-Tips\/Top-10-Tips.jpg?_i=AA\",\"keywords\":[\"File-upload\",\"Image Transformation\",\"Responsive Images\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2019\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/top_10_tips_for_making_cloudinary_work_well_for_you\",\"url\":\"https:\/\/cloudinary.com\/blog\/top_10_tips_for_making_cloudinary_work_well_for_you\",\"name\":\"10 Tips for Making Cloudinary Work Well for You\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/top_10_tips_for_making_cloudinary_work_well_for_you#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/top_10_tips_for_making_cloudinary_work_well_for_you#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649730229\/Web_Assets\/blog\/Top-10-Tips\/Top-10-Tips.jpg?_i=AA\",\"datePublished\":\"2019-07-29T17:44:51+00:00\",\"dateModified\":\"2024-09-07T19:06:29+00:00\",\"description\":\"The top 10 tips that are guaranteed to save bandwidth and have your site load as fast as possible.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/top_10_tips_for_making_cloudinary_work_well_for_you#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/top_10_tips_for_making_cloudinary_work_well_for_you\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/top_10_tips_for_making_cloudinary_work_well_for_you#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649730229\/Web_Assets\/blog\/Top-10-Tips\/Top-10-Tips.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649730229\/Web_Assets\/blog\/Top-10-Tips\/Top-10-Tips.jpg?_i=AA\",\"width\":1540,\"height\":847},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/top_10_tips_for_making_cloudinary_work_well_for_you#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Top 10 Tips for Making Cloudinary Work Well for You\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"10 Tips for Making Cloudinary Work Well for You","description":"The top 10 tips that are guaranteed to save bandwidth and have your site load as fast as possible.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/top_10_tips_for_making_cloudinary_work_well_for_you","og_locale":"en_US","og_type":"article","og_title":"Top 10 Tips for Making Cloudinary Work Well for You","og_description":"The top 10 tips that are guaranteed to save bandwidth and have your site load as fast as possible.","og_url":"https:\/\/cloudinary.com\/blog\/top_10_tips_for_making_cloudinary_work_well_for_you","og_site_name":"Cloudinary Blog","article_published_time":"2019-07-29T17:44:51+00:00","article_modified_time":"2024-09-07T19:06:29+00:00","og_image":[{"width":1540,"height":847,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1649730229\/Web_Assets\/blog\/Top-10-Tips\/Top-10-Tips-jpg?_i=AA","type":"image\/jpeg"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/top_10_tips_for_making_cloudinary_work_well_for_you#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/top_10_tips_for_making_cloudinary_work_well_for_you"},"author":{"name":"","@id":""},"headline":"Top 10 Tips for Making Cloudinary Work Well for You","datePublished":"2019-07-29T17:44:51+00:00","dateModified":"2024-09-07T19:06:29+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/top_10_tips_for_making_cloudinary_work_well_for_you"},"wordCount":9,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/top_10_tips_for_making_cloudinary_work_well_for_you#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649730229\/Web_Assets\/blog\/Top-10-Tips\/Top-10-Tips.jpg?_i=AA","keywords":["File-upload","Image Transformation","Responsive Images"],"inLanguage":"en-US","copyrightYear":"2019","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/top_10_tips_for_making_cloudinary_work_well_for_you","url":"https:\/\/cloudinary.com\/blog\/top_10_tips_for_making_cloudinary_work_well_for_you","name":"10 Tips for Making Cloudinary Work Well for You","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/top_10_tips_for_making_cloudinary_work_well_for_you#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/top_10_tips_for_making_cloudinary_work_well_for_you#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649730229\/Web_Assets\/blog\/Top-10-Tips\/Top-10-Tips.jpg?_i=AA","datePublished":"2019-07-29T17:44:51+00:00","dateModified":"2024-09-07T19:06:29+00:00","description":"The top 10 tips that are guaranteed to save bandwidth and have your site load as fast as possible.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/top_10_tips_for_making_cloudinary_work_well_for_you#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/top_10_tips_for_making_cloudinary_work_well_for_you"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/top_10_tips_for_making_cloudinary_work_well_for_you#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649730229\/Web_Assets\/blog\/Top-10-Tips\/Top-10-Tips.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649730229\/Web_Assets\/blog\/Top-10-Tips\/Top-10-Tips.jpg?_i=AA","width":1540,"height":847},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/top_10_tips_for_making_cloudinary_work_well_for_you#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Top 10 Tips for Making Cloudinary Work Well for You"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649730229\/Web_Assets\/blog\/Top-10-Tips\/Top-10-Tips.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21919","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=21919"}],"version-history":[{"count":13,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21919\/revisions"}],"predecessor-version":[{"id":35575,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21919\/revisions\/35575"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/21920"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=21919"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=21919"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=21919"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}