{"id":21577,"date":"2017-08-21T11:20:36","date_gmt":"2017-08-21T18:20:36","guid":{"rendered":"http:\/\/embed_images_in_email_campaigns_at_scale"},"modified":"2025-03-23T11:57:15","modified_gmt":"2025-03-23T18:57:15","slug":"embed_images_in_email_campaigns_at_scale","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/embed_images_in_email_campaigns_at_scale","title":{"rendered":"Embed Images in Email Campaigns at Scale"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p><em>tl;dr<\/em><\/p>\n<p><em>Cloudinary is a powerful media management solution for email marketing campaigns of any size. With features such as advanced image optimization and on-the-fly image transformation, backed by a global CDN, Cloudinary provides the base for a seamless user experience in your email campaigns leading to increased conversion and performance.<\/em><\/p>\n<hr \/>\n<p>We live in an era of information overload and attention is the real currency. Marketers are constantly looking for new ways to reach you, to advertise products and services that they think could improve your lives.<\/p>\n<p>SnapChat and Instagram Stories are the newest channels marketers are trying to leverage. But there\u2019s one tried-and-true channel that has proven its dominance for reaching your audience\u2026 and it\u2019s none other than email marketing.<\/p>\n<p>There are times when Marketing and IT must work together to implement multiple email marketing campaigns under a predefined budget.<\/p>\n<p>Here\u2019s the catch &#8211; our email database is really big. Large enough that any traditional email marketing software, such as Aweber or <a href=\"https:\/\/mailchimp.com\/how-to-start-online-store\/\">MailChimp<\/a>, would cost at least five times more than what we had budgeted.<\/p>\n<p>Clearly, we needed a more feasible solution.<\/p>\n<p>If you are in a similar situation, your options include:<\/p>\n<ul>\n<li>Engaging with a marketing automation system such as Marketo and HubSpot<\/li>\n<li>Sending emails from your company\u2019s email account<\/li>\n<\/ul>\n<p>Let\u2019s say you\u2019ve implemented an email delivery solution. The next thing you need to figure out is where to host the images for the HTML used in your email.<\/p>\n<p>Since we know that attention is the real currency, emails must:<\/p>\n<ol>\n<li>Be well-designed<\/li>\n<li>Carry a visual impact<\/li>\n<li>Look seamless across all devices &#8211; mobile, tablet and desktop<\/li>\n<li>Load fast<\/li>\n<\/ol>\n<p>Here\u2019s the deal &#8211; points one and two depend on your team\u2019s creativity, and is subjective in nature.<\/p>\n<p>What we can control are points three and four. And that\u2019s where Cloudinary comes in.<\/p>\n<p>Cloudinary is end-to-end, cloud-based solution that enables you to optimize, and transform images on-the-fly. It is designed for almost any service (product, website or app) that requires reliable image delivery.<\/p>\n<p>Too complex? Think of Cloudinary as the perfect email image hosting solution.<\/p>\n<p>I\u2019ve personally used Cloudinary for my email marketing campaigns, and wanted to share how it could help you with yours.<\/p>\n<p>While I\u2019m not going to dive into all the features Cloudinary has to offer, I will discuss the features that:<\/p>\n<ul>\n<li>Help improve user experience<\/li>\n<li>Reduce resource consumption<\/li>\n<li>Do a combination of both<\/li>\n<\/ul>\n<p>Let\u2019s take a look at these features, shall we?<\/p>\n<h2>On-the-Fly Image Optimization<\/h2>\n<p>We all need high-quality images for email marketing that load fast. One of the very basic, yet fundamentally important, features Cloudinary offers is on-the-fly image transformation capabilities.<\/p>\n<p>For starters, every image you upload is optimized and stored in Cloudinary\u2019s servers. Only the optimized version of the image (which, by the way has negligible loss in quality) is served to the end user. This approach saves bandwidth costs for both you and the end user. Plus, the email loads faster on the user\u2019s device (mobile or desktop), resulting in a better user experience.<\/p>\n<h2>On-Demand Image Resizing and Transformation<\/h2>\n<p>Mobile screens are smaller, and therefore can benefit from use of smaller images. You don\u2019t need a 1080p image for a email that\u2019s primarily going to be viewed on a phone.<\/p>\n<p>Whatever the device, Cloudinary enables me to configure the image resolution by defining the single parameter in the request URL. I don\u2019t need to upload two (or more) versions of the image to Cloudinary. By changing just one parameter in the URL, I can quickly test which resolution works best. This is incredibly useful in A\/B testing and designing emails.<\/p>\n<p>For example, I use this simple command to resize the image:<\/p>\n<p><cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[{&quot;sdkId&quot;:&quot;nodejs&quot;,&quot;framework&quot;:&quot;nodejs&quot;,&quot;language&quot;:&quot;nodejs&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(\\&quot;sample.jpg\\&quot;, {transformation: [ {width: 300, crop: \\&quot;scale\\&quot;}, {opacity: 50} ]})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;sample.jpg\\&quot;, {transformation: [\\n  {width: 300, crop: \\&quot;scale\\&quot;},\\n  {opacity: 50}\\n  ]})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Node.js&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_2&quot;,&quot;framework&quot;:&quot;react_2&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;sample.jpg\\&quot;)\\n  .resize(scale().width(300))\\n  .adjust(opacity(50));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;sample.jpg\\&quot;)\\n  .resize(scale().width(300))\\n  .adjust(opacity(50));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;react&quot;,&quot;framework&quot;:&quot;react&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;sample.jpg\\&quot; &gt; &lt;Transformation width=\\&quot;300\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt; &lt;Transformation opacity=\\&quot;50\\&quot; \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;sample.jpg\\&quot; &gt;\\n\\t&lt;Transformation width=\\&quot;300\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt;\\n\\t&lt;Transformation opacity=\\&quot;50\\&quot; \\\/&gt;\\n&lt;\\\/Image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;cloudinary-react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue_2&quot;,&quot;framework&quot;:&quot;vue_2&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;sample.jpg\\&quot;)\\n  .resize(scale().width(300))\\n  .adjust(opacity(50));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;sample.jpg\\&quot;)\\n  .resize(scale().width(300))\\n  .adjust(opacity(50));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/vue&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue&quot;,&quot;framework&quot;:&quot;vue&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;sample.jpg\\&quot; &gt; &lt;cld-transformation width=\\&quot;300\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt; &lt;cld-transformation opacity=\\&quot;50\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;sample.jpg\\&quot; &gt;\\n\\t&lt;cld-transformation width=\\&quot;300\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt;\\n\\t&lt;cld-transformation opacity=\\&quot;50\\&quot; \\\/&gt;\\n&lt;\\\/cld-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;cloudinary-vue&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular_2&quot;,&quot;framework&quot;:&quot;angular_2&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;sample.jpg\\&quot;)\\n  .resize(scale().width(300))\\n  .adjust(opacity(50));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;sample.jpg\\&quot;)\\n  .resize(scale().width(300))\\n  .adjust(opacity(50));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/ng&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular&quot;,&quot;framework&quot;:&quot;angular&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;sample.jpg\\&quot; &gt; &lt;cl-transformation width=\\&quot;300\\&quot; crop=\\&quot;scale\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;cl-transformation opacity=\\&quot;50\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;sample.jpg\\&quot; &gt;\\n\\t&lt;cl-transformation width=\\&quot;300\\&quot; crop=\\&quot;scale\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n\\t&lt;cl-transformation opacity=\\&quot;50\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n&lt;\\\/cl-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/angular-5.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js_2&quot;,&quot;framework&quot;:&quot;js_2&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;sample.jpg\\&quot;)\\n  .resize(scale().width(300))\\n  .adjust(opacity(50));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;sample.jpg\\&quot;)\\n  .resize(scale().width(300))\\n  .adjust(opacity(50));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js&quot;,&quot;framework&quot;:&quot;js&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.imageTag(&#039;sample.jpg&#039;, {transformation: [ {width: 300, crop: \\&quot;scale\\&quot;}, {opacity: 50} ]}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;sample.jpg&#039;, {transformation: [\\n  {width: 300, crop: \\&quot;scale\\&quot;},\\n  {opacity: 50}\\n  ]}).toHtml();&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;cloudinary-core&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;python&quot;,&quot;framework&quot;:&quot;python&quot;,&quot;language&quot;:&quot;python&quot;,&quot;rawCodeSnippet&quot;:&quot;CloudinaryImage(\\&quot;sample.jpg\\&quot;).image(transformation=[ {&#039;width&#039;: 300, &#039;crop&#039;: \\&quot;scale\\&quot;}, {&#039;opacity&#039;: 50} ])&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;sample.jpg\\&quot;).image(transformation=[\\n  {&#039;width&#039;: 300, &#039;crop&#039;: \\&quot;scale\\&quot;},\\n  {&#039;opacity&#039;: 50}\\n  ])&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Python&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;php_2&quot;,&quot;framework&quot;:&quot;php_2&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;(new ImageTag(&#039;sample.jpg&#039;))\\n\\t-&gt;resize(Resize::scale()-&gt;width(300))\\n\\t-&gt;adjust(Adjust::opacity(50));&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;sample.jpg&#039;))\\n\\t-&gt;resize(Resize::scale()-&gt;width(300))\\n\\t-&gt;adjust(Adjust::opacity(50));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;php&quot;,&quot;framework&quot;:&quot;php&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;sample.jpg\\&quot;, array(\\&quot;transformation\\&quot;=&gt;array( array(\\&quot;width\\&quot;=&gt;300, \\&quot;crop\\&quot;=&gt;\\&quot;scale\\&quot;), array(\\&quot;opacity\\&quot;=&gt;50) )))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;sample.jpg\\&quot;, array(\\&quot;transformation\\&quot;=&gt;array(\\n  array(\\&quot;width\\&quot;=&gt;300, \\&quot;crop\\&quot;=&gt;\\&quot;scale\\&quot;),\\n  array(\\&quot;opacity\\&quot;=&gt;50)\\n  )))&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;java&quot;,&quot;framework&quot;:&quot;java&quot;,&quot;language&quot;:&quot;java&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().width(300).crop(\\&quot;scale\\&quot;).chain() .opacity(50)).imageTag(\\&quot;sample.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation()\\n  .width(300).crop(\\&quot;scale\\&quot;).chain()\\n  .opacity(50)).imageTag(\\&quot;sample.jpg\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Java&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;ruby&quot;,&quot;framework&quot;:&quot;ruby&quot;,&quot;language&quot;:&quot;ruby&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;sample.jpg\\&quot;, transformation: [ {width: 300, crop: \\&quot;scale\\&quot;}, {opacity: 50} ])&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;sample.jpg\\&quot;, transformation: [\\n  {width: 300, crop: \\&quot;scale\\&quot;},\\n  {opacity: 50}\\n  ])&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Ruby&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;csharp&quot;,&quot;framework&quot;:&quot;csharp&quot;,&quot;language&quot;:&quot;csharp&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(300).Crop(\\&quot;scale\\&quot;).Chain() .Opacity(50)).BuildImageTag(\\&quot;sample.jpg\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation()\\n  .Width(300).Crop(\\&quot;scale\\&quot;).Chain()\\n  .Opacity(50)).BuildImageTag(\\&quot;sample.jpg\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;.NET&quot;,&quot;packageName&quot;:&quot;CloudinaryDotNet&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;dart&quot;,&quot;framework&quot;:&quot;dart&quot;,&quot;language&quot;:&quot;dart&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;sample.jpg&#039;).transformation(Transformation()\\n\\t.resize(Resize.scale().width(300))\\n\\t.adjust(Adjust.opacity(50)));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;sample.jpg&#039;).transformation(Transformation()\\n\\t.resize(Resize.scale().width(300))\\n\\t.adjust(Adjust.opacity(50)));&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(300).setCrop(\\&quot;scale\\&quot;).chain() .setOpacity(50)).generate(\\&quot;sample.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()\\n  .setWidth(300).setCrop(\\&quot;scale\\&quot;).chain()\\n  .setOpacity(50)).generate(\\&quot;sample.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;iOS&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;5.x&quot;},{&quot;sdkId&quot;:&quot;android&quot;,&quot;framework&quot;:&quot;android&quot;,&quot;language&quot;:&quot;android&quot;,&quot;rawCodeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().width(300).crop(\\&quot;scale\\&quot;).chain() .opacity(50)).generate(\\&quot;sample.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation()\\n  .width(300).crop(\\&quot;scale\\&quot;).chain()\\n  .opacity(50)).generate(\\&quot;sample.jpg\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Android&quot;,&quot;packageName&quot;:&quot;cloudinary-android&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;flutter&quot;,&quot;framework&quot;:&quot;flutter&quot;,&quot;language&quot;:&quot;flutter&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;sample.jpg&#039;).transformation(Transformation()\\n\\t.resize(Resize.scale().width(300))\\n\\t.adjust(Adjust.opacity(50)));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;sample.jpg&#039;).transformation(Transformation()\\n\\t.resize(Resize.scale().width(300))\\n\\t.adjust(Adjust.opacity(50)));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Flutter&quot;,&quot;packageName&quot;:&quot;cloudinary_flutter&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;kotlin&quot;,&quot;framework&quot;:&quot;kotlin&quot;,&quot;language&quot;:&quot;kotlin&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;sample.jpg\\&quot;)\\n\\t resize(Resize.scale() { width(300) })\\n\\t adjust(Adjust.opacity(50)) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;sample.jpg\\&quot;)\\n\\t resize(Resize.scale() { width(300) })\\n\\t adjust(Adjust.opacity(50)) \\n}.generate()&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Kotlin&quot;,&quot;packageName&quot;:&quot;kotlin-url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;jquery&quot;,&quot;framework&quot;:&quot;jquery&quot;,&quot;language&quot;:&quot;jquery&quot;,&quot;rawCodeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;sample.jpg\\&quot;, {transformation: [ {width: 300, crop: \\&quot;scale\\&quot;}, {opacity: 50} ]})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;sample.jpg\\&quot;, {transformation: [\\n  {width: 300, crop: \\&quot;scale\\&quot;},\\n  {opacity: 50}\\n  ]})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;jQuery&quot;,&quot;packageName&quot;:&quot;cloudinary-jquery&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_native&quot;,&quot;framework&quot;:&quot;react_native&quot;,&quot;language&quot;:&quot;react_native&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;sample.jpg\\&quot;)\\n  .resize(scale().width(300))\\n  .adjust(opacity(50));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;sample.jpg\\&quot;)\\n  .resize(scale().width(300))\\n  .adjust(opacity(50));&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_300\\\/o_50\\\/sample.jpg&quot;,&quot;cloud_name&quot;:&quot;demo&quot;,&quot;host&quot;:&quot;res.cloudinary.com&quot;,&quot;type&quot;:&quot;upload&quot;,&quot;resource_type&quot;:&quot;image&quot;,&quot;transformation&quot;:[{&quot;width&quot;:&quot;300&quot;},{&quot;opacity&quot;:&quot;50&quot;}],&quot;transformation_string&quot;:&quot;w_300\\\/o_50&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;sample.jpg&quot;,&quot;extension&quot;:&quot;jpg&quot;,&quot;format&quot;:&quot;jpg&quot;,&quot;format_code&quot;:true,&quot;url_code&quot;:false,&quot;signature&quot;:&quot;&quot;,&quot;private_cdn&quot;:false,&quot;result_asset_type&quot;:&quot;image&quot;}\"\n      with-url=\"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_300\/o_50\/sample.jpg\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_300\/o_50\/sample.jpg\" alt=\"Flowers\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"300\" height=\"200\"\/><\/a><\/p>\n<p>The w_300 tells the Cloudinary API to resize the image to a width of 300px. The height is adjusted automatically, thus maintaining the aspect ratio of the image.<\/p>\n<p>There are tons of other image transformation features mentioned in Cloudinary\u2019s <a href=\"https:\/\/cloudinary.com\/documentation\/image_transformations\">documentation<\/a>.<\/p>\n<h2>Changing the Image, But Keeping the Same URL<\/h2>\n<p>This feature is a lifesaver when it comes to email marketing. Imagine spending hours crafting the perfect email, designing it over the course of a week. You <a href=\"https:\/\/cloudinary.com\/glossary\/embedded-images\">embed the image<\/a> in the email\u2019s HTML file. Everything looks good.<\/p>\n<p>On the day the campaign kicks off, you\u2019re a bit nervous and after several checks, you press the send (or schedule) button. You grab a coffee and moments later you realize that the header image has a unexcusable, hair-raising typo. Think \u201cEnd of Season Sale. Grab yourself a umbrella.\u201d<\/p>\n<p>If you\u2019ve scheduled the campaign, there\u2019s still hope. You can pause and fix the error.\nBut what if your campaign is already being sent?<\/p>\n<p>Here\u2019s what I did:<\/p>\n<ul>\n<li>Quickly fix the image.<\/li>\n<li>Head over to Cloudinary\u2019s dashboard and <a href=\"https:\/\/support.cloudinary.com\/hc\/en-us\/articles\/202520852-How-can-I-update-an-already-uploaded-image-\">update the image<\/a>.<\/li>\n<li>Continue enjoying the coffee.<\/li>\n<\/ul>\n<h2>Winning the Battle Against Broken CSS Support<\/h2>\n<p>Here\u2019s the deal &#8211; CSS support is shaky in most email clients. Some work, some don\u2019t. There just  isn\u2019t seamless support for CSS in them.<\/p>\n<p>When experimenting with Cloudinary, I found two particularly useful, on-the-fly image transformation features.<\/p>\n<h3>Opacity Transformation<\/h3>\n<p>The first feature is opacity transformation. In simple terms, this feature enables you to change the opacity of the image, on-the-fly.<\/p>\n<p>If you\u2019re using a background image in your email, opacity plays a major role in the contrast.<\/p>\n<p>You might wonder &#8211; which email client does not support CSS opacity?\nYou\u2019d be surprised.<\/p>\n<div class='c-callout  c-callout--inline-title c-callout--note'><strong class='c-callout__title'>Note:<\/strong> <p>MailChimp has this <a href=\"https:\/\/templates.mailchimp.com\/resources\/email-client-css-support\/\">handy<\/a> resource on CSS compatibility in various email clients.<\/p><\/div>\n<p>The following email clients do not support CSS opacity:<\/p>\n<ol>\n<li>Gmail and Yahoo! web clients<\/li>\n<li>Microsoft Outlook 2000 &#8211; 2013 (desktop versions for Windows)<\/li>\n<li>Windows Live Mail (for those still on Windows 7)<\/li>\n<li>Gmail app for Android and iOS phones<\/li>\n<\/ol>\n<p>The only desktop clients that do support CSS opacity are Apple Mail and Outlook 2013 for Mac.<\/p>\n<p>This is where Cloudinary comes in.<\/p>\n<p>In Cloudinary, you can easily transform the opacity of the image by adding the <em>o_XX<\/em> parameter. <em>XX<\/em> represents the digits of the opacity percentage.<\/p>\n<p>For example, to display an image at 50 percent opacity, we add the parameter <code>o_50<\/code> in the following URL:<\/p>\n<p><cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[{&quot;sdkId&quot;:&quot;nodejs&quot;,&quot;framework&quot;:&quot;nodejs&quot;,&quot;language&quot;:&quot;nodejs&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(\\&quot;sample.jpg\\&quot;, {opacity: 50})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;sample.jpg\\&quot;, {opacity: 50})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Node.js&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_2&quot;,&quot;framework&quot;:&quot;react_2&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;sample.jpg\\&quot;).adjust(opacity(50));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;sample.jpg\\&quot;).adjust(opacity(50));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;react&quot;,&quot;framework&quot;:&quot;react&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;sample.jpg\\&quot; &gt; &lt;Transformation opacity=\\&quot;50\\&quot; \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;sample.jpg\\&quot; &gt;\\n\\t&lt;Transformation opacity=\\&quot;50\\&quot; \\\/&gt;\\n&lt;\\\/Image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;cloudinary-react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue_2&quot;,&quot;framework&quot;:&quot;vue_2&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;sample.jpg\\&quot;).adjust(opacity(50));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;sample.jpg\\&quot;).adjust(opacity(50));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/vue&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue&quot;,&quot;framework&quot;:&quot;vue&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;sample.jpg\\&quot; &gt; &lt;cld-transformation opacity=\\&quot;50\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;sample.jpg\\&quot; &gt;\\n\\t&lt;cld-transformation opacity=\\&quot;50\\&quot; \\\/&gt;\\n&lt;\\\/cld-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;cloudinary-vue&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular_2&quot;,&quot;framework&quot;:&quot;angular_2&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;sample.jpg\\&quot;).adjust(opacity(50));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;sample.jpg\\&quot;).adjust(opacity(50));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/ng&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular&quot;,&quot;framework&quot;:&quot;angular&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;sample.jpg\\&quot; &gt; &lt;cl-transformation opacity=\\&quot;50\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;sample.jpg\\&quot; &gt;\\n\\t&lt;cl-transformation opacity=\\&quot;50\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n&lt;\\\/cl-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/angular-5.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js_2&quot;,&quot;framework&quot;:&quot;js_2&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;sample.jpg\\&quot;).adjust(opacity(50));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;sample.jpg\\&quot;).adjust(opacity(50));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js&quot;,&quot;framework&quot;:&quot;js&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.imageTag(&#039;sample.jpg&#039;, {opacity: 50}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;sample.jpg&#039;, {opacity: 50}).toHtml();&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;cloudinary-core&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;python&quot;,&quot;framework&quot;:&quot;python&quot;,&quot;language&quot;:&quot;python&quot;,&quot;rawCodeSnippet&quot;:&quot;CloudinaryImage(\\&quot;sample.jpg\\&quot;).image(opacity=50)&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;sample.jpg\\&quot;).image(opacity=50)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Python&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;php_2&quot;,&quot;framework&quot;:&quot;php_2&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;(new ImageTag(&#039;sample.jpg&#039;))\\n\\t-&gt;adjust(Adjust::opacity(50));&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;sample.jpg&#039;))\\n\\t-&gt;adjust(Adjust::opacity(50));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;php&quot;,&quot;framework&quot;:&quot;php&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;sample.jpg\\&quot;, array(\\&quot;opacity\\&quot;=&gt;50))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;sample.jpg\\&quot;, array(\\&quot;opacity\\&quot;=&gt;50))&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().opacity(50)).imageTag(\\&quot;sample.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().opacity(50)).imageTag(\\&quot;sample.jpg\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Java&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;ruby&quot;,&quot;framework&quot;:&quot;ruby&quot;,&quot;language&quot;:&quot;ruby&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;sample.jpg\\&quot;, opacity: 50)&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;sample.jpg\\&quot;, opacity: 50)&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().Opacity(50)).BuildImageTag(\\&quot;sample.jpg\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Opacity(50)).BuildImageTag(\\&quot;sample.jpg\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;.NET&quot;,&quot;packageName&quot;:&quot;CloudinaryDotNet&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;dart&quot;,&quot;framework&quot;:&quot;dart&quot;,&quot;language&quot;:&quot;dart&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;sample.jpg&#039;).transformation(Transformation()\\n\\t.adjust(Adjust.opacity(50)));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;sample.jpg&#039;).transformation(Transformation()\\n\\t.adjust(Adjust.opacity(50)));&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().setOpacity(50)).generate(\\&quot;sample.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOpacity(50)).generate(\\&quot;sample.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;iOS&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;5.x&quot;},{&quot;sdkId&quot;:&quot;android&quot;,&quot;framework&quot;:&quot;android&quot;,&quot;language&quot;:&quot;android&quot;,&quot;rawCodeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().opacity(50)).generate(\\&quot;sample.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().opacity(50)).generate(\\&quot;sample.jpg\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Android&quot;,&quot;packageName&quot;:&quot;cloudinary-android&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;flutter&quot;,&quot;framework&quot;:&quot;flutter&quot;,&quot;language&quot;:&quot;flutter&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;sample.jpg&#039;).transformation(Transformation()\\n\\t.adjust(Adjust.opacity(50)));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;sample.jpg&#039;).transformation(Transformation()\\n\\t.adjust(Adjust.opacity(50)));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Flutter&quot;,&quot;packageName&quot;:&quot;cloudinary_flutter&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;kotlin&quot;,&quot;framework&quot;:&quot;kotlin&quot;,&quot;language&quot;:&quot;kotlin&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;sample.jpg\\&quot;)\\n\\t adjust(Adjust.opacity(50)) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;sample.jpg\\&quot;)\\n\\t adjust(Adjust.opacity(50)) \\n}.generate()&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Kotlin&quot;,&quot;packageName&quot;:&quot;kotlin-url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;jquery&quot;,&quot;framework&quot;:&quot;jquery&quot;,&quot;language&quot;:&quot;jquery&quot;,&quot;rawCodeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;sample.jpg\\&quot;, {opacity: 50})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;sample.jpg\\&quot;, {opacity: 50})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;jQuery&quot;,&quot;packageName&quot;:&quot;cloudinary-jquery&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_native&quot;,&quot;framework&quot;:&quot;react_native&quot;,&quot;language&quot;:&quot;react_native&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;sample.jpg\\&quot;).adjust(opacity(50));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;sample.jpg\\&quot;).adjust(opacity(50));&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\\\/o_50\\\/sample.jpg&quot;,&quot;cloud_name&quot;:&quot;demo&quot;,&quot;host&quot;:&quot;res.cloudinary.com&quot;,&quot;type&quot;:&quot;upload&quot;,&quot;resource_type&quot;:&quot;image&quot;,&quot;transformation&quot;:[{&quot;opacity&quot;:&quot;50&quot;}],&quot;transformation_string&quot;:&quot;o_50&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;sample.jpg&quot;,&quot;extension&quot;:&quot;jpg&quot;,&quot;format&quot;:&quot;jpg&quot;,&quot;format_code&quot;:true,&quot;url_code&quot;:false,&quot;signature&quot;:&quot;&quot;,&quot;private_cdn&quot;:false,&quot;result_asset_type&quot;:&quot;image&quot;}\"\n      with-url=\"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\/o_50\/sample.jpg\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/o_50\/sample.jpg\" alt=\"Flowers\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"864\" height=\"576\"\/><\/a>\n<em>Example of an image at 50 percent opacity, transformed dynamically<\/em><\/p>\n<p>Now you can forget about the compatibility issues and design the newsletter!<\/p>\n<h3>CSS Sprite Generation<\/h3>\n<p>You can combine multiple logos into a single sprite image by using Cloudinary\u2019s  <a href=\"https:\/\/cloudinary.com\/documentation\/sprite_generation\">sprite-generation capabilities<\/a>. This makes image management easier and gives better performance.<\/p>\n<p>The sprite generation feature is useful in the email footers, where you want to showcase your clientele or partners. It helps establish trust in the product you\u2019re marketing and uplifts your brand\u2019s image.<\/p>\n<p>For example, let\u2019s say you\u2019re a cloud-aggregator startup, specializing in managed CMS hosting. In other words you help setup and manage your client\u2019s websites in cloud hosting companies.<\/p>\n<p>In this role, you support the top four cloud hosting companies &#8211; AWS, Microsoft Azure, Google Cloud and IBM Cloud. You upload their logos in Cloudinary with a common tag &#8211; let\u2019s say \u201csupported_cloud\u201d.<\/p>\n<p>With Cloudinary\u2019s sprite generation feature, you could display a single image that combines all the images with the <code>supported_cloud<\/code> tag. The, with a few CSS commands, you can display the logos in various sections of the footer.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-res.cloudinary.com\/image\/upload\/w_400,c_fill\/dpr_auto\/supported_cloud.png\" alt=\"Cloud Services\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"800\" height=\"1070\"\/><\/p>\n<p>This improves user experience by reducing network overhead and bypassing download limitations.<\/p>\n<h2>On-the-Fly Image Transformation<\/h2>\n<p>Image transformation comes in handy when you need to add a watermark to your images. A classic example would be screenshots of your SaaS dashboard, used in a drip email campaign.<\/p>\n<p>And the best part? I don\u2019t have to add the watermark to the image myself. All I need to do is <a href=\"https:\/\/support.cloudinary.com\/hc\/en-us\/articles\/202521202\">configure the image URL<\/a> and Cloudinary serves the watermarked version of the image to the end user.<\/p>\n<h2>Advanced Reporting<\/h2>\n<p>Cloudinary provides an intuitive dashboard that gives you a bird\u2019s-eye view of your image stats.\n<img decoding=\"async\" src=\"https:\/\/cloudinary-res.cloudinary.com\/image\/upload\/w_600,c_fill\/dpr_auto\/Dashboard_SS.png\" alt=\"Dashboard\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1200\" height=\"580\"\/>\n<em>Screenshot of the Cloudinary Dashboard Report (Demo)<\/em><\/p>\n<p>How many images were transformed on-the-fly? Storage quota consumed? Bandwidth used? These stats are presented in a beautiful graph. You can breakdown the report by month, or more granularly at a daily level. Interestingly I find that the bandwidth consumption correlates with the open-rate of my mailing lists.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-res.cloudinary.com\/image\/upload\/w_600,c_fill\/dpr_auto\/Account_Details.png\" alt=\"Account Details\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1200\" height=\"274\"\/>\n<em>Download API information in one-click from the Cloudinary dashboard<\/em><\/p>\n<div class='c-callout  c-callout--inline-title c-callout--note'><strong class='c-callout__title'>Note:<\/strong> <p>Cloudinary displays your account details at the very top of the dashboard. Developers also can download the API access credentials in Python or YML in a single click.<\/p><\/div>\n<p>Browser-based Image Format<\/p>\n<p>This feature is, by far, one of my favorite things in Cloudinary. Browsers have evolved tremendously over the years. From being able to view simple text documents, to images and video. Today I am writing this article on Google Docs.<\/p>\n<p>Each browser now supports a distinct type of image, that\u2019s only applicable to, or supported by, that browser. For example, Google introduced the WebP image format back in 2010, which offers significant saving compared to JPEG. Only Google Chrome supports the WebP.<\/p>\n<div style=\"float: left; margin-right: 20px\">\n<a href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_300\/nice_beach.jpg\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_300\/nice_beach.jpg\" alt=\"JPG Image\" width=\"300\" height=\"201\" \/><\/a>\n<div style=\"color: #666\">16.9KB JPG<\/div>\n<\/div>\n<div style=\"float: left\">\n<a href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_300,f_auto\/nice_beach.jpg\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_300,f_auto\/nice_beach.jpg\" alt=\"WebP Automatic Image\" width=\"300\" height=\"201\" \/><\/a>\n<div style=\"color: #666\">6.9KB WebP<\/div>\n<\/div>\n<div style=\"clear: both\"><\/div>\n<p>Similarly Microsoft announced JPEG-XR format in 2009, which offers better image compression than the original JPEG. It is supported in Internet Explorer 9 or above.<\/p>\n<p>Here\u2019s how Cloudinary creates the magic. With the <em>Automatic Format Selection<\/em> feature, Cloudinary automatically serves different formats of the image, based on the requesting browser. For example, it serves the <a href=\"https:\/\/cloudinary.com\/blog\/transparent_webp_format_cdn_delivery_based_on_visitors_browsers\">WebP version<\/a> of the image to Google Chrome users and JPEG-XR version of the image to Internet Explorer 9+ users. If the browser does not support these modern image formats, the default optimized JPEG is served.<\/p>\n<p>Cloudinary does all of this on-the-fly, without us having to manually convert or upload multiple versions of the image. Simply add <code>f_auto<\/code> parameter to the requesting URL and the corresponding format would be served in the browser.<\/p>\n<p><cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[{&quot;sdkId&quot;:&quot;nodejs&quot;,&quot;framework&quot;:&quot;nodejs&quot;,&quot;language&quot;:&quot;nodejs&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(\\&quot;sample.jpg\\&quot;, {width: 300, opacity: 50, crop: \\&quot;scale\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;sample.jpg\\&quot;, {width: 300, opacity: 50, crop: \\&quot;scale\\&quot;})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Node.js&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_2&quot;,&quot;framework&quot;:&quot;react_2&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;sample.jpg\\&quot;)\\n  .resize(scale().width(300))\\n  .adjust(opacity(50));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;sample.jpg\\&quot;)\\n  .resize(scale().width(300))\\n  .adjust(opacity(50));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;react&quot;,&quot;framework&quot;:&quot;react&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;sample.jpg\\&quot; &gt; &lt;Transformation width=\\&quot;300\\&quot; opacity=\\&quot;50\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;sample.jpg\\&quot; &gt;\\n\\t&lt;Transformation width=\\&quot;300\\&quot; opacity=\\&quot;50\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt;\\n&lt;\\\/Image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;cloudinary-react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue_2&quot;,&quot;framework&quot;:&quot;vue_2&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;sample.jpg\\&quot;)\\n  .resize(scale().width(300))\\n  .adjust(opacity(50));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;sample.jpg\\&quot;)\\n  .resize(scale().width(300))\\n  .adjust(opacity(50));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/vue&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue&quot;,&quot;framework&quot;:&quot;vue&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;sample.jpg\\&quot; &gt; &lt;cld-transformation width=\\&quot;300\\&quot; opacity=\\&quot;50\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;sample.jpg\\&quot; &gt;\\n\\t&lt;cld-transformation width=\\&quot;300\\&quot; opacity=\\&quot;50\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt;\\n&lt;\\\/cld-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;cloudinary-vue&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular_2&quot;,&quot;framework&quot;:&quot;angular_2&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;sample.jpg\\&quot;)\\n  .resize(scale().width(300))\\n  .adjust(opacity(50));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;sample.jpg\\&quot;)\\n  .resize(scale().width(300))\\n  .adjust(opacity(50));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/ng&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular&quot;,&quot;framework&quot;:&quot;angular&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;sample.jpg\\&quot; &gt; &lt;cl-transformation width=\\&quot;300\\&quot; opacity=\\&quot;50\\&quot; crop=\\&quot;scale\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;sample.jpg\\&quot; &gt;\\n\\t&lt;cl-transformation width=\\&quot;300\\&quot; opacity=\\&quot;50\\&quot; crop=\\&quot;scale\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n&lt;\\\/cl-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/angular-5.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js_2&quot;,&quot;framework&quot;:&quot;js_2&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;sample.jpg\\&quot;)\\n  .resize(scale().width(300))\\n  .adjust(opacity(50));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;sample.jpg\\&quot;)\\n  .resize(scale().width(300))\\n  .adjust(opacity(50));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js&quot;,&quot;framework&quot;:&quot;js&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.imageTag(&#039;sample.jpg&#039;, {width: 300, opacity: 50, crop: \\&quot;scale\\&quot;}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;sample.jpg&#039;, {width: 300, opacity: 50, crop: \\&quot;scale\\&quot;}).toHtml();&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;cloudinary-core&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;python&quot;,&quot;framework&quot;:&quot;python&quot;,&quot;language&quot;:&quot;python&quot;,&quot;rawCodeSnippet&quot;:&quot;CloudinaryImage(\\&quot;sample.jpg\\&quot;).image(width=300, opacity=50, crop=\\&quot;scale\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;sample.jpg\\&quot;).image(width=300, opacity=50, crop=\\&quot;scale\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Python&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;php_2&quot;,&quot;framework&quot;:&quot;php_2&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;(new ImageTag(&#039;sample.jpg&#039;))\\n\\t-&gt;resize(Resize::scale()-&gt;width(300))\\n\\t-&gt;adjust(Adjust::opacity(50));&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;sample.jpg&#039;))\\n\\t-&gt;resize(Resize::scale()-&gt;width(300))\\n\\t-&gt;adjust(Adjust::opacity(50));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;php&quot;,&quot;framework&quot;:&quot;php&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;sample.jpg\\&quot;, array(\\&quot;width\\&quot;=&gt;300, \\&quot;opacity\\&quot;=&gt;50, \\&quot;crop\\&quot;=&gt;\\&quot;scale\\&quot;))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;sample.jpg\\&quot;, array(\\&quot;width\\&quot;=&gt;300, \\&quot;opacity\\&quot;=&gt;50, \\&quot;crop\\&quot;=&gt;\\&quot;scale\\&quot;))&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;java&quot;,&quot;framework&quot;:&quot;java&quot;,&quot;language&quot;:&quot;java&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().width(300).opacity(50).crop(\\&quot;scale\\&quot;)).imageTag(\\&quot;sample.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().width(300).opacity(50).crop(\\&quot;scale\\&quot;)).imageTag(\\&quot;sample.jpg\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Java&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;ruby&quot;,&quot;framework&quot;:&quot;ruby&quot;,&quot;language&quot;:&quot;ruby&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;sample.jpg\\&quot;, width: 300, opacity: 50, crop: \\&quot;scale\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;sample.jpg\\&quot;, width: 300, opacity: 50, crop: \\&quot;scale\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Ruby&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;csharp&quot;,&quot;framework&quot;:&quot;csharp&quot;,&quot;language&quot;:&quot;csharp&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(300).Opacity(50).Crop(\\&quot;scale\\&quot;)).BuildImageTag(\\&quot;sample.jpg\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(300).Opacity(50).Crop(\\&quot;scale\\&quot;)).BuildImageTag(\\&quot;sample.jpg\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;.NET&quot;,&quot;packageName&quot;:&quot;CloudinaryDotNet&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;dart&quot;,&quot;framework&quot;:&quot;dart&quot;,&quot;language&quot;:&quot;dart&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;sample.jpg&#039;).transformation(Transformation()\\n\\t.resize(Resize.scale().width(300))\\n\\t.adjust(Adjust.opacity(50)));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;sample.jpg&#039;).transformation(Transformation()\\n\\t.resize(Resize.scale().width(300))\\n\\t.adjust(Adjust.opacity(50)));&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(300).setOpacity(50).setCrop(\\&quot;scale\\&quot;)).generate(\\&quot;sample.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(300).setOpacity(50).setCrop(\\&quot;scale\\&quot;)).generate(\\&quot;sample.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;iOS&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;5.x&quot;},{&quot;sdkId&quot;:&quot;android&quot;,&quot;framework&quot;:&quot;android&quot;,&quot;language&quot;:&quot;android&quot;,&quot;rawCodeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().width(300).opacity(50).crop(\\&quot;scale\\&quot;)).generate(\\&quot;sample.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().width(300).opacity(50).crop(\\&quot;scale\\&quot;)).generate(\\&quot;sample.jpg\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Android&quot;,&quot;packageName&quot;:&quot;cloudinary-android&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;flutter&quot;,&quot;framework&quot;:&quot;flutter&quot;,&quot;language&quot;:&quot;flutter&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;sample.jpg&#039;).transformation(Transformation()\\n\\t.resize(Resize.scale().width(300))\\n\\t.adjust(Adjust.opacity(50)));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;sample.jpg&#039;).transformation(Transformation()\\n\\t.resize(Resize.scale().width(300))\\n\\t.adjust(Adjust.opacity(50)));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Flutter&quot;,&quot;packageName&quot;:&quot;cloudinary_flutter&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;kotlin&quot;,&quot;framework&quot;:&quot;kotlin&quot;,&quot;language&quot;:&quot;kotlin&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;sample.jpg\\&quot;)\\n\\t resize(Resize.scale() { width(300) })\\n\\t adjust(Adjust.opacity(50)) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;sample.jpg\\&quot;)\\n\\t resize(Resize.scale() { width(300) })\\n\\t adjust(Adjust.opacity(50)) \\n}.generate()&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Kotlin&quot;,&quot;packageName&quot;:&quot;kotlin-url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;jquery&quot;,&quot;framework&quot;:&quot;jquery&quot;,&quot;language&quot;:&quot;jquery&quot;,&quot;rawCodeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;sample.jpg\\&quot;, {width: 300, opacity: 50, crop: \\&quot;scale\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;sample.jpg\\&quot;, {width: 300, opacity: 50, crop: \\&quot;scale\\&quot;})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;jQuery&quot;,&quot;packageName&quot;:&quot;cloudinary-jquery&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_native&quot;,&quot;framework&quot;:&quot;react_native&quot;,&quot;language&quot;:&quot;react_native&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;sample.jpg\\&quot;)\\n  .resize(scale().width(300))\\n  .adjust(opacity(50));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;sample.jpg\\&quot;)\\n  .resize(scale().width(300))\\n  .adjust(opacity(50));&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_300,o_50\\\/sample.jpg&quot;,&quot;cloud_name&quot;:&quot;demo&quot;,&quot;host&quot;:&quot;res.cloudinary.com&quot;,&quot;type&quot;:&quot;upload&quot;,&quot;resource_type&quot;:&quot;image&quot;,&quot;transformation&quot;:[{&quot;width&quot;:&quot;300&quot;,&quot;opacity&quot;:&quot;50&quot;}],&quot;transformation_string&quot;:&quot;w_300,o_50&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;sample.jpg&quot;,&quot;extension&quot;:&quot;jpg&quot;,&quot;format&quot;:&quot;jpg&quot;,&quot;format_code&quot;:true,&quot;url_code&quot;:false,&quot;signature&quot;:&quot;&quot;,&quot;private_cdn&quot;:false,&quot;result_asset_type&quot;:&quot;image&quot;}\"\n      with-url=\"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_300,o_50\/sample.jpg\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_300,o_50\/sample.jpg\" alt=\"Flowers\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"300\" height=\"200\"\/><\/a>\n<em>Using the Automatic Format Selection feature in Cloudinary, this same image would be served as WebP in Google Chrome or as JPEG in Firefox.<\/em><\/p>\n<p>Browser-dependent image format rendering <a href=\"https:\/\/cloudinary.com\/blog\/how_to_support_webp_images_save_bandwidth_and_improve_user_performance\">saves a lot of bandwidth<\/a> when the email is viewed in a web browser, or when the HTML version of the email is viewed online.<\/p>\n<h2>Compress GIFs On-the-Fly<\/h2>\n<p>We started this article with the premise that attention is the most valuable currency in today\u2019s world. When it comes to email marketing, getting someone to open the email depends on the quality of the subject line.<\/p>\n<p>Our goal is to grab the user\u2019s attention, right after he or she opens the email. That\u2019s where an image comes in. A good header image can do wonders. What if we could take that one step further? What if we could crunch more relevant information into a single place, without requiring the user to scroll down?<\/p>\n<p>That\u2019s where videos come in. But unfortunately, videos are not supported in emails. That\u2019s why you should use GIFs. You can keep the same information, and do away with the heavy size or the technical complexities of implementing the video.<\/p>\n<p>Cloudinary supports <a href=\"https:\/\/cloudinary.com\/documentation\/image_transformations#managing_animated_gifs\">animated GIFs<\/a>, and with a few parameters, you can create winning emails!<\/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;kitten_fighting.gif\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;kitten_fighting.gif\\&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;kitten_fighting.gif\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;kitten_fighting.gif\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;react&quot;,&quot;framework&quot;:&quot;react&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;kitten_fighting.gif\\&quot; &gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;kitten_fighting.gif\\&quot; &gt;\\n\\n&lt;\\\/Image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;cloudinary-react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue_2&quot;,&quot;framework&quot;:&quot;vue_2&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;kitten_fighting.gif\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;kitten_fighting.gif\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/vue&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue&quot;,&quot;framework&quot;:&quot;vue&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;kitten_fighting.gif\\&quot; &gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;kitten_fighting.gif\\&quot; &gt;\\n\\n&lt;\\\/cld-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;cloudinary-vue&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular_2&quot;,&quot;framework&quot;:&quot;angular_2&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;kitten_fighting.gif\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;kitten_fighting.gif\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/ng&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular&quot;,&quot;framework&quot;:&quot;angular&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;kitten_fighting.gif\\&quot; &gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;kitten_fighting.gif\\&quot; &gt;\\n\\n&lt;\\\/cl-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/angular-5.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js_2&quot;,&quot;framework&quot;:&quot;js_2&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;kitten_fighting.gif\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;kitten_fighting.gif\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js&quot;,&quot;framework&quot;:&quot;js&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.imageTag(&#039;kitten_fighting.gif&#039;).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;kitten_fighting.gif&#039;).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;kitten_fighting.gif\\&quot;).image()&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;kitten_fighting.gif\\&quot;).image()&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;kitten_fighting.gif&#039;));&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;kitten_fighting.gif&#039;));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;php&quot;,&quot;framework&quot;:&quot;php&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;kitten_fighting.gif\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;kitten_fighting.gif\\&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().imageTag(\\&quot;kitten_fighting.gif\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().imageTag(\\&quot;kitten_fighting.gif\\&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;kitten_fighting.gif\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;kitten_fighting.gif\\&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.BuildImageTag(\\&quot;kitten_fighting.gif\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.BuildImageTag(\\&quot;kitten_fighting.gif\\&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;kitten_fighting.gif&#039;).transformation(Transformation());&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;kitten_fighting.gif&#039;).transformation(Transformation());&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Dart&quot;,&quot;packageName&quot;:&quot;cloudinary_dart&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;swift&quot;,&quot;framework&quot;:&quot;swift&quot;,&quot;language&quot;:&quot;swift&quot;,&quot;rawCodeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().generate(\\&quot;kitten_fighting.gif\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().generate(\\&quot;kitten_fighting.gif\\&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().generate(\\&quot;kitten_fighting.gif\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().generate(\\&quot;kitten_fighting.gif\\&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;kitten_fighting.gif&#039;).transformation(Transformation());&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;kitten_fighting.gif&#039;).transformation(Transformation());&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Flutter&quot;,&quot;packageName&quot;:&quot;cloudinary_flutter&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;kotlin&quot;,&quot;framework&quot;:&quot;kotlin&quot;,&quot;language&quot;:&quot;kotlin&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;kitten_fighting.gif\\&quot;) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;kitten_fighting.gif\\&quot;) \\n}.generate()&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Kotlin&quot;,&quot;packageName&quot;:&quot;kotlin-url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;jquery&quot;,&quot;framework&quot;:&quot;jquery&quot;,&quot;language&quot;:&quot;jquery&quot;,&quot;rawCodeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;kitten_fighting.gif\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;kitten_fighting.gif\\&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;kitten_fighting.gif\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;kitten_fighting.gif\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React Native&quot;,&quot;packageName&quot;:&quot;cloudinary-react-native&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;}]\"\n      parsed-url=\"{&quot;url&quot;:&quot;https:\\\/\\\/res.cloudinary.com\\\/demo\\\/image\\\/upload\\\/kitten_fighting.gif&quot;,&quot;cloud_name&quot;:&quot;demo&quot;,&quot;host&quot;:&quot;res.cloudinary.com&quot;,&quot;type&quot;:&quot;upload&quot;,&quot;resource_type&quot;:&quot;image&quot;,&quot;transformation&quot;:[],&quot;transformation_string&quot;:&quot;&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;kitten_fighting.gif&quot;,&quot;extension&quot;:&quot;gif&quot;,&quot;format&quot;:&quot;gif&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\/kitten_fighting.gif\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/kitten_fighting.gif\" alt=\"Kitten\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"320\" height=\"180\"\/><\/a>\n<em>Animated GIF served by Cloudinary<\/em><\/p>\n<p>You can apply almost all the transformation effects to the GIFs (plus a few special ones). In our example, let\u2019s serve the browser optimized format of the GIF.<\/p>\n<p>Consider the following URL:\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;kitten_fighting.gif\\&quot;, {fetch_format: \\&quot;auto\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;kitten_fighting.gif\\&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;kitten_fighting.gif\\&quot;).delivery(format(auto()));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;kitten_fighting.gif\\&quot;).delivery(format(auto()));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;react&quot;,&quot;framework&quot;:&quot;react&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;kitten_fighting.gif\\&quot; &gt; &lt;Transformation fetchFormat=\\&quot;auto\\&quot; \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;kitten_fighting.gif\\&quot; &gt;\\n\\t&lt;Transformation 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;kitten_fighting.gif\\&quot;).delivery(format(auto()));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;kitten_fighting.gif\\&quot;).delivery(format(auto()));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/vue&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue&quot;,&quot;framework&quot;:&quot;vue&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;kitten_fighting.gif\\&quot; &gt; &lt;cld-transformation fetch-format=\\&quot;auto\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;kitten_fighting.gif\\&quot; &gt;\\n\\t&lt;cld-transformation 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;kitten_fighting.gif\\&quot;).delivery(format(auto()));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;kitten_fighting.gif\\&quot;).delivery(format(auto()));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/ng&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular&quot;,&quot;framework&quot;:&quot;angular&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;kitten_fighting.gif\\&quot; &gt; &lt;cl-transformation 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;kitten_fighting.gif\\&quot; &gt;\\n\\t&lt;cl-transformation 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;kitten_fighting.gif\\&quot;).delivery(format(auto()));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;kitten_fighting.gif\\&quot;).delivery(format(auto()));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js&quot;,&quot;framework&quot;:&quot;js&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.imageTag(&#039;kitten_fighting.gif&#039;, {fetchFormat: \\&quot;auto\\&quot;}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;kitten_fighting.gif&#039;, {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;kitten_fighting.gif\\&quot;).image(fetch_format=\\&quot;auto\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;kitten_fighting.gif\\&quot;).image(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;kitten_fighting.gif&#039;))\\n\\t-&gt;delivery(Delivery::format(\\n\\tFormat::auto()));&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;kitten_fighting.gif&#039;))\\n\\t-&gt;delivery(Delivery::format(\\n\\tFormat::auto()));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;php&quot;,&quot;framework&quot;:&quot;php&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;kitten_fighting.gif\\&quot;, array(\\&quot;fetch_format\\&quot;=&gt;\\&quot;auto\\&quot;))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;kitten_fighting.gif\\&quot;, array(\\&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().fetchFormat(\\&quot;auto\\&quot;)).imageTag(\\&quot;kitten_fighting.gif\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().fetchFormat(\\&quot;auto\\&quot;)).imageTag(\\&quot;kitten_fighting.gif\\&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;kitten_fighting.gif\\&quot;, fetch_format: \\&quot;auto\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;kitten_fighting.gif\\&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().FetchFormat(\\&quot;auto\\&quot;)).BuildImageTag(\\&quot;kitten_fighting.gif\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().FetchFormat(\\&quot;auto\\&quot;)).BuildImageTag(\\&quot;kitten_fighting.gif\\&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;kitten_fighting.gif&#039;).transformation(Transformation()\\n\\t.delivery(Delivery.format(\\n\\tFormat.auto())));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;kitten_fighting.gif&#039;).transformation(Transformation()\\n\\t.delivery(Delivery.format(\\n\\tFormat.auto())));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Dart&quot;,&quot;packageName&quot;:&quot;cloudinary_dart&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;swift&quot;,&quot;framework&quot;:&quot;swift&quot;,&quot;language&quot;:&quot;swift&quot;,&quot;rawCodeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setFetchFormat(\\&quot;auto\\&quot;)).generate(\\&quot;kitten_fighting.gif\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setFetchFormat(\\&quot;auto\\&quot;)).generate(\\&quot;kitten_fighting.gif\\&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().fetchFormat(\\&quot;auto\\&quot;)).generate(\\&quot;kitten_fighting.gif\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().fetchFormat(\\&quot;auto\\&quot;)).generate(\\&quot;kitten_fighting.gif\\&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;kitten_fighting.gif&#039;).transformation(Transformation()\\n\\t.delivery(Delivery.format(\\n\\tFormat.auto())));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;kitten_fighting.gif&#039;).transformation(Transformation()\\n\\t.delivery(Delivery.format(\\n\\tFormat.auto())));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Flutter&quot;,&quot;packageName&quot;:&quot;cloudinary_flutter&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;kotlin&quot;,&quot;framework&quot;:&quot;kotlin&quot;,&quot;language&quot;:&quot;kotlin&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;kitten_fighting.gif\\&quot;)\\n\\t delivery(Delivery.format(\\n\\tFormat.auto())) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;kitten_fighting.gif\\&quot;)\\n\\t delivery(Delivery.format(\\n\\tFormat.auto())) \\n}.generate()&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Kotlin&quot;,&quot;packageName&quot;:&quot;kotlin-url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;jquery&quot;,&quot;framework&quot;:&quot;jquery&quot;,&quot;language&quot;:&quot;jquery&quot;,&quot;rawCodeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;kitten_fighting.gif\\&quot;, {fetch_format: \\&quot;auto\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;kitten_fighting.gif\\&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;kitten_fighting.gif\\&quot;).delivery(format(auto()));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;kitten_fighting.gif\\&quot;).delivery(format(auto()));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React Native&quot;,&quot;packageName&quot;:&quot;cloudinary-react-native&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;}]\"\n      parsed-url=\"{&quot;url&quot;:&quot;https:\\\/\\\/res.cloudinary.com\\\/demo\\\/image\\\/upload\\\/f_auto\\\/kitten_fighting.gif&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;format&quot;:&quot;auto&quot;}],&quot;transformation_string&quot;:&quot;f_auto&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;kitten_fighting.gif&quot;,&quot;extension&quot;:&quot;gif&quot;,&quot;format&quot;:&quot;gif&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\/f_auto\/kitten_fighting.gif\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/f_auto\/kitten_fighting.gif\" alt=\"Kitten\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"320\" height=\"180\"\/><\/a><\/p>\n<p>If you\u2019re in Google Chrome or Opera, the <code>f_auto<\/code> parameter would have converted the <a href=\"https:\/\/cloudinary.com\/tools\/compress-gif\">GIF<\/a> into an animated WebP file.<\/p>\n<h2>The Round-Up<\/h2>\n<p>Here\u2019s a quick round-up of what we\u2019ve covered so far:<\/p>\n<ul>\n<li>Cloudinary automatically optimizes all the images on-the-fly.<\/li>\n<li>You can resize and apply other on-demand transformation effects to your images.<\/li>\n<li>You can change the image, while retaining the same URL.<\/li>\n<li>Cloudinary\u2019s opacity transformation and sprite generation features enables you to seamlessly design email campaigns that looks the same across all clients.<\/li>\n<li>With on-the-fly image transformation, you can generate watermarked versions of images, which are excellent to prevent email spams.<\/li>\n<li>Cloudinary\u2019s advanced analytics and reporting enables you to track your usage at all times.<\/li>\n<li>Browser-based image format reporting delivers the image in the most optimal format, that is supported by the web browser.<\/li>\n<li>Cloudinary also can optimize and apply various transformation effects to animated GIF images.<\/li>\n<\/ul>\n<p>We\u2019ve only begun to learn about Cloudinary\u2019s amazing suite of image transformation features. What we\u2019ve discussed in the context of email marketing barely scratches the surface of the robust feature set offered by Cloudinary.<\/p>\n<p>The good news is that all of these features would be applicable in multiple scenarios, in one way or the other. Did you know that Cloudinary serves these images via a <a href=\"https:\/\/cloudinary.com\/blog\/image_optimization_for_websites_beautiful_pages_that_load_quickly\">global network<\/a> of content delivery networks such as Akamai, Amazon Cloudfront and Fastly?<\/p>\n<p>If you are looking to take your email marketing to the next level, Cloudinary is an excellent partner. The free Cloudinary account provides you enough quota to test the service and even possibly launch a trial email campaign.<\/p>\n<p>Have you considered using Cloudinary in your email marketing programme? Let us know!<\/p>\n<table>\n<tr>\n<td style = \"padding: 5px;\">\n<img decoding=\"async\" src=\"https:\/\/cloudinary-res.cloudinary.com\/image\/upload\/c_thumb,w_200\/Sourav_Kundu.jpg\" alt=\"Sourav Kundu\" title=\"Sourav Kundu\"><\/img><\/td>\n<td style = \"padding: 10px;\"><i><a href=\"https:\/\/twitter.com\/souravify\" target=\"_new\"> Sourav Kundu<\/a> is an avid marketer with a passion for all things digital. From email marketing to app re-engagement campaigns, he loves putting on multiple hats during the workday. He&#8217;s available for consultation over <a href=\"https:\/\/twitter.com\/souravify\" target=\"_new\"> Twitter<\/a> or his <a href=\"http:\/\/souravkundu.in\/?utm_sourav=cloudinary.com\" target=\"_new\"> website.<\/a><\/i><\/td>\n<\/tr>\n<\/table>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":21578,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[128,165,251],"class_list":["post-21577","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-gif","tag-image-transformation","tag-responsive-images"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Embed Images in Email Campaigns at Scale<\/title>\n<meta name=\"description\" content=\"Learn how to manage, optimize and deliver images in very large scale email campaigns - with code snippets and visual examples\" \/>\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\/embed_images_in_email_campaigns_at_scale\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Embed Images in Email Campaigns at Scale\" \/>\n<meta property=\"og:description\" content=\"Learn how to manage, optimize and deliver images in very large scale email campaigns - with code snippets and visual examples\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/embed_images_in_email_campaigns_at_scale\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2017-08-21T18:20:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-03-23T18:57:15+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1649724017\/Web_Assets\/blog\/Email_Marketing_Blog_Image_2000x1100\/Email_Marketing_Blog_Image_2000x1100-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\/embed_images_in_email_campaigns_at_scale#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/embed_images_in_email_campaigns_at_scale\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Embed Images in Email Campaigns at Scale\",\"datePublished\":\"2017-08-21T18:20:36+00:00\",\"dateModified\":\"2025-03-23T18:57:15+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/embed_images_in_email_campaigns_at_scale\"},\"wordCount\":7,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/embed_images_in_email_campaigns_at_scale#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649724017\/Web_Assets\/blog\/Email_Marketing_Blog_Image_2000x1100\/Email_Marketing_Blog_Image_2000x1100.png?_i=AA\",\"keywords\":[\"GIF\",\"Image Transformation\",\"Responsive Images\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2017\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/embed_images_in_email_campaigns_at_scale\",\"url\":\"https:\/\/cloudinary.com\/blog\/embed_images_in_email_campaigns_at_scale\",\"name\":\"Embed Images in Email Campaigns at Scale\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/embed_images_in_email_campaigns_at_scale#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/embed_images_in_email_campaigns_at_scale#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649724017\/Web_Assets\/blog\/Email_Marketing_Blog_Image_2000x1100\/Email_Marketing_Blog_Image_2000x1100.png?_i=AA\",\"datePublished\":\"2017-08-21T18:20:36+00:00\",\"dateModified\":\"2025-03-23T18:57:15+00:00\",\"description\":\"Learn how to manage, optimize and deliver images in very large scale email campaigns - with code snippets and visual examples\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/embed_images_in_email_campaigns_at_scale#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/embed_images_in_email_campaigns_at_scale\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/embed_images_in_email_campaigns_at_scale#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649724017\/Web_Assets\/blog\/Email_Marketing_Blog_Image_2000x1100\/Email_Marketing_Blog_Image_2000x1100.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649724017\/Web_Assets\/blog\/Email_Marketing_Blog_Image_2000x1100\/Email_Marketing_Blog_Image_2000x1100.png?_i=AA\",\"width\":1540,\"height\":847},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/embed_images_in_email_campaigns_at_scale#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Embed Images in Email Campaigns at Scale\"}]},{\"@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":"Embed Images in Email Campaigns at Scale","description":"Learn how to manage, optimize and deliver images in very large scale email campaigns - with code snippets and visual examples","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\/embed_images_in_email_campaigns_at_scale","og_locale":"en_US","og_type":"article","og_title":"Embed Images in Email Campaigns at Scale","og_description":"Learn how to manage, optimize and deliver images in very large scale email campaigns - with code snippets and visual examples","og_url":"https:\/\/cloudinary.com\/blog\/embed_images_in_email_campaigns_at_scale","og_site_name":"Cloudinary Blog","article_published_time":"2017-08-21T18:20:36+00:00","article_modified_time":"2025-03-23T18:57:15+00:00","og_image":[{"width":1540,"height":847,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1649724017\/Web_Assets\/blog\/Email_Marketing_Blog_Image_2000x1100\/Email_Marketing_Blog_Image_2000x1100-png?_i=AA","type":"image\/png"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/embed_images_in_email_campaigns_at_scale#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/embed_images_in_email_campaigns_at_scale"},"author":{"name":"","@id":""},"headline":"Embed Images in Email Campaigns at Scale","datePublished":"2017-08-21T18:20:36+00:00","dateModified":"2025-03-23T18:57:15+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/embed_images_in_email_campaigns_at_scale"},"wordCount":7,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/embed_images_in_email_campaigns_at_scale#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649724017\/Web_Assets\/blog\/Email_Marketing_Blog_Image_2000x1100\/Email_Marketing_Blog_Image_2000x1100.png?_i=AA","keywords":["GIF","Image Transformation","Responsive Images"],"inLanguage":"en-US","copyrightYear":"2017","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/embed_images_in_email_campaigns_at_scale","url":"https:\/\/cloudinary.com\/blog\/embed_images_in_email_campaigns_at_scale","name":"Embed Images in Email Campaigns at Scale","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/embed_images_in_email_campaigns_at_scale#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/embed_images_in_email_campaigns_at_scale#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649724017\/Web_Assets\/blog\/Email_Marketing_Blog_Image_2000x1100\/Email_Marketing_Blog_Image_2000x1100.png?_i=AA","datePublished":"2017-08-21T18:20:36+00:00","dateModified":"2025-03-23T18:57:15+00:00","description":"Learn how to manage, optimize and deliver images in very large scale email campaigns - with code snippets and visual examples","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/embed_images_in_email_campaigns_at_scale#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/embed_images_in_email_campaigns_at_scale"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/embed_images_in_email_campaigns_at_scale#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649724017\/Web_Assets\/blog\/Email_Marketing_Blog_Image_2000x1100\/Email_Marketing_Blog_Image_2000x1100.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649724017\/Web_Assets\/blog\/Email_Marketing_Blog_Image_2000x1100\/Email_Marketing_Blog_Image_2000x1100.png?_i=AA","width":1540,"height":847},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/embed_images_in_email_campaigns_at_scale#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Embed Images in Email Campaigns at Scale"}]},{"@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\/v1649724017\/Web_Assets\/blog\/Email_Marketing_Blog_Image_2000x1100\/Email_Marketing_Blog_Image_2000x1100.png?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21577","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=21577"}],"version-history":[{"count":6,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21577\/revisions"}],"predecessor-version":[{"id":37243,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21577\/revisions\/37243"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/21578"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=21577"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=21577"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=21577"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}