{"id":21915,"date":"2019-07-22T18:01:23","date_gmt":"2019-07-22T18:01:23","guid":{"rendered":"http:\/\/techniques_for_image_enhancement_with_cloudinary_a_primer"},"modified":"2024-06-01T14:38:12","modified_gmt":"2024-06-01T21:38:12","slug":"techniques_for_image_enhancement_with_cloudinary_a_primer","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/techniques_for_image_enhancement_with_cloudinary_a_primer","title":{"rendered":"Techniques for Image Enhancement With Cloudinary: A Primer"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>Indisputably, visual presentations of events, places, people, and even intangible things make deeper impressions and linger in our minds for longer than words or any other communication medium, hence the meteoric rise through the ages of transmitting ideas and promoting brands in the business sector through images. The recent discovery of the first image of a black hole has generated calls for techniques for enhancing digital images. Specifically, the clamor is for quality-oriented tweaks that would result in optimal display and increased visibility of slightly hidden yet important content.<\/p>\n<p>This post shows you how to enhance images by setting intuitive and effective parameters on Cloudinary with a focus on several key aspects, including brightness, contrast, and sharpness. Also described are sophisticated enhancements you can add with Cloudinary add-on VIESUS and the simple steps for <a href=\"https:\/\/cloudinary.com\/features\/optimization_fast_delivery\">optimizing images<\/a> on Cloudinary.<\/p>\n<h2>Image Enhancement Techniques<\/h2>\n<p><strong>Adjusting the Brightness and Contrast<\/strong><\/p>\n<p>One of the image enhancement techniques you can utilize is to have Cloudinary automatically adjust the brightness and contrast of an image, set one of the following values for the <code>effect<\/code> parameter:<\/p>\n<p><code>gamma<\/code>, <code>auto_brightness<\/code>, <code>auto_contrast<\/code>, <code>contrast<\/code>, <code>auto_color<\/code>, <code>fill_light<\/code>, <code>vibrance<\/code>, and <code>improve:outdoor<\/code>.<\/p>\n<p>In particular:<\/p>\n<ul>\n<li>\n<p><code>improve:outdoor<\/code> enhances an image\u2019s colors, contrast, and brightness, as in the code example below:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">cl-image<\/span> <span class=\"hljs-attr\">public-id<\/span>=<span class=\"hljs-string\">\"flower.jpg\"<\/span> &gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">cl-transformation<\/span> <span class=\"hljs-attr\">effect<\/span>=<span class=\"hljs-string\">\"improve:outdoor\"<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">cl-transformation<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">cl-image<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<\/li>\n<li>\n<p><code>contrast<\/code> raises or reduces an image\u2019s contrast level according to the value you specify. The default value is 0; the minimum value is -300; and the maximum value is +100.<\/p>\n<p>This code shows the syntax for a <code>contrast<\/code> value of 50:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">cl-image<\/span> <span class=\"hljs-attr\">public-id<\/span>=<span class=\"hljs-string\">\"wardrobe.jpg\"<\/span> &gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">cl-transformation<\/span> <span class=\"hljs-attr\">effect<\/span>=<span class=\"hljs-string\">\"contrast:50\"<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">cl-transformation<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">cl-image<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<\/li>\n<\/ul>\n<h2>Boosting the Sharpness<\/h2>\n<p>But of course, sharp images make a world of a difference to the audience. To sharpen an image, set the <code>sharpen<\/code> value for the <code>effect<\/code> parameter, as in this example:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">cl-image<\/span> <span class=\"hljs-attr\">public-id<\/span>=<span class=\"hljs-string\">\"front_face.jpg\"<\/span> &gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">cl-transformation<\/span> <span class=\"hljs-attr\">effect<\/span>=<span class=\"hljs-string\">\"sharpen\"<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">cl-transformation<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">cl-image<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Furthermore, to specify the exact effect you desire, add one of the following values to <code>sharpen<\/code>, preceded by a colon, e.g., <code>sharpen:blur<\/code>:<code>blur<\/code>, <code>blur_region<\/code>, <code>blur_faces<\/code>,  <code>unsharp_mask<\/code>, <code>pixelate<\/code>, <code>pixelate_region<\/code>, <code>pixelate_faces<\/code>, <code>ordered_dither<\/code>, <code>vignette<\/code>, <code>gradient_fade<\/code>, or <code>tilt_shift<\/code>.<\/p>\n<h2>Set the Color Intensity<\/h2>\n<p>Cloudinary offers numerous color-related values for the <code>effect<\/code> parameter, including the following:<\/p>\n<p><code>hue<\/code>, <code>red<\/code>, <code>green<\/code>, <code>blue<\/code>, <code>negate<\/code>, <code>grayscale<\/code>, <code>blackwhite<\/code>, <code>saturation<\/code>, <code>colorize<\/code>, <code>assist_colorblind<\/code>, <code>simulate_colorblind<\/code>, <code>replace_color<\/code>, <code>recolor<\/code>, <code>tint<\/code>, and <code>auto_color<\/code><\/p>\n<div class='c-callout  c-callout--inline-title c-callout--note'><strong class='c-callout__title'>Note:<\/strong> <p>Try injecting your own image processing by using a <a href=\"https:\/\/cloudinary.com\/blog\/inject_your_own_image_processing_by_using_a_custom_function\">custom function<\/a><\/p><\/div>\n<p>As their names imply, by setting one of those <code>effect<\/code> values on an image, you can change its color intensity, correct its color imbalance, or apply colorization filters. You can also remove colors, replace them, or fix problems that pertain to colorblindness for accessibility.<\/p>\n<p>This example specifies a <code>saturation<\/code> value with an intensity of 50 for an image:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">cl-image<\/span> <span class=\"hljs-attr\">public-id<\/span>=<span class=\"hljs-string\">\"sample.jpg\"<\/span> &gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">cl-transformation<\/span> <span class=\"hljs-attr\">effect<\/span>=<span class=\"hljs-string\">\"saturation:50\"<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">cl-transformation<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">cl-image<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<h2>Applying Advanced Image Enhancements With Cloudinary Add-On VIESUS<\/h2>\n<p>With Cloudinary, you can perform numerous basic tasks geared toward beefing up your images: image cropping, resizing images without losing quality, add overlays to them, remove their background, and so forth. For more advanced tasks, tap into Cloudinary\u2019s add-on repository for the <a href=\"https:\/\/www.viesus.com\/\">VIESUS<\/a> capabilities that <strong>automate<\/strong> those tasks.<\/p>\n<p>All you need to do is set the <code>effect<\/code> parameter to <code>viesus_correct<\/code>, after which VIESUS would elevate the visual quality of your image to the maximum. See the examples below.<\/p>\n<ul>\n<li>\n<p><strong>On the Angular Framework<\/strong><\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">cl-image<\/span> <span class=\"hljs-attr\">public-id<\/span>=<span class=\"hljs-string\">\"gate.jpg\"<\/span> <span class=\"hljs-attr\">sign-url<\/span>=<span class=\"hljs-string\">\"true\"<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">cl-transformation<\/span> <span class=\"hljs-attr\">effect<\/span>=<span class=\"hljs-string\">\"viesus_correct\"<\/span> <span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">\"350\"<\/span> <span class=\"hljs-attr\">crop<\/span>=<span class=\"hljs-string\">\"scale\"<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">cl-transformation<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">cl-image<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<\/li>\n<li>\n<p><strong>On the  Node.js Runtime Environment<\/strong><\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">cloudinary.v2.uploader.upload(<span class=\"hljs-string\">\"local_file.jpg\"<\/span>, \n  { <span class=\"hljs-attr\">public_id<\/span>: <span class=\"hljs-string\">\"beach\"<\/span>, \n    <span class=\"hljs-attr\">eager<\/span>: { <span class=\"hljs-attr\">effect<\/span>: <span class=\"hljs-string\">\"viesus_correct\"<\/span>, <span class=\"hljs-attr\">crop<\/span>: <span class=\"hljs-string\">\"scale\"<\/span>, <span class=\"hljs-attr\">width<\/span>: <span class=\"hljs-number\">400<\/span> }}),\n  <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\">error, result<\/span>) <\/span>{<span class=\"hljs-built_in\">console<\/span>.log(result, error); });\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><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<\/li>\n<\/ul>\n<p>For an enlightening example, see the image below for its original version, followed by the VIESUS-enhanced version:<\/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;golden_gate_side.jpg\\&quot;, {transformation: [ {gravity: \\&quot;east\\&quot;, height: \\&quot;0.35\\&quot;, width: \\&quot;0.8\\&quot;, crop: \\&quot;crop\\&quot;}, {gravity: \\&quot;north_east\\&quot;, overlay: \\&quot;viesus_icon\\&quot;, opacity: 40, width: 400, x: 10, y: 10, crop: \\&quot;scale\\&quot;}, {radius: 20, width: 600, crop: \\&quot;scale\\&quot;} ]})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;golden_gate_side.jpg\\&quot;, {transformation: [\\n  {gravity: \\&quot;east\\&quot;, height: \\&quot;0.35\\&quot;, width: \\&quot;0.8\\&quot;, crop: \\&quot;crop\\&quot;},\\n  {gravity: \\&quot;north_east\\&quot;, overlay: \\&quot;viesus_icon\\&quot;, opacity: 40, width: 400, x: 10, y: 10, crop: \\&quot;scale\\&quot;},\\n  {radius: 20, width: 600, crop: \\&quot;scale\\&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;golden_gate_side.jpg\\&quot;)\\n  .resize(\\n    crop()\\n      .width(0.8)\\n      .height(0.35)\\n      .gravity(compass(\\&quot;east\\&quot;))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;viesus_icon\\&quot;).transformation(\\n        new Transformation().resize(scale().width(400)).adjust(opacity(40))\\n      )\\n    ).position(\\n      new Position()\\n        .gravity(compass(\\&quot;north_east\\&quot;))\\n        .offsetX(10)\\n        .offsetY(10)\\n    )\\n  )\\n  .resize(scale().width(600))\\n  .roundCorners(byRadius(20));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;golden_gate_side.jpg\\&quot;)\\n  .resize(\\n    crop()\\n      .width(0.8)\\n      .height(0.35)\\n      .gravity(compass(\\&quot;east\\&quot;))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;viesus_icon\\&quot;).transformation(\\n        new Transformation().resize(scale().width(400)).adjust(opacity(40))\\n      )\\n    ).position(\\n      new Position()\\n        .gravity(compass(\\&quot;north_east\\&quot;))\\n        .offsetX(10)\\n        .offsetY(10)\\n    )\\n  )\\n  .resize(scale().width(600))\\n  .roundCorners(byRadius(20));&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;golden_gate_side.jpg\\&quot; &gt; &lt;Transformation gravity=\\&quot;east\\&quot; height=\\&quot;0.35\\&quot; width=\\&quot;0.8\\&quot; crop=\\&quot;crop\\&quot; \\\/&gt; &lt;Transformation gravity=\\&quot;north_east\\&quot; overlay=\\&quot;viesus_icon\\&quot; opacity=\\&quot;40\\&quot; width=\\&quot;400\\&quot; x=\\&quot;10\\&quot; y=\\&quot;10\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt; &lt;Transformation radius=\\&quot;20\\&quot; width=\\&quot;600\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;golden_gate_side.jpg\\&quot; &gt;\\n\\t&lt;Transformation gravity=\\&quot;east\\&quot; height=\\&quot;0.35\\&quot; width=\\&quot;0.8\\&quot; crop=\\&quot;crop\\&quot; \\\/&gt;\\n\\t&lt;Transformation gravity=\\&quot;north_east\\&quot; overlay=\\&quot;viesus_icon\\&quot; opacity=\\&quot;40\\&quot; width=\\&quot;400\\&quot; x=\\&quot;10\\&quot; y=\\&quot;10\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt;\\n\\t&lt;Transformation radius=\\&quot;20\\&quot; width=\\&quot;600\\&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;golden_gate_side.jpg\\&quot;)\\n  .resize(\\n    crop()\\n      .width(0.8)\\n      .height(0.35)\\n      .gravity(compass(\\&quot;east\\&quot;))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;viesus_icon\\&quot;).transformation(\\n        new Transformation().resize(scale().width(400)).adjust(opacity(40))\\n      )\\n    ).position(\\n      new Position()\\n        .gravity(compass(\\&quot;north_east\\&quot;))\\n        .offsetX(10)\\n        .offsetY(10)\\n    )\\n  )\\n  .resize(scale().width(600))\\n  .roundCorners(byRadius(20));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;golden_gate_side.jpg\\&quot;)\\n  .resize(\\n    crop()\\n      .width(0.8)\\n      .height(0.35)\\n      .gravity(compass(\\&quot;east\\&quot;))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;viesus_icon\\&quot;).transformation(\\n        new Transformation().resize(scale().width(400)).adjust(opacity(40))\\n      )\\n    ).position(\\n      new Position()\\n        .gravity(compass(\\&quot;north_east\\&quot;))\\n        .offsetX(10)\\n        .offsetY(10)\\n    )\\n  )\\n  .resize(scale().width(600))\\n  .roundCorners(byRadius(20));&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;golden_gate_side.jpg\\&quot; &gt; &lt;cld-transformation gravity=\\&quot;east\\&quot; height=\\&quot;0.35\\&quot; width=\\&quot;0.8\\&quot; crop=\\&quot;crop\\&quot; \\\/&gt; &lt;cld-transformation gravity=\\&quot;north_east\\&quot; :overlay=\\&quot;viesus_icon\\&quot; opacity=\\&quot;40\\&quot; width=\\&quot;400\\&quot; x=\\&quot;10\\&quot; y=\\&quot;10\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt; &lt;cld-transformation radius=\\&quot;20\\&quot; width=\\&quot;600\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;golden_gate_side.jpg\\&quot; &gt;\\n\\t&lt;cld-transformation gravity=\\&quot;east\\&quot; height=\\&quot;0.35\\&quot; width=\\&quot;0.8\\&quot; crop=\\&quot;crop\\&quot; \\\/&gt;\\n\\t&lt;cld-transformation gravity=\\&quot;north_east\\&quot; :overlay=\\&quot;viesus_icon\\&quot; opacity=\\&quot;40\\&quot; width=\\&quot;400\\&quot; x=\\&quot;10\\&quot; y=\\&quot;10\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt;\\n\\t&lt;cld-transformation radius=\\&quot;20\\&quot; width=\\&quot;600\\&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;golden_gate_side.jpg\\&quot;)\\n  .resize(\\n    crop()\\n      .width(0.8)\\n      .height(0.35)\\n      .gravity(compass(\\&quot;east\\&quot;))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;viesus_icon\\&quot;).transformation(\\n        new Transformation().resize(scale().width(400)).adjust(opacity(40))\\n      )\\n    ).position(\\n      new Position()\\n        .gravity(compass(\\&quot;north_east\\&quot;))\\n        .offsetX(10)\\n        .offsetY(10)\\n    )\\n  )\\n  .resize(scale().width(600))\\n  .roundCorners(byRadius(20));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;golden_gate_side.jpg\\&quot;)\\n  .resize(\\n    crop()\\n      .width(0.8)\\n      .height(0.35)\\n      .gravity(compass(\\&quot;east\\&quot;))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;viesus_icon\\&quot;).transformation(\\n        new Transformation().resize(scale().width(400)).adjust(opacity(40))\\n      )\\n    ).position(\\n      new Position()\\n        .gravity(compass(\\&quot;north_east\\&quot;))\\n        .offsetX(10)\\n        .offsetY(10)\\n    )\\n  )\\n  .resize(scale().width(600))\\n  .roundCorners(byRadius(20));&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;golden_gate_side.jpg\\&quot; &gt; &lt;cl-transformation gravity=\\&quot;east\\&quot; height=\\&quot;0.35\\&quot; width=\\&quot;0.8\\&quot; crop=\\&quot;crop\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;cl-transformation gravity=\\&quot;north_east\\&quot; overlay=\\&quot;viesus_icon\\&quot; opacity=\\&quot;40\\&quot; width=\\&quot;400\\&quot; x=\\&quot;10\\&quot; y=\\&quot;10\\&quot; crop=\\&quot;scale\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;cl-transformation radius=\\&quot;20\\&quot; width=\\&quot;600\\&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;golden_gate_side.jpg\\&quot; &gt;\\n\\t&lt;cl-transformation gravity=\\&quot;east\\&quot; height=\\&quot;0.35\\&quot; width=\\&quot;0.8\\&quot; crop=\\&quot;crop\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n\\t&lt;cl-transformation gravity=\\&quot;north_east\\&quot; overlay=\\&quot;viesus_icon\\&quot; opacity=\\&quot;40\\&quot; width=\\&quot;400\\&quot; x=\\&quot;10\\&quot; y=\\&quot;10\\&quot; crop=\\&quot;scale\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n\\t&lt;cl-transformation radius=\\&quot;20\\&quot; width=\\&quot;600\\&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;golden_gate_side.jpg\\&quot;)\\n  .resize(\\n    crop()\\n      .width(0.8)\\n      .height(0.35)\\n      .gravity(compass(\\&quot;east\\&quot;))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;viesus_icon\\&quot;).transformation(\\n        new Transformation().resize(scale().width(400)).adjust(opacity(40))\\n      )\\n    ).position(\\n      new Position()\\n        .gravity(compass(\\&quot;north_east\\&quot;))\\n        .offsetX(10)\\n        .offsetY(10)\\n    )\\n  )\\n  .resize(scale().width(600))\\n  .roundCorners(byRadius(20));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;golden_gate_side.jpg\\&quot;)\\n  .resize(\\n    crop()\\n      .width(0.8)\\n      .height(0.35)\\n      .gravity(compass(\\&quot;east\\&quot;))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;viesus_icon\\&quot;).transformation(\\n        new Transformation().resize(scale().width(400)).adjust(opacity(40))\\n      )\\n    ).position(\\n      new Position()\\n        .gravity(compass(\\&quot;north_east\\&quot;))\\n        .offsetX(10)\\n        .offsetY(10)\\n    )\\n  )\\n  .resize(scale().width(600))\\n  .roundCorners(byRadius(20));&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;golden_gate_side.jpg&#039;, {transformation: [ {gravity: \\&quot;east\\&quot;, height: \\&quot;0.35\\&quot;, width: \\&quot;0.8\\&quot;, crop: \\&quot;crop\\&quot;}, {gravity: \\&quot;north_east\\&quot;, overlay: new cloudinary.Layer().publicId(\\&quot;viesus_icon\\&quot;), opacity: 40, width: 400, x: 10, y: 10, crop: \\&quot;scale\\&quot;}, {radius: 20, width: 600, crop: \\&quot;scale\\&quot;} ]}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;golden_gate_side.jpg&#039;, {transformation: [\\n  {gravity: \\&quot;east\\&quot;, height: \\&quot;0.35\\&quot;, width: \\&quot;0.8\\&quot;, crop: \\&quot;crop\\&quot;},\\n  {gravity: \\&quot;north_east\\&quot;, overlay: new cloudinary.Layer().publicId(\\&quot;viesus_icon\\&quot;), opacity: 40, width: 400, x: 10, y: 10, crop: \\&quot;scale\\&quot;},\\n  {radius: 20, width: 600, crop: \\&quot;scale\\&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;golden_gate_side.jpg\\&quot;).image(transformation=[ {&#039;gravity&#039;: \\&quot;east\\&quot;, &#039;height&#039;: \\&quot;0.35\\&quot;, &#039;width&#039;: \\&quot;0.8\\&quot;, &#039;crop&#039;: \\&quot;crop\\&quot;}, {&#039;gravity&#039;: \\&quot;north_east\\&quot;, &#039;overlay&#039;: \\&quot;viesus_icon\\&quot;, &#039;opacity&#039;: 40, &#039;width&#039;: 400, &#039;x&#039;: 10, &#039;y&#039;: 10, &#039;crop&#039;: \\&quot;scale\\&quot;}, {&#039;radius&#039;: 20, &#039;width&#039;: 600, &#039;crop&#039;: \\&quot;scale\\&quot;} ])&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;golden_gate_side.jpg\\&quot;).image(transformation=[\\n  {&#039;gravity&#039;: \\&quot;east\\&quot;, &#039;height&#039;: \\&quot;0.35\\&quot;, &#039;width&#039;: \\&quot;0.8\\&quot;, &#039;crop&#039;: \\&quot;crop\\&quot;},\\n  {&#039;gravity&#039;: \\&quot;north_east\\&quot;, &#039;overlay&#039;: \\&quot;viesus_icon\\&quot;, &#039;opacity&#039;: 40, &#039;width&#039;: 400, &#039;x&#039;: 10, &#039;y&#039;: 10, &#039;crop&#039;: \\&quot;scale\\&quot;},\\n  {&#039;radius&#039;: 20, &#039;width&#039;: 600, &#039;crop&#039;: \\&quot;scale\\&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;golden_gate_side.jpg&#039;))\\n\\t-&gt;resize(Resize::crop()-&gt;width(0.8)\\n-&gt;height(0.35)\\n\\t-&gt;gravity(\\n\\tGravity::compass(\\n\\tCompass::east()))\\n\\t)\\n\\t-&gt;overlay(Overlay::source(\\n\\tSource::image(\\&quot;viesus_icon\\&quot;)\\n\\t-&gt;transformation((new Transformation())\\n\\t-&gt;resize(Resize::scale()-&gt;width(400))\\n\\t-&gt;adjust(Adjust::opacity(40)))\\n\\t)\\n\\t-&gt;position((new Position())\\n\\t-&gt;gravity(\\n\\tGravity::compass(\\n\\tCompass::northEast()))\\n-&gt;offsetX(10)\\n-&gt;offsetY(10))\\n\\t)\\n\\t-&gt;resize(Resize::scale()-&gt;width(600))\\n\\t-&gt;roundCorners(RoundCorners::byRadius(20));&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;golden_gate_side.jpg&#039;))\\n\\t-&gt;resize(Resize::crop()-&gt;width(0.8)\\n-&gt;height(0.35)\\n\\t-&gt;gravity(\\n\\tGravity::compass(\\n\\tCompass::east()))\\n\\t)\\n\\t-&gt;overlay(Overlay::source(\\n\\tSource::image(\\&quot;viesus_icon\\&quot;)\\n\\t-&gt;transformation((new Transformation())\\n\\t-&gt;resize(Resize::scale()-&gt;width(400))\\n\\t-&gt;adjust(Adjust::opacity(40)))\\n\\t)\\n\\t-&gt;position((new Position())\\n\\t-&gt;gravity(\\n\\tGravity::compass(\\n\\tCompass::northEast()))\\n-&gt;offsetX(10)\\n-&gt;offsetY(10))\\n\\t)\\n\\t-&gt;resize(Resize::scale()-&gt;width(600))\\n\\t-&gt;roundCorners(RoundCorners::byRadius(20));&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;golden_gate_side.jpg\\&quot;, array(\\&quot;transformation\\&quot;=&gt;array( array(\\&quot;gravity\\&quot;=&gt;\\&quot;east\\&quot;, \\&quot;height\\&quot;=&gt;\\&quot;0.35\\&quot;, \\&quot;width\\&quot;=&gt;\\&quot;0.8\\&quot;, \\&quot;crop\\&quot;=&gt;\\&quot;crop\\&quot;), array(\\&quot;gravity\\&quot;=&gt;\\&quot;north_east\\&quot;, \\&quot;overlay\\&quot;=&gt;\\&quot;viesus_icon\\&quot;, \\&quot;opacity\\&quot;=&gt;40, \\&quot;width\\&quot;=&gt;400, \\&quot;x\\&quot;=&gt;10, \\&quot;y\\&quot;=&gt;10, \\&quot;crop\\&quot;=&gt;\\&quot;scale\\&quot;), array(\\&quot;radius\\&quot;=&gt;20, \\&quot;width\\&quot;=&gt;600, \\&quot;crop\\&quot;=&gt;\\&quot;scale\\&quot;) )))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;golden_gate_side.jpg\\&quot;, array(\\&quot;transformation\\&quot;=&gt;array(\\n  array(\\&quot;gravity\\&quot;=&gt;\\&quot;east\\&quot;, \\&quot;height\\&quot;=&gt;\\&quot;0.35\\&quot;, \\&quot;width\\&quot;=&gt;\\&quot;0.8\\&quot;, \\&quot;crop\\&quot;=&gt;\\&quot;crop\\&quot;),\\n  array(\\&quot;gravity\\&quot;=&gt;\\&quot;north_east\\&quot;, \\&quot;overlay\\&quot;=&gt;\\&quot;viesus_icon\\&quot;, \\&quot;opacity\\&quot;=&gt;40, \\&quot;width\\&quot;=&gt;400, \\&quot;x\\&quot;=&gt;10, \\&quot;y\\&quot;=&gt;10, \\&quot;crop\\&quot;=&gt;\\&quot;scale\\&quot;),\\n  array(\\&quot;radius\\&quot;=&gt;20, \\&quot;width\\&quot;=&gt;600, \\&quot;crop\\&quot;=&gt;\\&quot;scale\\&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().gravity(\\&quot;east\\&quot;).height(0.35).width(0.8).crop(\\&quot;crop\\&quot;).chain() .gravity(\\&quot;north_east\\&quot;).overlay(new Layer().publicId(\\&quot;viesus_icon\\&quot;)).opacity(40).width(400).x(10).y(10).crop(\\&quot;scale\\&quot;).chain() .radius(20).width(600).crop(\\&quot;scale\\&quot;)).imageTag(\\&quot;golden_gate_side.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation()\\n  .gravity(\\&quot;east\\&quot;).height(0.35).width(0.8).crop(\\&quot;crop\\&quot;).chain()\\n  .gravity(\\&quot;north_east\\&quot;).overlay(new Layer().publicId(\\&quot;viesus_icon\\&quot;)).opacity(40).width(400).x(10).y(10).crop(\\&quot;scale\\&quot;).chain()\\n  .radius(20).width(600).crop(\\&quot;scale\\&quot;)).imageTag(\\&quot;golden_gate_side.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;golden_gate_side.jpg\\&quot;, transformation: [ {gravity: \\&quot;east\\&quot;, height: 0.35, width: 0.8, crop: \\&quot;crop\\&quot;}, {gravity: \\&quot;north_east\\&quot;, overlay: \\&quot;viesus_icon\\&quot;, opacity: 40, width: 400, x: 10, y: 10, crop: \\&quot;scale\\&quot;}, {radius: 20, width: 600, crop: \\&quot;scale\\&quot;} ])&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;golden_gate_side.jpg\\&quot;, transformation: [\\n  {gravity: \\&quot;east\\&quot;, height: 0.35, width: 0.8, crop: \\&quot;crop\\&quot;},\\n  {gravity: \\&quot;north_east\\&quot;, overlay: \\&quot;viesus_icon\\&quot;, opacity: 40, width: 400, x: 10, y: 10, crop: \\&quot;scale\\&quot;},\\n  {radius: 20, width: 600, crop: \\&quot;scale\\&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().Gravity(\\&quot;east\\&quot;).Height(0.35).Width(0.8).Crop(\\&quot;crop\\&quot;).Chain() .Gravity(\\&quot;north_east\\&quot;).Overlay(new Layer().PublicId(\\&quot;viesus_icon\\&quot;)).Opacity(40).Width(400).X(10).Y(10).Crop(\\&quot;scale\\&quot;).Chain() .Radius(20).Width(600).Crop(\\&quot;scale\\&quot;)).BuildImageTag(\\&quot;golden_gate_side.jpg\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation()\\n  .Gravity(\\&quot;east\\&quot;).Height(0.35).Width(0.8).Crop(\\&quot;crop\\&quot;).Chain()\\n  .Gravity(\\&quot;north_east\\&quot;).Overlay(new Layer().PublicId(\\&quot;viesus_icon\\&quot;)).Opacity(40).Width(400).X(10).Y(10).Crop(\\&quot;scale\\&quot;).Chain()\\n  .Radius(20).Width(600).Crop(\\&quot;scale\\&quot;)).BuildImageTag(\\&quot;golden_gate_side.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;golden_gate_side.jpg&#039;).transformation(Transformation()\\n\\t.resize(Resize.crop().width(0.8)\\n.height(0.35)\\n\\t.gravity(\\n\\tGravity.compass(\\n\\tCompass.east()))\\n\\t)\\n\\t.overlay(Overlay.source(\\n\\tSource.image(\\&quot;viesus_icon\\&quot;)\\n\\t.transformation(new Transformation()\\n\\t.resize(Resize.scale().width(400))\\n\\t.adjust(Adjust.opacity(40)))\\n\\t)\\n\\t.position(Position()\\n\\t.gravity(\\n\\tGravity.compass(\\n\\tCompass.northEast()))\\n.offsetX(10)\\n.offsetY(10))\\n\\t)\\n\\t.resize(Resize.scale().width(600))\\n\\t.roundCorners(RoundCorners.byRadius(20)));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;golden_gate_side.jpg&#039;).transformation(Transformation()\\n\\t.resize(Resize.crop().width(0.8)\\n.height(0.35)\\n\\t.gravity(\\n\\tGravity.compass(\\n\\tCompass.east()))\\n\\t)\\n\\t.overlay(Overlay.source(\\n\\tSource.image(\\&quot;viesus_icon\\&quot;)\\n\\t.transformation(new Transformation()\\n\\t.resize(Resize.scale().width(400))\\n\\t.adjust(Adjust.opacity(40)))\\n\\t)\\n\\t.position(Position()\\n\\t.gravity(\\n\\tGravity.compass(\\n\\tCompass.northEast()))\\n.offsetX(10)\\n.offsetY(10))\\n\\t)\\n\\t.resize(Resize.scale().width(600))\\n\\t.roundCorners(RoundCorners.byRadius(20)));&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().setGravity(\\&quot;east\\&quot;).setHeight(0.35).setWidth(0.8).setCrop(\\&quot;crop\\&quot;).chain() .setGravity(\\&quot;north_east\\&quot;).setOverlay(\\&quot;viesus_icon\\&quot;).setOpacity(40).setWidth(400).setX(10).setY(10).setCrop(\\&quot;scale\\&quot;).chain() .setRadius(20).setWidth(600).setCrop(\\&quot;scale\\&quot;)).generate(\\&quot;golden_gate_side.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()\\n  .setGravity(\\&quot;east\\&quot;).setHeight(0.35).setWidth(0.8).setCrop(\\&quot;crop\\&quot;).chain()\\n  .setGravity(\\&quot;north_east\\&quot;).setOverlay(\\&quot;viesus_icon\\&quot;).setOpacity(40).setWidth(400).setX(10).setY(10).setCrop(\\&quot;scale\\&quot;).chain()\\n  .setRadius(20).setWidth(600).setCrop(\\&quot;scale\\&quot;)).generate(\\&quot;golden_gate_side.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().gravity(\\&quot;east\\&quot;).height(0.35).width(0.8).crop(\\&quot;crop\\&quot;).chain() .gravity(\\&quot;north_east\\&quot;).overlay(new Layer().publicId(\\&quot;viesus_icon\\&quot;)).opacity(40).width(400).x(10).y(10).crop(\\&quot;scale\\&quot;).chain() .radius(20).width(600).crop(\\&quot;scale\\&quot;)).generate(\\&quot;golden_gate_side.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation()\\n  .gravity(\\&quot;east\\&quot;).height(0.35).width(0.8).crop(\\&quot;crop\\&quot;).chain()\\n  .gravity(\\&quot;north_east\\&quot;).overlay(new Layer().publicId(\\&quot;viesus_icon\\&quot;)).opacity(40).width(400).x(10).y(10).crop(\\&quot;scale\\&quot;).chain()\\n  .radius(20).width(600).crop(\\&quot;scale\\&quot;)).generate(\\&quot;golden_gate_side.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;golden_gate_side.jpg&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;c_crop,g_east,h_0.35,w_0.8\\\/c_scale,g_north_east,l_viesus_icon,o_40,w_400,x_10,y_10\\\/c_scale,r_20,w_600\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;golden_gate_side.jpg&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;c_crop,g_east,h_0.35,w_0.8\\\/c_scale,g_north_east,l_viesus_icon,o_40,w_400,x_10,y_10\\\/c_scale,r_20,w_600\\&quot;));&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;golden_gate_side.jpg\\&quot;)\\n\\t resize(Resize.crop() { width(0.8F)\\n height(0.35F)\\n\\t gravity(\\n\\tGravity.compass(\\n\\tCompass.east()))\\n\\t })\\n\\t overlay(Overlay.source(\\n\\tSource.image(\\&quot;viesus_icon\\&quot;) {\\n\\t transformation(Transformation {\\n\\t resize(Resize.scale() { width(400) })\\n\\t adjust(Adjust.opacity(40)) })\\n\\t }) {\\n\\t position(Position() {\\n\\t gravity(\\n\\tGravity.compass(\\n\\tCompass.northEast()))\\n offsetX(10)\\n offsetY(10) })\\n\\t })\\n\\t resize(Resize.scale() { width(600) })\\n\\t roundCorners(RoundCorners.byRadius(20)) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;golden_gate_side.jpg\\&quot;)\\n\\t resize(Resize.crop() { width(0.8F)\\n height(0.35F)\\n\\t gravity(\\n\\tGravity.compass(\\n\\tCompass.east()))\\n\\t })\\n\\t overlay(Overlay.source(\\n\\tSource.image(\\&quot;viesus_icon\\&quot;) {\\n\\t transformation(Transformation {\\n\\t resize(Resize.scale() { width(400) })\\n\\t adjust(Adjust.opacity(40)) })\\n\\t }) {\\n\\t position(Position() {\\n\\t gravity(\\n\\tGravity.compass(\\n\\tCompass.northEast()))\\n offsetX(10)\\n offsetY(10) })\\n\\t })\\n\\t resize(Resize.scale() { width(600) })\\n\\t roundCorners(RoundCorners.byRadius(20)) \\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;golden_gate_side.jpg\\&quot;, {transformation: [ {gravity: \\&quot;east\\&quot;, height: \\&quot;0.35\\&quot;, width: \\&quot;0.8\\&quot;, crop: \\&quot;crop\\&quot;}, {gravity: \\&quot;north_east\\&quot;, overlay: new cloudinary.Layer().publicId(\\&quot;viesus_icon\\&quot;), opacity: 40, width: 400, x: 10, y: 10, crop: \\&quot;scale\\&quot;}, {radius: 20, width: 600, crop: \\&quot;scale\\&quot;} ]})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;golden_gate_side.jpg\\&quot;, {transformation: [\\n  {gravity: \\&quot;east\\&quot;, height: \\&quot;0.35\\&quot;, width: \\&quot;0.8\\&quot;, crop: \\&quot;crop\\&quot;},\\n  {gravity: \\&quot;north_east\\&quot;, overlay: new cloudinary.Layer().publicId(\\&quot;viesus_icon\\&quot;), opacity: 40, width: 400, x: 10, y: 10, crop: \\&quot;scale\\&quot;},\\n  {radius: 20, width: 600, crop: \\&quot;scale\\&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;golden_gate_side.jpg\\&quot;)\\n  .resize(\\n    crop()\\n      .width(0.8)\\n      .height(0.35)\\n      .gravity(compass(\\&quot;east\\&quot;))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;viesus_icon\\&quot;).transformation(\\n        new Transformation().resize(scale().width(400)).adjust(opacity(40))\\n      )\\n    ).position(\\n      new Position()\\n        .gravity(compass(\\&quot;north_east\\&quot;))\\n        .offsetX(10)\\n        .offsetY(10)\\n    )\\n  )\\n  .resize(scale().width(600))\\n  .roundCorners(byRadius(20));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;golden_gate_side.jpg\\&quot;)\\n  .resize(\\n    crop()\\n      .width(0.8)\\n      .height(0.35)\\n      .gravity(compass(\\&quot;east\\&quot;))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;viesus_icon\\&quot;).transformation(\\n        new Transformation().resize(scale().width(400)).adjust(opacity(40))\\n      )\\n    ).position(\\n      new Position()\\n        .gravity(compass(\\&quot;north_east\\&quot;))\\n        .offsetX(10)\\n        .offsetY(10)\\n    )\\n  )\\n  .resize(scale().width(600))\\n  .roundCorners(byRadius(20));&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\\\/c_crop,g_east,h_0.35,w_0.8\\\/c_scale,g_north_east,l_viesus_icon,o_40,w_400,x_10,y_10\\\/c_scale,r_20,w_600\\\/golden_gate_side.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;crop_mode&quot;:&quot;crop&quot;,&quot;gravity&quot;:&quot;east&quot;,&quot;height&quot;:&quot;0.35&quot;,&quot;width&quot;:&quot;0.8&quot;},{&quot;crop_mode&quot;:&quot;scale&quot;,&quot;gravity&quot;:&quot;north_east&quot;,&quot;overlay&quot;:&quot;viesus_icon&quot;,&quot;opacity&quot;:&quot;40&quot;,&quot;width&quot;:&quot;400&quot;,&quot;x&quot;:&quot;10&quot;,&quot;y&quot;:&quot;10&quot;},{&quot;crop_mode&quot;:&quot;scale&quot;,&quot;radius&quot;:&quot;20&quot;,&quot;width&quot;:&quot;600&quot;}],&quot;transformation_string&quot;:&quot;c_crop,g_east,h_0.35,w_0.8\\\/c_scale,g_north_east,l_viesus_icon,o_40,w_400,x_10,y_10\\\/c_scale,r_20,w_600&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;golden_gate_side.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\/c_crop,g_east,h_0.35,w_0.8\/c_scale,g_north_east,l_viesus_icon,o_40,w_400,x_10,y_10\/c_scale,r_20,w_600\/golden_gate_side.jpg\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/c_crop,g_east,h_0.35,w_0.8\/c_scale,g_north_east,l_viesus_icon,o_40,w_400,x_10,y_10\/c_scale,r_20,w_600\/golden_gate_side.jpg\" alt=\"Golden Gate\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"600\" height=\"394\"\/><\/a><\/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;golden_gate_side.jpg\\&quot;, {sign_url: true, transformation: [ {effect: \\&quot;viesus_correct\\&quot;, gravity: \\&quot;east\\&quot;, height: \\&quot;0.35\\&quot;, width: \\&quot;0.8\\&quot;, crop: \\&quot;crop\\&quot;}, {gravity: \\&quot;north_east\\&quot;, overlay: \\&quot;viesus_icon\\&quot;, opacity: 40, width: 400, x: 10, y: 10, crop: \\&quot;scale\\&quot;}, {radius: 20, width: 600, crop: \\&quot;scale\\&quot;} ]})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;golden_gate_side.jpg\\&quot;, {sign_url: true, transformation: [\\n  {effect: \\&quot;viesus_correct\\&quot;, gravity: \\&quot;east\\&quot;, height: \\&quot;0.35\\&quot;, width: \\&quot;0.8\\&quot;, crop: \\&quot;crop\\&quot;},\\n  {gravity: \\&quot;north_east\\&quot;, overlay: \\&quot;viesus_icon\\&quot;, opacity: 40, width: 400, x: 10, y: 10, crop: \\&quot;scale\\&quot;},\\n  {radius: 20, width: 600, crop: \\&quot;scale\\&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;golden_gate_side.jpg\\&quot;)\\n  .resize(\\n    crop()\\n      .width(0.8)\\n      .height(0.35)\\n      .gravity(compass(\\&quot;east\\&quot;))\\n  )\\n  .adjust(viesusCorrect())\\n  .overlay(\\n    source(\\n      image(\\&quot;viesus_icon\\&quot;).transformation(\\n        new Transformation().resize(scale().width(400)).adjust(opacity(40))\\n      )\\n    ).position(\\n      new Position()\\n        .gravity(compass(\\&quot;north_east\\&quot;))\\n        .offsetX(10)\\n        .offsetY(10)\\n    )\\n  )\\n  .resize(scale().width(600))\\n  .roundCorners(byRadius(20))\\n  .setSignature(\\&quot;2iXhOJov\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;golden_gate_side.jpg\\&quot;)\\n  .resize(\\n    crop()\\n      .width(0.8)\\n      .height(0.35)\\n      .gravity(compass(\\&quot;east\\&quot;))\\n  )\\n  .adjust(viesusCorrect())\\n  .overlay(\\n    source(\\n      image(\\&quot;viesus_icon\\&quot;).transformation(\\n        new Transformation().resize(scale().width(400)).adjust(opacity(40))\\n      )\\n    ).position(\\n      new Position()\\n        .gravity(compass(\\&quot;north_east\\&quot;))\\n        .offsetX(10)\\n        .offsetY(10)\\n    )\\n  )\\n  .resize(scale().width(600))\\n  .roundCorners(byRadius(20))\\n  .setSignature(\\&quot;2iXhOJov\\&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;golden_gate_side.jpg\\&quot; signUrl=\\&quot;true\\&quot;&gt; &lt;Transformation effect=\\&quot;viesus_correct\\&quot; gravity=\\&quot;east\\&quot; height=\\&quot;0.35\\&quot; width=\\&quot;0.8\\&quot; crop=\\&quot;crop\\&quot; \\\/&gt; &lt;Transformation gravity=\\&quot;north_east\\&quot; overlay=\\&quot;viesus_icon\\&quot; opacity=\\&quot;40\\&quot; width=\\&quot;400\\&quot; x=\\&quot;10\\&quot; y=\\&quot;10\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt; &lt;Transformation radius=\\&quot;20\\&quot; width=\\&quot;600\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;golden_gate_side.jpg\\&quot; signUrl=\\&quot;true\\&quot;&gt;\\n\\t&lt;Transformation effect=\\&quot;viesus_correct\\&quot; gravity=\\&quot;east\\&quot; height=\\&quot;0.35\\&quot; width=\\&quot;0.8\\&quot; crop=\\&quot;crop\\&quot; \\\/&gt;\\n\\t&lt;Transformation gravity=\\&quot;north_east\\&quot; overlay=\\&quot;viesus_icon\\&quot; opacity=\\&quot;40\\&quot; width=\\&quot;400\\&quot; x=\\&quot;10\\&quot; y=\\&quot;10\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt;\\n\\t&lt;Transformation radius=\\&quot;20\\&quot; width=\\&quot;600\\&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;golden_gate_side.jpg\\&quot;)\\n  .resize(\\n    crop()\\n      .width(0.8)\\n      .height(0.35)\\n      .gravity(compass(\\&quot;east\\&quot;))\\n  )\\n  .adjust(viesusCorrect())\\n  .overlay(\\n    source(\\n      image(\\&quot;viesus_icon\\&quot;).transformation(\\n        new Transformation().resize(scale().width(400)).adjust(opacity(40))\\n      )\\n    ).position(\\n      new Position()\\n        .gravity(compass(\\&quot;north_east\\&quot;))\\n        .offsetX(10)\\n        .offsetY(10)\\n    )\\n  )\\n  .resize(scale().width(600))\\n  .roundCorners(byRadius(20))\\n  .setSignature(\\&quot;2iXhOJov\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;golden_gate_side.jpg\\&quot;)\\n  .resize(\\n    crop()\\n      .width(0.8)\\n      .height(0.35)\\n      .gravity(compass(\\&quot;east\\&quot;))\\n  )\\n  .adjust(viesusCorrect())\\n  .overlay(\\n    source(\\n      image(\\&quot;viesus_icon\\&quot;).transformation(\\n        new Transformation().resize(scale().width(400)).adjust(opacity(40))\\n      )\\n    ).position(\\n      new Position()\\n        .gravity(compass(\\&quot;north_east\\&quot;))\\n        .offsetX(10)\\n        .offsetY(10)\\n    )\\n  )\\n  .resize(scale().width(600))\\n  .roundCorners(byRadius(20))\\n  .setSignature(\\&quot;2iXhOJov\\&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;golden_gate_side.jpg\\&quot; sign-url=\\&quot;true\\&quot;&gt; &lt;cld-transformation effect=\\&quot;viesus_correct\\&quot; gravity=\\&quot;east\\&quot; height=\\&quot;0.35\\&quot; width=\\&quot;0.8\\&quot; crop=\\&quot;crop\\&quot; \\\/&gt; &lt;cld-transformation gravity=\\&quot;north_east\\&quot; :overlay=\\&quot;viesus_icon\\&quot; opacity=\\&quot;40\\&quot; width=\\&quot;400\\&quot; x=\\&quot;10\\&quot; y=\\&quot;10\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt; &lt;cld-transformation radius=\\&quot;20\\&quot; width=\\&quot;600\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;golden_gate_side.jpg\\&quot; sign-url=\\&quot;true\\&quot;&gt;\\n\\t&lt;cld-transformation effect=\\&quot;viesus_correct\\&quot; gravity=\\&quot;east\\&quot; height=\\&quot;0.35\\&quot; width=\\&quot;0.8\\&quot; crop=\\&quot;crop\\&quot; \\\/&gt;\\n\\t&lt;cld-transformation gravity=\\&quot;north_east\\&quot; :overlay=\\&quot;viesus_icon\\&quot; opacity=\\&quot;40\\&quot; width=\\&quot;400\\&quot; x=\\&quot;10\\&quot; y=\\&quot;10\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt;\\n\\t&lt;cld-transformation radius=\\&quot;20\\&quot; width=\\&quot;600\\&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;golden_gate_side.jpg\\&quot;)\\n  .resize(\\n    crop()\\n      .width(0.8)\\n      .height(0.35)\\n      .gravity(compass(\\&quot;east\\&quot;))\\n  )\\n  .adjust(viesusCorrect())\\n  .overlay(\\n    source(\\n      image(\\&quot;viesus_icon\\&quot;).transformation(\\n        new Transformation().resize(scale().width(400)).adjust(opacity(40))\\n      )\\n    ).position(\\n      new Position()\\n        .gravity(compass(\\&quot;north_east\\&quot;))\\n        .offsetX(10)\\n        .offsetY(10)\\n    )\\n  )\\n  .resize(scale().width(600))\\n  .roundCorners(byRadius(20))\\n  .setSignature(\\&quot;2iXhOJov\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;golden_gate_side.jpg\\&quot;)\\n  .resize(\\n    crop()\\n      .width(0.8)\\n      .height(0.35)\\n      .gravity(compass(\\&quot;east\\&quot;))\\n  )\\n  .adjust(viesusCorrect())\\n  .overlay(\\n    source(\\n      image(\\&quot;viesus_icon\\&quot;).transformation(\\n        new Transformation().resize(scale().width(400)).adjust(opacity(40))\\n      )\\n    ).position(\\n      new Position()\\n        .gravity(compass(\\&quot;north_east\\&quot;))\\n        .offsetX(10)\\n        .offsetY(10)\\n    )\\n  )\\n  .resize(scale().width(600))\\n  .roundCorners(byRadius(20))\\n  .setSignature(\\&quot;2iXhOJov\\&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;golden_gate_side.jpg\\&quot; sign-url=\\&quot;true\\&quot;&gt; &lt;cl-transformation effect=\\&quot;viesus_correct\\&quot; gravity=\\&quot;east\\&quot; height=\\&quot;0.35\\&quot; width=\\&quot;0.8\\&quot; crop=\\&quot;crop\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;cl-transformation gravity=\\&quot;north_east\\&quot; overlay=\\&quot;viesus_icon\\&quot; opacity=\\&quot;40\\&quot; width=\\&quot;400\\&quot; x=\\&quot;10\\&quot; y=\\&quot;10\\&quot; crop=\\&quot;scale\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;cl-transformation radius=\\&quot;20\\&quot; width=\\&quot;600\\&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;golden_gate_side.jpg\\&quot; sign-url=\\&quot;true\\&quot;&gt;\\n\\t&lt;cl-transformation effect=\\&quot;viesus_correct\\&quot; gravity=\\&quot;east\\&quot; height=\\&quot;0.35\\&quot; width=\\&quot;0.8\\&quot; crop=\\&quot;crop\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n\\t&lt;cl-transformation gravity=\\&quot;north_east\\&quot; overlay=\\&quot;viesus_icon\\&quot; opacity=\\&quot;40\\&quot; width=\\&quot;400\\&quot; x=\\&quot;10\\&quot; y=\\&quot;10\\&quot; crop=\\&quot;scale\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n\\t&lt;cl-transformation radius=\\&quot;20\\&quot; width=\\&quot;600\\&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;golden_gate_side.jpg\\&quot;)\\n  .resize(\\n    crop()\\n      .width(0.8)\\n      .height(0.35)\\n      .gravity(compass(\\&quot;east\\&quot;))\\n  )\\n  .adjust(viesusCorrect())\\n  .overlay(\\n    source(\\n      image(\\&quot;viesus_icon\\&quot;).transformation(\\n        new Transformation().resize(scale().width(400)).adjust(opacity(40))\\n      )\\n    ).position(\\n      new Position()\\n        .gravity(compass(\\&quot;north_east\\&quot;))\\n        .offsetX(10)\\n        .offsetY(10)\\n    )\\n  )\\n  .resize(scale().width(600))\\n  .roundCorners(byRadius(20))\\n  .setSignature(\\&quot;2iXhOJov\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;golden_gate_side.jpg\\&quot;)\\n  .resize(\\n    crop()\\n      .width(0.8)\\n      .height(0.35)\\n      .gravity(compass(\\&quot;east\\&quot;))\\n  )\\n  .adjust(viesusCorrect())\\n  .overlay(\\n    source(\\n      image(\\&quot;viesus_icon\\&quot;).transformation(\\n        new Transformation().resize(scale().width(400)).adjust(opacity(40))\\n      )\\n    ).position(\\n      new Position()\\n        .gravity(compass(\\&quot;north_east\\&quot;))\\n        .offsetX(10)\\n        .offsetY(10)\\n    )\\n  )\\n  .resize(scale().width(600))\\n  .roundCorners(byRadius(20))\\n  .setSignature(\\&quot;2iXhOJov\\&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;golden_gate_side.jpg&#039;, {signUrl: true, transformation: [ {effect: \\&quot;viesus_correct\\&quot;, gravity: \\&quot;east\\&quot;, height: \\&quot;0.35\\&quot;, width: \\&quot;0.8\\&quot;, crop: \\&quot;crop\\&quot;}, {gravity: \\&quot;north_east\\&quot;, overlay: new cloudinary.Layer().publicId(\\&quot;viesus_icon\\&quot;), opacity: 40, width: 400, x: 10, y: 10, crop: \\&quot;scale\\&quot;}, {radius: 20, width: 600, crop: \\&quot;scale\\&quot;} ]}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;golden_gate_side.jpg&#039;, {signUrl: true, transformation: [\\n  {effect: \\&quot;viesus_correct\\&quot;, gravity: \\&quot;east\\&quot;, height: \\&quot;0.35\\&quot;, width: \\&quot;0.8\\&quot;, crop: \\&quot;crop\\&quot;},\\n  {gravity: \\&quot;north_east\\&quot;, overlay: new cloudinary.Layer().publicId(\\&quot;viesus_icon\\&quot;), opacity: 40, width: 400, x: 10, y: 10, crop: \\&quot;scale\\&quot;},\\n  {radius: 20, width: 600, crop: \\&quot;scale\\&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;golden_gate_side.jpg\\&quot;).image(sign_url=True, transformation=[ {&#039;effect&#039;: \\&quot;viesus_correct\\&quot;, &#039;gravity&#039;: \\&quot;east\\&quot;, &#039;height&#039;: \\&quot;0.35\\&quot;, &#039;width&#039;: \\&quot;0.8\\&quot;, &#039;crop&#039;: \\&quot;crop\\&quot;}, {&#039;gravity&#039;: \\&quot;north_east\\&quot;, &#039;overlay&#039;: \\&quot;viesus_icon\\&quot;, &#039;opacity&#039;: 40, &#039;width&#039;: 400, &#039;x&#039;: 10, &#039;y&#039;: 10, &#039;crop&#039;: \\&quot;scale\\&quot;}, {&#039;radius&#039;: 20, &#039;width&#039;: 600, &#039;crop&#039;: \\&quot;scale\\&quot;} ])&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;golden_gate_side.jpg\\&quot;).image(sign_url=True, transformation=[\\n  {&#039;effect&#039;: \\&quot;viesus_correct\\&quot;, &#039;gravity&#039;: \\&quot;east\\&quot;, &#039;height&#039;: \\&quot;0.35\\&quot;, &#039;width&#039;: \\&quot;0.8\\&quot;, &#039;crop&#039;: \\&quot;crop\\&quot;},\\n  {&#039;gravity&#039;: \\&quot;north_east\\&quot;, &#039;overlay&#039;: \\&quot;viesus_icon\\&quot;, &#039;opacity&#039;: 40, &#039;width&#039;: 400, &#039;x&#039;: 10, &#039;y&#039;: 10, &#039;crop&#039;: \\&quot;scale\\&quot;},\\n  {&#039;radius&#039;: 20, &#039;width&#039;: 600, &#039;crop&#039;: \\&quot;scale\\&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;golden_gate_side.jpg&#039;))\\n\\t-&gt;resize(Resize::crop()-&gt;width(0.8)\\n-&gt;height(0.35)\\n\\t-&gt;gravity(\\n\\tGravity::compass(\\n\\tCompass::east()))\\n\\t)\\n\\t-&gt;adjust(Adjust::viesusCorrect())\\n\\t-&gt;overlay(Overlay::source(\\n\\tSource::image(\\&quot;viesus_icon\\&quot;)\\n\\t-&gt;transformation((new Transformation())\\n\\t-&gt;resize(Resize::scale()-&gt;width(400))\\n\\t-&gt;adjust(Adjust::opacity(40)))\\n\\t)\\n\\t-&gt;position((new Position())\\n\\t-&gt;gravity(\\n\\tGravity::compass(\\n\\tCompass::northEast()))\\n-&gt;offsetX(10)\\n-&gt;offsetY(10))\\n\\t)\\n\\t-&gt;resize(Resize::scale()-&gt;width(600))\\n\\t-&gt;roundCorners(RoundCorners::byRadius(20))\\n\\t-&gt;sign();&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;golden_gate_side.jpg&#039;))\\n\\t-&gt;resize(Resize::crop()-&gt;width(0.8)\\n-&gt;height(0.35)\\n\\t-&gt;gravity(\\n\\tGravity::compass(\\n\\tCompass::east()))\\n\\t)\\n\\t-&gt;adjust(Adjust::viesusCorrect())\\n\\t-&gt;overlay(Overlay::source(\\n\\tSource::image(\\&quot;viesus_icon\\&quot;)\\n\\t-&gt;transformation((new Transformation())\\n\\t-&gt;resize(Resize::scale()-&gt;width(400))\\n\\t-&gt;adjust(Adjust::opacity(40)))\\n\\t)\\n\\t-&gt;position((new Position())\\n\\t-&gt;gravity(\\n\\tGravity::compass(\\n\\tCompass::northEast()))\\n-&gt;offsetX(10)\\n-&gt;offsetY(10))\\n\\t)\\n\\t-&gt;resize(Resize::scale()-&gt;width(600))\\n\\t-&gt;roundCorners(RoundCorners::byRadius(20))\\n\\t-&gt;sign();&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;golden_gate_side.jpg\\&quot;, array(\\&quot;sign_url\\&quot;=&gt;true, \\&quot;transformation\\&quot;=&gt;array( array(\\&quot;effect\\&quot;=&gt;\\&quot;viesus_correct\\&quot;, \\&quot;gravity\\&quot;=&gt;\\&quot;east\\&quot;, \\&quot;height\\&quot;=&gt;\\&quot;0.35\\&quot;, \\&quot;width\\&quot;=&gt;\\&quot;0.8\\&quot;, \\&quot;crop\\&quot;=&gt;\\&quot;crop\\&quot;), array(\\&quot;gravity\\&quot;=&gt;\\&quot;north_east\\&quot;, \\&quot;overlay\\&quot;=&gt;\\&quot;viesus_icon\\&quot;, \\&quot;opacity\\&quot;=&gt;40, \\&quot;width\\&quot;=&gt;400, \\&quot;x\\&quot;=&gt;10, \\&quot;y\\&quot;=&gt;10, \\&quot;crop\\&quot;=&gt;\\&quot;scale\\&quot;), array(\\&quot;radius\\&quot;=&gt;20, \\&quot;width\\&quot;=&gt;600, \\&quot;crop\\&quot;=&gt;\\&quot;scale\\&quot;) )))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;golden_gate_side.jpg\\&quot;, array(\\&quot;sign_url\\&quot;=&gt;true, \\&quot;transformation\\&quot;=&gt;array(\\n  array(\\&quot;effect\\&quot;=&gt;\\&quot;viesus_correct\\&quot;, \\&quot;gravity\\&quot;=&gt;\\&quot;east\\&quot;, \\&quot;height\\&quot;=&gt;\\&quot;0.35\\&quot;, \\&quot;width\\&quot;=&gt;\\&quot;0.8\\&quot;, \\&quot;crop\\&quot;=&gt;\\&quot;crop\\&quot;),\\n  array(\\&quot;gravity\\&quot;=&gt;\\&quot;north_east\\&quot;, \\&quot;overlay\\&quot;=&gt;\\&quot;viesus_icon\\&quot;, \\&quot;opacity\\&quot;=&gt;40, \\&quot;width\\&quot;=&gt;400, \\&quot;x\\&quot;=&gt;10, \\&quot;y\\&quot;=&gt;10, \\&quot;crop\\&quot;=&gt;\\&quot;scale\\&quot;),\\n  array(\\&quot;radius\\&quot;=&gt;20, \\&quot;width\\&quot;=&gt;600, \\&quot;crop\\&quot;=&gt;\\&quot;scale\\&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().effect(\\&quot;viesus_correct\\&quot;).gravity(\\&quot;east\\&quot;).height(0.35).width(0.8).crop(\\&quot;crop\\&quot;).chain() .gravity(\\&quot;north_east\\&quot;).overlay(new Layer().publicId(\\&quot;viesus_icon\\&quot;)).opacity(40).width(400).x(10).y(10).crop(\\&quot;scale\\&quot;).chain() .radius(20).width(600).crop(\\&quot;scale\\&quot;)).signed(true).imageTag(\\&quot;golden_gate_side.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation()\\n  .effect(\\&quot;viesus_correct\\&quot;).gravity(\\&quot;east\\&quot;).height(0.35).width(0.8).crop(\\&quot;crop\\&quot;).chain()\\n  .gravity(\\&quot;north_east\\&quot;).overlay(new Layer().publicId(\\&quot;viesus_icon\\&quot;)).opacity(40).width(400).x(10).y(10).crop(\\&quot;scale\\&quot;).chain()\\n  .radius(20).width(600).crop(\\&quot;scale\\&quot;)).signed(true).imageTag(\\&quot;golden_gate_side.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;golden_gate_side.jpg\\&quot;, sign_url: true, transformation: [ {effect: \\&quot;viesus_correct\\&quot;, gravity: \\&quot;east\\&quot;, height: 0.35, width: 0.8, crop: \\&quot;crop\\&quot;}, {gravity: \\&quot;north_east\\&quot;, overlay: \\&quot;viesus_icon\\&quot;, opacity: 40, width: 400, x: 10, y: 10, crop: \\&quot;scale\\&quot;}, {radius: 20, width: 600, crop: \\&quot;scale\\&quot;} ])&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;golden_gate_side.jpg\\&quot;, sign_url: true, transformation: [\\n  {effect: \\&quot;viesus_correct\\&quot;, gravity: \\&quot;east\\&quot;, height: 0.35, width: 0.8, crop: \\&quot;crop\\&quot;},\\n  {gravity: \\&quot;north_east\\&quot;, overlay: \\&quot;viesus_icon\\&quot;, opacity: 40, width: 400, x: 10, y: 10, crop: \\&quot;scale\\&quot;},\\n  {radius: 20, width: 600, crop: \\&quot;scale\\&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().Effect(\\&quot;viesus_correct\\&quot;).Gravity(\\&quot;east\\&quot;).Height(0.35).Width(0.8).Crop(\\&quot;crop\\&quot;).Chain() .Gravity(\\&quot;north_east\\&quot;).Overlay(new Layer().PublicId(\\&quot;viesus_icon\\&quot;)).Opacity(40).Width(400).X(10).Y(10).Crop(\\&quot;scale\\&quot;).Chain() .Radius(20).Width(600).Crop(\\&quot;scale\\&quot;)).Signed(true).BuildImageTag(\\&quot;golden_gate_side.jpg\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation()\\n  .Effect(\\&quot;viesus_correct\\&quot;).Gravity(\\&quot;east\\&quot;).Height(0.35).Width(0.8).Crop(\\&quot;crop\\&quot;).Chain()\\n  .Gravity(\\&quot;north_east\\&quot;).Overlay(new Layer().PublicId(\\&quot;viesus_icon\\&quot;)).Opacity(40).Width(400).X(10).Y(10).Crop(\\&quot;scale\\&quot;).Chain()\\n  .Radius(20).Width(600).Crop(\\&quot;scale\\&quot;)).Signed(true).BuildImageTag(\\&quot;golden_gate_side.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;golden_gate_side.jpg&#039;).transformation(Transformation()\\n\\t.resize(Resize.crop().width(0.8)\\n.height(0.35)\\n\\t.gravity(\\n\\tGravity.compass(\\n\\tCompass.east()))\\n\\t)\\n\\t.adjust(Adjust.viesusCorrect())\\n\\t.overlay(Overlay.source(\\n\\tSource.image(\\&quot;viesus_icon\\&quot;)\\n\\t.transformation(new Transformation()\\n\\t.resize(Resize.scale().width(400))\\n\\t.adjust(Adjust.opacity(40)))\\n\\t)\\n\\t.position(Position()\\n\\t.gravity(\\n\\tGravity.compass(\\n\\tCompass.northEast()))\\n.offsetX(10)\\n.offsetY(10))\\n\\t)\\n\\t.resize(Resize.scale().width(600))\\n\\t.roundCorners(RoundCorners.byRadius(20))\\n\\t.setSignature(\\&quot;2iXhOJov\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;golden_gate_side.jpg&#039;).transformation(Transformation()\\n\\t.resize(Resize.crop().width(0.8)\\n.height(0.35)\\n\\t.gravity(\\n\\tGravity.compass(\\n\\tCompass.east()))\\n\\t)\\n\\t.adjust(Adjust.viesusCorrect())\\n\\t.overlay(Overlay.source(\\n\\tSource.image(\\&quot;viesus_icon\\&quot;)\\n\\t.transformation(new Transformation()\\n\\t.resize(Resize.scale().width(400))\\n\\t.adjust(Adjust.opacity(40)))\\n\\t)\\n\\t.position(Position()\\n\\t.gravity(\\n\\tGravity.compass(\\n\\tCompass.northEast()))\\n.offsetX(10)\\n.offsetY(10))\\n\\t)\\n\\t.resize(Resize.scale().width(600))\\n\\t.roundCorners(RoundCorners.byRadius(20))\\n\\t.setSignature(\\&quot;2iXhOJov\\&quot;));&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;viesus_correct\\&quot;).setGravity(\\&quot;east\\&quot;).setHeight(0.35).setWidth(0.8).setCrop(\\&quot;crop\\&quot;).chain() .setGravity(\\&quot;north_east\\&quot;).setOverlay(\\&quot;viesus_icon\\&quot;).setOpacity(40).setWidth(400).setX(10).setY(10).setCrop(\\&quot;scale\\&quot;).chain() .setRadius(20).setWidth(600).setCrop(\\&quot;scale\\&quot;)).generate(\\&quot;golden_gate_side.jpg\\&quot;, signUrl: true)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()\\n  .setEffect(\\&quot;viesus_correct\\&quot;).setGravity(\\&quot;east\\&quot;).setHeight(0.35).setWidth(0.8).setCrop(\\&quot;crop\\&quot;).chain()\\n  .setGravity(\\&quot;north_east\\&quot;).setOverlay(\\&quot;viesus_icon\\&quot;).setOpacity(40).setWidth(400).setX(10).setY(10).setCrop(\\&quot;scale\\&quot;).chain()\\n  .setRadius(20).setWidth(600).setCrop(\\&quot;scale\\&quot;)).generate(\\&quot;golden_gate_side.jpg\\&quot;, signUrl: true)!, 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;viesus_correct\\&quot;).gravity(\\&quot;east\\&quot;).height(0.35).width(0.8).crop(\\&quot;crop\\&quot;).chain() .gravity(\\&quot;north_east\\&quot;).overlay(new Layer().publicId(\\&quot;viesus_icon\\&quot;)).opacity(40).width(400).x(10).y(10).crop(\\&quot;scale\\&quot;).chain() .radius(20).width(600).crop(\\&quot;scale\\&quot;)).signed(true).generate(\\&quot;golden_gate_side.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation()\\n  .effect(\\&quot;viesus_correct\\&quot;).gravity(\\&quot;east\\&quot;).height(0.35).width(0.8).crop(\\&quot;crop\\&quot;).chain()\\n  .gravity(\\&quot;north_east\\&quot;).overlay(new Layer().publicId(\\&quot;viesus_icon\\&quot;)).opacity(40).width(400).x(10).y(10).crop(\\&quot;scale\\&quot;).chain()\\n  .radius(20).width(600).crop(\\&quot;scale\\&quot;)).signed(true).generate(\\&quot;golden_gate_side.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;golden_gate_side.jpg&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;c_crop,e_viesus_correct,g_east,h_0.35,w_0.8\\\/c_scale,g_north_east,l_viesus_icon,o_40,w_400,x_10,y_10\\\/c_scale,r_20,w_600\\&quot;)\\n\\t.setSignature(\\&quot;2iXhOJov\\&quot;));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;golden_gate_side.jpg&#039;).transformation(Transformation()\\n\\t.addTransformation(\\&quot;c_crop,e_viesus_correct,g_east,h_0.35,w_0.8\\\/c_scale,g_north_east,l_viesus_icon,o_40,w_400,x_10,y_10\\\/c_scale,r_20,w_600\\&quot;)\\n\\t.setSignature(\\&quot;2iXhOJov\\&quot;));&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;golden_gate_side.jpg\\&quot;)\\n\\t resize(Resize.crop() { width(0.8F)\\n height(0.35F)\\n\\t gravity(\\n\\tGravity.compass(\\n\\tCompass.east()))\\n\\t })\\n\\t adjust(Adjust.viesusCorrect())\\n\\t overlay(Overlay.source(\\n\\tSource.image(\\&quot;viesus_icon\\&quot;) {\\n\\t transformation(Transformation {\\n\\t resize(Resize.scale() { width(400) })\\n\\t adjust(Adjust.opacity(40)) })\\n\\t }) {\\n\\t position(Position() {\\n\\t gravity(\\n\\tGravity.compass(\\n\\tCompass.northEast()))\\n offsetX(10)\\n offsetY(10) })\\n\\t })\\n\\t resize(Resize.scale() { width(600) })\\n\\t roundCorners(RoundCorners.byRadius(20))\\n\\t signature() \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;golden_gate_side.jpg\\&quot;)\\n\\t resize(Resize.crop() { width(0.8F)\\n height(0.35F)\\n\\t gravity(\\n\\tGravity.compass(\\n\\tCompass.east()))\\n\\t })\\n\\t adjust(Adjust.viesusCorrect())\\n\\t overlay(Overlay.source(\\n\\tSource.image(\\&quot;viesus_icon\\&quot;) {\\n\\t transformation(Transformation {\\n\\t resize(Resize.scale() { width(400) })\\n\\t adjust(Adjust.opacity(40)) })\\n\\t }) {\\n\\t position(Position() {\\n\\t gravity(\\n\\tGravity.compass(\\n\\tCompass.northEast()))\\n offsetX(10)\\n offsetY(10) })\\n\\t })\\n\\t resize(Resize.scale() { width(600) })\\n\\t roundCorners(RoundCorners.byRadius(20))\\n\\t signature() \\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;golden_gate_side.jpg\\&quot;, {transformation: [ {effect: \\&quot;viesus_correct\\&quot;, gravity: \\&quot;east\\&quot;, height: \\&quot;0.35\\&quot;, width: \\&quot;0.8\\&quot;, crop: \\&quot;crop\\&quot;}, {gravity: \\&quot;north_east\\&quot;, overlay: new cloudinary.Layer().publicId(\\&quot;viesus_icon\\&quot;), opacity: 40, width: 400, x: 10, y: 10, crop: \\&quot;scale\\&quot;}, {radius: 20, width: 600, crop: \\&quot;scale\\&quot;} ]})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;golden_gate_side.jpg\\&quot;, {transformation: [\\n  {effect: \\&quot;viesus_correct\\&quot;, gravity: \\&quot;east\\&quot;, height: \\&quot;0.35\\&quot;, width: \\&quot;0.8\\&quot;, crop: \\&quot;crop\\&quot;},\\n  {gravity: \\&quot;north_east\\&quot;, overlay: new cloudinary.Layer().publicId(\\&quot;viesus_icon\\&quot;), opacity: 40, width: 400, x: 10, y: 10, crop: \\&quot;scale\\&quot;},\\n  {radius: 20, width: 600, crop: \\&quot;scale\\&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;golden_gate_side.jpg\\&quot;)\\n  .resize(\\n    crop()\\n      .width(0.8)\\n      .height(0.35)\\n      .gravity(compass(\\&quot;east\\&quot;))\\n  )\\n  .adjust(viesusCorrect())\\n  .overlay(\\n    source(\\n      image(\\&quot;viesus_icon\\&quot;).transformation(\\n        new Transformation().resize(scale().width(400)).adjust(opacity(40))\\n      )\\n    ).position(\\n      new Position()\\n        .gravity(compass(\\&quot;north_east\\&quot;))\\n        .offsetX(10)\\n        .offsetY(10)\\n    )\\n  )\\n  .resize(scale().width(600))\\n  .roundCorners(byRadius(20))\\n  .setSignature(\\&quot;2iXhOJov\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;golden_gate_side.jpg\\&quot;)\\n  .resize(\\n    crop()\\n      .width(0.8)\\n      .height(0.35)\\n      .gravity(compass(\\&quot;east\\&quot;))\\n  )\\n  .adjust(viesusCorrect())\\n  .overlay(\\n    source(\\n      image(\\&quot;viesus_icon\\&quot;).transformation(\\n        new Transformation().resize(scale().width(400)).adjust(opacity(40))\\n      )\\n    ).position(\\n      new Position()\\n        .gravity(compass(\\&quot;north_east\\&quot;))\\n        .offsetX(10)\\n        .offsetY(10)\\n    )\\n  )\\n  .resize(scale().width(600))\\n  .roundCorners(byRadius(20))\\n  .setSignature(\\&quot;2iXhOJov\\&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\\\/image\\\/upload\\\/s--2iXhOJov--\\\/c_crop,e_viesus_correct,g_east,h_0.35,w_0.8\\\/c_scale,g_north_east,l_viesus_icon,o_40,w_400,x_10,y_10\\\/c_scale,r_20,w_600\\\/golden_gate_side.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;crop_mode&quot;:&quot;crop&quot;,&quot;effect&quot;:&quot;viesus_correct&quot;,&quot;gravity&quot;:&quot;east&quot;,&quot;height&quot;:&quot;0.35&quot;,&quot;width&quot;:&quot;0.8&quot;},{&quot;crop_mode&quot;:&quot;scale&quot;,&quot;gravity&quot;:&quot;north_east&quot;,&quot;overlay&quot;:&quot;viesus_icon&quot;,&quot;opacity&quot;:&quot;40&quot;,&quot;width&quot;:&quot;400&quot;,&quot;x&quot;:&quot;10&quot;,&quot;y&quot;:&quot;10&quot;},{&quot;crop_mode&quot;:&quot;scale&quot;,&quot;radius&quot;:&quot;20&quot;,&quot;width&quot;:&quot;600&quot;}],&quot;transformation_string&quot;:&quot;c_crop,e_viesus_correct,g_east,h_0.35,w_0.8\\\/c_scale,g_north_east,l_viesus_icon,o_40,w_400,x_10,y_10\\\/c_scale,r_20,w_600&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;golden_gate_side.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;2iXhOJov&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\/s--2iXhOJov--\/c_crop,e_viesus_correct,g_east,h_0.35,w_0.8\/c_scale,g_north_east,l_viesus_icon,o_40,w_400,x_10,y_10\/c_scale,r_20,w_600\/golden_gate_side.jpg\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/s--2iXhOJov--\/c_crop,e_viesus_correct,g_east,h_0.35,w_0.8\/c_scale,g_north_east,l_viesus_icon,o_40,w_400,x_10,y_10\/c_scale,r_20,w_600\/golden_gate_side.jpg\" alt=\"Golden Gate Enhanced\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"600\" height=\"394\"\/><\/a><\/p>\n<h2>Image Optimization<\/h2>\n<p>Optimization techniques for images abound on Cloudinary. Setting them up for automation opens up endless possibilities for transformations.<\/p>\n<p>Below are two examples.<\/p>\n<h3>Intelligent Content-Aware Encoding<\/h3>\n<p>A simply way of leveraging <code>q_auto<\/code> is to specify the value <code>auto<\/code> for an image\u2019s <code>quality<\/code> parameter, like this:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">cl-image<\/span> <span class=\"hljs-attr\">public-id<\/span>=<span class=\"hljs-string\">\"man.jpg\"<\/span> &gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">cl-transformation<\/span> <span class=\"hljs-attr\">quality<\/span>=<span class=\"hljs-string\">\"auto\"<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">cl-transformation<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">cl-image<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Afterwards, <code>q_auto<\/code> selects the optimal quality-compression level and encoding settings based on the content and format of the image, also the browser in which it is being displayed.<\/p>\n<p>Alternatively, you can set a numerical value, e.g., 60, for the <code>quality<\/code> parameter, like this:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">cl-image<\/span> <span class=\"hljs-attr\">public-id<\/span>=<span class=\"hljs-string\">\"train.jpg\"<\/span> &gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">cl-transformation<\/span> <span class=\"hljs-attr\">quality<\/span>=<span class=\"hljs-string\">\"60\"<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">cl-transformation<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">cl-image<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Here are the value choices for <code>q_auto<\/code>:<\/p>\n<ul>\n<li>\n<strong><code>q_auto:best<\/code><\/strong>: This is the least-aggressive setting, which compresses files as much as possible without compromising their visual quality.<\/li>\n<li>\n<strong><code>q_auto:good<\/code><\/strong>: This setting ensures an optimal balance between file size and visual quality, delivering relatively small files.<\/li>\n<li>\n<strong><code>q_auto:eco<\/code><\/strong>: This setting delivers  smaller files at the cost of a slightly lower visual quality, detectable only on close inspection.<\/li>\n<li>\n<strong><code>q_auto:low<\/code><\/strong>: This is the most aggressive setting, which delivers the smallest files at the expense of lower visual quality.<\/li>\n<\/ul>\n<h3>Dynamic Format Selection<\/h3>\n<p>Once specified for the <code>fetch-format<\/code> parameter of your images, as in the following example, <code>f_auto<\/code> selects the best format for delivering them.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-9\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">cl-image<\/span> <span class=\"hljs-attr\">public-id<\/span>=<span class=\"hljs-string\">\"beach_huts.jpg\"<\/span> &gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">cl-transformation<\/span> <span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">\"600\"<\/span> <span class=\"hljs-attr\">crop<\/span>=<span class=\"hljs-string\">\"scale\"<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">cl-transformation<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">cl-transformation<\/span> <span class=\"hljs-attr\">quality<\/span>=<span class=\"hljs-string\">\"auto\"<\/span> <span class=\"hljs-attr\">fetch-format<\/span>=<span class=\"hljs-string\">\"auto\"<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">cl-transformation<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">cl-image<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-9\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>For more details on image Optimization, see the <a href=\"https:\/\/cloudinary.com\/documentation\/image_optimization\">related Cloudinary documentation<\/a>.<\/p>\n<h2>Trying Things Out<\/h2>\n<p>Choices make for flexibility. Do try out the options described in this post and you\u2019ll soon zero in on the ones that best meet your requirements. From then on, enhancing images would be a breeze.<\/p>\n<hr \/>\n<h2>Further Reading on Image Optimization<\/h2>\n<ul>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/image_optimization_for_websites_beautiful_pages_that_load_quickly\">Website image optimization and fast delivery with Cloudinary<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/image_optimization_in_php\">The complete guide to PHP image compression and optimization<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/vue_js_tutorial_image_optimization_for_web_apps\">Vue.js Tutorial: Images Optimization for Web Apps<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/image_optimization_in_python\">Python Image Optimization and Manipulation<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/image_optimization_in_ruby\">Image Optimization in Ruby<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/image_optimization_in_wordpress\">Image Optimization for WordPress<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/the_great_jpeg_2000_debate_analyzing_the_pros_and_cons_to_widespread_adoption\">Learn about the pros and cons of JPEG 2000<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/quick_guide_using_webp_on_your_website_or_native_apps\">Adopting the WebP Image Format for Android on Websites Or Native Apps<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/top_10_mistakes_in_handling_website_images_and_how_to_solve_them\">10 Website Image Mistakes that Slow Load Times<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/adaptive_browser_based_image_format_delivery\">Automatically Reduce Image Size Without Losing Quality<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/low_quality_image_placeholders_lqip_explained\">Automate Placeholder Generation and Accelerate Page Loads<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/progressive_jpegs_and_green_martians\">3 Ways to Do Progressive JPEG Encoding<\/a>\n<\/li>\n<\/ul>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":21916,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[165,227],"class_list":["post-21915","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-image-transformation","tag-performance-optimization"],"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>Techniques for Image Enhancement With Cloudinary<\/title>\n<meta name=\"description\" content=\"Learn how to perform image enhancement by setting intuitive parameters on Cloudinary, and how to add sophisticated enhancements with Cloudinary add-on VIESUS\" \/>\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\/techniques_for_image_enhancement_with_cloudinary_a_primer\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Techniques for Image Enhancement With Cloudinary: A Primer\" \/>\n<meta property=\"og:description\" content=\"Learn how to perform image enhancement by setting intuitive parameters on Cloudinary, and how to add sophisticated enhancements with Cloudinary add-on VIESUS\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/techniques_for_image_enhancement_with_cloudinary_a_primer\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2019-07-22T18:01:23+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-06-01T21:38:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1649735910\/Web_Assets\/blog\/Image-Enhancement-2000x1100-v1_21916d8332\/Image-Enhancement-2000x1100-v1_21916d8332-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\/techniques_for_image_enhancement_with_cloudinary_a_primer#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/techniques_for_image_enhancement_with_cloudinary_a_primer\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Techniques for Image Enhancement With Cloudinary: A Primer\",\"datePublished\":\"2019-07-22T18:01:23+00:00\",\"dateModified\":\"2024-06-01T21:38:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/techniques_for_image_enhancement_with_cloudinary_a_primer\"},\"wordCount\":8,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/techniques_for_image_enhancement_with_cloudinary_a_primer#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649735910\/Web_Assets\/blog\/Image-Enhancement-2000x1100-v1_21916d8332\/Image-Enhancement-2000x1100-v1_21916d8332.jpg?_i=AA\",\"keywords\":[\"Image Transformation\",\"Performance Optimization\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2019\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/techniques_for_image_enhancement_with_cloudinary_a_primer\",\"url\":\"https:\/\/cloudinary.com\/blog\/techniques_for_image_enhancement_with_cloudinary_a_primer\",\"name\":\"Techniques for Image Enhancement With Cloudinary\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/techniques_for_image_enhancement_with_cloudinary_a_primer#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/techniques_for_image_enhancement_with_cloudinary_a_primer#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649735910\/Web_Assets\/blog\/Image-Enhancement-2000x1100-v1_21916d8332\/Image-Enhancement-2000x1100-v1_21916d8332.jpg?_i=AA\",\"datePublished\":\"2019-07-22T18:01:23+00:00\",\"dateModified\":\"2024-06-01T21:38:12+00:00\",\"description\":\"Learn how to perform image enhancement by setting intuitive parameters on Cloudinary, and how to add sophisticated enhancements with Cloudinary add-on VIESUS\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/techniques_for_image_enhancement_with_cloudinary_a_primer#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/techniques_for_image_enhancement_with_cloudinary_a_primer\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/techniques_for_image_enhancement_with_cloudinary_a_primer#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649735910\/Web_Assets\/blog\/Image-Enhancement-2000x1100-v1_21916d8332\/Image-Enhancement-2000x1100-v1_21916d8332.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649735910\/Web_Assets\/blog\/Image-Enhancement-2000x1100-v1_21916d8332\/Image-Enhancement-2000x1100-v1_21916d8332.jpg?_i=AA\",\"width\":1540,\"height\":847},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/techniques_for_image_enhancement_with_cloudinary_a_primer#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Techniques for Image Enhancement With Cloudinary: A Primer\"}]},{\"@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":"Techniques for Image Enhancement With Cloudinary","description":"Learn how to perform image enhancement by setting intuitive parameters on Cloudinary, and how to add sophisticated enhancements with Cloudinary add-on VIESUS","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\/techniques_for_image_enhancement_with_cloudinary_a_primer","og_locale":"en_US","og_type":"article","og_title":"Techniques for Image Enhancement With Cloudinary: A Primer","og_description":"Learn how to perform image enhancement by setting intuitive parameters on Cloudinary, and how to add sophisticated enhancements with Cloudinary add-on VIESUS","og_url":"https:\/\/cloudinary.com\/blog\/techniques_for_image_enhancement_with_cloudinary_a_primer","og_site_name":"Cloudinary Blog","article_published_time":"2019-07-22T18:01:23+00:00","article_modified_time":"2024-06-01T21:38:12+00:00","og_image":[{"width":1540,"height":847,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1649735910\/Web_Assets\/blog\/Image-Enhancement-2000x1100-v1_21916d8332\/Image-Enhancement-2000x1100-v1_21916d8332-jpg?_i=AA","type":"image\/jpeg"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/techniques_for_image_enhancement_with_cloudinary_a_primer#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/techniques_for_image_enhancement_with_cloudinary_a_primer"},"author":{"name":"","@id":""},"headline":"Techniques for Image Enhancement With Cloudinary: A Primer","datePublished":"2019-07-22T18:01:23+00:00","dateModified":"2024-06-01T21:38:12+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/techniques_for_image_enhancement_with_cloudinary_a_primer"},"wordCount":8,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/techniques_for_image_enhancement_with_cloudinary_a_primer#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649735910\/Web_Assets\/blog\/Image-Enhancement-2000x1100-v1_21916d8332\/Image-Enhancement-2000x1100-v1_21916d8332.jpg?_i=AA","keywords":["Image Transformation","Performance Optimization"],"inLanguage":"en-US","copyrightYear":"2019","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/techniques_for_image_enhancement_with_cloudinary_a_primer","url":"https:\/\/cloudinary.com\/blog\/techniques_for_image_enhancement_with_cloudinary_a_primer","name":"Techniques for Image Enhancement With Cloudinary","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/techniques_for_image_enhancement_with_cloudinary_a_primer#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/techniques_for_image_enhancement_with_cloudinary_a_primer#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649735910\/Web_Assets\/blog\/Image-Enhancement-2000x1100-v1_21916d8332\/Image-Enhancement-2000x1100-v1_21916d8332.jpg?_i=AA","datePublished":"2019-07-22T18:01:23+00:00","dateModified":"2024-06-01T21:38:12+00:00","description":"Learn how to perform image enhancement by setting intuitive parameters on Cloudinary, and how to add sophisticated enhancements with Cloudinary add-on VIESUS","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/techniques_for_image_enhancement_with_cloudinary_a_primer#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/techniques_for_image_enhancement_with_cloudinary_a_primer"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/techniques_for_image_enhancement_with_cloudinary_a_primer#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649735910\/Web_Assets\/blog\/Image-Enhancement-2000x1100-v1_21916d8332\/Image-Enhancement-2000x1100-v1_21916d8332.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649735910\/Web_Assets\/blog\/Image-Enhancement-2000x1100-v1_21916d8332\/Image-Enhancement-2000x1100-v1_21916d8332.jpg?_i=AA","width":1540,"height":847},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/techniques_for_image_enhancement_with_cloudinary_a_primer#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Techniques for Image Enhancement With Cloudinary: A Primer"}]},{"@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\/v1649735910\/Web_Assets\/blog\/Image-Enhancement-2000x1100-v1_21916d8332\/Image-Enhancement-2000x1100-v1_21916d8332.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21915","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=21915"}],"version-history":[{"count":3,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21915\/revisions"}],"predecessor-version":[{"id":34247,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21915\/revisions\/34247"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/21916"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=21915"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=21915"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=21915"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}