{"id":22169,"date":"2020-09-24T21:19:14","date_gmt":"2020-09-24T21:19:14","guid":{"rendered":"http:\/\/image_editing_basics_and_a_tutorial_for_automation_with_ai"},"modified":"2025-09-23T17:16:12","modified_gmt":"2025-09-24T00:16:12","slug":"image_editing_basics_and_a_tutorial_for_automation_with_ai","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/image_editing_basics_and_a_tutorial_for_automation_with_ai","title":{"rendered":"Image-Editing Basics and a Tutorial for Automation With AI"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>You likely find yourself continually editing images for enhancement by eliminating flaws and tweaking the overall presentation, typically with software tools. Examples of basic editing are straightening, cleaning, and cropping images, as well as adjusting the contrast, exposure, and white balance. With advanced software like Cloudinary, you can automate not only editing tasks, such as quality adjustment and encoding, but also delivery.<\/p>\n<p>This is part of an extensive series of guides about <a href=\"https:\/\/www.tabnine.com\/blog\/ai-technology-powering-the-ai-revolution\/\">AI Technology<\/a>.<\/p>\n<p>This article addresses the following topics:<\/p>\n<ul>\n<li>\n<a href=\"#basics\">Basics of image editing<\/a>\n<\/li>\n<li>\n<a href=\"#tool\">Cloudinary: an efficient and effective image-editing tool<\/a>\n<\/li>\n<li>\n<a href=\"#auto\">Automation of image edits with Cloudinary<\/a>\n<\/li>\n<li>\n<a href=\"#more\">More about image editing<\/a>\n<\/li>\n<li>\n<a href=\"#resources\">References on media optimization<\/a>\n<\/li>\n<\/ul>\n<h2 id=\"basics\">Basics of Image Editing<\/h2>  \n<p>This section explains how to perform basic image edits with standard software. More advanced tools are available for fine-tuning or modifying image elements.<\/p>\n<p>Even if you need not adjust all the elements described below, follow their order during the editing process.<\/p>\n<p>Learn more in our detailed guide to <a href=\"https:\/\/cloudinary.com\/guides\/responsive-images\/create-your-react-image-gallery-a-quick-tutorial\">react image gallery<\/a><\/p>\n<h3>Straighten, Clean, and Crop Images<\/h3>\n<p>Straightening images involves rotating or flipping them, typically for more realistic or more natural content. Unless you desire a specific effect, straighten images along the horizon to make it flat.<\/p>\n<p>Cropping reduces the size or dimensions of an image by deleting part of it. Crop to remove unwanted elements or change the image\u2019s composition or border shape, e.g., from a rectangle to a square. Eliminating distracting or unnecessary details can dramatically beef up images. Read our guide to <a href=\"https:\/\/cloudinary.com\/blog\/face-cropper-use-cases-best-practices\">face cropper<\/a>.<\/p>\n<p>Cleaning images removes minor imperfections, such as dust, lens flares, and artifacts. Most software programs offer gadgets for cleaning images, often called \u201cspot healing\u201d or \u201cclone stamping\u201d tools. Typically, those tools replace the spot you want to heal with a sample of the surrounding pixels. With other tools, you can select a location on the image you want to clone as a replacement.<\/p>\n<p>This <a href=\"https:\/\/cloudinary.com\/blog\/how_to_automatically_and_professionally_remove_photo_backgrounds\">article<\/a> shows you how to, in mere seconds, automate the removal of photo backgrounds with artificial intelligence (AI).<\/p>\n<h3>Adjust the White Balance<\/h3>\n<p>White balance is the amount of white in an image that affects its colors. In most image-editing software, white balance defines the type of lighting that was available during the photo shoot, e.g., daylight, flash, or cloudy, which either auto-corrects for the conditions that applied during the shoot or simulates them.<\/p>\n<p>When working with images, especially photos, it pays to set the correct balance from the start. Note that white balance is easier to correct in RAW files than in JPEG files because more digital data is stored.<\/p>\n<h3>Adjust the Exposure and Image Contrast<\/h3>\n<p>To adjust the exposure, modify the image\u2019s brightness or darkness. Overexposure generates a washed-out look; underexposed images look murky or shadowy. While making adjustments, be careful not to overmodify the image to avoid creating noise or artifacts, hence a grainy appearance.<\/p>\n<p>The contrast of images defines how close or far apart the tones are. High-contrast images might have both very bright and very dark tones, resulting in blocky shapes. Low-contrast images often look gray and muted with softer shapes. In general, aim for a middle contrast to spotlight the important elements without a jarring look.<\/p>\n<p>Learn more in our detailed guide to <a href=\"https:\/\/cloudinary.com\/guides\/ai\/3d-model-from-images-a-practical-guide\">3d model from images<\/a><\/p>\n<h3>Adjust the Color Vibrancy and Saturation<\/h3>\n<p>Color vibrancy and saturation are similar to white balance, except that they typically adjust on a cyan, yellow, and magenta scale instead of white. Adjusting the vibrancy of an image modifies its neutral colors while maintaining the brighter colors. Doing that brings forward more of the colors in your images, reducing the gap between the bright and neutral hues.<\/p>\n<p>Changing the saturation modifies the intensity of all the colors. Such a step enhances the overall vividity and can make images look sharper or dreamlike.<\/p>\n<h3>Adjust the Sharpness<\/h3>\n<p>Sharpening images can deliver a more crisp appearance. If certain aspects of your image are slightly out of focus or if you want to blur some parts to focus on a specific element, adjust the sharpness.<\/p>\n<p>Adding text to images is another common task. To dynamically overlay text on images, follow the steps described in this <a href=\"https:\/\/cloudinary.com\/blog\/how_to_overlay_text_on_image_easily_pixel_perfect_and_with_no_css_html\">article<\/a>.<\/p>\n<h2 id=\"tool\">Cloudinary: an Efficient and Effective Image-Editing Tool<\/h2> \n<p>A cloud-based service for managing images and videos, Cloudinary offers a generous <a href=\"https:\/\/cloudinary.com\/pricing\">free-forever subscription plan<\/a>. While on that platform, you can upload your images, apply built-in effects, filters, and modifications, including image edits.<\/p>\n<p>Additionally, you can transform images programmatically <a href=\"https:\/\/cloudinary.com\/documentation\">with SDKs<\/a> for all popular programming languages or simple URL parameters. Cloudinary applies changes dynamically, leaving your original images intact. That means you can modify images on the fly as your site design evolves and as you support more devices and screen sizes\u2014a huge convenience and time saver.<\/p>\n<h2 id=\"auto\">Automation of Image Edits With Cloudinary<\/h2> \n<p>Below are four automatic edits you can apply with Cloudinary to images. Each of the subsections links to a <a href=\"https:\/\/cloudinary.com\/cookbook\">Cloudinary Cookbook<\/a> page with more details on the editing technique.<\/p>\n<h3>Automatically Deliver Images in Optimal Formats<\/h3>\n<p>You can have Cloudinary <a href=\"https:\/\/cloudinary.com\/documentation\/image_transformations#automatic_format_selection\">automatically define the format<\/a> of your images for improved viewability and efficient delivery. The delivery format varies according to the client that is in use, such as a browser. Simply upload the image to Cloudinary and add the <code>f_auto<\/code> parameter to the URL. Cloudinary then delivers the image in WebP, JPEG-XR, or JPEG-2000, as appropriate.<\/p>\n<p>![sample](<a href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_500,f_auto\/sample.jpg\">https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_500,f_auto\/sample.jpg<\/a>}<\/p>\n<h3>Automatically Adjust Quality and Encoding<\/h3>\n<p>Through machine learning, Cloudinary can automatically <a href=\"https:\/\/cloudinary.com\/documentation\/image_optimization\">optimize the quality<\/a> of images by selecting the best encoding settings and compression level according to the image format, content, and the devices on which you plan to display them. To direct Cloudinary to do that, upload the image, add the <code>q_auto<\/code> parameter to its URL, and, optionally, specify the quality level with <code>best<\/code>, <code>good<\/code>, <code>eco<\/code>, or <code>low<\/code>. A couple of examples:<\/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;woman.jpg\\&quot;, {quality: \\&quot;auto\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;woman.jpg\\&quot;, {quality: \\&quot;auto\\&quot;})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Node.js&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_2&quot;,&quot;framework&quot;:&quot;react_2&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;woman.jpg\\&quot;).delivery(quality(auto()));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;woman.jpg\\&quot;).delivery(quality(auto()));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;react&quot;,&quot;framework&quot;:&quot;react&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;woman.jpg\\&quot; &gt; &lt;Transformation quality=\\&quot;auto\\&quot; \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;woman.jpg\\&quot; &gt;\\n\\t&lt;Transformation quality=\\&quot;auto\\&quot; \\\/&gt;\\n&lt;\\\/Image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;cloudinary-react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue_2&quot;,&quot;framework&quot;:&quot;vue_2&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;woman.jpg\\&quot;).delivery(quality(auto()));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;woman.jpg\\&quot;).delivery(quality(auto()));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/vue&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue&quot;,&quot;framework&quot;:&quot;vue&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;woman.jpg\\&quot; &gt; &lt;cld-transformation quality=\\&quot;auto\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;woman.jpg\\&quot; &gt;\\n\\t&lt;cld-transformation quality=\\&quot;auto\\&quot; \\\/&gt;\\n&lt;\\\/cld-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;cloudinary-vue&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular_2&quot;,&quot;framework&quot;:&quot;angular_2&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;woman.jpg\\&quot;).delivery(quality(auto()));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;woman.jpg\\&quot;).delivery(quality(auto()));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/ng&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular&quot;,&quot;framework&quot;:&quot;angular&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;woman.jpg\\&quot; &gt; &lt;cl-transformation quality=\\&quot;auto\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;woman.jpg\\&quot; &gt;\\n\\t&lt;cl-transformation quality=\\&quot;auto\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n&lt;\\\/cl-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/angular-5.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js_2&quot;,&quot;framework&quot;:&quot;js_2&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;woman.jpg\\&quot;).delivery(quality(auto()));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;woman.jpg\\&quot;).delivery(quality(auto()));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js&quot;,&quot;framework&quot;:&quot;js&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.imageTag(&#039;woman.jpg&#039;, {quality: \\&quot;auto\\&quot;}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;woman.jpg&#039;, {quality: \\&quot;auto\\&quot;}).toHtml();&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;cloudinary-core&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;python&quot;,&quot;framework&quot;:&quot;python&quot;,&quot;language&quot;:&quot;python&quot;,&quot;rawCodeSnippet&quot;:&quot;CloudinaryImage(\\&quot;woman.jpg\\&quot;).image(quality=\\&quot;auto\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;woman.jpg\\&quot;).image(quality=\\&quot;auto\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Python&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;php_2&quot;,&quot;framework&quot;:&quot;php_2&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;(new ImageTag(&#039;woman.jpg&#039;))\\n\\t-&gt;delivery(Delivery::quality(\\n\\tQuality::auto()));&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;woman.jpg&#039;))\\n\\t-&gt;delivery(Delivery::quality(\\n\\tQuality::auto()));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;php&quot;,&quot;framework&quot;:&quot;php&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;woman.jpg\\&quot;, array(\\&quot;quality\\&quot;=&gt;\\&quot;auto\\&quot;))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;woman.jpg\\&quot;, array(\\&quot;quality\\&quot;=&gt;\\&quot;auto\\&quot;))&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;java&quot;,&quot;framework&quot;:&quot;java&quot;,&quot;language&quot;:&quot;java&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().quality(\\&quot;auto\\&quot;)).imageTag(\\&quot;woman.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().quality(\\&quot;auto\\&quot;)).imageTag(\\&quot;woman.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;woman.jpg\\&quot;, quality: \\&quot;auto\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;woman.jpg\\&quot;, quality: \\&quot;auto\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Ruby&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;csharp&quot;,&quot;framework&quot;:&quot;csharp&quot;,&quot;language&quot;:&quot;csharp&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Quality(\\&quot;auto\\&quot;)).BuildImageTag(\\&quot;woman.jpg\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Quality(\\&quot;auto\\&quot;)).BuildImageTag(\\&quot;woman.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;woman.jpg&#039;).transformation(Transformation()\\n\\t.delivery(Delivery.quality(\\n\\tQuality.auto())));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;woman.jpg&#039;).transformation(Transformation()\\n\\t.delivery(Delivery.quality(\\n\\tQuality.auto())));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Dart&quot;,&quot;packageName&quot;:&quot;cloudinary_dart&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;swift&quot;,&quot;framework&quot;:&quot;swift&quot;,&quot;language&quot;:&quot;swift&quot;,&quot;rawCodeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setQuality(\\&quot;auto\\&quot;)).generate(\\&quot;woman.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setQuality(\\&quot;auto\\&quot;)).generate(\\&quot;woman.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;iOS&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;5.x&quot;},{&quot;sdkId&quot;:&quot;android&quot;,&quot;framework&quot;:&quot;android&quot;,&quot;language&quot;:&quot;android&quot;,&quot;rawCodeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().quality(\\&quot;auto\\&quot;)).generate(\\&quot;woman.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().quality(\\&quot;auto\\&quot;)).generate(\\&quot;woman.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;woman.jpg&#039;).transformation(Transformation()\\n\\t.delivery(Delivery.quality(\\n\\tQuality.auto())));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;woman.jpg&#039;).transformation(Transformation()\\n\\t.delivery(Delivery.quality(\\n\\tQuality.auto())));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Flutter&quot;,&quot;packageName&quot;:&quot;cloudinary_flutter&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;kotlin&quot;,&quot;framework&quot;:&quot;kotlin&quot;,&quot;language&quot;:&quot;kotlin&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;woman.jpg\\&quot;)\\n\\t delivery(Delivery.quality(\\n\\tQuality.auto())) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;woman.jpg\\&quot;)\\n\\t delivery(Delivery.quality(\\n\\tQuality.auto())) \\n}.generate()&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Kotlin&quot;,&quot;packageName&quot;:&quot;kotlin-url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;jquery&quot;,&quot;framework&quot;:&quot;jquery&quot;,&quot;language&quot;:&quot;jquery&quot;,&quot;rawCodeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;woman.jpg\\&quot;, {quality: \\&quot;auto\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;woman.jpg\\&quot;, {quality: \\&quot;auto\\&quot;})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;jQuery&quot;,&quot;packageName&quot;:&quot;cloudinary-jquery&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_native&quot;,&quot;framework&quot;:&quot;react_native&quot;,&quot;language&quot;:&quot;react_native&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;woman.jpg\\&quot;).delivery(quality(auto()));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;woman.jpg\\&quot;).delivery(quality(auto()));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React Native&quot;,&quot;packageName&quot;:&quot;cloudinary-react-native&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;}]\"\n      parsed-url=\"{&quot;url&quot;:&quot;https:\\\/\\\/res.cloudinary.com\\\/demo\\\/image\\\/upload\\\/q_auto\\\/woman.jpg&quot;,&quot;cloud_name&quot;:&quot;demo&quot;,&quot;host&quot;:&quot;res.cloudinary.com&quot;,&quot;type&quot;:&quot;upload&quot;,&quot;resource_type&quot;:&quot;image&quot;,&quot;transformation&quot;:[{&quot;quality&quot;:&quot;auto&quot;}],&quot;transformation_string&quot;:&quot;q_auto&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;woman.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\/q_auto\/woman.jpg\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/q_auto\/woman.jpg\" alt=\"automatic quality\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1000\" height=\"688\"\/><\/a>\n<em>Image with the default quality setting (46 KB)<\/em>\n<cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[{&quot;sdkId&quot;:&quot;nodejs&quot;,&quot;framework&quot;:&quot;nodejs&quot;,&quot;language&quot;:&quot;nodejs&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(\\&quot;woman.jpg\\&quot;, {quality: \\&quot;auto:low\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;woman.jpg\\&quot;, {quality: \\&quot;auto:low\\&quot;})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Node.js&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_2&quot;,&quot;framework&quot;:&quot;react_2&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;woman.jpg\\&quot;).delivery(quality(autoLow()));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;woman.jpg\\&quot;).delivery(quality(autoLow()));&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;woman.jpg\\&quot; &gt; &lt;Transformation quality=\\&quot;auto:low\\&quot; \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;woman.jpg\\&quot; &gt;\\n\\t&lt;Transformation quality=\\&quot;auto:low\\&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;woman.jpg\\&quot;).delivery(quality(autoLow()));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;woman.jpg\\&quot;).delivery(quality(autoLow()));&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;woman.jpg\\&quot; &gt; &lt;cld-transformation quality=\\&quot;auto:low\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;woman.jpg\\&quot; &gt;\\n\\t&lt;cld-transformation quality=\\&quot;auto:low\\&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;woman.jpg\\&quot;).delivery(quality(autoLow()));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;woman.jpg\\&quot;).delivery(quality(autoLow()));&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;woman.jpg\\&quot; &gt; &lt;cl-transformation quality=\\&quot;auto:low\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;woman.jpg\\&quot; &gt;\\n\\t&lt;cl-transformation quality=\\&quot;auto:low\\&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;woman.jpg\\&quot;).delivery(quality(autoLow()));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;woman.jpg\\&quot;).delivery(quality(autoLow()));&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;woman.jpg&#039;, {quality: \\&quot;auto:low\\&quot;}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;woman.jpg&#039;, {quality: \\&quot;auto:low\\&quot;}).toHtml();&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;cloudinary-core&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;python&quot;,&quot;framework&quot;:&quot;python&quot;,&quot;language&quot;:&quot;python&quot;,&quot;rawCodeSnippet&quot;:&quot;CloudinaryImage(\\&quot;woman.jpg\\&quot;).image(quality=\\&quot;auto:low\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;woman.jpg\\&quot;).image(quality=\\&quot;auto:low\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Python&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;php_2&quot;,&quot;framework&quot;:&quot;php_2&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;(new ImageTag(&#039;woman.jpg&#039;))\\n\\t-&gt;delivery(Delivery::quality(\\n\\tQuality::autoLow()));&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;woman.jpg&#039;))\\n\\t-&gt;delivery(Delivery::quality(\\n\\tQuality::autoLow()));&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;woman.jpg\\&quot;, array(\\&quot;quality\\&quot;=&gt;\\&quot;auto:low\\&quot;))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;woman.jpg\\&quot;, array(\\&quot;quality\\&quot;=&gt;\\&quot;auto:low\\&quot;))&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;java&quot;,&quot;framework&quot;:&quot;java&quot;,&quot;language&quot;:&quot;java&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().quality(\\&quot;auto:low\\&quot;)).imageTag(\\&quot;woman.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().quality(\\&quot;auto:low\\&quot;)).imageTag(\\&quot;woman.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;woman.jpg\\&quot;, quality: \\&quot;auto:low\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;woman.jpg\\&quot;, quality: \\&quot;auto:low\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Ruby&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;csharp&quot;,&quot;framework&quot;:&quot;csharp&quot;,&quot;language&quot;:&quot;csharp&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Quality(\\&quot;auto:low\\&quot;)).BuildImageTag(\\&quot;woman.jpg\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Quality(\\&quot;auto:low\\&quot;)).BuildImageTag(\\&quot;woman.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;woman.jpg&#039;).transformation(Transformation()\\n\\t.delivery(Delivery.quality(\\n\\tQuality.autoLow())));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;woman.jpg&#039;).transformation(Transformation()\\n\\t.delivery(Delivery.quality(\\n\\tQuality.autoLow())));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Dart&quot;,&quot;packageName&quot;:&quot;cloudinary_dart&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;swift&quot;,&quot;framework&quot;:&quot;swift&quot;,&quot;language&quot;:&quot;swift&quot;,&quot;rawCodeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setQuality(\\&quot;auto:low\\&quot;)).generate(\\&quot;woman.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setQuality(\\&quot;auto:low\\&quot;)).generate(\\&quot;woman.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;iOS&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;5.x&quot;},{&quot;sdkId&quot;:&quot;android&quot;,&quot;framework&quot;:&quot;android&quot;,&quot;language&quot;:&quot;android&quot;,&quot;rawCodeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().quality(\\&quot;auto:low\\&quot;)).generate(\\&quot;woman.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().quality(\\&quot;auto:low\\&quot;)).generate(\\&quot;woman.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;woman.jpg&#039;).transformation(Transformation()\\n\\t.delivery(Delivery.quality(\\n\\tQuality.autoLow())));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;woman.jpg&#039;).transformation(Transformation()\\n\\t.delivery(Delivery.quality(\\n\\tQuality.autoLow())));&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;woman.jpg\\&quot;)\\n\\t delivery(Delivery.quality(\\n\\tQuality.autoLow())) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;woman.jpg\\&quot;)\\n\\t delivery(Delivery.quality(\\n\\tQuality.autoLow())) \\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;woman.jpg\\&quot;, {quality: \\&quot;auto:low\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;woman.jpg\\&quot;, {quality: \\&quot;auto:low\\&quot;})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;jQuery&quot;,&quot;packageName&quot;:&quot;cloudinary-jquery&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_native&quot;,&quot;framework&quot;:&quot;react_native&quot;,&quot;language&quot;:&quot;react_native&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;woman.jpg\\&quot;).delivery(quality(autoLow()));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;woman.jpg\\&quot;).delivery(quality(autoLow()));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React Native&quot;,&quot;packageName&quot;:&quot;cloudinary-react-native&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;}]\"\n      parsed-url=\"{&quot;url&quot;:&quot;https:\\\/\\\/res.cloudinary.com\\\/demo\\\/image\\\/upload\\\/q_auto:low\\\/woman.jpg&quot;,&quot;cloud_name&quot;:&quot;demo&quot;,&quot;host&quot;:&quot;res.cloudinary.com&quot;,&quot;type&quot;:&quot;upload&quot;,&quot;resource_type&quot;:&quot;image&quot;,&quot;transformation&quot;:[{&quot;quality&quot;:&quot;auto:low&quot;}],&quot;transformation_string&quot;:&quot;q_auto:low&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;woman.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\/q_auto:low\/woman.jpg\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/q_auto:low\/woman.jpg\" alt=\"quality low\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1000\" height=\"688\"\/><\/a>\n<em>Image with the low quality setting and the size reduced to 34 KB<\/em><\/p>\n<h3>Automatic Smart Cropping<\/h3>\n<p>Cloudinary <a href=\"https:\/\/cloudinary.com\/blog\/new_ai_based_image_auto_crop_algorithm_sticks_to_the_subject\">automatically crops images<\/a> with content-aware, AI-based features by selecting faces, individual features, or areas of interest. To trigger that task, apply the <code>gravity<\/code> filter (<code>g<\/code>) with the features you want to preserve.<\/p>\n<p>This example with the <code>g_auto<\/code> setting crops the most interesting area, as determined by AI:<\/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;g_auto-skater-beforeafter_albxqw.png\\&quot;, {width: 700, quality: \\&quot;auto\\&quot;, crop: \\&quot;fill\\&quot;, fetch_format: \\&quot;auto\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;g_auto-skater-beforeafter_albxqw.png\\&quot;, {width: 700, quality: \\&quot;auto\\&quot;, crop: \\&quot;fill\\&quot;, fetch_format: \\&quot;auto\\&quot;})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Node.js&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_2&quot;,&quot;framework&quot;:&quot;react_2&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;g_auto-skater-beforeafter_albxqw.png\\&quot;)\\n  .resize(fill().width(700))\\n  .delivery(format(auto()))\\n  .delivery(quality(auto()))\\n  .setVersion(1552512204);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;g_auto-skater-beforeafter_albxqw.png\\&quot;)\\n  .resize(fill().width(700))\\n  .delivery(format(auto()))\\n  .delivery(quality(auto()))\\n  .setVersion(1552512204);&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;g_auto-skater-beforeafter_albxqw.png\\&quot; &gt; &lt;Transformation width=\\&quot;700\\&quot; quality=\\&quot;auto\\&quot; crop=\\&quot;fill\\&quot; fetchFormat=\\&quot;auto\\&quot; \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;g_auto-skater-beforeafter_albxqw.png\\&quot; &gt;\\n\\t&lt;Transformation width=\\&quot;700\\&quot; quality=\\&quot;auto\\&quot; crop=\\&quot;fill\\&quot; fetchFormat=\\&quot;auto\\&quot; \\\/&gt;\\n&lt;\\\/Image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;cloudinary-react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue_2&quot;,&quot;framework&quot;:&quot;vue_2&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;g_auto-skater-beforeafter_albxqw.png\\&quot;)\\n  .resize(fill().width(700))\\n  .delivery(format(auto()))\\n  .delivery(quality(auto()))\\n  .setVersion(1552512204);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;g_auto-skater-beforeafter_albxqw.png\\&quot;)\\n  .resize(fill().width(700))\\n  .delivery(format(auto()))\\n  .delivery(quality(auto()))\\n  .setVersion(1552512204);&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;g_auto-skater-beforeafter_albxqw.png\\&quot; &gt; &lt;cld-transformation width=\\&quot;700\\&quot; quality=\\&quot;auto\\&quot; crop=\\&quot;fill\\&quot; fetch-format=\\&quot;auto\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;g_auto-skater-beforeafter_albxqw.png\\&quot; &gt;\\n\\t&lt;cld-transformation width=\\&quot;700\\&quot; quality=\\&quot;auto\\&quot; crop=\\&quot;fill\\&quot; fetch-format=\\&quot;auto\\&quot; \\\/&gt;\\n&lt;\\\/cld-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;cloudinary-vue&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular_2&quot;,&quot;framework&quot;:&quot;angular_2&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;g_auto-skater-beforeafter_albxqw.png\\&quot;)\\n  .resize(fill().width(700))\\n  .delivery(format(auto()))\\n  .delivery(quality(auto()))\\n  .setVersion(1552512204);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;g_auto-skater-beforeafter_albxqw.png\\&quot;)\\n  .resize(fill().width(700))\\n  .delivery(format(auto()))\\n  .delivery(quality(auto()))\\n  .setVersion(1552512204);&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;g_auto-skater-beforeafter_albxqw.png\\&quot; &gt; &lt;cl-transformation width=\\&quot;700\\&quot; quality=\\&quot;auto\\&quot; crop=\\&quot;fill\\&quot; fetch-format=\\&quot;auto\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;g_auto-skater-beforeafter_albxqw.png\\&quot; &gt;\\n\\t&lt;cl-transformation width=\\&quot;700\\&quot; quality=\\&quot;auto\\&quot; crop=\\&quot;fill\\&quot; fetch-format=\\&quot;auto\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n&lt;\\\/cl-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/angular-5.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js_2&quot;,&quot;framework&quot;:&quot;js_2&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;g_auto-skater-beforeafter_albxqw.png\\&quot;)\\n  .resize(fill().width(700))\\n  .delivery(format(auto()))\\n  .delivery(quality(auto()))\\n  .setVersion(1552512204);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;g_auto-skater-beforeafter_albxqw.png\\&quot;)\\n  .resize(fill().width(700))\\n  .delivery(format(auto()))\\n  .delivery(quality(auto()))\\n  .setVersion(1552512204);&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;g_auto-skater-beforeafter_albxqw.png&#039;, {width: 700, quality: \\&quot;auto\\&quot;, crop: \\&quot;fill\\&quot;, fetchFormat: \\&quot;auto\\&quot;}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;g_auto-skater-beforeafter_albxqw.png&#039;, {width: 700, quality: \\&quot;auto\\&quot;, crop: \\&quot;fill\\&quot;, fetchFormat: \\&quot;auto\\&quot;}).toHtml();&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;cloudinary-core&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;python&quot;,&quot;framework&quot;:&quot;python&quot;,&quot;language&quot;:&quot;python&quot;,&quot;rawCodeSnippet&quot;:&quot;CloudinaryImage(\\&quot;g_auto-skater-beforeafter_albxqw.png\\&quot;).image(width=700, quality=\\&quot;auto\\&quot;, crop=\\&quot;fill\\&quot;, fetch_format=\\&quot;auto\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;g_auto-skater-beforeafter_albxqw.png\\&quot;).image(width=700, quality=\\&quot;auto\\&quot;, crop=\\&quot;fill\\&quot;, fetch_format=\\&quot;auto\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Python&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;php_2&quot;,&quot;framework&quot;:&quot;php_2&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;(new ImageTag(&#039;g_auto-skater-beforeafter_albxqw.png&#039;))\\n\\t-&gt;resize(Resize::fill()-&gt;width(700))\\n\\t-&gt;delivery(Delivery::format(\\n\\tFormat::auto()))\\n\\t-&gt;delivery(Delivery::quality(\\n\\tQuality::auto()))\\n\\t-&gt;version(1552512204);&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;g_auto-skater-beforeafter_albxqw.png&#039;))\\n\\t-&gt;resize(Resize::fill()-&gt;width(700))\\n\\t-&gt;delivery(Delivery::format(\\n\\tFormat::auto()))\\n\\t-&gt;delivery(Delivery::quality(\\n\\tQuality::auto()))\\n\\t-&gt;version(1552512204);&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;g_auto-skater-beforeafter_albxqw.png\\&quot;, array(\\&quot;width\\&quot;=&gt;700, \\&quot;quality\\&quot;=&gt;\\&quot;auto\\&quot;, \\&quot;crop\\&quot;=&gt;\\&quot;fill\\&quot;, \\&quot;fetch_format\\&quot;=&gt;\\&quot;auto\\&quot;))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;g_auto-skater-beforeafter_albxqw.png\\&quot;, array(\\&quot;width\\&quot;=&gt;700, \\&quot;quality\\&quot;=&gt;\\&quot;auto\\&quot;, \\&quot;crop\\&quot;=&gt;\\&quot;fill\\&quot;, \\&quot;fetch_format\\&quot;=&gt;\\&quot;auto\\&quot;))&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;java&quot;,&quot;framework&quot;:&quot;java&quot;,&quot;language&quot;:&quot;java&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().width(700).quality(\\&quot;auto\\&quot;).crop(\\&quot;fill\\&quot;).fetchFormat(\\&quot;auto\\&quot;)).imageTag(\\&quot;g_auto-skater-beforeafter_albxqw.png\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().width(700).quality(\\&quot;auto\\&quot;).crop(\\&quot;fill\\&quot;).fetchFormat(\\&quot;auto\\&quot;)).imageTag(\\&quot;g_auto-skater-beforeafter_albxqw.png\\&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;g_auto-skater-beforeafter_albxqw.png\\&quot;, width: 700, quality: \\&quot;auto\\&quot;, crop: \\&quot;fill\\&quot;, fetch_format: \\&quot;auto\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;g_auto-skater-beforeafter_albxqw.png\\&quot;, width: 700, quality: \\&quot;auto\\&quot;, crop: \\&quot;fill\\&quot;, fetch_format: \\&quot;auto\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Ruby&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;csharp&quot;,&quot;framework&quot;:&quot;csharp&quot;,&quot;language&quot;:&quot;csharp&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(700).Quality(\\&quot;auto\\&quot;).Crop(\\&quot;fill\\&quot;).FetchFormat(\\&quot;auto\\&quot;)).BuildImageTag(\\&quot;g_auto-skater-beforeafter_albxqw.png\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(700).Quality(\\&quot;auto\\&quot;).Crop(\\&quot;fill\\&quot;).FetchFormat(\\&quot;auto\\&quot;)).BuildImageTag(\\&quot;g_auto-skater-beforeafter_albxqw.png\\&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;g_auto-skater-beforeafter_albxqw.png&#039;).transformation(Transformation()\\n\\t.resize(Resize.fill().width(700))\\n\\t.delivery(Delivery.format(\\n\\tFormat.auto()))\\n\\t.delivery(Delivery.quality(\\n\\tQuality.auto()))\\n\\t.version(1552512204));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;g_auto-skater-beforeafter_albxqw.png&#039;).transformation(Transformation()\\n\\t.resize(Resize.fill().width(700))\\n\\t.delivery(Delivery.format(\\n\\tFormat.auto()))\\n\\t.delivery(Delivery.quality(\\n\\tQuality.auto()))\\n\\t.version(1552512204));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Dart&quot;,&quot;packageName&quot;:&quot;cloudinary_dart&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;swift&quot;,&quot;framework&quot;:&quot;swift&quot;,&quot;language&quot;:&quot;swift&quot;,&quot;rawCodeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(700).setQuality(\\&quot;auto\\&quot;).setCrop(\\&quot;fill\\&quot;).setFetchFormat(\\&quot;auto\\&quot;)).generate(\\&quot;g_auto-skater-beforeafter_albxqw.png\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(700).setQuality(\\&quot;auto\\&quot;).setCrop(\\&quot;fill\\&quot;).setFetchFormat(\\&quot;auto\\&quot;)).generate(\\&quot;g_auto-skater-beforeafter_albxqw.png\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;iOS&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;5.x&quot;},{&quot;sdkId&quot;:&quot;android&quot;,&quot;framework&quot;:&quot;android&quot;,&quot;language&quot;:&quot;android&quot;,&quot;rawCodeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().width(700).quality(\\&quot;auto\\&quot;).crop(\\&quot;fill\\&quot;).fetchFormat(\\&quot;auto\\&quot;)).generate(\\&quot;g_auto-skater-beforeafter_albxqw.png\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().width(700).quality(\\&quot;auto\\&quot;).crop(\\&quot;fill\\&quot;).fetchFormat(\\&quot;auto\\&quot;)).generate(\\&quot;g_auto-skater-beforeafter_albxqw.png\\&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;g_auto-skater-beforeafter_albxqw.png&#039;).transformation(Transformation()\\n\\t.resize(Resize.fill().width(700))\\n\\t.delivery(Delivery.format(\\n\\tFormat.auto()))\\n\\t.delivery(Delivery.quality(\\n\\tQuality.auto()))\\n\\t.version(1552512204));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;g_auto-skater-beforeafter_albxqw.png&#039;).transformation(Transformation()\\n\\t.resize(Resize.fill().width(700))\\n\\t.delivery(Delivery.format(\\n\\tFormat.auto()))\\n\\t.delivery(Delivery.quality(\\n\\tQuality.auto()))\\n\\t.version(1552512204));&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;g_auto-skater-beforeafter_albxqw.png\\&quot;)\\n\\t resize(Resize.fill() { width(700) })\\n\\t delivery(Delivery.format(\\n\\tFormat.auto()))\\n\\t delivery(Delivery.quality(\\n\\tQuality.auto()))\\n\\t version(1552512204) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;g_auto-skater-beforeafter_albxqw.png\\&quot;)\\n\\t resize(Resize.fill() { width(700) })\\n\\t delivery(Delivery.format(\\n\\tFormat.auto()))\\n\\t delivery(Delivery.quality(\\n\\tQuality.auto()))\\n\\t version(1552512204) \\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;g_auto-skater-beforeafter_albxqw.png\\&quot;, {width: 700, quality: \\&quot;auto\\&quot;, crop: \\&quot;fill\\&quot;, fetch_format: \\&quot;auto\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;g_auto-skater-beforeafter_albxqw.png\\&quot;, {width: 700, quality: \\&quot;auto\\&quot;, crop: \\&quot;fill\\&quot;, fetch_format: \\&quot;auto\\&quot;})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;jQuery&quot;,&quot;packageName&quot;:&quot;cloudinary-jquery&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_native&quot;,&quot;framework&quot;:&quot;react_native&quot;,&quot;language&quot;:&quot;react_native&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;g_auto-skater-beforeafter_albxqw.png\\&quot;)\\n  .resize(fill().width(700))\\n  .delivery(format(auto()))\\n  .delivery(quality(auto()))\\n  .setVersion(1552512204);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;g_auto-skater-beforeafter_albxqw.png\\&quot;)\\n  .resize(fill().width(700))\\n  .delivery(format(auto()))\\n  .delivery(quality(auto()))\\n  .setVersion(1552512204);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React Native&quot;,&quot;packageName&quot;:&quot;cloudinary-react-native&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;}]\"\n      parsed-url=\"{&quot;url&quot;:&quot;https:\\\/\\\/res.cloudinary.com\\\/demo\\\/image\\\/upload\\\/w_700,c_fill,f_auto,q_auto\\\/v1552512204\\\/g_auto-skater-beforeafter_albxqw.png&quot;,&quot;cloud_name&quot;:&quot;demo&quot;,&quot;host&quot;:&quot;res.cloudinary.com&quot;,&quot;type&quot;:&quot;upload&quot;,&quot;resource_type&quot;:&quot;image&quot;,&quot;transformation&quot;:[{&quot;width&quot;:&quot;700&quot;,&quot;crop_mode&quot;:&quot;fill&quot;,&quot;format&quot;:&quot;auto&quot;,&quot;quality&quot;:&quot;auto&quot;}],&quot;transformation_string&quot;:&quot;w_700,c_fill,f_auto,q_auto&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;1552512204&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;g_auto-skater-beforeafter_albxqw.png&quot;,&quot;extension&quot;:&quot;png&quot;,&quot;format&quot;:&quot;png&quot;,&quot;format_code&quot;:true,&quot;url_code&quot;:false,&quot;signature&quot;:&quot;&quot;,&quot;private_cdn&quot;:false,&quot;result_asset_type&quot;:&quot;image&quot;}\"\n      with-url=\"true\"\n    >\n      <span class=\"u-visually-hidden\">Loading code examples<\/span>\n    <\/cld-code-widget><a class=\"c-image-link\" href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_700,c_fill,f_auto,q_auto\/v1552512204\/g_auto-skater-beforeafter_albxqw.png\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_700,c_fill,f_auto,q_auto\/v1552512204\/g_auto-skater-beforeafter_albxqw.png\" alt=\"auto gravity\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"700\" height=\"284\"\/><\/a><\/p>\n<p>Another example: to avoid irrelevant objects instead of the product in product images taking center stage, define the product as the focus. The picture on the right below has the backpack in focus.<\/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;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;, {gravity: \\&quot;auto:classic\\&quot;, height: 175, width: 175, crop: \\&quot;thumb\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;, {gravity: \\&quot;auto:classic\\&quot;, height: 175, width: 175, crop: \\&quot;thumb\\&quot;})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Node.js&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_2&quot;,&quot;framework&quot;:&quot;react_2&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;)\\n  .resize(\\n    thumbnail()\\n      .width(175)\\n      .height(175)\\n      .gravity(autoGravity().autoFocus(focusOn(\\&quot;classic\\&quot;)))\\n  )\\n  .setVersion(1551428220);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;)\\n  .resize(\\n    thumbnail()\\n      .width(175)\\n      .height(175)\\n      .gravity(autoGravity().autoFocus(focusOn(\\&quot;classic\\&quot;)))\\n  )\\n  .setVersion(1551428220);&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;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot; &gt; &lt;Transformation gravity=\\&quot;auto:classic\\&quot; height=\\&quot;175\\&quot; width=\\&quot;175\\&quot; crop=\\&quot;thumb\\&quot; \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot; &gt;\\n\\t&lt;Transformation gravity=\\&quot;auto:classic\\&quot; height=\\&quot;175\\&quot; width=\\&quot;175\\&quot; crop=\\&quot;thumb\\&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;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;)\\n  .resize(\\n    thumbnail()\\n      .width(175)\\n      .height(175)\\n      .gravity(autoGravity().autoFocus(focusOn(\\&quot;classic\\&quot;)))\\n  )\\n  .setVersion(1551428220);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;)\\n  .resize(\\n    thumbnail()\\n      .width(175)\\n      .height(175)\\n      .gravity(autoGravity().autoFocus(focusOn(\\&quot;classic\\&quot;)))\\n  )\\n  .setVersion(1551428220);&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;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot; &gt; &lt;cld-transformation gravity=\\&quot;auto:classic\\&quot; height=\\&quot;175\\&quot; width=\\&quot;175\\&quot; crop=\\&quot;thumb\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot; &gt;\\n\\t&lt;cld-transformation gravity=\\&quot;auto:classic\\&quot; height=\\&quot;175\\&quot; width=\\&quot;175\\&quot; crop=\\&quot;thumb\\&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;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;)\\n  .resize(\\n    thumbnail()\\n      .width(175)\\n      .height(175)\\n      .gravity(autoGravity().autoFocus(focusOn(\\&quot;classic\\&quot;)))\\n  )\\n  .setVersion(1551428220);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;)\\n  .resize(\\n    thumbnail()\\n      .width(175)\\n      .height(175)\\n      .gravity(autoGravity().autoFocus(focusOn(\\&quot;classic\\&quot;)))\\n  )\\n  .setVersion(1551428220);&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;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot; &gt; &lt;cl-transformation gravity=\\&quot;auto:classic\\&quot; height=\\&quot;175\\&quot; width=\\&quot;175\\&quot; crop=\\&quot;thumb\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot; &gt;\\n\\t&lt;cl-transformation gravity=\\&quot;auto:classic\\&quot; height=\\&quot;175\\&quot; width=\\&quot;175\\&quot; crop=\\&quot;thumb\\&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;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;)\\n  .resize(\\n    thumbnail()\\n      .width(175)\\n      .height(175)\\n      .gravity(autoGravity().autoFocus(focusOn(\\&quot;classic\\&quot;)))\\n  )\\n  .setVersion(1551428220);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;)\\n  .resize(\\n    thumbnail()\\n      .width(175)\\n      .height(175)\\n      .gravity(autoGravity().autoFocus(focusOn(\\&quot;classic\\&quot;)))\\n  )\\n  .setVersion(1551428220);&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;veducate\\\/spencer-backman-482079-unsplash.jpg&#039;, {gravity: \\&quot;auto:classic\\&quot;, height: 175, width: 175, crop: \\&quot;thumb\\&quot;}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;veducate\\\/spencer-backman-482079-unsplash.jpg&#039;, {gravity: \\&quot;auto:classic\\&quot;, height: 175, width: 175, crop: \\&quot;thumb\\&quot;}).toHtml();&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;cloudinary-core&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;python&quot;,&quot;framework&quot;:&quot;python&quot;,&quot;language&quot;:&quot;python&quot;,&quot;rawCodeSnippet&quot;:&quot;CloudinaryImage(\\&quot;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;).image(gravity=\\&quot;auto:classic\\&quot;, height=175, width=175, crop=\\&quot;thumb\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;).image(gravity=\\&quot;auto:classic\\&quot;, height=175, width=175, crop=\\&quot;thumb\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Python&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;php_2&quot;,&quot;framework&quot;:&quot;php_2&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;(new ImageTag(&#039;veducate\\\/spencer-backman-482079-unsplash.jpg&#039;))\\n\\t-&gt;resize(Resize::thumbnail()-&gt;width(175)\\n-&gt;height(175)\\n\\t-&gt;gravity(\\n\\tGravity::autoGravity()\\n\\t-&gt;autoFocus(\\n\\tAutoFocus::focusOn(\\&quot;classic\\&quot;))\\n\\t)\\n\\t)\\n\\t-&gt;version(1551428220);&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;veducate\\\/spencer-backman-482079-unsplash.jpg&#039;))\\n\\t-&gt;resize(Resize::thumbnail()-&gt;width(175)\\n-&gt;height(175)\\n\\t-&gt;gravity(\\n\\tGravity::autoGravity()\\n\\t-&gt;autoFocus(\\n\\tAutoFocus::focusOn(\\&quot;classic\\&quot;))\\n\\t)\\n\\t)\\n\\t-&gt;version(1551428220);&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;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;, array(\\&quot;gravity\\&quot;=&gt;\\&quot;auto:classic\\&quot;, \\&quot;height\\&quot;=&gt;175, \\&quot;width\\&quot;=&gt;175, \\&quot;crop\\&quot;=&gt;\\&quot;thumb\\&quot;))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;, array(\\&quot;gravity\\&quot;=&gt;\\&quot;auto:classic\\&quot;, \\&quot;height\\&quot;=&gt;175, \\&quot;width\\&quot;=&gt;175, \\&quot;crop\\&quot;=&gt;\\&quot;thumb\\&quot;))&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;java&quot;,&quot;framework&quot;:&quot;java&quot;,&quot;language&quot;:&quot;java&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().gravity(\\&quot;auto:classic\\&quot;).height(175).width(175).crop(\\&quot;thumb\\&quot;)).imageTag(\\&quot;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().gravity(\\&quot;auto:classic\\&quot;).height(175).width(175).crop(\\&quot;thumb\\&quot;)).imageTag(\\&quot;veducate\\\/spencer-backman-482079-unsplash.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;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;, gravity: \\&quot;auto:classic\\&quot;, height: 175, width: 175, crop: \\&quot;thumb\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;, gravity: \\&quot;auto:classic\\&quot;, height: 175, width: 175, crop: \\&quot;thumb\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Ruby&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;csharp&quot;,&quot;framework&quot;:&quot;csharp&quot;,&quot;language&quot;:&quot;csharp&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Gravity(\\&quot;auto:classic\\&quot;).Height(175).Width(175).Crop(\\&quot;thumb\\&quot;)).BuildImageTag(\\&quot;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Gravity(\\&quot;auto:classic\\&quot;).Height(175).Width(175).Crop(\\&quot;thumb\\&quot;)).BuildImageTag(\\&quot;veducate\\\/spencer-backman-482079-unsplash.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;veducate\\\/spencer-backman-482079-unsplash.jpg&#039;).transformation(Transformation()\\n\\t.resize(Resize.thumbnail().width(175)\\n.height(175)\\n\\t.gravity(\\n\\tGravity.autoGravity()\\n\\t.autoFocus(\\n\\tAutoFocus.focusOn(\\&quot;classic\\&quot;))\\n\\t)\\n\\t)\\n\\t.version(1551428220));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;veducate\\\/spencer-backman-482079-unsplash.jpg&#039;).transformation(Transformation()\\n\\t.resize(Resize.thumbnail().width(175)\\n.height(175)\\n\\t.gravity(\\n\\tGravity.autoGravity()\\n\\t.autoFocus(\\n\\tAutoFocus.focusOn(\\&quot;classic\\&quot;))\\n\\t)\\n\\t)\\n\\t.version(1551428220));&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;auto:classic\\&quot;).setHeight(175).setWidth(175).setCrop(\\&quot;thumb\\&quot;)).generate(\\&quot;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setGravity(\\&quot;auto:classic\\&quot;).setHeight(175).setWidth(175).setCrop(\\&quot;thumb\\&quot;)).generate(\\&quot;veducate\\\/spencer-backman-482079-unsplash.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;auto:classic\\&quot;).height(175).width(175).crop(\\&quot;thumb\\&quot;)).generate(\\&quot;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().gravity(\\&quot;auto:classic\\&quot;).height(175).width(175).crop(\\&quot;thumb\\&quot;)).generate(\\&quot;veducate\\\/spencer-backman-482079-unsplash.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;veducate\\\/spencer-backman-482079-unsplash.jpg&#039;).transformation(Transformation()\\n\\t.resize(Resize.thumbnail().width(175)\\n.height(175)\\n\\t.gravity(\\n\\tGravity.autoGravity()\\n\\t.autoFocus(\\n\\tAutoFocus.focusOn(\\&quot;classic\\&quot;))\\n\\t)\\n\\t)\\n\\t.version(1551428220));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;veducate\\\/spencer-backman-482079-unsplash.jpg&#039;).transformation(Transformation()\\n\\t.resize(Resize.thumbnail().width(175)\\n.height(175)\\n\\t.gravity(\\n\\tGravity.autoGravity()\\n\\t.autoFocus(\\n\\tAutoFocus.focusOn(\\&quot;classic\\&quot;))\\n\\t)\\n\\t)\\n\\t.version(1551428220));&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;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;)\\n\\t resize(Resize.thumbnail() { width(175)\\n height(175)\\n\\t gravity(\\n\\tGravity.autoGravity() {\\n\\t autoFocus(\\n\\tAutoFocus.focusOn(\\&quot;classic\\&quot;))\\n\\t })\\n\\t })\\n\\t version(1551428220) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;)\\n\\t resize(Resize.thumbnail() { width(175)\\n height(175)\\n\\t gravity(\\n\\tGravity.autoGravity() {\\n\\t autoFocus(\\n\\tAutoFocus.focusOn(\\&quot;classic\\&quot;))\\n\\t })\\n\\t })\\n\\t version(1551428220) \\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;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;, {gravity: \\&quot;auto:classic\\&quot;, height: 175, width: 175, crop: \\&quot;thumb\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;, {gravity: \\&quot;auto:classic\\&quot;, height: 175, width: 175, crop: \\&quot;thumb\\&quot;})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;jQuery&quot;,&quot;packageName&quot;:&quot;cloudinary-jquery&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_native&quot;,&quot;framework&quot;:&quot;react_native&quot;,&quot;language&quot;:&quot;react_native&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;)\\n  .resize(\\n    thumbnail()\\n      .width(175)\\n      .height(175)\\n      .gravity(autoGravity().autoFocus(focusOn(\\&quot;classic\\&quot;)))\\n  )\\n  .setVersion(1551428220);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;)\\n  .resize(\\n    thumbnail()\\n      .width(175)\\n      .height(175)\\n      .gravity(autoGravity().autoFocus(focusOn(\\&quot;classic\\&quot;)))\\n  )\\n  .setVersion(1551428220);&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_thumb,g_auto:classic,h_175,w_175\\\/v1551428220\\\/veducate\\\/spencer-backman-482079-unsplash.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;thumb&quot;,&quot;gravity&quot;:&quot;auto:classic&quot;,&quot;height&quot;:&quot;175&quot;,&quot;width&quot;:&quot;175&quot;}],&quot;transformation_string&quot;:&quot;c_thumb,g_auto:classic,h_175,w_175&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;1551428220&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;veducate\\\/spencer-backman-482079-unsplash.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_thumb,g_auto:classic,h_175,w_175\/v1551428220\/veducate\/spencer-backman-482079-unsplash.jpg\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/c_thumb,g_auto:classic,h_175,w_175\/v1551428220\/veducate\/spencer-backman-482079-unsplash.jpg\" alt=\"g_auto:classic Transformation Applied to It\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"175\" height=\"175\"\/><\/a>\n<em>g_auto:classic<\/em>\n<cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[{&quot;sdkId&quot;:&quot;nodejs&quot;,&quot;framework&quot;:&quot;nodejs&quot;,&quot;language&quot;:&quot;nodejs&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(\\&quot;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;, {gravity: \\&quot;auto:backpack\\&quot;, height: 175, width: 175, crop: \\&quot;thumb\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;, {gravity: \\&quot;auto:backpack\\&quot;, height: 175, width: 175, crop: \\&quot;thumb\\&quot;})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Node.js&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_2&quot;,&quot;framework&quot;:&quot;react_2&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;)\\n  .resize(\\n    thumbnail()\\n      .width(175)\\n      .height(175)\\n      .gravity(autoGravity().autoFocus(focusOn(\\&quot;backpack\\&quot;)))\\n  )\\n  .setVersion(1551428220);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;)\\n  .resize(\\n    thumbnail()\\n      .width(175)\\n      .height(175)\\n      .gravity(autoGravity().autoFocus(focusOn(\\&quot;backpack\\&quot;)))\\n  )\\n  .setVersion(1551428220);&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;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot; &gt; &lt;Transformation gravity=\\&quot;auto:backpack\\&quot; height=\\&quot;175\\&quot; width=\\&quot;175\\&quot; crop=\\&quot;thumb\\&quot; \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot; &gt;\\n\\t&lt;Transformation gravity=\\&quot;auto:backpack\\&quot; height=\\&quot;175\\&quot; width=\\&quot;175\\&quot; crop=\\&quot;thumb\\&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;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;)\\n  .resize(\\n    thumbnail()\\n      .width(175)\\n      .height(175)\\n      .gravity(autoGravity().autoFocus(focusOn(\\&quot;backpack\\&quot;)))\\n  )\\n  .setVersion(1551428220);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;)\\n  .resize(\\n    thumbnail()\\n      .width(175)\\n      .height(175)\\n      .gravity(autoGravity().autoFocus(focusOn(\\&quot;backpack\\&quot;)))\\n  )\\n  .setVersion(1551428220);&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;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot; &gt; &lt;cld-transformation gravity=\\&quot;auto:backpack\\&quot; height=\\&quot;175\\&quot; width=\\&quot;175\\&quot; crop=\\&quot;thumb\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot; &gt;\\n\\t&lt;cld-transformation gravity=\\&quot;auto:backpack\\&quot; height=\\&quot;175\\&quot; width=\\&quot;175\\&quot; crop=\\&quot;thumb\\&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;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;)\\n  .resize(\\n    thumbnail()\\n      .width(175)\\n      .height(175)\\n      .gravity(autoGravity().autoFocus(focusOn(\\&quot;backpack\\&quot;)))\\n  )\\n  .setVersion(1551428220);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;)\\n  .resize(\\n    thumbnail()\\n      .width(175)\\n      .height(175)\\n      .gravity(autoGravity().autoFocus(focusOn(\\&quot;backpack\\&quot;)))\\n  )\\n  .setVersion(1551428220);&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;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot; &gt; &lt;cl-transformation gravity=\\&quot;auto:backpack\\&quot; height=\\&quot;175\\&quot; width=\\&quot;175\\&quot; crop=\\&quot;thumb\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot; &gt;\\n\\t&lt;cl-transformation gravity=\\&quot;auto:backpack\\&quot; height=\\&quot;175\\&quot; width=\\&quot;175\\&quot; crop=\\&quot;thumb\\&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;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;)\\n  .resize(\\n    thumbnail()\\n      .width(175)\\n      .height(175)\\n      .gravity(autoGravity().autoFocus(focusOn(\\&quot;backpack\\&quot;)))\\n  )\\n  .setVersion(1551428220);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;)\\n  .resize(\\n    thumbnail()\\n      .width(175)\\n      .height(175)\\n      .gravity(autoGravity().autoFocus(focusOn(\\&quot;backpack\\&quot;)))\\n  )\\n  .setVersion(1551428220);&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;veducate\\\/spencer-backman-482079-unsplash.jpg&#039;, {gravity: \\&quot;auto:backpack\\&quot;, height: 175, width: 175, crop: \\&quot;thumb\\&quot;}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;veducate\\\/spencer-backman-482079-unsplash.jpg&#039;, {gravity: \\&quot;auto:backpack\\&quot;, height: 175, width: 175, crop: \\&quot;thumb\\&quot;}).toHtml();&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;cloudinary-core&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;python&quot;,&quot;framework&quot;:&quot;python&quot;,&quot;language&quot;:&quot;python&quot;,&quot;rawCodeSnippet&quot;:&quot;CloudinaryImage(\\&quot;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;).image(gravity=\\&quot;auto:backpack\\&quot;, height=175, width=175, crop=\\&quot;thumb\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;).image(gravity=\\&quot;auto:backpack\\&quot;, height=175, width=175, crop=\\&quot;thumb\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Python&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;php_2&quot;,&quot;framework&quot;:&quot;php_2&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;(new ImageTag(&#039;veducate\\\/spencer-backman-482079-unsplash.jpg&#039;))\\n\\t-&gt;resize(Resize::thumbnail()-&gt;width(175)\\n-&gt;height(175)\\n\\t-&gt;gravity(\\n\\tGravity::autoGravity()\\n\\t-&gt;autoFocus(\\n\\tAutoFocus::focusOn(\\&quot;backpack\\&quot;))\\n\\t)\\n\\t)\\n\\t-&gt;version(1551428220);&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;veducate\\\/spencer-backman-482079-unsplash.jpg&#039;))\\n\\t-&gt;resize(Resize::thumbnail()-&gt;width(175)\\n-&gt;height(175)\\n\\t-&gt;gravity(\\n\\tGravity::autoGravity()\\n\\t-&gt;autoFocus(\\n\\tAutoFocus::focusOn(\\&quot;backpack\\&quot;))\\n\\t)\\n\\t)\\n\\t-&gt;version(1551428220);&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;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;, array(\\&quot;gravity\\&quot;=&gt;\\&quot;auto:backpack\\&quot;, \\&quot;height\\&quot;=&gt;175, \\&quot;width\\&quot;=&gt;175, \\&quot;crop\\&quot;=&gt;\\&quot;thumb\\&quot;))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;, array(\\&quot;gravity\\&quot;=&gt;\\&quot;auto:backpack\\&quot;, \\&quot;height\\&quot;=&gt;175, \\&quot;width\\&quot;=&gt;175, \\&quot;crop\\&quot;=&gt;\\&quot;thumb\\&quot;))&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;java&quot;,&quot;framework&quot;:&quot;java&quot;,&quot;language&quot;:&quot;java&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().gravity(\\&quot;auto:backpack\\&quot;).height(175).width(175).crop(\\&quot;thumb\\&quot;)).imageTag(\\&quot;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().gravity(\\&quot;auto:backpack\\&quot;).height(175).width(175).crop(\\&quot;thumb\\&quot;)).imageTag(\\&quot;veducate\\\/spencer-backman-482079-unsplash.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;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;, gravity: \\&quot;auto:backpack\\&quot;, height: 175, width: 175, crop: \\&quot;thumb\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;, gravity: \\&quot;auto:backpack\\&quot;, height: 175, width: 175, crop: \\&quot;thumb\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Ruby&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;csharp&quot;,&quot;framework&quot;:&quot;csharp&quot;,&quot;language&quot;:&quot;csharp&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Gravity(\\&quot;auto:backpack\\&quot;).Height(175).Width(175).Crop(\\&quot;thumb\\&quot;)).BuildImageTag(\\&quot;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Gravity(\\&quot;auto:backpack\\&quot;).Height(175).Width(175).Crop(\\&quot;thumb\\&quot;)).BuildImageTag(\\&quot;veducate\\\/spencer-backman-482079-unsplash.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;veducate\\\/spencer-backman-482079-unsplash.jpg&#039;).transformation(Transformation()\\n\\t.resize(Resize.thumbnail().width(175)\\n.height(175)\\n\\t.gravity(\\n\\tGravity.autoGravity()\\n\\t.autoFocus(\\n\\tAutoFocus.focusOn(\\&quot;backpack\\&quot;))\\n\\t)\\n\\t)\\n\\t.version(1551428220));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;veducate\\\/spencer-backman-482079-unsplash.jpg&#039;).transformation(Transformation()\\n\\t.resize(Resize.thumbnail().width(175)\\n.height(175)\\n\\t.gravity(\\n\\tGravity.autoGravity()\\n\\t.autoFocus(\\n\\tAutoFocus.focusOn(\\&quot;backpack\\&quot;))\\n\\t)\\n\\t)\\n\\t.version(1551428220));&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;auto:backpack\\&quot;).setHeight(175).setWidth(175).setCrop(\\&quot;thumb\\&quot;)).generate(\\&quot;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setGravity(\\&quot;auto:backpack\\&quot;).setHeight(175).setWidth(175).setCrop(\\&quot;thumb\\&quot;)).generate(\\&quot;veducate\\\/spencer-backman-482079-unsplash.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;auto:backpack\\&quot;).height(175).width(175).crop(\\&quot;thumb\\&quot;)).generate(\\&quot;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().gravity(\\&quot;auto:backpack\\&quot;).height(175).width(175).crop(\\&quot;thumb\\&quot;)).generate(\\&quot;veducate\\\/spencer-backman-482079-unsplash.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;veducate\\\/spencer-backman-482079-unsplash.jpg&#039;).transformation(Transformation()\\n\\t.resize(Resize.thumbnail().width(175)\\n.height(175)\\n\\t.gravity(\\n\\tGravity.autoGravity()\\n\\t.autoFocus(\\n\\tAutoFocus.focusOn(\\&quot;backpack\\&quot;))\\n\\t)\\n\\t)\\n\\t.version(1551428220));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;veducate\\\/spencer-backman-482079-unsplash.jpg&#039;).transformation(Transformation()\\n\\t.resize(Resize.thumbnail().width(175)\\n.height(175)\\n\\t.gravity(\\n\\tGravity.autoGravity()\\n\\t.autoFocus(\\n\\tAutoFocus.focusOn(\\&quot;backpack\\&quot;))\\n\\t)\\n\\t)\\n\\t.version(1551428220));&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;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;)\\n\\t resize(Resize.thumbnail() { width(175)\\n height(175)\\n\\t gravity(\\n\\tGravity.autoGravity() {\\n\\t autoFocus(\\n\\tAutoFocus.focusOn(\\&quot;backpack\\&quot;))\\n\\t })\\n\\t })\\n\\t version(1551428220) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;)\\n\\t resize(Resize.thumbnail() { width(175)\\n height(175)\\n\\t gravity(\\n\\tGravity.autoGravity() {\\n\\t autoFocus(\\n\\tAutoFocus.focusOn(\\&quot;backpack\\&quot;))\\n\\t })\\n\\t })\\n\\t version(1551428220) \\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;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;, {gravity: \\&quot;auto:backpack\\&quot;, height: 175, width: 175, crop: \\&quot;thumb\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;, {gravity: \\&quot;auto:backpack\\&quot;, height: 175, width: 175, crop: \\&quot;thumb\\&quot;})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;jQuery&quot;,&quot;packageName&quot;:&quot;cloudinary-jquery&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_native&quot;,&quot;framework&quot;:&quot;react_native&quot;,&quot;language&quot;:&quot;react_native&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;)\\n  .resize(\\n    thumbnail()\\n      .width(175)\\n      .height(175)\\n      .gravity(autoGravity().autoFocus(focusOn(\\&quot;backpack\\&quot;)))\\n  )\\n  .setVersion(1551428220);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;veducate\\\/spencer-backman-482079-unsplash.jpg\\&quot;)\\n  .resize(\\n    thumbnail()\\n      .width(175)\\n      .height(175)\\n      .gravity(autoGravity().autoFocus(focusOn(\\&quot;backpack\\&quot;)))\\n  )\\n  .setVersion(1551428220);&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_thumb,g_auto:backpack,h_175,w_175\\\/v1551428220\\\/veducate\\\/spencer-backman-482079-unsplash.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;thumb&quot;,&quot;gravity&quot;:&quot;auto:backpack&quot;,&quot;height&quot;:&quot;175&quot;,&quot;width&quot;:&quot;175&quot;}],&quot;transformation_string&quot;:&quot;c_thumb,g_auto:backpack,h_175,w_175&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;1551428220&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;veducate\\\/spencer-backman-482079-unsplash.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_thumb,g_auto:backpack,h_175,w_175\/v1551428220\/veducate\/spencer-backman-482079-unsplash.jpg\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/c_thumb,g_auto:backpack,h_175,w_175\/v1551428220\/veducate\/spencer-backman-482079-unsplash.jpg\" alt=\"backback\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"175\" height=\"175\"\/><\/a>\n<em>g_auto:backpack<\/em><\/p>\n<p>This <a href=\"https:\/\/support.cloudinary.com\/hc\/en-us\/articles\/360024950012-How-to-Apply-Gravity-Based-Crops-on-Images-with-Cloudinary\">tutorial<\/a> shows you how to apply smart cropping.<\/p>\n<h3>Automatic, Intelligent Breakpoints<\/h3>\n<p>Image breakpoints in <a href=\"https:\/\/cloudinary.com\/blog\/best_practices_for_responsive_web_design\">responsive web designs<\/a> determine where to break an image in case of insufficient space on the user\u2019s screen or viewport for a full display.<\/p>\n<p>By adding a few codelines in Ruby, PHP, Python, Node.js, or Java to your app or webpage, you can direct Cloudinary to <a href=\"https:\/\/cloudinary.com\/blog\/introducing_intelligent_responsive_image_breakpoints_solutions\">automatically generate image breakpoints<\/a> through its API. You can also create breakpoints for user-generated images.<\/p>\n<p>See this example in Node.js:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">cloudinary.v2.uploader.upload(<span class=\"hljs-string\">\"woman_glasses.jpg\"<\/span>, \n        { <span class=\"hljs-attr\">responsive_breakpoints<\/span>: &#91;{\n          <span class=\"hljs-attr\">create_derived<\/span>: <span class=\"hljs-literal\">false<\/span>, <span class=\"hljs-attr\">bytes_step<\/span>: <span class=\"hljs-number\">20000<\/span>,\n          <span class=\"hljs-attr\">min_width<\/span>: <span class=\"hljs-number\">200<\/span>, <span class=\"hljs-attr\">max_width<\/span>: <span class=\"hljs-number\">1000<\/span>,\n          <span class=\"hljs-attr\">max_images<\/span>: <span class=\"hljs-number\">20<\/span>}], <span class=\"hljs-attr\">public_id<\/span>: <span class=\"hljs-string\">\"woman_glasses\"<\/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); });\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<h2 id=\"more\">More About Image Editing<\/h2>\n<p>You can edit images in many other ways. Below are a few excellent resources:<\/p>\n<ul>\n<li>The HTML5 <code>&lt;canvas&gt;<\/code> element is useful for animating website visuals, such as by adding small dynamic features or creating videos, through a combination of HTML, CSS, and JavaScript.\nThis <a href=\"https:\/\/cloudinary.com\/blog\/creating_html5_animations\">article<\/a> defines HTML5 animation and explains the process for building simple animations along with examples and best practices. Also spelled out are the steps for creating and displaying dynamic content with Cloudinary.<\/li>\n<li>By removing backgrounds from images, you can customize content and zero in on the elements you want to display. Manipulating backgrounds is especially important when creating crisp, eye-catching product images.\nThis article elaborates on the Cloudinary features with which you can easily remove backgrounds and, if you wish, replace the deleted elements with others to enhance appeal.<\/li>\n<li>A popular way for displaying a site\u2019s related content is through slideshows with which you can group images for albums, product galleries, or presentations. For a seamless experience, pick the slider and other controls with usability and optimal design in mind.\nThis <a href=\"https:\/\/cloudinary.com\/blog\/10_great_jquery_sliders_and_5_ways_to_build_one_yourself\">article<\/a> showcases seven popular jQuery sliders and three resources for creating your own.<\/li>\n<li>You can transform the images for your site in many ways to make them stand out or to depict ownership. For example, watermarks can prevent theft; badges can add a personal touch to user icons or profiles; and text overlays, from captions to hero banners, can extend content or appeal.\nThis <a href=\"https:\/\/cloudinary.com\/blog\/adding_watermarks_credits_badges_and_text_overlays_to_images\">article<\/a> demonstrates how to add watermarks, badges, and text overlays to your site images with built-in Cloudinary features.<\/li>\n<li>Before making purchases, visitors would want to see product details, which are readily available at brick-and-mortar-stores but not on e-commerce sites. A breakthrough has arrived, thanks to the capability of adding 360-degree product views online..\nLearn how to do that with Cloudinary\u2019s 360-Degree Product Viewer in this <a href=\"https:\/\/cloudinary.com\/blog\/add_the_360_product_viewer_to_your_commerce_site_with_cloudinary\">article<\/a>.<\/li>\n<li>Cropping images to highlight their significant elements can be a time sink, especially if you have a high volume of images, optimizing which being crucial for site responsiveness and performance.\nCloudinary\u2019s content-aware, smart-cropping capability is what you need. For details, see this <a href=\"https:\/\/cloudinary.com\/blog\/smart_automatic_image_cropping_maybe_you_can_always_get_what_you_want\">article<\/a>.<\/li>\n<li>Shopify is one of the most popular e-commerce platforms, enabling you to quickly build an online store. However, optimizing the images there and adding  a product gallery would significantly enhance the user experience.\nBy integrating Cloudinary into your Shopify store, you can accomplish all that, hassle free. For details, see this <a href=\"https:\/\/cloudinary.com\/blog\/how_to_improve_your_shopify_s_store_loading_times_using_cloudinary\">article<\/a>.<\/li>\n<li>Overlaying text to images is an excellent way to add captions, banners, or design graphics there. Historically, to do that dynamically requires a working knowledge of CSS or JavaScript. With Cloudinary, you can add and style text easily with URL parameters or simple methods in many programming languages. For details, see this <a href=\"https:\/\/cloudinary.com\/blog\/how_to_overlay_text_on_image_easily_pixel_perfect_and_with_no_css_html\">article<\/a>.<\/li>\n<li>While building e-commerce sites on the popular Magento platform with its robust back-office system, you can apply extensions that facilitate site-management tasks. An example is the Cloudinary plugin, newly updated with enhanced support for product galleries, video, and digital asset management.<br \/>\nThis <a href=\"https:\/\/cloudinary.com\/blog\/taking_cloudinary_s_magento_extension_to_the_next_level\">article<\/a> explains Cloudinary\u2019s Magento extension and the procedures for customizing product pages, media assets, and galleries.<\/li>\n<\/ul>\n<p>Learn more in our detailed guide to <a href=\"https:\/\/cloudinary.com\/blog\/text-extractor-images-video\">text extractor<\/a>.<\/p>\n<h2>See Additional Guides on Key AI Technology Topics<\/h2>\n<p>Together with our content partners, we have authored in-depth guides on several other topics that can also be useful as you explore the world of <a href=\"https:\/\/www.tabnine.com\/blog\/ai-technology-powering-the-ai-revolution\/\">AI technology<\/a>.<\/p>\n<h3><a href=\"https:\/\/www.instaclustr.com\/education\/open-source-ai\/open-source-ai-tools-pros-and-cons-types-and-top-10-projects\/\">Open Source AI<\/a><\/h3>\n<p><em>Authored by Instaclustr<\/em><\/p>\n<ul>\n<li>\n<a href=\"https:\/\/www.instaclustr.com\/education\/managed-database\/top-10-open-source-databases-detailed-feature-comparison\/\">[Guide] Top 10 open source databases: Detailed feature comparison<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/www.instaclustr.com\/education\/open-source-ai\/open-source-ai-tools-pros-and-cons-types-and-top-10-projects\/\">[Guide] Open source AI tools: Pros and cons, types, and top 10 projects<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/www.instaclustr.com\/blog\/multi-data-center-sparkcassandra-benchmark-round-2\/\">[Blog] Multi Data Center Apache Spark\u2122\/Cassandra Benchmark <\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/www.instaclustr.com\/\">[Product] NetApp Instaclustr Data Platform | Open-Source Data Infrastructure Platform<\/a>\n<\/li>\n<\/ul>\n<h3><a href=\"https:\/\/www.exabeam.com\/explainers\/ai-cyber-security\/ai-cyber-security-securing-ai-systems-against-cyber-threats\/\">AI Cyber Security<\/a><\/h3>\n<p><em>Authored by Exabeam<\/em><\/p>\n<ul>\n<li>\n<a href=\"https:\/\/www.exabeam.com\/explainers\/ai-cyber-security\/ai-cyber-security-securing-ai-systems-against-cyber-threats\/\">[Guide] AI Cyber Security: Securing AI Systems Against Cyber Threats <\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/www.exabeam.com\/explainers\/ai-cyber-security\/ai-regulations-and-llm-regulations-past-present-and-future\/\">[Guide] AI Regulations and LLM Regulations: Past, Present, and Future <\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/www.exabeam.com\/blog\/infosec-trends\/cybersecurity-threats-everything-you-need-to-know\/\">[Blog] Cybersecurity Threats: Everything you Need to Know <\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/www.instaclustr.com\/\">[Product] NetApp Instaclustr Data Platform | Open-Source Data Infrastructure Platform<\/a>\n<\/li>\n<\/ul>\n<h3><a href=\"https:\/\/www.exabeam.com\/explainers\/ai-cyber-security\/agentic-ai-how-it-works-and-7-real-world-use-cases\/\">Agentic AI<\/a><\/h3>\n<p><em>Authored by Exabeam<\/em><\/p>\n<ul>\n<li>\n<a href=\"https:\/\/www.exabeam.com\/explainers\/ai-cyber-security\/agentic-ai-how-it-works-and-7-real-world-use-cases\/\">[Guide] Agentic AI: How It Works and 7 Real-World Use Cases <\/a>\n<\/li>\n<\/ul>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":22170,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[25,165],"class_list":["post-22169","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-asset-management","tag-image-transformation"],"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>Image-Editing Basics and a Tutorial for Automation With AI<\/title>\n<meta name=\"description\" content=\"Editing images produces appealing and useful effects. Learn the basic steps and those for automation with AI on Cloudinary.\" \/>\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\/image_editing_basics_and_a_tutorial_for_automation_with_ai\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Image-Editing Basics and a Tutorial for Automation With AI\" \/>\n<meta property=\"og:description\" content=\"Editing images produces appealing and useful effects. Learn the basic steps and those for automation with AI on Cloudinary.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/image_editing_basics_and_a_tutorial_for_automation_with_ai\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2020-09-24T21:19:14+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-24T00:16:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718342\/Web_Assets\/blog\/Image-Editing_221700e336\/Image-Editing_221700e336.png?_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\/png\" \/>\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\/image_editing_basics_and_a_tutorial_for_automation_with_ai#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/image_editing_basics_and_a_tutorial_for_automation_with_ai\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Image-Editing Basics and a Tutorial for Automation With AI\",\"datePublished\":\"2020-09-24T21:19:14+00:00\",\"dateModified\":\"2025-09-24T00:16:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/image_editing_basics_and_a_tutorial_for_automation_with_ai\"},\"wordCount\":9,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/image_editing_basics_and_a_tutorial_for_automation_with_ai#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718342\/Web_Assets\/blog\/Image-Editing_221700e336\/Image-Editing_221700e336.png?_i=AA\",\"keywords\":[\"Asset Management\",\"Image Transformation\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2020\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/image_editing_basics_and_a_tutorial_for_automation_with_ai\",\"url\":\"https:\/\/cloudinary.com\/blog\/image_editing_basics_and_a_tutorial_for_automation_with_ai\",\"name\":\"Image-Editing Basics and a Tutorial for Automation With AI\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/image_editing_basics_and_a_tutorial_for_automation_with_ai#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/image_editing_basics_and_a_tutorial_for_automation_with_ai#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718342\/Web_Assets\/blog\/Image-Editing_221700e336\/Image-Editing_221700e336.png?_i=AA\",\"datePublished\":\"2020-09-24T21:19:14+00:00\",\"dateModified\":\"2025-09-24T00:16:12+00:00\",\"description\":\"Editing images produces appealing and useful effects. Learn the basic steps and those for automation with AI on Cloudinary.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/image_editing_basics_and_a_tutorial_for_automation_with_ai#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/image_editing_basics_and_a_tutorial_for_automation_with_ai\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/image_editing_basics_and_a_tutorial_for_automation_with_ai#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718342\/Web_Assets\/blog\/Image-Editing_221700e336\/Image-Editing_221700e336.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718342\/Web_Assets\/blog\/Image-Editing_221700e336\/Image-Editing_221700e336.png?_i=AA\",\"width\":1540,\"height\":847},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/image_editing_basics_and_a_tutorial_for_automation_with_ai#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Image-Editing Basics and a Tutorial for Automation With AI\"}]},{\"@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":"Image-Editing Basics and a Tutorial for Automation With AI","description":"Editing images produces appealing and useful effects. Learn the basic steps and those for automation with AI on Cloudinary.","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\/image_editing_basics_and_a_tutorial_for_automation_with_ai","og_locale":"en_US","og_type":"article","og_title":"Image-Editing Basics and a Tutorial for Automation With AI","og_description":"Editing images produces appealing and useful effects. Learn the basic steps and those for automation with AI on Cloudinary.","og_url":"https:\/\/cloudinary.com\/blog\/image_editing_basics_and_a_tutorial_for_automation_with_ai","og_site_name":"Cloudinary Blog","article_published_time":"2020-09-24T21:19:14+00:00","article_modified_time":"2025-09-24T00:16:12+00:00","og_image":[{"width":1540,"height":847,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718342\/Web_Assets\/blog\/Image-Editing_221700e336\/Image-Editing_221700e336.png?_i=AA","type":"image\/png"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/image_editing_basics_and_a_tutorial_for_automation_with_ai#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/image_editing_basics_and_a_tutorial_for_automation_with_ai"},"author":{"name":"","@id":""},"headline":"Image-Editing Basics and a Tutorial for Automation With AI","datePublished":"2020-09-24T21:19:14+00:00","dateModified":"2025-09-24T00:16:12+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/image_editing_basics_and_a_tutorial_for_automation_with_ai"},"wordCount":9,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/image_editing_basics_and_a_tutorial_for_automation_with_ai#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718342\/Web_Assets\/blog\/Image-Editing_221700e336\/Image-Editing_221700e336.png?_i=AA","keywords":["Asset Management","Image Transformation"],"inLanguage":"en-US","copyrightYear":"2020","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/image_editing_basics_and_a_tutorial_for_automation_with_ai","url":"https:\/\/cloudinary.com\/blog\/image_editing_basics_and_a_tutorial_for_automation_with_ai","name":"Image-Editing Basics and a Tutorial for Automation With AI","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/image_editing_basics_and_a_tutorial_for_automation_with_ai#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/image_editing_basics_and_a_tutorial_for_automation_with_ai#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718342\/Web_Assets\/blog\/Image-Editing_221700e336\/Image-Editing_221700e336.png?_i=AA","datePublished":"2020-09-24T21:19:14+00:00","dateModified":"2025-09-24T00:16:12+00:00","description":"Editing images produces appealing and useful effects. Learn the basic steps and those for automation with AI on Cloudinary.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/image_editing_basics_and_a_tutorial_for_automation_with_ai#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/image_editing_basics_and_a_tutorial_for_automation_with_ai"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/image_editing_basics_and_a_tutorial_for_automation_with_ai#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718342\/Web_Assets\/blog\/Image-Editing_221700e336\/Image-Editing_221700e336.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718342\/Web_Assets\/blog\/Image-Editing_221700e336\/Image-Editing_221700e336.png?_i=AA","width":1540,"height":847},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/image_editing_basics_and_a_tutorial_for_automation_with_ai#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Image-Editing Basics and a Tutorial for Automation With AI"}]},{"@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\/v1649718342\/Web_Assets\/blog\/Image-Editing_221700e336\/Image-Editing_221700e336.png?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/22169","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=22169"}],"version-history":[{"count":28,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/22169\/revisions"}],"predecessor-version":[{"id":38591,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/22169\/revisions\/38591"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/22170"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=22169"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=22169"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=22169"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}