Cloudinary Blog

Compress Images for Web and Boost Performance on Your Site

Compress Images for Web and Boost Performance on Your Site

Slow-loading web content and problematic media displays that involve seemingly interminable scrolling tick off users to no end. Compressing online images 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.

Webinar
How to Optimize for Page Load Speed

Image-Compression Techniques

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.

Lossless Compression

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.

Here’s the original, uncompressed picture with a size of 2.58 MB:

Ruby:
Copy to clipboard
cl_image_tag("eden_group.jpg")
PHP v1:
Copy to clipboard
cl_image_tag("eden_group.jpg")
PHP v2:
Copy to clipboard
(new ImageTag('eden_group.jpg'));
Python:
Copy to clipboard
CloudinaryImage("eden_group.jpg").image()
Node.js:
Copy to clipboard
cloudinary.image("eden_group.jpg")
Java:
Copy to clipboard
cloudinary.url().imageTag("eden_group.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('eden_group.jpg').toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("eden_group.jpg")
React:
Copy to clipboard
<Image publicId="eden_group.jpg" >

</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="eden_group.jpg" >

</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="eden_group.jpg" >

</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.BuildImageTag("eden_group.jpg")
Android:
Copy to clipboard
MediaManager.get().url().generate("eden_group.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().generate("eden_group.jpg")!, cloudinary: cloudinary)
Eden friends

Here’s the compressed version with a size of 918 KB:

Ruby:
Copy to clipboard
cl_image_tag("eden_group.jpg", :quality=>"auto")
PHP v1:
Copy to clipboard
cl_image_tag("eden_group.jpg", array("quality"=>"auto"))
PHP v2:
Copy to clipboard
(new ImageTag('eden_group.jpg'))
  ->delivery(Delivery::quality(Quality::auto()));
Python:
Copy to clipboard
CloudinaryImage("eden_group.jpg").image(quality="auto")
Node.js:
Copy to clipboard
cloudinary.image("eden_group.jpg", {quality: "auto"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().quality("auto")).imageTag("eden_group.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('eden_group.jpg', {quality: "auto"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("eden_group.jpg", {quality: "auto"})
React:
Copy to clipboard
<Image publicId="eden_group.jpg" >
  <Transformation quality="auto" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="eden_group.jpg" >
  <cld-transformation quality="auto" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="eden_group.jpg" >
  <cl-transformation quality="auto">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Quality("auto")).BuildImageTag("eden_group.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().quality("auto")).generate("eden_group.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setQuality("auto")).generate("eden_group.jpg")!, cloudinary: cloudinary)
Eden friends

The two pictures look the same even though the second one has undergone compression that reduced its size by almost 2 MB.

Lossy Compression

As its name implies, lossy compression causes loss of pixel data. That’s a result of the removal of certain image parts.

Lossless Compression Versus Lossy Compression

Before deciding which compression technique to adopt for your images, familiarize yourself with the results that the two techniques produce.

Lossless Compression

Applying lossless compression to images generates the following:

  • A lossless attribute for images that are of the GIF, BMP, RAW, or PNG file type.
  • An outstanding display.
  • Possibly less reduction in file size than that engendered through lossy compression.

Lossy Compression

Applying lossy compression to images generates the following:

  • A lossy attribute for images that are of the JPEG or GIF file type.
  • A greatly reduced file size.
  • Irreversible images: once you go lossy, you’re beyond the point of no return.
  • Possible degradation of image quality in case of application of extreme parameters.

Benefits of Image Compression

Compressing online images yields remarkable benefits.

Fast Page-Loading Speed

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.

Cloudinary, a stellar software-as-a-service (SaaS) platform for storing, managing, transforming, and delivering digital media, offers a free, eye-opening tool for analyzing a site’s loading experience. Have a whirl!

Faster Backups

Regular periodic backups are key for data integrity. As a matter of course, backing up smaller image files takes less time and less resources.

Lower Bandwidth

Loading smaller files takes less bandwidth on the audience’s part, ensuring satisfaction and appreciation.

Less Storage Space

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.

Whether you’re leveraging third-party cloud storage or hosting it yourself, it’s a good practice to compress media files before storing them. Space optimization is paramount..

Optimized Search

How does image compression benefit SEO? The answer is simple: speed is an ever-present criterion for ranking websites at search giants like Google.

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.

Image-Compression Tools

The following articles I wrote in 2017 contain recommendations for image-compression tools for three development environments:

  • For PHP, Imagick works well. Built-in functions in PHP also compressing images. See the details in this article.
  • For WordPress, this article suggests several tools, from Imagify to Optimuss, with many amazing options.
  • For Ruby, read my take in this article.
  • For Python Image Optimization and Manipulation, read more here

Image Compression With One Line of Code With Cloudinary

In addition, while uploading images to Cloudinary, you can efficiently automate image compression by adding —one line of code to the URL that contains the quality parameter according to the syntax q_, followed by the quality level on a scale of 0–100. For example::

Ruby:
Copy to clipboard
cl_image_tag("dog.jpg", :quality=>50)
PHP v1:
Copy to clipboard
cl_image_tag("dog.jpg", array("quality"=>50))
PHP v2:
Copy to clipboard
(new ImageTag('dog.jpg'))
  ->delivery(Delivery::quality(50));
Python:
Copy to clipboard
CloudinaryImage("dog.jpg").image(quality=50)
Node.js:
Copy to clipboard
cloudinary.image("dog.jpg", {quality: 50})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().quality(50)).imageTag("dog.jpg");
JS:
Copy to clipboard
cloudinary.imageTag('dog.jpg', {quality: 50}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("dog.jpg", {quality: 50})
React:
Copy to clipboard
<Image publicId="dog.jpg" >
  <Transformation quality="50" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="dog.jpg" >
  <cld-transformation quality="50" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="dog.jpg" >
  <cl-transformation quality="50">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Quality(50)).BuildImageTag("dog.jpg")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().quality(50)).generate("dog.jpg");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setQuality(50)).generate("dog.jpg")!, cloudinary: cloudinary)
sample

The higher the image quality, the larger the file size.

This recent post tells you the details. Do check it out.

Tip: To apply lossy compression to animated GIFs, follow the procedure described in this post.

Conclusion

Compressing images goes a long way toward making the web run faster. And the procedure involved is a breeze. Let’s swear off sending uncompressed images to our audience!

About Cloudinary

Cloudinary provides easy-to-use, cloud-based media management solutions for the world’s top brands. With offices in the US, UK and Israel, Cloudinary has quickly become the de facto solution used by developers and marketers at major companies around the world to streamline rich media management and deliver optimal end-user experiences.

For more information, visit www.cloudinary.com or follow us on Twitter


Further Reading on Image Optimization

Recent Blog Posts

Create Lightweight Sites With Low-Code and No-Code Technology

Consumers expect modern websites to be mainly visual. But, the more compelling and complex the related media is, the more data is involved, compounding the site’s weight. In today’s content-craving world, delivering unoptimized media can cost you because it leads to sluggish page loads, resulting in visitors abandoning your site in search of a faster alternative. In fact, a page load that takes more than three seconds can cause as many as 40% of your visitors to bounce. Given this competitive, digital-first environment, you can’t afford to lose page views, for time is of the essence.

Read more
A Blueprint for AWS-Secured Webhook Listeners for Cloudinary

tl;dr: An AWS-secured and optimized Cloudinary webhook listener for extending the Cloudinary service

Code: Github

A webhook is a communication medium for sending notifications from one platform to another about events that occurred. In place are user-defined HTTP callbacks that are triggered by specific events. When a triggered event takes place on the source site, the webhook listens to the event, collects the data, and sends it to the URL you specified in the form of an HTTP request.

Read more
New Accessibility Features for Cloudinary’s Product Gallery Widget

Cloudinary’s Product Gallery widget, which launched in 2019, has enabled many brands to effectively and efficiently showcase their products in a sleek and captivating manner, saving countless hours of development time and accelerating release cycles. By adding Cloudinary’s Product Gallery widget with its customizable UI to their product page, retailers reap numerous benefits, often turning visitors into customers in short order.

Read more
Why Successful Businesses Engage With and Convert Audiences With Visual Media

Most business buyers prefer to research purchase options online, as do many shoppers. No wonder online retail sales in the U.S. rose by 32.4% in 2020—an impressive gain of $105 billion.

For B2B and B2C businesses, text-heavy websites are no longer adequate in attracting shoppers. Instead, engaging visual media—spin images, videos, 3D models, augmented reality—are becoming a must for conveying eye-catching details and differentiators about products or services.

Read more
Making User-Generated Content (UGC) Shoppable With Cloudinary

User-generated content (UGC) is a powerful marketing tool. Not only does video complement marketing efforts for e-commerce by enabling customers to explore products in greater detail, but UGC also adds an element of trust. As a bonus, user-generated video is an exceptional opportunity for e-businesses to attract website traffic without their marketing team having to create promotional videos from scratch. User-generated content drives conversions and brand loyalty as a direct result of authentic interaction.

Read more