{"id":21935,"date":"2019-08-12T18:50:08","date_gmt":"2019-08-12T18:50:08","guid":{"rendered":"http:\/\/compress_images_for_web_and_boost_performance_on_your_site"},"modified":"2024-06-01T11:42:18","modified_gmt":"2024-06-01T18:42:18","slug":"compress_images_for_web_and_boost_performance_on_your_site","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/compress_images_for_web_and_boost_performance_on_your_site","title":{"rendered":"Compress Images for Web and Boost Performance on Your Site"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>Slow-loading web content and problematic media displays that involve seemingly interminable scrolling tick off users to no end. <a href=\"https:\/\/cloudinary.com\/features\/optimization_fast_delivery\">Compressing online images<\/a> is, without question, a critical task for spearheading customer retention for websites. Keep in mind that small images can still look sharp. This article shows you how to achieve that by mastering the techniques of compressing images for the web.<\/p>\n<h2>Image-Compression Techniques<\/h2>\n<p>To compress images and, consequently, reduce their sizes, you apply a transformation technique that removes the image parts with a negligible or low visual effect on the display quality. Image compression can be lossless or lossy.<\/p>\n<h3>Lossless Compression<\/h3>\n<p>Lossless compression of images results in no loss of pixel data, significantly reducing their sizes with no quality compromise in the display. The examples below demonstrate lossless image-compression in play.<\/p>\n<p>Here\u2019s the original, uncompressed picture with a size of 2.58 MB:<\/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;eden_group.jpg\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;eden_group.jpg\\&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;eden_group.jpg\\&quot;).setVersion(1565124833);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;eden_group.jpg\\&quot;).setVersion(1565124833);&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;eden_group.jpg\\&quot; &gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;eden_group.jpg\\&quot; &gt;\\n\\n&lt;\\\/Image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;cloudinary-react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue_2&quot;,&quot;framework&quot;:&quot;vue_2&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;eden_group.jpg\\&quot;).setVersion(1565124833);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;eden_group.jpg\\&quot;).setVersion(1565124833);&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;eden_group.jpg\\&quot; &gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;eden_group.jpg\\&quot; &gt;\\n\\n&lt;\\\/cld-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;cloudinary-vue&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular_2&quot;,&quot;framework&quot;:&quot;angular_2&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;eden_group.jpg\\&quot;).setVersion(1565124833);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;eden_group.jpg\\&quot;).setVersion(1565124833);&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;eden_group.jpg\\&quot; &gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;eden_group.jpg\\&quot; &gt;\\n\\n&lt;\\\/cl-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/angular-5.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js_2&quot;,&quot;framework&quot;:&quot;js_2&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;eden_group.jpg\\&quot;).setVersion(1565124833);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;eden_group.jpg\\&quot;).setVersion(1565124833);&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;eden_group.jpg&#039;).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;eden_group.jpg&#039;).toHtml();&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;cloudinary-core&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;python&quot;,&quot;framework&quot;:&quot;python&quot;,&quot;language&quot;:&quot;python&quot;,&quot;rawCodeSnippet&quot;:&quot;CloudinaryImage(\\&quot;eden_group.jpg\\&quot;).image()&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;eden_group.jpg\\&quot;).image()&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Python&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;php_2&quot;,&quot;framework&quot;:&quot;php_2&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;(new ImageTag(&#039;eden_group.jpg&#039;))\\n\\t-&gt;version(1565124833);&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;eden_group.jpg&#039;))\\n\\t-&gt;version(1565124833);&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;eden_group.jpg\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;eden_group.jpg\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;java&quot;,&quot;framework&quot;:&quot;java&quot;,&quot;language&quot;:&quot;java&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().imageTag(\\&quot;eden_group.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().imageTag(\\&quot;eden_group.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;eden_group.jpg\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;eden_group.jpg\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Ruby&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;csharp&quot;,&quot;framework&quot;:&quot;csharp&quot;,&quot;language&quot;:&quot;csharp&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.BuildImageTag(\\&quot;eden_group.jpg\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.BuildImageTag(\\&quot;eden_group.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;eden_group.jpg&#039;).transformation(Transformation()\\n\\t.version(1565124833));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;eden_group.jpg&#039;).transformation(Transformation()\\n\\t.version(1565124833));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Dart&quot;,&quot;packageName&quot;:&quot;cloudinary_dart&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;swift&quot;,&quot;framework&quot;:&quot;swift&quot;,&quot;language&quot;:&quot;swift&quot;,&quot;rawCodeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().generate(\\&quot;eden_group.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().generate(\\&quot;eden_group.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().generate(\\&quot;eden_group.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().generate(\\&quot;eden_group.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;eden_group.jpg&#039;).transformation(Transformation()\\n\\t.version(1565124833));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;eden_group.jpg&#039;).transformation(Transformation()\\n\\t.version(1565124833));&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;eden_group.jpg\\&quot;)\\n\\t version(1565124833) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;eden_group.jpg\\&quot;)\\n\\t version(1565124833) \\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;eden_group.jpg\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;eden_group.jpg\\&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;eden_group.jpg\\&quot;).setVersion(1565124833);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;eden_group.jpg\\&quot;).setVersion(1565124833);&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\\\/v1565124833\\\/eden_group.jpg&quot;,&quot;cloud_name&quot;:&quot;demo&quot;,&quot;host&quot;:&quot;res.cloudinary.com&quot;,&quot;type&quot;:&quot;upload&quot;,&quot;resource_type&quot;:&quot;image&quot;,&quot;transformation&quot;:[],&quot;transformation_string&quot;:&quot;&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;1565124833&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;eden_group.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\/v1565124833\/eden_group.jpg\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/v1565124833\/eden_group.jpg\" alt=\"Eden friends\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"700\" height=\"933.33333333333\"\/><\/a><\/p>\n<p>Here\u2019s the compressed version with a size of 918 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;eden_group.jpg\\&quot;, {quality: \\&quot;auto\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;eden_group.jpg\\&quot;, {quality: \\&quot;auto\\&quot;})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Node.js&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_2&quot;,&quot;framework&quot;:&quot;react_2&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;eden_group.jpg\\&quot;).delivery(quality(auto()));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;eden_group.jpg\\&quot;).delivery(quality(auto()));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;react&quot;,&quot;framework&quot;:&quot;react&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;eden_group.jpg\\&quot; &gt; &lt;Transformation quality=\\&quot;auto\\&quot; \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;eden_group.jpg\\&quot; &gt;\\n\\t&lt;Transformation quality=\\&quot;auto\\&quot; \\\/&gt;\\n&lt;\\\/Image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;cloudinary-react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue_2&quot;,&quot;framework&quot;:&quot;vue_2&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;eden_group.jpg\\&quot;).delivery(quality(auto()));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;eden_group.jpg\\&quot;).delivery(quality(auto()));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/vue&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue&quot;,&quot;framework&quot;:&quot;vue&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;eden_group.jpg\\&quot; &gt; &lt;cld-transformation quality=\\&quot;auto\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;eden_group.jpg\\&quot; &gt;\\n\\t&lt;cld-transformation quality=\\&quot;auto\\&quot; \\\/&gt;\\n&lt;\\\/cld-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;cloudinary-vue&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular_2&quot;,&quot;framework&quot;:&quot;angular_2&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;eden_group.jpg\\&quot;).delivery(quality(auto()));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;eden_group.jpg\\&quot;).delivery(quality(auto()));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/ng&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular&quot;,&quot;framework&quot;:&quot;angular&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;eden_group.jpg\\&quot; &gt; &lt;cl-transformation quality=\\&quot;auto\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;eden_group.jpg\\&quot; &gt;\\n\\t&lt;cl-transformation quality=\\&quot;auto\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n&lt;\\\/cl-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/angular-5.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js_2&quot;,&quot;framework&quot;:&quot;js_2&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;eden_group.jpg\\&quot;).delivery(quality(auto()));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;eden_group.jpg\\&quot;).delivery(quality(auto()));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js&quot;,&quot;framework&quot;:&quot;js&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.imageTag(&#039;eden_group.jpg&#039;, {quality: \\&quot;auto\\&quot;}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;eden_group.jpg&#039;, {quality: \\&quot;auto\\&quot;}).toHtml();&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;cloudinary-core&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;python&quot;,&quot;framework&quot;:&quot;python&quot;,&quot;language&quot;:&quot;python&quot;,&quot;rawCodeSnippet&quot;:&quot;CloudinaryImage(\\&quot;eden_group.jpg\\&quot;).image(quality=\\&quot;auto\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;eden_group.jpg\\&quot;).image(quality=\\&quot;auto\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Python&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;php_2&quot;,&quot;framework&quot;:&quot;php_2&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;(new ImageTag(&#039;eden_group.jpg&#039;))\\n\\t-&gt;delivery(Delivery::quality(\\n\\tQuality::auto()));&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;eden_group.jpg&#039;))\\n\\t-&gt;delivery(Delivery::quality(\\n\\tQuality::auto()));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;php&quot;,&quot;framework&quot;:&quot;php&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;eden_group.jpg\\&quot;, array(\\&quot;quality\\&quot;=&gt;\\&quot;auto\\&quot;))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;eden_group.jpg\\&quot;, array(\\&quot;quality\\&quot;=&gt;\\&quot;auto\\&quot;))&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;java&quot;,&quot;framework&quot;:&quot;java&quot;,&quot;language&quot;:&quot;java&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().quality(\\&quot;auto\\&quot;)).imageTag(\\&quot;eden_group.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().quality(\\&quot;auto\\&quot;)).imageTag(\\&quot;eden_group.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;eden_group.jpg\\&quot;, quality: \\&quot;auto\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;eden_group.jpg\\&quot;, quality: \\&quot;auto\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Ruby&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;csharp&quot;,&quot;framework&quot;:&quot;csharp&quot;,&quot;language&quot;:&quot;csharp&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Quality(\\&quot;auto\\&quot;)).BuildImageTag(\\&quot;eden_group.jpg\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Quality(\\&quot;auto\\&quot;)).BuildImageTag(\\&quot;eden_group.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;eden_group.jpg&#039;).transformation(Transformation()\\n\\t.delivery(Delivery.quality(\\n\\tQuality.auto())));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;eden_group.jpg&#039;).transformation(Transformation()\\n\\t.delivery(Delivery.quality(\\n\\tQuality.auto())));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Dart&quot;,&quot;packageName&quot;:&quot;cloudinary_dart&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;swift&quot;,&quot;framework&quot;:&quot;swift&quot;,&quot;language&quot;:&quot;swift&quot;,&quot;rawCodeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setQuality(\\&quot;auto\\&quot;)).generate(\\&quot;eden_group.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setQuality(\\&quot;auto\\&quot;)).generate(\\&quot;eden_group.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;iOS&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;5.x&quot;},{&quot;sdkId&quot;:&quot;android&quot;,&quot;framework&quot;:&quot;android&quot;,&quot;language&quot;:&quot;android&quot;,&quot;rawCodeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().quality(\\&quot;auto\\&quot;)).generate(\\&quot;eden_group.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().quality(\\&quot;auto\\&quot;)).generate(\\&quot;eden_group.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;eden_group.jpg&#039;).transformation(Transformation()\\n\\t.delivery(Delivery.quality(\\n\\tQuality.auto())));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;eden_group.jpg&#039;).transformation(Transformation()\\n\\t.delivery(Delivery.quality(\\n\\tQuality.auto())));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Flutter&quot;,&quot;packageName&quot;:&quot;cloudinary_flutter&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;kotlin&quot;,&quot;framework&quot;:&quot;kotlin&quot;,&quot;language&quot;:&quot;kotlin&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;eden_group.jpg\\&quot;)\\n\\t delivery(Delivery.quality(\\n\\tQuality.auto())) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;eden_group.jpg\\&quot;)\\n\\t delivery(Delivery.quality(\\n\\tQuality.auto())) \\n}.generate()&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Kotlin&quot;,&quot;packageName&quot;:&quot;kotlin-url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;jquery&quot;,&quot;framework&quot;:&quot;jquery&quot;,&quot;language&quot;:&quot;jquery&quot;,&quot;rawCodeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;eden_group.jpg\\&quot;, {quality: \\&quot;auto\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;eden_group.jpg\\&quot;, {quality: \\&quot;auto\\&quot;})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;jQuery&quot;,&quot;packageName&quot;:&quot;cloudinary-jquery&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_native&quot;,&quot;framework&quot;:&quot;react_native&quot;,&quot;language&quot;:&quot;react_native&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;eden_group.jpg\\&quot;).delivery(quality(auto()));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;eden_group.jpg\\&quot;).delivery(quality(auto()));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React Native&quot;,&quot;packageName&quot;:&quot;cloudinary-react-native&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;}]\"\n      parsed-url=\"{&quot;url&quot;:&quot;https:\\\/\\\/res.cloudinary.com\\\/demo\\\/image\\\/upload\\\/q_auto\\\/eden_group.jpg&quot;,&quot;cloud_name&quot;:&quot;demo&quot;,&quot;host&quot;:&quot;res.cloudinary.com&quot;,&quot;type&quot;:&quot;upload&quot;,&quot;resource_type&quot;:&quot;image&quot;,&quot;transformation&quot;:[{&quot;quality&quot;:&quot;auto&quot;}],&quot;transformation_string&quot;:&quot;q_auto&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;eden_group.jpg&quot;,&quot;extension&quot;:&quot;jpg&quot;,&quot;format&quot;:&quot;jpg&quot;,&quot;format_code&quot;:true,&quot;url_code&quot;:false,&quot;signature&quot;:&quot;&quot;,&quot;private_cdn&quot;:false,&quot;result_asset_type&quot;:&quot;image&quot;}\"\n      with-url=\"true\"\n    >\n      <span class=\"u-visually-hidden\">Loading code examples<\/span>\n    <\/cld-code-widget><a class=\"c-image-link\" href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/q_auto\/eden_group.jpg\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/q_auto\/eden_group.jpg\" alt=\"Eden friends\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"700\" height=\"933.33333333333\"\/><\/a><\/p>\n<p>The two pictures look the same even though the second one has undergone compression that reduced its size by almost 2 MB.<\/p>\n<h3>Lossy Compression<\/h3>\n<p>As its name implies, lossy compression causes loss of pixel data. That\u2019s a result of the removal of certain image parts.<\/p>\n<h2>Lossless Compression Versus Lossy Compression<\/h2>\n<p>Before deciding which compression technique to adopt for your images, familiarize yourself with the results that the two techniques produce.<\/p>\n<h3>Lossless Compression<\/h3>\n<p>Applying lossless compression to images generates the following:<\/p>\n<ul>\n<li>A lossless attribute for images that are of the GIF, BMP, RAW, or PNG file type.<\/li>\n<li>An outstanding display.<\/li>\n<li>Possibly less reduction in file size than that engendered through lossy compression.<\/li>\n<\/ul>\n<h3>Lossy Compression<\/h3>\n<p>Applying <a href=\"https:\/\/cloudinary.com\/glossary\/lossy-compression\">lossy compression<\/a> to images generates the following:<\/p>\n<ul>\n<li>A lossy attribute for images that are of the JPEG or GIF file type.<\/li>\n<li>A greatly reduced file size.<\/li>\n<li>Irreversible images: once you go lossy, you\u2019re beyond the point of no return.<\/li>\n<li>Possible degradation of image quality in case of application of extreme parameters.<\/li>\n<\/ul>\n<h2>Benefits of Image Compression<\/h2>\n<p>Compressing online images yields remarkable benefits.<\/p>\n<h3>Fast Page-Loading Speed<\/h3>\n<p>Large media files can hamper page-loading speed, hence potentially a huge bottleneck for content access. Compressing those files before or immediately after upload significantly improves user experience for websites.<\/p>\n<p>Cloudinary, a stellar software-as-a-service (SaaS) platform for storing, managing, transforming, and delivering digital media, offers a free, eye-opening <a href=\"https:\/\/webspeedtest.cloudinary.com\/\">tool<\/a> for analyzing a site\u2019s loading experience. Have a whirl!<\/p>\n<h3>Faster Backups<\/h3>\n<p>Regular periodic backups are key for data integrity. As a matter of course, backing up smaller image files takes less time and less resources.<\/p>\n<h3>Lower Bandwidth<\/h3>\n<p>Loading smaller files takes less bandwidth on the audience\u2019s part, ensuring satisfaction and appreciation.<\/p>\n<h3>Less Storage Space<\/h3>\n<p>Even though data-storage options abound in the face of technology advances, be vigilant about economizing storage space at all times. Why? Because data racks up pretty fast over time, especially if your site contains media-heavy user-generated content.<\/p>\n<p>Whether you\u2019re leveraging third-party cloud storage or hosting it yourself, it\u2019s a good practice to compress media files before storing them. Space optimization is paramount..<\/p>\n<h3>Optimized Search<\/h3>\n<p>How does image compression benefit SEO? The answer is simple: <strong>speed<\/strong> is an ever-present criterion for ranking websites at search giants like Google.<\/p>\n<p>The faster a webpage loads, the higher it ranks. Well-compressed images make your website load fast, which in turn raises the probability of a higher ranking on search matches.<\/p>\n<h2>Image-Compression Tools<\/h2>\n<p>The following articles I wrote in 2017 contain recommendations for image-compression tools for three development environments:<\/p>\n<ul>\n<li>For <strong>PHP<\/strong>, Imagick works well. Built-in functions in PHP also compressing images. See the details in this <a href=\"https:\/\/cloudinary.com\/blog\/image_optimization_in_php\">article<\/a>.<\/li>\n<li>For <strong>WordPress<\/strong>, this <a href=\"https:\/\/cloudinary.com\/blog\/image_optimization_in_wordpress\">article<\/a> suggests several tools, from Imagify to Optimuss, with many amazing options.<\/li>\n<li>For <strong>Ruby<\/strong>, read my take in this <a href=\"https:\/\/cloudinary.com\/blog\/image_optimization_in_ruby\">article<\/a>.<\/li>\n<li>For <strong>Python<\/strong> Image Optimization and Transformation, read more <a href=\"https:\/\/cloudinary.com\/blog\/image_optimization_in_python\">here<\/a>\n<\/li>\n<\/ul>\n<h2>Image Compression With One Line of Code With Cloudinary<\/h2>\n<p>In addition, while uploading images to Cloudinary, you can efficiently automate image compression by adding \u2014one line of code to the URL that contains the <code>quality<\/code> parameter according to the syntax <code>q_<\/code>, followed by the quality level on a scale of 0\u2013100. For example::<\/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;dog.jpg\\&quot;, {quality: 50})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;dog.jpg\\&quot;, {quality: 50})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Node.js&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_2&quot;,&quot;framework&quot;:&quot;react_2&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;dog.jpg\\&quot;).delivery(quality(50));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;dog.jpg\\&quot;).delivery(quality(50));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;react&quot;,&quot;framework&quot;:&quot;react&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;dog.jpg\\&quot; &gt; &lt;Transformation quality=\\&quot;50\\&quot; \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;dog.jpg\\&quot; &gt;\\n\\t&lt;Transformation quality=\\&quot;50\\&quot; \\\/&gt;\\n&lt;\\\/Image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;cloudinary-react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue_2&quot;,&quot;framework&quot;:&quot;vue_2&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;dog.jpg\\&quot;).delivery(quality(50));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;dog.jpg\\&quot;).delivery(quality(50));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/vue&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue&quot;,&quot;framework&quot;:&quot;vue&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;dog.jpg\\&quot; &gt; &lt;cld-transformation quality=\\&quot;50\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;dog.jpg\\&quot; &gt;\\n\\t&lt;cld-transformation quality=\\&quot;50\\&quot; \\\/&gt;\\n&lt;\\\/cld-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;cloudinary-vue&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular_2&quot;,&quot;framework&quot;:&quot;angular_2&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;dog.jpg\\&quot;).delivery(quality(50));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;dog.jpg\\&quot;).delivery(quality(50));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/ng&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular&quot;,&quot;framework&quot;:&quot;angular&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;dog.jpg\\&quot; &gt; &lt;cl-transformation quality=\\&quot;50\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;dog.jpg\\&quot; &gt;\\n\\t&lt;cl-transformation quality=\\&quot;50\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n&lt;\\\/cl-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/angular-5.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js_2&quot;,&quot;framework&quot;:&quot;js_2&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;dog.jpg\\&quot;).delivery(quality(50));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;dog.jpg\\&quot;).delivery(quality(50));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js&quot;,&quot;framework&quot;:&quot;js&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.imageTag(&#039;dog.jpg&#039;, {quality: 50}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;dog.jpg&#039;, {quality: 50}).toHtml();&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;cloudinary-core&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;python&quot;,&quot;framework&quot;:&quot;python&quot;,&quot;language&quot;:&quot;python&quot;,&quot;rawCodeSnippet&quot;:&quot;CloudinaryImage(\\&quot;dog.jpg\\&quot;).image(quality=50)&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;dog.jpg\\&quot;).image(quality=50)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Python&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;php_2&quot;,&quot;framework&quot;:&quot;php_2&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;(new ImageTag(&#039;dog.jpg&#039;))\\n\\t-&gt;delivery(Delivery::quality(50));&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;dog.jpg&#039;))\\n\\t-&gt;delivery(Delivery::quality(50));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;php&quot;,&quot;framework&quot;:&quot;php&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;dog.jpg\\&quot;, array(\\&quot;quality\\&quot;=&gt;50))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;dog.jpg\\&quot;, array(\\&quot;quality\\&quot;=&gt;50))&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;java&quot;,&quot;framework&quot;:&quot;java&quot;,&quot;language&quot;:&quot;java&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().quality(50)).imageTag(\\&quot;dog.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().quality(50)).imageTag(\\&quot;dog.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;dog.jpg\\&quot;, quality: 50)&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;dog.jpg\\&quot;, quality: 50)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Ruby&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;csharp&quot;,&quot;framework&quot;:&quot;csharp&quot;,&quot;language&quot;:&quot;csharp&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Quality(50)).BuildImageTag(\\&quot;dog.jpg\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Quality(50)).BuildImageTag(\\&quot;dog.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;dog.jpg&#039;).transformation(Transformation()\\n\\t.delivery(Delivery.quality(50)));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;dog.jpg&#039;).transformation(Transformation()\\n\\t.delivery(Delivery.quality(50)));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Dart&quot;,&quot;packageName&quot;:&quot;cloudinary_dart&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;swift&quot;,&quot;framework&quot;:&quot;swift&quot;,&quot;language&quot;:&quot;swift&quot;,&quot;rawCodeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setQuality(50)).generate(\\&quot;dog.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setQuality(50)).generate(\\&quot;dog.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;iOS&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;5.x&quot;},{&quot;sdkId&quot;:&quot;android&quot;,&quot;framework&quot;:&quot;android&quot;,&quot;language&quot;:&quot;android&quot;,&quot;rawCodeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().quality(50)).generate(\\&quot;dog.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().quality(50)).generate(\\&quot;dog.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;dog.jpg&#039;).transformation(Transformation()\\n\\t.delivery(Delivery.quality(50)));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;dog.jpg&#039;).transformation(Transformation()\\n\\t.delivery(Delivery.quality(50)));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Flutter&quot;,&quot;packageName&quot;:&quot;cloudinary_flutter&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;kotlin&quot;,&quot;framework&quot;:&quot;kotlin&quot;,&quot;language&quot;:&quot;kotlin&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;dog.jpg\\&quot;)\\n\\t delivery(Delivery.quality(50)) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;dog.jpg\\&quot;)\\n\\t delivery(Delivery.quality(50)) \\n}.generate()&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Kotlin&quot;,&quot;packageName&quot;:&quot;kotlin-url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;jquery&quot;,&quot;framework&quot;:&quot;jquery&quot;,&quot;language&quot;:&quot;jquery&quot;,&quot;rawCodeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;dog.jpg\\&quot;, {quality: 50})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;dog.jpg\\&quot;, {quality: 50})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;jQuery&quot;,&quot;packageName&quot;:&quot;cloudinary-jquery&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_native&quot;,&quot;framework&quot;:&quot;react_native&quot;,&quot;language&quot;:&quot;react_native&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;dog.jpg\\&quot;).delivery(quality(50));&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;dog.jpg\\&quot;).delivery(quality(50));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React Native&quot;,&quot;packageName&quot;:&quot;cloudinary-react-native&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;}]\"\n      parsed-url=\"{&quot;url&quot;:&quot;https:\\\/\\\/res.cloudinary.com\\\/demo\\\/image\\\/upload\\\/q_50\\\/dog.jpg&quot;,&quot;cloud_name&quot;:&quot;demo&quot;,&quot;host&quot;:&quot;res.cloudinary.com&quot;,&quot;type&quot;:&quot;upload&quot;,&quot;resource_type&quot;:&quot;image&quot;,&quot;transformation&quot;:[{&quot;quality&quot;:&quot;50&quot;}],&quot;transformation_string&quot;:&quot;q_50&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;dog.jpg&quot;,&quot;extension&quot;:&quot;jpg&quot;,&quot;format&quot;:&quot;jpg&quot;,&quot;format_code&quot;:true,&quot;url_code&quot;:false,&quot;signature&quot;:&quot;&quot;,&quot;private_cdn&quot;:false,&quot;result_asset_type&quot;:&quot;image&quot;}\"\n      with-url=\"true\"\n    >\n      <span class=\"u-visually-hidden\">Loading code examples<\/span>\n    <\/cld-code-widget><a class=\"c-image-link\" href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/q_50\/dog.jpg\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/q_50\/dog.jpg\" alt=\"sample\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"700\" height=\"466.66666666667\"\/><\/a><\/p>\n<p>The higher the image quality, the larger the file size.<\/p>\n<p>This recent <a href=\"https:\/\/cloudinary.com\/blog\/compression_of_image_files_with_only_one_line_of_code\">post<\/a> tells you the details. Do check it out.<\/p>\n<p><strong>Tip<\/strong>: To apply lossy compression to animated GIFs, follow the procedure described in this <a href=\"https:\/\/cloudinary.com\/blog\/lossy_compression_for_optimizing_animated_gifs\">post<\/a>.<\/p>\n<h2>Conclusion<\/h2>\n<p>Compressing images goes a long way toward making the web run faster. And the procedure involved is a breeze. Let\u2019s swear off sending uncompressed images to our audience!<\/p>\n<hr \/>\n<h2>Further Reading on Image Optimization<\/h2>\n<ul>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/image_optimization_for_websites_beautiful_pages_that_load_quickly\">Website image optimization and fast delivery with Cloudinary<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/image_optimization_in_php\">The complete guide to PHP image compression and optimization<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/vue_js_tutorial_image_optimization_for_web_apps\">Vue.js Tutorial: Images Optimization for Web Apps<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/image_optimization_in_python\">Python Image Optimization and Transformation<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/image_optimization_in_ruby\">Image Optimization in Ruby<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/image_optimization_in_wordpress\">Image Optimization for WordPress<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/the_great_jpeg_2000_debate_analyzing_the_pros_and_cons_to_widespread_adoption\">Learn about the pros and cons of JPEG 2000<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/quick_guide_using_webp_on_your_website_or_native_apps\">Adopting the WebP Image Format for Android on Websites Or Native Apps<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/top_10_mistakes_in_handling_website_images_and_how_to_solve_them\">10 Website Image Mistakes that Slow Load Times<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/adaptive_browser_based_image_format_delivery\">Automatically Reduce Image Size Without Losing Quality<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/low_quality_image_placeholders_lqip_explained\">Automate Placeholder Generation and Accelerate Page Loads<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.com\/blog\/progressive_jpegs_and_green_martians\">3 Ways to Do Progressive JPEG Encoding<\/a>\n<\/li>\n<\/ul>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":21936,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[165,227],"class_list":["post-21935","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-image-transformation","tag-performance-optimization"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Compress Images for Web and Boost Performance on Your Site<\/title>\n<meta name=\"description\" content=\"Images are often the #1 element responsible for slow page load times. Learn how to Compress images for web, as well as boost performance on your site.\" \/>\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\/compress_images_for_web_and_boost_performance_on_your_site\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Compress Images for Web and Boost Performance on Your Site\" \/>\n<meta property=\"og:description\" content=\"Images are often the #1 element responsible for slow page load times. Learn how to Compress images for web, as well as boost performance on your site.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/compress_images_for_web_and_boost_performance_on_your_site\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2019-08-12T18:50:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-06-01T18:42:18+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1649737618\/Web_Assets\/blog\/Compressing-Images_21936e4104\/Compressing-Images_21936e4104-png?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"1540\" \/>\n\t<meta property=\"og:image:height\" content=\"770\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/compress_images_for_web_and_boost_performance_on_your_site#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/compress_images_for_web_and_boost_performance_on_your_site\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Compress Images for Web and Boost Performance on Your Site\",\"datePublished\":\"2019-08-12T18:50:08+00:00\",\"dateModified\":\"2024-06-01T18:42:18+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/compress_images_for_web_and_boost_performance_on_your_site\"},\"wordCount\":10,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/compress_images_for_web_and_boost_performance_on_your_site#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649737618\/Web_Assets\/blog\/Compressing-Images_21936e4104\/Compressing-Images_21936e4104.png?_i=AA\",\"keywords\":[\"Image Transformation\",\"Performance Optimization\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2019\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/compress_images_for_web_and_boost_performance_on_your_site\",\"url\":\"https:\/\/cloudinary.com\/blog\/compress_images_for_web_and_boost_performance_on_your_site\",\"name\":\"Compress Images for Web and Boost Performance on Your Site\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/compress_images_for_web_and_boost_performance_on_your_site#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/compress_images_for_web_and_boost_performance_on_your_site#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649737618\/Web_Assets\/blog\/Compressing-Images_21936e4104\/Compressing-Images_21936e4104.png?_i=AA\",\"datePublished\":\"2019-08-12T18:50:08+00:00\",\"dateModified\":\"2024-06-01T18:42:18+00:00\",\"description\":\"Images are often the #1 element responsible for slow page load times. Learn how to Compress images for web, as well as boost performance on your site.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/compress_images_for_web_and_boost_performance_on_your_site#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/compress_images_for_web_and_boost_performance_on_your_site\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/compress_images_for_web_and_boost_performance_on_your_site#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649737618\/Web_Assets\/blog\/Compressing-Images_21936e4104\/Compressing-Images_21936e4104.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649737618\/Web_Assets\/blog\/Compressing-Images_21936e4104\/Compressing-Images_21936e4104.png?_i=AA\",\"width\":1540,\"height\":770},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/compress_images_for_web_and_boost_performance_on_your_site#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Compress Images for Web and Boost Performance on Your Site\"}]},{\"@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":"Compress Images for Web and Boost Performance on Your Site","description":"Images are often the #1 element responsible for slow page load times. Learn how to Compress images for web, as well as boost performance on your site.","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\/compress_images_for_web_and_boost_performance_on_your_site","og_locale":"en_US","og_type":"article","og_title":"Compress Images for Web and Boost Performance on Your Site","og_description":"Images are often the #1 element responsible for slow page load times. Learn how to Compress images for web, as well as boost performance on your site.","og_url":"https:\/\/cloudinary.com\/blog\/compress_images_for_web_and_boost_performance_on_your_site","og_site_name":"Cloudinary Blog","article_published_time":"2019-08-12T18:50:08+00:00","article_modified_time":"2024-06-01T18:42:18+00:00","og_image":[{"width":1540,"height":770,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1649737618\/Web_Assets\/blog\/Compressing-Images_21936e4104\/Compressing-Images_21936e4104-png?_i=AA","type":"image\/png"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/compress_images_for_web_and_boost_performance_on_your_site#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/compress_images_for_web_and_boost_performance_on_your_site"},"author":{"name":"","@id":""},"headline":"Compress Images for Web and Boost Performance on Your Site","datePublished":"2019-08-12T18:50:08+00:00","dateModified":"2024-06-01T18:42:18+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/compress_images_for_web_and_boost_performance_on_your_site"},"wordCount":10,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/compress_images_for_web_and_boost_performance_on_your_site#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649737618\/Web_Assets\/blog\/Compressing-Images_21936e4104\/Compressing-Images_21936e4104.png?_i=AA","keywords":["Image Transformation","Performance Optimization"],"inLanguage":"en-US","copyrightYear":"2019","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/compress_images_for_web_and_boost_performance_on_your_site","url":"https:\/\/cloudinary.com\/blog\/compress_images_for_web_and_boost_performance_on_your_site","name":"Compress Images for Web and Boost Performance on Your Site","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/compress_images_for_web_and_boost_performance_on_your_site#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/compress_images_for_web_and_boost_performance_on_your_site#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649737618\/Web_Assets\/blog\/Compressing-Images_21936e4104\/Compressing-Images_21936e4104.png?_i=AA","datePublished":"2019-08-12T18:50:08+00:00","dateModified":"2024-06-01T18:42:18+00:00","description":"Images are often the #1 element responsible for slow page load times. Learn how to Compress images for web, as well as boost performance on your site.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/compress_images_for_web_and_boost_performance_on_your_site#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/compress_images_for_web_and_boost_performance_on_your_site"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/compress_images_for_web_and_boost_performance_on_your_site#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649737618\/Web_Assets\/blog\/Compressing-Images_21936e4104\/Compressing-Images_21936e4104.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649737618\/Web_Assets\/blog\/Compressing-Images_21936e4104\/Compressing-Images_21936e4104.png?_i=AA","width":1540,"height":770},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/compress_images_for_web_and_boost_performance_on_your_site#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Compress Images for Web and Boost Performance on Your Site"}]},{"@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\/v1649737618\/Web_Assets\/blog\/Compressing-Images_21936e4104\/Compressing-Images_21936e4104.png?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21935","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=21935"}],"version-history":[{"count":5,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21935\/revisions"}],"predecessor-version":[{"id":34233,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21935\/revisions\/34233"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/21936"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=21935"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=21935"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=21935"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}