{"id":21776,"date":"2020-04-25T10:35:00","date_gmt":"2020-04-25T10:35:00","guid":{"rendered":"http:\/\/low_quality_image_placeholders_lqip_explained"},"modified":"2025-02-16T07:39:42","modified_gmt":"2025-02-16T15:39:42","slug":"low_quality_image_placeholders_lqip_explained","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/low_quality_image_placeholders_lqip_explained","title":{"rendered":"Low Quality Image Placeholders (LQIP) Explained"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>Low-quality image placeholders (LQIPs) were originally introduced to enable webpages to load correctly in an orderly manner, displaying ultra small, blurry images while the actual version is loading, which works well with lazy loading in JavaScript. Then came a dilemma: should we add more JavaScript to help images load faster even though we must wait for the same JavaScript to run before they can load? It was a chicken-and-egg situation.<\/p>\n<p>Only scant guidelines on LQIPs are available on the web. In this post, partly based on the feedback we\u2019ve collected from the Cloudinary community, we\u2019ll describe image-placeholder generators, use cases for LQIPs, and the ways in which to leverage LQIPs to accelerate page loads and optimize user experience through Cloudinary\u2019s built-in capabilities.<\/p>\n<p>This is part of a series of articles about <a href=\"https:\/\/cloudinary.com\/blog\/image_optimization_for_websites_beautiful_pages_that_load_quickly\">Image Optimization<\/a>.<\/p>\n<h2>The Current Options<\/h2>\n<p>An ongoing debate centers on the best way for delivering optimal image performance at scale and the role JavaScript could play. Here are the options:<\/p>\n<ul>\n<li>Leverage HTML5\u2019s image attributes, such as <code>srcset<\/code> and <code>sizes<\/code>, to make images responsive. That is, trust the browser to make the right decision according to image densities. The result, however, is a complete lack of control over such elements as device pixel ratios (DPRs). Given that different browsers handle <code>srcset<\/code> differently, scaling and delivering a consistent cross-browser experience is tough to do. Also, applying inline HTML code to each and every image is a labor-intensive chore.<\/li>\n<li>Implement on the server side <a href=\"https:\/\/developers.google.com\/web\/updates\/2015\/09\/automating-resource-selection-with-client-hints\">Google\u2019s HTTP Client Hints<\/a>, which were at one time touted as the Holy Grail of automation for image-optimization strategies. However, Client Hints are currently supported by the Chrome and Opera browsers only. As soon as they work on other major browsers, Client Hints will most likely become the golden standard. We\u2019re keeping an eye on the developments.<\/li>\n<li>Use a client-side, JavaScript-based, responsive library to capture all the pertinent details, such as an image\u2019s width and height, DPR, viewport, and the browser\u2019s user agent, subsequently passing them to Cloudinary. Cloudinary then <a href=\"https:\/\/cloudinary.com\/documentation\/responsive_images#automating_responsive_images_with_javascript\">transforms<\/a> the master image on the fly to the perfect size and characteristics\u2014 irrespective of the device, window size, orientation, or resolution.<\/li>\n<\/ul>\n<p>For more details, check out the free Cloudinary tool <a href=\"http:\/\/www.responsivebreakpoints.com\/\">Responsive Image Breakpoints Generator<\/a>.<\/p>\n<h2>The JavaScript Options for Generating LQIPs<\/h2>\n<p>Given the pros and cons of the above solutions, JavaScript is the best and most reliable option for enabling LQIPs to load while the actual images are preloading in the background. When preloading is complete, JavaScript swaps the placeholders with the actual images.<\/p>\n<p>For responsive designs and images, <strong>do not<\/strong> display white space instead of placeholders during preloading because layout changes and content shifts make for poor user experience and performance. Generic image placeholders, which lack appeal and which do not alert the audience that content is still loading, are far from being ideal, too.<\/p>\n<p>Instead, display either of the following as an LQIP:<\/p>\n<ul>\n<li>A simple, solid-color image (perhaps based on the predominant color in the discovered palette) with a gradient option to fill in the color during preloading. Note this handy tip: Cloudinary <a href=\"https:\/\/cloudinary.com\/blog\/how_to_pad_images_with_automatic_color_selection\">automatically detects and maps out<\/a> (even for advanced search) the color palette and the predominant colors so that you can perform such transformations on the fly.<\/li>\n<li>A Scalable Vector Graphics (SVG) object, aka SVG image placeholders (SQIP), as defined in the following code:<\/li>\n<\/ul>\n<pre class=\"js-syntax-highlighted\"><code>&lt;img src=\u201csample.jpg\u201d\n\tstyle=&quot;background-size: cover; background-image:\n\turl(data:image\/svg+xml;base64,&lt;svg text&gt;);&quot;\n<\/code><\/pre>\n<div class='c-callout  c-callout--inline-title c-callout--note'><strong class='c-callout__title'>Note:<\/strong> <p>Though an elegant approach with a great user experience and an accurate representation of the original image at infinitely smaller payloads, SQIPs are not scalable, requiring preparation work, numerous resources, and processing time. For more insight, read this : <a href=\"https:\/\/jmperezperez.com\/svg-placeholders\/\">article<\/a>.<\/p><\/div>\n<h2>The Recommended Option for Generating LQIPs<\/h2>\n<p>Cloudinary offers an effortless and efficient way of generating LQIPs. All you need to do is upload an image to Cloudinary and add the <code>f_auto<\/code> parameter to the URL. Cloudinary would then transform the image through automation in real time.<\/p>\n<p>For a scaled-up, tiny image compressed by Cloudinary for quality, potentially also chroma subsampled, blurred, or <a href=\"https:\/\/cloudinary.com\/glossary\/pixelization\">pixelated<\/a>, Cloudinary also delivers color blending, such as that in <a href=\"https:\/\/cloudinary.com\/tools\/compress-webp\">WebP<\/a> format. You can then apply color effects: grayscale, black and white, colorized, or various hues.<\/p>\n<p>Give it a try: start by <a href=\"https:\/\/www.cloudinary.com\/signup\">registering for a free account on Cloudinary<\/a>.<\/p>\n<h2>Examples<\/h2>\n<p>Here is the original version of a JPEG with a width of 640 px. and a weight of 40 KB.<\/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;string_1.jpg\\&quot;, {width: 640, crop: \\&quot;scale\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;string_1.jpg\\&quot;, {width: 640, 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;string_1.jpg\\&quot;).resize(scale().width(640));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;string_1.jpg\\&quot;).resize(scale().width(640));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;react&quot;,&quot;framework&quot;:&quot;react&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;string_1.jpg\\&quot; &gt; &lt;Transformation width=\\&quot;640\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;string_1.jpg\\&quot; &gt;\\n\\t&lt;Transformation width=\\&quot;640\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt;\\n&lt;\\\/Image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;cloudinary-react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue_2&quot;,&quot;framework&quot;:&quot;vue_2&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;string_1.jpg\\&quot;).resize(scale().width(640));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;string_1.jpg\\&quot;).resize(scale().width(640));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/vue&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue&quot;,&quot;framework&quot;:&quot;vue&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;string_1.jpg\\&quot; &gt; &lt;cld-transformation width=\\&quot;640\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;string_1.jpg\\&quot; &gt;\\n\\t&lt;cld-transformation width=\\&quot;640\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt;\\n&lt;\\\/cld-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;cloudinary-vue&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular_2&quot;,&quot;framework&quot;:&quot;angular_2&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;string_1.jpg\\&quot;).resize(scale().width(640));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;string_1.jpg\\&quot;).resize(scale().width(640));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/ng&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular&quot;,&quot;framework&quot;:&quot;angular&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;string_1.jpg\\&quot; &gt; &lt;cl-transformation width=\\&quot;640\\&quot; crop=\\&quot;scale\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;string_1.jpg\\&quot; &gt;\\n\\t&lt;cl-transformation width=\\&quot;640\\&quot; crop=\\&quot;scale\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n&lt;\\\/cl-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/angular-5.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js_2&quot;,&quot;framework&quot;:&quot;js_2&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;string_1.jpg\\&quot;).resize(scale().width(640));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;string_1.jpg\\&quot;).resize(scale().width(640));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js&quot;,&quot;framework&quot;:&quot;js&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.imageTag(&#039;string_1.jpg&#039;, {width: 640, crop: \\&quot;scale\\&quot;}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;string_1.jpg&#039;, {width: 640, 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;string_1.jpg\\&quot;).image(width=640, crop=\\&quot;scale\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;string_1.jpg\\&quot;).image(width=640, 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;string_1.jpg&#039;))\\n\\t-&gt;resize(Resize::scale()-&gt;width(640));&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;string_1.jpg&#039;))\\n\\t-&gt;resize(Resize::scale()-&gt;width(640));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;php&quot;,&quot;framework&quot;:&quot;php&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;string_1.jpg\\&quot;, array(\\&quot;width\\&quot;=&gt;640, \\&quot;crop\\&quot;=&gt;\\&quot;scale\\&quot;))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;string_1.jpg\\&quot;, array(\\&quot;width\\&quot;=&gt;640, \\&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(640).crop(\\&quot;scale\\&quot;)).imageTag(\\&quot;string_1.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().width(640).crop(\\&quot;scale\\&quot;)).imageTag(\\&quot;string_1.jpg\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Java&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;ruby&quot;,&quot;framework&quot;:&quot;ruby&quot;,&quot;language&quot;:&quot;ruby&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;string_1.jpg\\&quot;, width: 640, crop: \\&quot;scale\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;string_1.jpg\\&quot;, width: 640, 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(640).Crop(\\&quot;scale\\&quot;)).BuildImageTag(\\&quot;string_1.jpg\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(640).Crop(\\&quot;scale\\&quot;)).BuildImageTag(\\&quot;string_1.jpg\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;.NET&quot;,&quot;packageName&quot;:&quot;CloudinaryDotNet&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;dart&quot;,&quot;framework&quot;:&quot;dart&quot;,&quot;language&quot;:&quot;dart&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;string_1.jpg&#039;).transformation(Transformation()\\n\\t.resize(Resize.scale().width(640)));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;string_1.jpg&#039;).transformation(Transformation()\\n\\t.resize(Resize.scale().width(640)));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Dart&quot;,&quot;packageName&quot;:&quot;cloudinary_dart&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;swift&quot;,&quot;framework&quot;:&quot;swift&quot;,&quot;language&quot;:&quot;swift&quot;,&quot;rawCodeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(640).setCrop(\\&quot;scale\\&quot;)).generate(\\&quot;string_1.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(640).setCrop(\\&quot;scale\\&quot;)).generate(\\&quot;string_1.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;iOS&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;5.x&quot;},{&quot;sdkId&quot;:&quot;android&quot;,&quot;framework&quot;:&quot;android&quot;,&quot;language&quot;:&quot;android&quot;,&quot;rawCodeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().width(640).crop(\\&quot;scale\\&quot;)).generate(\\&quot;string_1.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().width(640).crop(\\&quot;scale\\&quot;)).generate(\\&quot;string_1.jpg\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Android&quot;,&quot;packageName&quot;:&quot;cloudinary-android&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;flutter&quot;,&quot;framework&quot;:&quot;flutter&quot;,&quot;language&quot;:&quot;flutter&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;string_1.jpg&#039;).transformation(Transformation()\\n\\t.resize(Resize.scale().width(640)));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;string_1.jpg&#039;).transformation(Transformation()\\n\\t.resize(Resize.scale().width(640)));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Flutter&quot;,&quot;packageName&quot;:&quot;cloudinary_flutter&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;kotlin&quot;,&quot;framework&quot;:&quot;kotlin&quot;,&quot;language&quot;:&quot;kotlin&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;string_1.jpg\\&quot;)\\n\\t resize(Resize.scale() { width(640) }) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;string_1.jpg\\&quot;)\\n\\t resize(Resize.scale() { width(640) }) \\n}.generate()&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Kotlin&quot;,&quot;packageName&quot;:&quot;kotlin-url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;jquery&quot;,&quot;framework&quot;:&quot;jquery&quot;,&quot;language&quot;:&quot;jquery&quot;,&quot;rawCodeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;string_1.jpg\\&quot;, {width: 640, crop: \\&quot;scale\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;string_1.jpg\\&quot;, {width: 640, 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;string_1.jpg\\&quot;).resize(scale().width(640));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;string_1.jpg\\&quot;).resize(scale().width(640));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React Native&quot;,&quot;packageName&quot;:&quot;cloudinary-react-native&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;}]\"\n      parsed-url=\"{&quot;url&quot;:&quot;https:\\\/\\\/res.cloudinary.com\\\/demo\\\/image\\\/upload\\\/w_640\\\/string_1.jpg&quot;,&quot;cloud_name&quot;:&quot;demo&quot;,&quot;host&quot;:&quot;res.cloudinary.com&quot;,&quot;type&quot;:&quot;upload&quot;,&quot;resource_type&quot;:&quot;image&quot;,&quot;transformation&quot;:[{&quot;width&quot;:&quot;640&quot;}],&quot;transformation_string&quot;:&quot;w_640&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;string_1.jpg&quot;,&quot;extension&quot;:&quot;jpg&quot;,&quot;format&quot;:&quot;jpg&quot;,&quot;format_code&quot;:true,&quot;url_code&quot;:false,&quot;signature&quot;:&quot;&quot;,&quot;private_cdn&quot;:false,&quot;result_asset_type&quot;:&quot;image&quot;}\"\n      with-url=\"true\"\n    >\n      <span class=\"u-visually-hidden\">Loading code examples<\/span>\n    <\/cld-code-widget><a class=\"c-image-link\" href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_640\/string_1.jpg\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_640\/string_1.jpg\" alt=\"Original image\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"640\" height=\"376\"\/><\/a><\/p>\n<p>Below are three LQIPs generated by Cloudinary, compressed for quality and optimized for WebP, weighing only 2.17 KB in WebP and 1.46 KB in <a href=\"https:\/\/cloudinary.com\/tools\/compress-jpg\">JPG<\/a> in non-Chrome browsers. The top version shows the grayscale effect; the middle one, the black-and-white touch; and the bottom one, a cartoon-like look through the <code>cartoonify<\/code> parameter.<\/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;string_1.jpg\\&quot;, {transformation: [ {width: 640, crop: \\&quot;scale\\&quot;}, {effect: \\&quot;blur:1000\\&quot;, quality: 1}, {effect: \\&quot;grayscale\\&quot;} ]})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;string_1.jpg\\&quot;, {transformation: [\\n  {width: 640, crop: \\&quot;scale\\&quot;},\\n  {effect: \\&quot;blur:1000\\&quot;, quality: 1},\\n  {effect: \\&quot;grayscale\\&quot;}\\n  ]})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Node.js&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_2&quot;,&quot;framework&quot;:&quot;react_2&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;string_1.jpg\\&quot;)\\n  .resize(scale().width(640))\\n  .effect(blur().strength(1000))\\n  .delivery(format(auto()))\\n  .delivery(quality(1))\\n  .effect(grayscale());&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;string_1.jpg\\&quot;)\\n  .resize(scale().width(640))\\n  .effect(blur().strength(1000))\\n  .delivery(format(auto()))\\n  .delivery(quality(1))\\n  .effect(grayscale());&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;react&quot;,&quot;framework&quot;:&quot;react&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;string_1.jpg\\&quot; &gt; &lt;Transformation width=\\&quot;640\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt; &lt;Transformation effect=\\&quot;blur:1000\\&quot; quality=\\&quot;1\\&quot; \\\/&gt; &lt;Transformation effect=\\&quot;grayscale\\&quot; \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;string_1.jpg\\&quot; &gt;\\n\\t&lt;Transformation width=\\&quot;640\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt;\\n\\t&lt;Transformation effect=\\&quot;blur:1000\\&quot; quality=\\&quot;1\\&quot; \\\/&gt;\\n\\t&lt;Transformation effect=\\&quot;grayscale\\&quot; \\\/&gt;\\n&lt;\\\/Image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;cloudinary-react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue_2&quot;,&quot;framework&quot;:&quot;vue_2&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;string_1.jpg\\&quot;)\\n  .resize(scale().width(640))\\n  .effect(blur().strength(1000))\\n  .delivery(format(auto()))\\n  .delivery(quality(1))\\n  .effect(grayscale());&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;string_1.jpg\\&quot;)\\n  .resize(scale().width(640))\\n  .effect(blur().strength(1000))\\n  .delivery(format(auto()))\\n  .delivery(quality(1))\\n  .effect(grayscale());&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/vue&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue&quot;,&quot;framework&quot;:&quot;vue&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;string_1.jpg\\&quot; &gt; &lt;cld-transformation width=\\&quot;640\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt; &lt;cld-transformation effect=\\&quot;blur:1000\\&quot; quality=\\&quot;1\\&quot; \\\/&gt; &lt;cld-transformation effect=\\&quot;grayscale\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;string_1.jpg\\&quot; &gt;\\n\\t&lt;cld-transformation width=\\&quot;640\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt;\\n\\t&lt;cld-transformation effect=\\&quot;blur:1000\\&quot; quality=\\&quot;1\\&quot; \\\/&gt;\\n\\t&lt;cld-transformation effect=\\&quot;grayscale\\&quot; \\\/&gt;\\n&lt;\\\/cld-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;cloudinary-vue&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular_2&quot;,&quot;framework&quot;:&quot;angular_2&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;string_1.jpg\\&quot;)\\n  .resize(scale().width(640))\\n  .effect(blur().strength(1000))\\n  .delivery(format(auto()))\\n  .delivery(quality(1))\\n  .effect(grayscale());&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;string_1.jpg\\&quot;)\\n  .resize(scale().width(640))\\n  .effect(blur().strength(1000))\\n  .delivery(format(auto()))\\n  .delivery(quality(1))\\n  .effect(grayscale());&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/ng&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular&quot;,&quot;framework&quot;:&quot;angular&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;string_1.jpg\\&quot; &gt; &lt;cl-transformation width=\\&quot;640\\&quot; crop=\\&quot;scale\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;cl-transformation effect=\\&quot;blur:1000\\&quot; quality=\\&quot;1\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;cl-transformation effect=\\&quot;grayscale\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;string_1.jpg\\&quot; &gt;\\n\\t&lt;cl-transformation width=\\&quot;640\\&quot; crop=\\&quot;scale\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n\\t&lt;cl-transformation effect=\\&quot;blur:1000\\&quot; quality=\\&quot;1\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n\\t&lt;cl-transformation effect=\\&quot;grayscale\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n&lt;\\\/cl-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/angular-5.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js_2&quot;,&quot;framework&quot;:&quot;js_2&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;string_1.jpg\\&quot;)\\n  .resize(scale().width(640))\\n  .effect(blur().strength(1000))\\n  .delivery(format(auto()))\\n  .delivery(quality(1))\\n  .effect(grayscale());&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;string_1.jpg\\&quot;)\\n  .resize(scale().width(640))\\n  .effect(blur().strength(1000))\\n  .delivery(format(auto()))\\n  .delivery(quality(1))\\n  .effect(grayscale());&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js&quot;,&quot;framework&quot;:&quot;js&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.imageTag(&#039;string_1.jpg&#039;, {transformation: [ {width: 640, crop: \\&quot;scale\\&quot;}, {effect: \\&quot;blur:1000\\&quot;, quality: 1}, {effect: \\&quot;grayscale\\&quot;} ]}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;string_1.jpg&#039;, {transformation: [\\n  {width: 640, crop: \\&quot;scale\\&quot;},\\n  {effect: \\&quot;blur:1000\\&quot;, quality: 1},\\n  {effect: \\&quot;grayscale\\&quot;}\\n  ]}).toHtml();&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;cloudinary-core&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;python&quot;,&quot;framework&quot;:&quot;python&quot;,&quot;language&quot;:&quot;python&quot;,&quot;rawCodeSnippet&quot;:&quot;CloudinaryImage(\\&quot;string_1.jpg\\&quot;).image(transformation=[ {&#039;width&#039;: 640, &#039;crop&#039;: \\&quot;scale\\&quot;}, {&#039;effect&#039;: \\&quot;blur:1000\\&quot;, &#039;quality&#039;: 1}, {&#039;effect&#039;: \\&quot;grayscale\\&quot;} ])&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;string_1.jpg\\&quot;).image(transformation=[\\n  {&#039;width&#039;: 640, &#039;crop&#039;: \\&quot;scale\\&quot;},\\n  {&#039;effect&#039;: \\&quot;blur:1000\\&quot;, &#039;quality&#039;: 1},\\n  {&#039;effect&#039;: \\&quot;grayscale\\&quot;}\\n  ])&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Python&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;php_2&quot;,&quot;framework&quot;:&quot;php_2&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;(new ImageTag(&#039;string_1.jpg&#039;))\\n\\t-&gt;resize(Resize::scale()-&gt;width(640))\\n\\t-&gt;effect(Effect::blur()-&gt;strength(1000))\\n\\t-&gt;delivery(Delivery::format(\\n\\tFormat::auto()))\\n\\t-&gt;delivery(Delivery::quality(1))\\n\\t-&gt;effect(Effect::grayscale());&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;string_1.jpg&#039;))\\n\\t-&gt;resize(Resize::scale()-&gt;width(640))\\n\\t-&gt;effect(Effect::blur()-&gt;strength(1000))\\n\\t-&gt;delivery(Delivery::format(\\n\\tFormat::auto()))\\n\\t-&gt;delivery(Delivery::quality(1))\\n\\t-&gt;effect(Effect::grayscale());&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;php&quot;,&quot;framework&quot;:&quot;php&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;string_1.jpg\\&quot;, array(\\&quot;transformation\\&quot;=&gt;array( array(\\&quot;width\\&quot;=&gt;640, \\&quot;crop\\&quot;=&gt;\\&quot;scale\\&quot;), array(\\&quot;effect\\&quot;=&gt;\\&quot;blur:1000\\&quot;, \\&quot;quality\\&quot;=&gt;1), array(\\&quot;effect\\&quot;=&gt;\\&quot;grayscale\\&quot;) )))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;string_1.jpg\\&quot;, array(\\&quot;transformation\\&quot;=&gt;array(\\n  array(\\&quot;width\\&quot;=&gt;640, \\&quot;crop\\&quot;=&gt;\\&quot;scale\\&quot;),\\n  array(\\&quot;effect\\&quot;=&gt;\\&quot;blur:1000\\&quot;, \\&quot;quality\\&quot;=&gt;1),\\n  array(\\&quot;effect\\&quot;=&gt;\\&quot;grayscale\\&quot;)\\n  )))&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;java&quot;,&quot;framework&quot;:&quot;java&quot;,&quot;language&quot;:&quot;java&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().width(640).crop(\\&quot;scale\\&quot;).chain() .effect(\\&quot;blur:1000\\&quot;).quality(1).chain() .effect(\\&quot;grayscale\\&quot;)).imageTag(\\&quot;string_1.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation()\\n  .width(640).crop(\\&quot;scale\\&quot;).chain()\\n  .effect(\\&quot;blur:1000\\&quot;).quality(1).chain()\\n  .effect(\\&quot;grayscale\\&quot;)).imageTag(\\&quot;string_1.jpg\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Java&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;ruby&quot;,&quot;framework&quot;:&quot;ruby&quot;,&quot;language&quot;:&quot;ruby&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;string_1.jpg\\&quot;, transformation: [ {width: 640, crop: \\&quot;scale\\&quot;}, {effect: \\&quot;blur:1000\\&quot;, quality: 1}, {effect: \\&quot;grayscale\\&quot;} ])&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;string_1.jpg\\&quot;, transformation: [\\n  {width: 640, crop: \\&quot;scale\\&quot;},\\n  {effect: \\&quot;blur:1000\\&quot;, quality: 1},\\n  {effect: \\&quot;grayscale\\&quot;}\\n  ])&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Ruby&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;csharp&quot;,&quot;framework&quot;:&quot;csharp&quot;,&quot;language&quot;:&quot;csharp&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(640).Crop(\\&quot;scale\\&quot;).Chain() .Effect(\\&quot;blur:1000\\&quot;).Quality(1).Chain() .Effect(\\&quot;grayscale\\&quot;)).BuildImageTag(\\&quot;string_1.jpg\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation()\\n  .Width(640).Crop(\\&quot;scale\\&quot;).Chain()\\n  .Effect(\\&quot;blur:1000\\&quot;).Quality(1).Chain()\\n  .Effect(\\&quot;grayscale\\&quot;)).BuildImageTag(\\&quot;string_1.jpg\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;.NET&quot;,&quot;packageName&quot;:&quot;CloudinaryDotNet&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;dart&quot;,&quot;framework&quot;:&quot;dart&quot;,&quot;language&quot;:&quot;dart&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;string_1.jpg&#039;).transformation(Transformation()\\n\\t.resize(Resize.scale().width(640))\\n\\t.effect(Effect.blur().strength(1000))\\n\\t.delivery(Delivery.format(\\n\\tFormat.auto()))\\n\\t.delivery(Delivery.quality(1))\\n\\t.effect(Effect.grayscale()));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;string_1.jpg&#039;).transformation(Transformation()\\n\\t.resize(Resize.scale().width(640))\\n\\t.effect(Effect.blur().strength(1000))\\n\\t.delivery(Delivery.format(\\n\\tFormat.auto()))\\n\\t.delivery(Delivery.quality(1))\\n\\t.effect(Effect.grayscale()));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Dart&quot;,&quot;packageName&quot;:&quot;cloudinary_dart&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;swift&quot;,&quot;framework&quot;:&quot;swift&quot;,&quot;language&quot;:&quot;swift&quot;,&quot;rawCodeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(640).setCrop(\\&quot;scale\\&quot;).chain() .setEffect(\\&quot;blur:1000\\&quot;).setQuality(1).chain() .setEffect(\\&quot;grayscale\\&quot;)).generate(\\&quot;string_1.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()\\n  .setWidth(640).setCrop(\\&quot;scale\\&quot;).chain()\\n  .setEffect(\\&quot;blur:1000\\&quot;).setQuality(1).chain()\\n  .setEffect(\\&quot;grayscale\\&quot;)).generate(\\&quot;string_1.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;iOS&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;5.x&quot;},{&quot;sdkId&quot;:&quot;android&quot;,&quot;framework&quot;:&quot;android&quot;,&quot;language&quot;:&quot;android&quot;,&quot;rawCodeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().width(640).crop(\\&quot;scale\\&quot;).chain() .effect(\\&quot;blur:1000\\&quot;).quality(1).chain() .effect(\\&quot;grayscale\\&quot;)).generate(\\&quot;string_1.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation()\\n  .width(640).crop(\\&quot;scale\\&quot;).chain()\\n  .effect(\\&quot;blur:1000\\&quot;).quality(1).chain()\\n  .effect(\\&quot;grayscale\\&quot;)).generate(\\&quot;string_1.jpg\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Android&quot;,&quot;packageName&quot;:&quot;cloudinary-android&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;flutter&quot;,&quot;framework&quot;:&quot;flutter&quot;,&quot;language&quot;:&quot;flutter&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;string_1.jpg&#039;).transformation(Transformation()\\n\\t.resize(Resize.scale().width(640))\\n\\t.effect(Effect.blur().strength(1000))\\n\\t.delivery(Delivery.format(\\n\\tFormat.auto()))\\n\\t.delivery(Delivery.quality(1))\\n\\t.effect(Effect.grayscale()));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;string_1.jpg&#039;).transformation(Transformation()\\n\\t.resize(Resize.scale().width(640))\\n\\t.effect(Effect.blur().strength(1000))\\n\\t.delivery(Delivery.format(\\n\\tFormat.auto()))\\n\\t.delivery(Delivery.quality(1))\\n\\t.effect(Effect.grayscale()));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Flutter&quot;,&quot;packageName&quot;:&quot;cloudinary_flutter&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;kotlin&quot;,&quot;framework&quot;:&quot;kotlin&quot;,&quot;language&quot;:&quot;kotlin&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;string_1.jpg\\&quot;)\\n\\t resize(Resize.scale() { width(640) })\\n\\t effect(Effect.blur() { strength(1000) })\\n\\t delivery(Delivery.format(\\n\\tFormat.auto()))\\n\\t delivery(Delivery.quality(1))\\n\\t effect(Effect.grayscale()) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;string_1.jpg\\&quot;)\\n\\t resize(Resize.scale() { width(640) })\\n\\t effect(Effect.blur() { strength(1000) })\\n\\t delivery(Delivery.format(\\n\\tFormat.auto()))\\n\\t delivery(Delivery.quality(1))\\n\\t effect(Effect.grayscale()) \\n}.generate()&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Kotlin&quot;,&quot;packageName&quot;:&quot;kotlin-url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;jquery&quot;,&quot;framework&quot;:&quot;jquery&quot;,&quot;language&quot;:&quot;jquery&quot;,&quot;rawCodeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;string_1.jpg\\&quot;, {transformation: [ {width: 640, crop: \\&quot;scale\\&quot;}, {effect: \\&quot;blur:1000\\&quot;, quality: 1}, {effect: \\&quot;grayscale\\&quot;} ]})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;string_1.jpg\\&quot;, {transformation: [\\n  {width: 640, crop: \\&quot;scale\\&quot;},\\n  {effect: \\&quot;blur:1000\\&quot;, quality: 1},\\n  {effect: \\&quot;grayscale\\&quot;}\\n  ]})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;jQuery&quot;,&quot;packageName&quot;:&quot;cloudinary-jquery&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_native&quot;,&quot;framework&quot;:&quot;react_native&quot;,&quot;language&quot;:&quot;react_native&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;string_1.jpg\\&quot;)\\n  .resize(scale().width(640))\\n  .effect(blur().strength(1000))\\n  .delivery(format(auto()))\\n  .delivery(quality(1))\\n  .effect(grayscale());&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;string_1.jpg\\&quot;)\\n  .resize(scale().width(640))\\n  .effect(blur().strength(1000))\\n  .delivery(format(auto()))\\n  .delivery(quality(1))\\n  .effect(grayscale());&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React Native&quot;,&quot;packageName&quot;:&quot;cloudinary-react-native&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;}]\"\n      parsed-url=\"{&quot;url&quot;:&quot;https:\\\/\\\/res.cloudinary.com\\\/demo\\\/image\\\/upload\\\/w_640\\\/e_blur:1000,q_1,f_auto\\\/e_grayscale\\\/string_1.jpg&quot;,&quot;cloud_name&quot;:&quot;demo&quot;,&quot;host&quot;:&quot;res.cloudinary.com&quot;,&quot;type&quot;:&quot;upload&quot;,&quot;resource_type&quot;:&quot;image&quot;,&quot;transformation&quot;:[{&quot;width&quot;:&quot;640&quot;},{&quot;effect&quot;:&quot;blur:1000&quot;,&quot;quality&quot;:&quot;1&quot;,&quot;format&quot;:&quot;auto&quot;},{&quot;effect&quot;:&quot;grayscale&quot;}],&quot;transformation_string&quot;:&quot;w_640\\\/e_blur:1000,q_1,f_auto\\\/e_grayscale&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;string_1.jpg&quot;,&quot;extension&quot;:&quot;jpg&quot;,&quot;format&quot;:&quot;jpg&quot;,&quot;format_code&quot;:true,&quot;url_code&quot;:false,&quot;signature&quot;:&quot;&quot;,&quot;private_cdn&quot;:false,&quot;result_asset_type&quot;:&quot;image&quot;}\"\n      with-url=\"true\"\n    >\n      <span class=\"u-visually-hidden\">Loading code examples<\/span>\n    <\/cld-code-widget><a class=\"c-image-link\" href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_640\/e_blur:1000,q_1,f_auto\/e_grayscale\/string_1.jpg\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_640\/e_blur:1000,q_1,f_auto\/e_grayscale\/string_1.jpg\" alt=\"Grayscale LQIP\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"640\" height=\"376\"\/><\/a>\n<cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[{&quot;sdkId&quot;:&quot;nodejs&quot;,&quot;framework&quot;:&quot;nodejs&quot;,&quot;language&quot;:&quot;nodejs&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(\\&quot;string_1.jpg\\&quot;, {transformation: [ {width: 640, crop: \\&quot;scale\\&quot;}, {effect: \\&quot;blur:1000\\&quot;, quality: 1}, {effect: \\&quot;blackwhite\\&quot;} ]})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;string_1.jpg\\&quot;, {transformation: [\\n  {width: 640, crop: \\&quot;scale\\&quot;},\\n  {effect: \\&quot;blur:1000\\&quot;, quality: 1},\\n  {effect: \\&quot;blackwhite\\&quot;}\\n  ]})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Node.js&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_2&quot;,&quot;framework&quot;:&quot;react_2&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;string_1.jpg\\&quot;)\\n  .resize(scale().width(640))\\n  .effect(blur().strength(1000))\\n  .delivery(format(auto()))\\n  .delivery(quality(1))\\n  .effect(blackwhite());&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;string_1.jpg\\&quot;)\\n  .resize(scale().width(640))\\n  .effect(blur().strength(1000))\\n  .delivery(format(auto()))\\n  .delivery(quality(1))\\n  .effect(blackwhite());&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;react&quot;,&quot;framework&quot;:&quot;react&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;string_1.jpg\\&quot; &gt; &lt;Transformation width=\\&quot;640\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt; &lt;Transformation effect=\\&quot;blur:1000\\&quot; quality=\\&quot;1\\&quot; \\\/&gt; &lt;Transformation effect=\\&quot;blackwhite\\&quot; \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;string_1.jpg\\&quot; &gt;\\n\\t&lt;Transformation width=\\&quot;640\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt;\\n\\t&lt;Transformation effect=\\&quot;blur:1000\\&quot; quality=\\&quot;1\\&quot; \\\/&gt;\\n\\t&lt;Transformation effect=\\&quot;blackwhite\\&quot; \\\/&gt;\\n&lt;\\\/Image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;cloudinary-react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue_2&quot;,&quot;framework&quot;:&quot;vue_2&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;string_1.jpg\\&quot;)\\n  .resize(scale().width(640))\\n  .effect(blur().strength(1000))\\n  .delivery(format(auto()))\\n  .delivery(quality(1))\\n  .effect(blackwhite());&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;string_1.jpg\\&quot;)\\n  .resize(scale().width(640))\\n  .effect(blur().strength(1000))\\n  .delivery(format(auto()))\\n  .delivery(quality(1))\\n  .effect(blackwhite());&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/vue&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue&quot;,&quot;framework&quot;:&quot;vue&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;string_1.jpg\\&quot; &gt; &lt;cld-transformation width=\\&quot;640\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt; &lt;cld-transformation effect=\\&quot;blur:1000\\&quot; quality=\\&quot;1\\&quot; \\\/&gt; &lt;cld-transformation effect=\\&quot;blackwhite\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;string_1.jpg\\&quot; &gt;\\n\\t&lt;cld-transformation width=\\&quot;640\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt;\\n\\t&lt;cld-transformation effect=\\&quot;blur:1000\\&quot; quality=\\&quot;1\\&quot; \\\/&gt;\\n\\t&lt;cld-transformation effect=\\&quot;blackwhite\\&quot; \\\/&gt;\\n&lt;\\\/cld-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;cloudinary-vue&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular_2&quot;,&quot;framework&quot;:&quot;angular_2&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;string_1.jpg\\&quot;)\\n  .resize(scale().width(640))\\n  .effect(blur().strength(1000))\\n  .delivery(format(auto()))\\n  .delivery(quality(1))\\n  .effect(blackwhite());&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;string_1.jpg\\&quot;)\\n  .resize(scale().width(640))\\n  .effect(blur().strength(1000))\\n  .delivery(format(auto()))\\n  .delivery(quality(1))\\n  .effect(blackwhite());&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/ng&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular&quot;,&quot;framework&quot;:&quot;angular&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;string_1.jpg\\&quot; &gt; &lt;cl-transformation width=\\&quot;640\\&quot; crop=\\&quot;scale\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;cl-transformation effect=\\&quot;blur:1000\\&quot; quality=\\&quot;1\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;cl-transformation effect=\\&quot;blackwhite\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;string_1.jpg\\&quot; &gt;\\n\\t&lt;cl-transformation width=\\&quot;640\\&quot; crop=\\&quot;scale\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n\\t&lt;cl-transformation effect=\\&quot;blur:1000\\&quot; quality=\\&quot;1\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n\\t&lt;cl-transformation effect=\\&quot;blackwhite\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n&lt;\\\/cl-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/angular-5.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js_2&quot;,&quot;framework&quot;:&quot;js_2&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;string_1.jpg\\&quot;)\\n  .resize(scale().width(640))\\n  .effect(blur().strength(1000))\\n  .delivery(format(auto()))\\n  .delivery(quality(1))\\n  .effect(blackwhite());&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;string_1.jpg\\&quot;)\\n  .resize(scale().width(640))\\n  .effect(blur().strength(1000))\\n  .delivery(format(auto()))\\n  .delivery(quality(1))\\n  .effect(blackwhite());&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js&quot;,&quot;framework&quot;:&quot;js&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.imageTag(&#039;string_1.jpg&#039;, {transformation: [ {width: 640, crop: \\&quot;scale\\&quot;}, {effect: \\&quot;blur:1000\\&quot;, quality: 1}, {effect: \\&quot;blackwhite\\&quot;} ]}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;string_1.jpg&#039;, {transformation: [\\n  {width: 640, crop: \\&quot;scale\\&quot;},\\n  {effect: \\&quot;blur:1000\\&quot;, quality: 1},\\n  {effect: \\&quot;blackwhite\\&quot;}\\n  ]}).toHtml();&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;cloudinary-core&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;python&quot;,&quot;framework&quot;:&quot;python&quot;,&quot;language&quot;:&quot;python&quot;,&quot;rawCodeSnippet&quot;:&quot;CloudinaryImage(\\&quot;string_1.jpg\\&quot;).image(transformation=[ {&#039;width&#039;: 640, &#039;crop&#039;: \\&quot;scale\\&quot;}, {&#039;effect&#039;: \\&quot;blur:1000\\&quot;, &#039;quality&#039;: 1}, {&#039;effect&#039;: \\&quot;blackwhite\\&quot;} ])&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;string_1.jpg\\&quot;).image(transformation=[\\n  {&#039;width&#039;: 640, &#039;crop&#039;: \\&quot;scale\\&quot;},\\n  {&#039;effect&#039;: \\&quot;blur:1000\\&quot;, &#039;quality&#039;: 1},\\n  {&#039;effect&#039;: \\&quot;blackwhite\\&quot;}\\n  ])&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Python&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;php_2&quot;,&quot;framework&quot;:&quot;php_2&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;(new ImageTag(&#039;string_1.jpg&#039;))\\n\\t-&gt;resize(Resize::scale()-&gt;width(640))\\n\\t-&gt;effect(Effect::blur()-&gt;strength(1000))\\n\\t-&gt;delivery(Delivery::format(\\n\\tFormat::auto()))\\n\\t-&gt;delivery(Delivery::quality(1))\\n\\t-&gt;effect(Effect::blackwhite());&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;string_1.jpg&#039;))\\n\\t-&gt;resize(Resize::scale()-&gt;width(640))\\n\\t-&gt;effect(Effect::blur()-&gt;strength(1000))\\n\\t-&gt;delivery(Delivery::format(\\n\\tFormat::auto()))\\n\\t-&gt;delivery(Delivery::quality(1))\\n\\t-&gt;effect(Effect::blackwhite());&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;php&quot;,&quot;framework&quot;:&quot;php&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;string_1.jpg\\&quot;, array(\\&quot;transformation\\&quot;=&gt;array( array(\\&quot;width\\&quot;=&gt;640, \\&quot;crop\\&quot;=&gt;\\&quot;scale\\&quot;), array(\\&quot;effect\\&quot;=&gt;\\&quot;blur:1000\\&quot;, \\&quot;quality\\&quot;=&gt;1), array(\\&quot;effect\\&quot;=&gt;\\&quot;blackwhite\\&quot;) )))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;string_1.jpg\\&quot;, array(\\&quot;transformation\\&quot;=&gt;array(\\n  array(\\&quot;width\\&quot;=&gt;640, \\&quot;crop\\&quot;=&gt;\\&quot;scale\\&quot;),\\n  array(\\&quot;effect\\&quot;=&gt;\\&quot;blur:1000\\&quot;, \\&quot;quality\\&quot;=&gt;1),\\n  array(\\&quot;effect\\&quot;=&gt;\\&quot;blackwhite\\&quot;)\\n  )))&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;java&quot;,&quot;framework&quot;:&quot;java&quot;,&quot;language&quot;:&quot;java&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().width(640).crop(\\&quot;scale\\&quot;).chain() .effect(\\&quot;blur:1000\\&quot;).quality(1).chain() .effect(\\&quot;blackwhite\\&quot;)).imageTag(\\&quot;string_1.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation()\\n  .width(640).crop(\\&quot;scale\\&quot;).chain()\\n  .effect(\\&quot;blur:1000\\&quot;).quality(1).chain()\\n  .effect(\\&quot;blackwhite\\&quot;)).imageTag(\\&quot;string_1.jpg\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Java&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;ruby&quot;,&quot;framework&quot;:&quot;ruby&quot;,&quot;language&quot;:&quot;ruby&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;string_1.jpg\\&quot;, transformation: [ {width: 640, crop: \\&quot;scale\\&quot;}, {effect: \\&quot;blur:1000\\&quot;, quality: 1}, {effect: \\&quot;blackwhite\\&quot;} ])&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;string_1.jpg\\&quot;, transformation: [\\n  {width: 640, crop: \\&quot;scale\\&quot;},\\n  {effect: \\&quot;blur:1000\\&quot;, quality: 1},\\n  {effect: \\&quot;blackwhite\\&quot;}\\n  ])&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Ruby&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;csharp&quot;,&quot;framework&quot;:&quot;csharp&quot;,&quot;language&quot;:&quot;csharp&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(640).Crop(\\&quot;scale\\&quot;).Chain() .Effect(\\&quot;blur:1000\\&quot;).Quality(1).Chain() .Effect(\\&quot;blackwhite\\&quot;)).BuildImageTag(\\&quot;string_1.jpg\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation()\\n  .Width(640).Crop(\\&quot;scale\\&quot;).Chain()\\n  .Effect(\\&quot;blur:1000\\&quot;).Quality(1).Chain()\\n  .Effect(\\&quot;blackwhite\\&quot;)).BuildImageTag(\\&quot;string_1.jpg\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;.NET&quot;,&quot;packageName&quot;:&quot;CloudinaryDotNet&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;dart&quot;,&quot;framework&quot;:&quot;dart&quot;,&quot;language&quot;:&quot;dart&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;string_1.jpg&#039;).transformation(Transformation()\\n\\t.resize(Resize.scale().width(640))\\n\\t.effect(Effect.blur().strength(1000))\\n\\t.delivery(Delivery.format(\\n\\tFormat.auto()))\\n\\t.delivery(Delivery.quality(1))\\n\\t.effect(Effect.blackwhite()));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;string_1.jpg&#039;).transformation(Transformation()\\n\\t.resize(Resize.scale().width(640))\\n\\t.effect(Effect.blur().strength(1000))\\n\\t.delivery(Delivery.format(\\n\\tFormat.auto()))\\n\\t.delivery(Delivery.quality(1))\\n\\t.effect(Effect.blackwhite()));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Dart&quot;,&quot;packageName&quot;:&quot;cloudinary_dart&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;swift&quot;,&quot;framework&quot;:&quot;swift&quot;,&quot;language&quot;:&quot;swift&quot;,&quot;rawCodeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(640).setCrop(\\&quot;scale\\&quot;).chain() .setEffect(\\&quot;blur:1000\\&quot;).setQuality(1).chain() .setEffect(\\&quot;blackwhite\\&quot;)).generate(\\&quot;string_1.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()\\n  .setWidth(640).setCrop(\\&quot;scale\\&quot;).chain()\\n  .setEffect(\\&quot;blur:1000\\&quot;).setQuality(1).chain()\\n  .setEffect(\\&quot;blackwhite\\&quot;)).generate(\\&quot;string_1.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;iOS&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;5.x&quot;},{&quot;sdkId&quot;:&quot;android&quot;,&quot;framework&quot;:&quot;android&quot;,&quot;language&quot;:&quot;android&quot;,&quot;rawCodeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().width(640).crop(\\&quot;scale\\&quot;).chain() .effect(\\&quot;blur:1000\\&quot;).quality(1).chain() .effect(\\&quot;blackwhite\\&quot;)).generate(\\&quot;string_1.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation()\\n  .width(640).crop(\\&quot;scale\\&quot;).chain()\\n  .effect(\\&quot;blur:1000\\&quot;).quality(1).chain()\\n  .effect(\\&quot;blackwhite\\&quot;)).generate(\\&quot;string_1.jpg\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Android&quot;,&quot;packageName&quot;:&quot;cloudinary-android&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;flutter&quot;,&quot;framework&quot;:&quot;flutter&quot;,&quot;language&quot;:&quot;flutter&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;string_1.jpg&#039;).transformation(Transformation()\\n\\t.resize(Resize.scale().width(640))\\n\\t.effect(Effect.blur().strength(1000))\\n\\t.delivery(Delivery.format(\\n\\tFormat.auto()))\\n\\t.delivery(Delivery.quality(1))\\n\\t.effect(Effect.blackwhite()));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;string_1.jpg&#039;).transformation(Transformation()\\n\\t.resize(Resize.scale().width(640))\\n\\t.effect(Effect.blur().strength(1000))\\n\\t.delivery(Delivery.format(\\n\\tFormat.auto()))\\n\\t.delivery(Delivery.quality(1))\\n\\t.effect(Effect.blackwhite()));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Flutter&quot;,&quot;packageName&quot;:&quot;cloudinary_flutter&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;kotlin&quot;,&quot;framework&quot;:&quot;kotlin&quot;,&quot;language&quot;:&quot;kotlin&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;string_1.jpg\\&quot;)\\n\\t resize(Resize.scale() { width(640) })\\n\\t effect(Effect.blur() { strength(1000) })\\n\\t delivery(Delivery.format(\\n\\tFormat.auto()))\\n\\t delivery(Delivery.quality(1))\\n\\t effect(Effect.blackwhite()) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;string_1.jpg\\&quot;)\\n\\t resize(Resize.scale() { width(640) })\\n\\t effect(Effect.blur() { strength(1000) })\\n\\t delivery(Delivery.format(\\n\\tFormat.auto()))\\n\\t delivery(Delivery.quality(1))\\n\\t effect(Effect.blackwhite()) \\n}.generate()&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Kotlin&quot;,&quot;packageName&quot;:&quot;kotlin-url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;jquery&quot;,&quot;framework&quot;:&quot;jquery&quot;,&quot;language&quot;:&quot;jquery&quot;,&quot;rawCodeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;string_1.jpg\\&quot;, {transformation: [ {width: 640, crop: \\&quot;scale\\&quot;}, {effect: \\&quot;blur:1000\\&quot;, quality: 1}, {effect: \\&quot;blackwhite\\&quot;} ]})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;string_1.jpg\\&quot;, {transformation: [\\n  {width: 640, crop: \\&quot;scale\\&quot;},\\n  {effect: \\&quot;blur:1000\\&quot;, quality: 1},\\n  {effect: \\&quot;blackwhite\\&quot;}\\n  ]})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;jQuery&quot;,&quot;packageName&quot;:&quot;cloudinary-jquery&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_native&quot;,&quot;framework&quot;:&quot;react_native&quot;,&quot;language&quot;:&quot;react_native&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;string_1.jpg\\&quot;)\\n  .resize(scale().width(640))\\n  .effect(blur().strength(1000))\\n  .delivery(format(auto()))\\n  .delivery(quality(1))\\n  .effect(blackwhite());&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;string_1.jpg\\&quot;)\\n  .resize(scale().width(640))\\n  .effect(blur().strength(1000))\\n  .delivery(format(auto()))\\n  .delivery(quality(1))\\n  .effect(blackwhite());&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React Native&quot;,&quot;packageName&quot;:&quot;cloudinary-react-native&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;}]\"\n      parsed-url=\"{&quot;url&quot;:&quot;https:\\\/\\\/res.cloudinary.com\\\/demo\\\/image\\\/upload\\\/w_640\\\/e_blur:1000,q_1,f_auto\\\/e_blackwhite\\\/string_1.jpg&quot;,&quot;cloud_name&quot;:&quot;demo&quot;,&quot;host&quot;:&quot;res.cloudinary.com&quot;,&quot;type&quot;:&quot;upload&quot;,&quot;resource_type&quot;:&quot;image&quot;,&quot;transformation&quot;:[{&quot;width&quot;:&quot;640&quot;},{&quot;effect&quot;:&quot;blur:1000&quot;,&quot;quality&quot;:&quot;1&quot;,&quot;format&quot;:&quot;auto&quot;},{&quot;effect&quot;:&quot;blackwhite&quot;}],&quot;transformation_string&quot;:&quot;w_640\\\/e_blur:1000,q_1,f_auto\\\/e_blackwhite&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;string_1.jpg&quot;,&quot;extension&quot;:&quot;jpg&quot;,&quot;format&quot;:&quot;jpg&quot;,&quot;format_code&quot;:true,&quot;url_code&quot;:false,&quot;signature&quot;:&quot;&quot;,&quot;private_cdn&quot;:false,&quot;result_asset_type&quot;:&quot;image&quot;}\"\n      with-url=\"true\"\n    >\n      <span class=\"u-visually-hidden\">Loading code examples<\/span>\n    <\/cld-code-widget><a class=\"c-image-link\" href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_640\/e_blur:1000,q_1,f_auto\/e_blackwhite\/string_1.jpg\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_640\/e_blur:1000,q_1,f_auto\/e_blackwhite\/string_1.jpg\" alt=\"Black and-white LQIP\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"640\" height=\"376\"\/><\/a><\/p>\n<p><cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[{&quot;sdkId&quot;:&quot;nodejs&quot;,&quot;framework&quot;:&quot;nodejs&quot;,&quot;language&quot;:&quot;nodejs&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(\\&quot;string_1.jpg\\&quot;, {transformation: [ {width: 640, crop: \\&quot;scale\\&quot;}, {effect: \\&quot;blur:1000\\&quot;, quality: 1}, {effect: \\&quot;cartoonify\\&quot;} ]})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;string_1.jpg\\&quot;, {transformation: [\\n  {width: 640, crop: \\&quot;scale\\&quot;},\\n  {effect: \\&quot;blur:1000\\&quot;, quality: 1},\\n  {effect: \\&quot;cartoonify\\&quot;}\\n  ]})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Node.js&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_2&quot;,&quot;framework&quot;:&quot;react_2&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;string_1.jpg\\&quot;)\\n  .resize(scale().width(640))\\n  .effect(blur().strength(1000))\\n  .delivery(format(auto()))\\n  .delivery(quality(1))\\n  .effect(cartoonify());&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;string_1.jpg\\&quot;)\\n  .resize(scale().width(640))\\n  .effect(blur().strength(1000))\\n  .delivery(format(auto()))\\n  .delivery(quality(1))\\n  .effect(cartoonify());&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;react&quot;,&quot;framework&quot;:&quot;react&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;string_1.jpg\\&quot; &gt; &lt;Transformation width=\\&quot;640\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt; &lt;Transformation effect=\\&quot;blur:1000\\&quot; quality=\\&quot;1\\&quot; \\\/&gt; &lt;Transformation effect=\\&quot;cartoonify\\&quot; \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;string_1.jpg\\&quot; &gt;\\n\\t&lt;Transformation width=\\&quot;640\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt;\\n\\t&lt;Transformation effect=\\&quot;blur:1000\\&quot; quality=\\&quot;1\\&quot; \\\/&gt;\\n\\t&lt;Transformation effect=\\&quot;cartoonify\\&quot; \\\/&gt;\\n&lt;\\\/Image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;cloudinary-react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue_2&quot;,&quot;framework&quot;:&quot;vue_2&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;string_1.jpg\\&quot;)\\n  .resize(scale().width(640))\\n  .effect(blur().strength(1000))\\n  .delivery(format(auto()))\\n  .delivery(quality(1))\\n  .effect(cartoonify());&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;string_1.jpg\\&quot;)\\n  .resize(scale().width(640))\\n  .effect(blur().strength(1000))\\n  .delivery(format(auto()))\\n  .delivery(quality(1))\\n  .effect(cartoonify());&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/vue&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue&quot;,&quot;framework&quot;:&quot;vue&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;string_1.jpg\\&quot; &gt; &lt;cld-transformation width=\\&quot;640\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt; &lt;cld-transformation effect=\\&quot;blur:1000\\&quot; quality=\\&quot;1\\&quot; \\\/&gt; &lt;cld-transformation effect=\\&quot;cartoonify\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;string_1.jpg\\&quot; &gt;\\n\\t&lt;cld-transformation width=\\&quot;640\\&quot; crop=\\&quot;scale\\&quot; \\\/&gt;\\n\\t&lt;cld-transformation effect=\\&quot;blur:1000\\&quot; quality=\\&quot;1\\&quot; \\\/&gt;\\n\\t&lt;cld-transformation effect=\\&quot;cartoonify\\&quot; \\\/&gt;\\n&lt;\\\/cld-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;cloudinary-vue&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular_2&quot;,&quot;framework&quot;:&quot;angular_2&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;string_1.jpg\\&quot;)\\n  .resize(scale().width(640))\\n  .effect(blur().strength(1000))\\n  .delivery(format(auto()))\\n  .delivery(quality(1))\\n  .effect(cartoonify());&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;string_1.jpg\\&quot;)\\n  .resize(scale().width(640))\\n  .effect(blur().strength(1000))\\n  .delivery(format(auto()))\\n  .delivery(quality(1))\\n  .effect(cartoonify());&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/ng&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular&quot;,&quot;framework&quot;:&quot;angular&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;string_1.jpg\\&quot; &gt; &lt;cl-transformation width=\\&quot;640\\&quot; crop=\\&quot;scale\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;cl-transformation effect=\\&quot;blur:1000\\&quot; quality=\\&quot;1\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;cl-transformation effect=\\&quot;cartoonify\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;string_1.jpg\\&quot; &gt;\\n\\t&lt;cl-transformation width=\\&quot;640\\&quot; crop=\\&quot;scale\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n\\t&lt;cl-transformation effect=\\&quot;blur:1000\\&quot; quality=\\&quot;1\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n\\t&lt;cl-transformation effect=\\&quot;cartoonify\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n&lt;\\\/cl-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/angular-5.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js_2&quot;,&quot;framework&quot;:&quot;js_2&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;string_1.jpg\\&quot;)\\n  .resize(scale().width(640))\\n  .effect(blur().strength(1000))\\n  .delivery(format(auto()))\\n  .delivery(quality(1))\\n  .effect(cartoonify());&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;string_1.jpg\\&quot;)\\n  .resize(scale().width(640))\\n  .effect(blur().strength(1000))\\n  .delivery(format(auto()))\\n  .delivery(quality(1))\\n  .effect(cartoonify());&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js&quot;,&quot;framework&quot;:&quot;js&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.imageTag(&#039;string_1.jpg&#039;, {transformation: [ {width: 640, crop: \\&quot;scale\\&quot;}, {effect: \\&quot;blur:1000\\&quot;, quality: 1}, {effect: \\&quot;cartoonify\\&quot;} ]}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;string_1.jpg&#039;, {transformation: [\\n  {width: 640, crop: \\&quot;scale\\&quot;},\\n  {effect: \\&quot;blur:1000\\&quot;, quality: 1},\\n  {effect: \\&quot;cartoonify\\&quot;}\\n  ]}).toHtml();&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;cloudinary-core&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;python&quot;,&quot;framework&quot;:&quot;python&quot;,&quot;language&quot;:&quot;python&quot;,&quot;rawCodeSnippet&quot;:&quot;CloudinaryImage(\\&quot;string_1.jpg\\&quot;).image(transformation=[ {&#039;width&#039;: 640, &#039;crop&#039;: \\&quot;scale\\&quot;}, {&#039;effect&#039;: \\&quot;blur:1000\\&quot;, &#039;quality&#039;: 1}, {&#039;effect&#039;: \\&quot;cartoonify\\&quot;} ])&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;string_1.jpg\\&quot;).image(transformation=[\\n  {&#039;width&#039;: 640, &#039;crop&#039;: \\&quot;scale\\&quot;},\\n  {&#039;effect&#039;: \\&quot;blur:1000\\&quot;, &#039;quality&#039;: 1},\\n  {&#039;effect&#039;: \\&quot;cartoonify\\&quot;}\\n  ])&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Python&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;php_2&quot;,&quot;framework&quot;:&quot;php_2&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;(new ImageTag(&#039;string_1.jpg&#039;))\\n\\t-&gt;resize(Resize::scale()-&gt;width(640))\\n\\t-&gt;effect(Effect::blur()-&gt;strength(1000))\\n\\t-&gt;delivery(Delivery::format(\\n\\tFormat::auto()))\\n\\t-&gt;delivery(Delivery::quality(1))\\n\\t-&gt;effect(Effect::cartoonify());&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;string_1.jpg&#039;))\\n\\t-&gt;resize(Resize::scale()-&gt;width(640))\\n\\t-&gt;effect(Effect::blur()-&gt;strength(1000))\\n\\t-&gt;delivery(Delivery::format(\\n\\tFormat::auto()))\\n\\t-&gt;delivery(Delivery::quality(1))\\n\\t-&gt;effect(Effect::cartoonify());&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;php&quot;,&quot;framework&quot;:&quot;php&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;string_1.jpg\\&quot;, array(\\&quot;transformation\\&quot;=&gt;array( array(\\&quot;width\\&quot;=&gt;640, \\&quot;crop\\&quot;=&gt;\\&quot;scale\\&quot;), array(\\&quot;effect\\&quot;=&gt;\\&quot;blur:1000\\&quot;, \\&quot;quality\\&quot;=&gt;1), array(\\&quot;effect\\&quot;=&gt;\\&quot;cartoonify\\&quot;) )))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;string_1.jpg\\&quot;, array(\\&quot;transformation\\&quot;=&gt;array(\\n  array(\\&quot;width\\&quot;=&gt;640, \\&quot;crop\\&quot;=&gt;\\&quot;scale\\&quot;),\\n  array(\\&quot;effect\\&quot;=&gt;\\&quot;blur:1000\\&quot;, \\&quot;quality\\&quot;=&gt;1),\\n  array(\\&quot;effect\\&quot;=&gt;\\&quot;cartoonify\\&quot;)\\n  )))&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;java&quot;,&quot;framework&quot;:&quot;java&quot;,&quot;language&quot;:&quot;java&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().width(640).crop(\\&quot;scale\\&quot;).chain() .effect(\\&quot;blur:1000\\&quot;).quality(1).chain() .effect(\\&quot;cartoonify\\&quot;)).imageTag(\\&quot;string_1.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation()\\n  .width(640).crop(\\&quot;scale\\&quot;).chain()\\n  .effect(\\&quot;blur:1000\\&quot;).quality(1).chain()\\n  .effect(\\&quot;cartoonify\\&quot;)).imageTag(\\&quot;string_1.jpg\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Java&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;ruby&quot;,&quot;framework&quot;:&quot;ruby&quot;,&quot;language&quot;:&quot;ruby&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;string_1.jpg\\&quot;, transformation: [ {width: 640, crop: \\&quot;scale\\&quot;}, {effect: \\&quot;blur:1000\\&quot;, quality: 1}, {effect: \\&quot;cartoonify\\&quot;} ])&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;string_1.jpg\\&quot;, transformation: [\\n  {width: 640, crop: \\&quot;scale\\&quot;},\\n  {effect: \\&quot;blur:1000\\&quot;, quality: 1},\\n  {effect: \\&quot;cartoonify\\&quot;}\\n  ])&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Ruby&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;csharp&quot;,&quot;framework&quot;:&quot;csharp&quot;,&quot;language&quot;:&quot;csharp&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(640).Crop(\\&quot;scale\\&quot;).Chain() .Effect(\\&quot;blur:1000\\&quot;).Quality(1).Chain() .Effect(\\&quot;cartoonify\\&quot;)).BuildImageTag(\\&quot;string_1.jpg\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation()\\n  .Width(640).Crop(\\&quot;scale\\&quot;).Chain()\\n  .Effect(\\&quot;blur:1000\\&quot;).Quality(1).Chain()\\n  .Effect(\\&quot;cartoonify\\&quot;)).BuildImageTag(\\&quot;string_1.jpg\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;.NET&quot;,&quot;packageName&quot;:&quot;CloudinaryDotNet&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;dart&quot;,&quot;framework&quot;:&quot;dart&quot;,&quot;language&quot;:&quot;dart&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;string_1.jpg&#039;).transformation(Transformation()\\n\\t.resize(Resize.scale().width(640))\\n\\t.effect(Effect.blur().strength(1000))\\n\\t.delivery(Delivery.format(\\n\\tFormat.auto()))\\n\\t.delivery(Delivery.quality(1))\\n\\t.effect(Effect.cartoonify()));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;string_1.jpg&#039;).transformation(Transformation()\\n\\t.resize(Resize.scale().width(640))\\n\\t.effect(Effect.blur().strength(1000))\\n\\t.delivery(Delivery.format(\\n\\tFormat.auto()))\\n\\t.delivery(Delivery.quality(1))\\n\\t.effect(Effect.cartoonify()));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Dart&quot;,&quot;packageName&quot;:&quot;cloudinary_dart&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;swift&quot;,&quot;framework&quot;:&quot;swift&quot;,&quot;language&quot;:&quot;swift&quot;,&quot;rawCodeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(640).setCrop(\\&quot;scale\\&quot;).chain() .setEffect(\\&quot;blur:1000\\&quot;).setQuality(1).chain() .setEffect(\\&quot;cartoonify\\&quot;)).generate(\\&quot;string_1.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()\\n  .setWidth(640).setCrop(\\&quot;scale\\&quot;).chain()\\n  .setEffect(\\&quot;blur:1000\\&quot;).setQuality(1).chain()\\n  .setEffect(\\&quot;cartoonify\\&quot;)).generate(\\&quot;string_1.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;iOS&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;5.x&quot;},{&quot;sdkId&quot;:&quot;android&quot;,&quot;framework&quot;:&quot;android&quot;,&quot;language&quot;:&quot;android&quot;,&quot;rawCodeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().width(640).crop(\\&quot;scale\\&quot;).chain() .effect(\\&quot;blur:1000\\&quot;).quality(1).chain() .effect(\\&quot;cartoonify\\&quot;)).generate(\\&quot;string_1.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation()\\n  .width(640).crop(\\&quot;scale\\&quot;).chain()\\n  .effect(\\&quot;blur:1000\\&quot;).quality(1).chain()\\n  .effect(\\&quot;cartoonify\\&quot;)).generate(\\&quot;string_1.jpg\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Android&quot;,&quot;packageName&quot;:&quot;cloudinary-android&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;flutter&quot;,&quot;framework&quot;:&quot;flutter&quot;,&quot;language&quot;:&quot;flutter&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;string_1.jpg&#039;).transformation(Transformation()\\n\\t.resize(Resize.scale().width(640))\\n\\t.effect(Effect.blur().strength(1000))\\n\\t.delivery(Delivery.format(\\n\\tFormat.auto()))\\n\\t.delivery(Delivery.quality(1))\\n\\t.effect(Effect.cartoonify()));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;string_1.jpg&#039;).transformation(Transformation()\\n\\t.resize(Resize.scale().width(640))\\n\\t.effect(Effect.blur().strength(1000))\\n\\t.delivery(Delivery.format(\\n\\tFormat.auto()))\\n\\t.delivery(Delivery.quality(1))\\n\\t.effect(Effect.cartoonify()));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Flutter&quot;,&quot;packageName&quot;:&quot;cloudinary_flutter&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;kotlin&quot;,&quot;framework&quot;:&quot;kotlin&quot;,&quot;language&quot;:&quot;kotlin&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;string_1.jpg\\&quot;)\\n\\t resize(Resize.scale() { width(640) })\\n\\t effect(Effect.blur() { strength(1000) })\\n\\t delivery(Delivery.format(\\n\\tFormat.auto()))\\n\\t delivery(Delivery.quality(1))\\n\\t effect(Effect.cartoonify()) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;string_1.jpg\\&quot;)\\n\\t resize(Resize.scale() { width(640) })\\n\\t effect(Effect.blur() { strength(1000) })\\n\\t delivery(Delivery.format(\\n\\tFormat.auto()))\\n\\t delivery(Delivery.quality(1))\\n\\t effect(Effect.cartoonify()) \\n}.generate()&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Kotlin&quot;,&quot;packageName&quot;:&quot;kotlin-url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;jquery&quot;,&quot;framework&quot;:&quot;jquery&quot;,&quot;language&quot;:&quot;jquery&quot;,&quot;rawCodeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;string_1.jpg\\&quot;, {transformation: [ {width: 640, crop: \\&quot;scale\\&quot;}, {effect: \\&quot;blur:1000\\&quot;, quality: 1}, {effect: \\&quot;cartoonify\\&quot;} ]})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;string_1.jpg\\&quot;, {transformation: [\\n  {width: 640, crop: \\&quot;scale\\&quot;},\\n  {effect: \\&quot;blur:1000\\&quot;, quality: 1},\\n  {effect: \\&quot;cartoonify\\&quot;}\\n  ]})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;jQuery&quot;,&quot;packageName&quot;:&quot;cloudinary-jquery&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_native&quot;,&quot;framework&quot;:&quot;react_native&quot;,&quot;language&quot;:&quot;react_native&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;string_1.jpg\\&quot;)\\n  .resize(scale().width(640))\\n  .effect(blur().strength(1000))\\n  .delivery(format(auto()))\\n  .delivery(quality(1))\\n  .effect(cartoonify());&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;string_1.jpg\\&quot;)\\n  .resize(scale().width(640))\\n  .effect(blur().strength(1000))\\n  .delivery(format(auto()))\\n  .delivery(quality(1))\\n  .effect(cartoonify());&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React Native&quot;,&quot;packageName&quot;:&quot;cloudinary-react-native&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;}]\"\n      parsed-url=\"{&quot;url&quot;:&quot;https:\\\/\\\/res.cloudinary.com\\\/demo\\\/image\\\/upload\\\/w_640\\\/e_blur:1000,q_1,f_auto\\\/e_cartoonify\\\/string_1.jpg&quot;,&quot;cloud_name&quot;:&quot;demo&quot;,&quot;host&quot;:&quot;res.cloudinary.com&quot;,&quot;type&quot;:&quot;upload&quot;,&quot;resource_type&quot;:&quot;image&quot;,&quot;transformation&quot;:[{&quot;width&quot;:&quot;640&quot;},{&quot;effect&quot;:&quot;blur:1000&quot;,&quot;quality&quot;:&quot;1&quot;,&quot;format&quot;:&quot;auto&quot;},{&quot;effect&quot;:&quot;cartoonify&quot;}],&quot;transformation_string&quot;:&quot;w_640\\\/e_blur:1000,q_1,f_auto\\\/e_cartoonify&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;string_1.jpg&quot;,&quot;extension&quot;:&quot;jpg&quot;,&quot;format&quot;:&quot;jpg&quot;,&quot;format_code&quot;:true,&quot;url_code&quot;:false,&quot;signature&quot;:&quot;&quot;,&quot;private_cdn&quot;:false,&quot;result_asset_type&quot;:&quot;image&quot;}\"\n      with-url=\"true\"\n    >\n      <span class=\"u-visually-hidden\">Loading code examples<\/span>\n    <\/cld-code-widget><a class=\"c-image-link\" href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_640\/e_blur:1000,q_1,f_auto\/e_cartoonify\/string_1.jpg\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_640\/e_blur:1000,q_1,f_auto\/e_cartoonify\/string_1.jpg\" alt=\"Cartoon-looking LQIP\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"640\" height=\"376\"\/><\/a><\/p>\n<p>The possibilities are truly endless, promising a wide range of effects without sacrificing performance or image weight. An example is <a href=\"https:\/\/cloudinary.com\/blog\/instagram_like_filters_with_cloudinary\">Instagram-like filters<\/a>, which you can mix and match for the desired result. Let your imagination run wild with Cloudinary\u2019s <a href=\"https:\/\/codepen.io\/cloudinary\/full\/LjqJEG\/\">Neural Artwork Style Transfer add-on<\/a>.<\/p>\n<h2>Simplification of URLs With Named Transformations<\/h2>\n<p>You can simplify and shorten those long, complex URLs generated by Cloudinary with named transformations, which are akin to CSS classes, by grouping together URL-based, chained transformations and converting them to templates. Follow these steps:<\/p>\n<ol>\n<li>Create an LQIP for an image in your Cloudinary account.<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/users\/login?RelayState=%2Fconsole%2Ftransformations\">Log in<\/a> to your Cloudinary account and click the third icon from the left at the top for the <strong>Media Transformations<\/strong> screen.<\/li>\n<li>Click <strong>Edit<\/strong> in the box <strong>above<\/strong> your most recent transformation.<\/li>\n<li>In the next screen, click <strong>Save<\/strong> to save the template, i.e., the named transformation, with a name of your choice, e.g., <code>lqip<\/code>.<\/li>\n<\/ol>\n<p>Alternatively, start from the Media Transformations screen (see below). Click <strong>Create a new transformation<\/strong> in the top-right corner and, in the next screen, click <strong>Save As<\/strong> or <strong>Save<\/strong> with a name you prefer.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-res.cloudinary.com\/image\/upload\/w_700,c_fill,f_auto,q_auto\/dpr_auto\/Console_LQIP.png\" alt=\"Console\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1400\" height=\"840\"\/><\/p>\n<p>The output shows the streamlined URL like this one:\n<code>http:\/\/res.cloudinary.com\/demo\/image\/upload\/w_640,f_auto\/t_lqip\/string_1.jpg<\/code><\/p>\n<p>The <code>t_lqip<\/code> parameter encompasses most of the transformations performed on the image, hiding the settings for resizing, cropping, overlays, and so forth.<\/p>\n<h2>Conclusion<\/h2>\n<p>Regardless of your media strategies, we recommend that you adopt LQIPs, especially if you lazy-load images for your site. To accelerate workflows, leverage Cloudinary for its automated process of generating image placeholders. We welcome your feedback and would appreciate your sharing with us your experience, preferably with examples.<\/p>\n<hr \/>\n<p>Additional Resources:<\/p>\n<ul>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/an_introduction_to_progressive_image_rendering\"><em>An Introduction to Progressive Image Rendering<\/em><\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/image_loading_reloaded\"><em>Image Loading, Reloaded<\/em><\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/www.guypo.com\/introducing-lqip-low-quality-image-placeholders\"><em>Introducing LQIP \u2013 Low Quality Image Placeholders<\/em><\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/image_optimization_in_php\"><em>Compressing, Resizing, and Optimizing PHP Images<\/em><\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/image_optimization_in_python\"><em>Python Image Processing, Compression, and Resizing<\/em><\/a>\n<\/li>\n<\/ul>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":21777,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[25,165,241],"class_list":["post-21776","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-asset-management","tag-image-transformation","tag-progressive-image"],"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>Automate Placeholder Generation and Accelerate Page Loads<\/title>\n<meta name=\"description\" content=\"Learn how to leverage Cloudinary to automate generation of image placeholders while reducing development time and effort and accelerating page loads.\" \/>\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\/low_quality_image_placeholders_lqip_explained\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Low Quality Image Placeholders (LQIP) Explained\" \/>\n<meta property=\"og:description\" content=\"Learn how to leverage Cloudinary to automate generation of image placeholders while reducing development time and effort and accelerating page loads.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/low_quality_image_placeholders_lqip_explained\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2020-04-25T10:35:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-16T15:39:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1649727756\/Web_Assets\/blog\/blogpost-lqip-4post\/blogpost-lqip-4post-jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"1540\" \/>\n\t<meta property=\"og:image:height\" content=\"866\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/low_quality_image_placeholders_lqip_explained#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/low_quality_image_placeholders_lqip_explained\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Low Quality Image Placeholders (LQIP) Explained\",\"datePublished\":\"2020-04-25T10:35:00+00:00\",\"dateModified\":\"2025-02-16T15:39:42+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/low_quality_image_placeholders_lqip_explained\"},\"wordCount\":6,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/low_quality_image_placeholders_lqip_explained#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649727756\/Web_Assets\/blog\/blogpost-lqip-4post\/blogpost-lqip-4post.jpg?_i=AA\",\"keywords\":[\"Asset Management\",\"Image Transformation\",\"Progressive Image\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2020\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/low_quality_image_placeholders_lqip_explained\",\"url\":\"https:\/\/cloudinary.com\/blog\/low_quality_image_placeholders_lqip_explained\",\"name\":\"Automate Placeholder Generation and Accelerate Page Loads\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/low_quality_image_placeholders_lqip_explained#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/low_quality_image_placeholders_lqip_explained#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649727756\/Web_Assets\/blog\/blogpost-lqip-4post\/blogpost-lqip-4post.jpg?_i=AA\",\"datePublished\":\"2020-04-25T10:35:00+00:00\",\"dateModified\":\"2025-02-16T15:39:42+00:00\",\"description\":\"Learn how to leverage Cloudinary to automate generation of image placeholders while reducing development time and effort and accelerating page loads.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/low_quality_image_placeholders_lqip_explained#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/low_quality_image_placeholders_lqip_explained\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/low_quality_image_placeholders_lqip_explained#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649727756\/Web_Assets\/blog\/blogpost-lqip-4post\/blogpost-lqip-4post.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649727756\/Web_Assets\/blog\/blogpost-lqip-4post\/blogpost-lqip-4post.jpg?_i=AA\",\"width\":1540,\"height\":866},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/low_quality_image_placeholders_lqip_explained#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Low Quality Image Placeholders (LQIP) Explained\"}]},{\"@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":"Automate Placeholder Generation and Accelerate Page Loads","description":"Learn how to leverage Cloudinary to automate generation of image placeholders while reducing development time and effort and accelerating page loads.","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\/low_quality_image_placeholders_lqip_explained","og_locale":"en_US","og_type":"article","og_title":"Low Quality Image Placeholders (LQIP) Explained","og_description":"Learn how to leverage Cloudinary to automate generation of image placeholders while reducing development time and effort and accelerating page loads.","og_url":"https:\/\/cloudinary.com\/blog\/low_quality_image_placeholders_lqip_explained","og_site_name":"Cloudinary Blog","article_published_time":"2020-04-25T10:35:00+00:00","article_modified_time":"2025-02-16T15:39:42+00:00","og_image":[{"width":1540,"height":866,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1649727756\/Web_Assets\/blog\/blogpost-lqip-4post\/blogpost-lqip-4post-jpg?_i=AA","type":"image\/jpeg"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/low_quality_image_placeholders_lqip_explained#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/low_quality_image_placeholders_lqip_explained"},"author":{"name":"","@id":""},"headline":"Low Quality Image Placeholders (LQIP) Explained","datePublished":"2020-04-25T10:35:00+00:00","dateModified":"2025-02-16T15:39:42+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/low_quality_image_placeholders_lqip_explained"},"wordCount":6,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/low_quality_image_placeholders_lqip_explained#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649727756\/Web_Assets\/blog\/blogpost-lqip-4post\/blogpost-lqip-4post.jpg?_i=AA","keywords":["Asset Management","Image Transformation","Progressive Image"],"inLanguage":"en-US","copyrightYear":"2020","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/low_quality_image_placeholders_lqip_explained","url":"https:\/\/cloudinary.com\/blog\/low_quality_image_placeholders_lqip_explained","name":"Automate Placeholder Generation and Accelerate Page Loads","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/low_quality_image_placeholders_lqip_explained#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/low_quality_image_placeholders_lqip_explained#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649727756\/Web_Assets\/blog\/blogpost-lqip-4post\/blogpost-lqip-4post.jpg?_i=AA","datePublished":"2020-04-25T10:35:00+00:00","dateModified":"2025-02-16T15:39:42+00:00","description":"Learn how to leverage Cloudinary to automate generation of image placeholders while reducing development time and effort and accelerating page loads.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/low_quality_image_placeholders_lqip_explained#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/low_quality_image_placeholders_lqip_explained"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/low_quality_image_placeholders_lqip_explained#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649727756\/Web_Assets\/blog\/blogpost-lqip-4post\/blogpost-lqip-4post.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649727756\/Web_Assets\/blog\/blogpost-lqip-4post\/blogpost-lqip-4post.jpg?_i=AA","width":1540,"height":866},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/low_quality_image_placeholders_lqip_explained#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Low Quality Image Placeholders (LQIP) Explained"}]},{"@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\/v1649727756\/Web_Assets\/blog\/blogpost-lqip-4post\/blogpost-lqip-4post.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21776","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=21776"}],"version-history":[{"count":19,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21776\/revisions"}],"predecessor-version":[{"id":36834,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21776\/revisions\/36834"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/21777"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=21776"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=21776"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=21776"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}