Cloudinary Blog

Your Web Image is Unnecessarily Bloated

Your Web Image is Unnecessarily Bloated

Images make up a majority of web content.But a lot of websites and applications that we browse aren’t always delivering the most optimal image format, size, quality and dimension.. . .

As a developer, it seems inefficient to serve a 2000kb JPEG image when we could compress images to optimize the performance without degrading the visual quality.

We are not new to this kind of responsibility. But our productivity will end up being questioned if we do not deliver fast. In order to do so, the community has devised several patterns to help improve productivity. Let's review few of these patterns based on their categories:

  • Optimized formats
  • Third-party Libraries
  • Third-party APIs

Webinar
How to Optimize for Page Load Speed

Optimized Formats

It is natural to use image formats such as PNG, JPEG and GIF. These three have been around for several years, but they each have characteristics that would make you choose one over another in certain cases. Additional formats have been introduced and some are being standardized in order to provide a better way to serve images in their best optimization level.

Examples

  • WebP
  • JPEG-XR
  • BPG

These optimized formats are, as a matter fact, a very good attempt at reducing the image bloat. Image formats are the means for achieving convenient optimization and compression without resorting to third-party solutions. Unfortunately, the image format battle continues, as there is inadequate support across all browsers, limitations, policies and other factors that make it hard to ensure every image format is consistently optimized.

Third-Party Libraries

You can also use third-party libraries to compress images. These libraries provide an exposed API method to which you can pass your image file, specify some compression argument, and have a compressed image returned for your configuration.

There is nothing wrong with writing your own solution, but we are trying to save time as well. These libraries are written based on some standard algorithms so it's fine to rely on them to some extent. However, they may not give you enough flexibility in terms of how compression is handled. It's hard to find a third-party library that takes a PNG file and delivers an optimally compressed lossless image.

Third-Party APIs

There are public and premium third-party APIs that could be used to process a bloated image, which is then returned to you as an HTTP response. This so far is the most easier to use because it just requires basic knowledge of HTTP to get your images compressed. It's not language or platform dependent which makes it a little more flexible than the others.

Examples:

Plus, you encounter the same issue as you do with third-party SDKs: It's hard to find that all-in-one-solution that is flexible enough to address your problem.

A Better Choice That Offers CDN

While the platforms discussed above are commonly used for compressing images, not one offers a comprehensive, intelligent solution for compression and optimization. Image delivery and upload may even become more complex when you need to serve your images via a content delivery network (CDN). This adds another layer of complexity to the problem.

But, what if there was a single tool that could:

  1. Upload, store and deliver images via CDN
  2. Transform images (dimension, color adjustment, etc)
  3. Compress images losslessly

Cloudinary is that solution. It’s a comprehensive image management tool that quickly and easily addresses your image concerns, eliminating the challenges and risks of image storage and management.

Cloudinary also intelligently addresses our image compression challenges. It uses image transformation features to give you control over the quality of your images, while giving you the option to automatically select quality and format.

What's most interesting about Cloudinary is that all these features are URL-based, which means you simply need to alter the URL to achieve the configurations you need. You also can use the provided SDKs if you prefer not to do URL manipulation.

Image Quality Transformation

The following image of a woman was delivered using Cloudinary (the upload mechanism is not covered but you can read about that here):

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

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

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

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

It's delivered with this URL:

Copy to clipboard
https://res.cloudinary.com/demo/image/upload/woman.jpg

This image weighs about 569kb. This is not a bad quality, but we can do better. Let's see how much we can adjust this image without losing visual quality:

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

Copy to clipboard
https://res.cloudinary.com/demo/image/upload/q_90/woman.jpg

The q transformation property takes a variety of values, one of which is a range of 1 to 100 that indicates the quality in percentages. This is what we have applied above and the image was trimmed down to 123kb. We just eliminated 446kb, which is a great example of what we mean by the title of this article: "Your Web Image is Unnecessarily Bloated."

Let's go hard on this image and see what's the worst that can happen:

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

Copy to clipboard
https://res.cloudinary.com/demo/image/upload/q_40/woman.jpg

I just took the quality down to 40 and trimmed down the size to 38kb, yet the visual quality of the image is partially degraded. By now you could imagine the bandwidth you’d be wasting because of the lack of compression.

Let's try 10 percent.

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

Copy to clipboard
https://res.cloudinary.com/demo/image/upload/q_10/woman.jpg

Now the image is visually poor. This doesn't mean we can tell for sure that 40 percent is the perfect point. It could be 30, it could be 20, but we don’t know exactly To find a perfect quality, we can use the auto quality value rather than a rigid value:

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

Copy to clipboard
https://res.cloudinary.com/demo/image/upload/q_auto/woman.jpg

The auto value produces an image that weighs 45kb. This is easier and quicker than using a rigid value and guessing the perfect compression rate.

Auto Formats

In addition to quality transformations, you also can define automatic transcoding for your images. This enables Cloudinary to choose a suitable, and optimal, image format for the browser rendering the image:

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

Copy to clipboard
https://res.cloudinary.com/demo/image/upload/f_auto/woman

Browsers, such as Chrome, support specific formats, like WebP, to improve performance . Cloudinary always knows when and how best to do this without losing the visual quality of the image.

Conclusion

You website images might be bloated or optimized to a certain level. You can use image formats, third-party libraries and APIs to optimize images, but they might not be as flexible as you need them to be.

Cloudinary offers a comprehensive image management solution that delivers and transforms images via URL-based APIs. You can utilize the transformation features for image optimization and compression.

You can sign up for a free Cloudinary account and see how easy it is to optimize images with its URL-based solution.

This post was originally published on Noupe.com

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