Cloudinary Blog

The holy grail of image optimization OR balancing visual quality and file size

Compress an Image Automatically Without Losing Quality

One of the most important things to know about compressing image files is that a smaller file size comes at the cost of a lower image quality. How much lower, and whether low enough to make a difference visually, depends on the image. Compression can be very effective at reducing the size of the image, and besides lowering the costs of storage space and bandwidth, a reduced image size goes a long way to retaining your users’ attention with faster, smaller downloads.

On the other hand, a lot of developers are afraid to use aggressive compression for fear of degrading the visual quality, and tend to err on the side of caution, assigning higher quality values than are really needed. But adjusting the quality compression level doesn’t always lead to a loss of visual quality. Precise adjustment of the compression level, complemented by fine-tuning of the encoding settings, can significantly reduce the file size without any degradation noticeable to the human eye.

Selecting the quality setting

So, what’s the standard quality and encoding setting that works for all images? Unfortunately, there is no single setting that is optimal for all images, and simply lowering the image quality to a new setting is problematic:

  1. The image quality setting is usually specified on a sliding scale between 0 and 100, but what does this number actually represent for different image formats such as JPEG, WebP, and PNG? The compression algorithms used are complex and varied, so it's not always known what these quality settings actually mean without a lot of experimentation. Different algorithms and formats tend to implement the settings in different ways, so any specific quality (e.g. 70) also means different things in different contexts and for different formats.
  2. The contents of an image determines to a large degree how well it can be compressed before losing visual quality. For example, does the image contain a huge range of colors? A large degree of complicated detail? Smooth color gradients? Selecting a single default quality setting for all your images fails to account for these differences in images: where one image may display perfectly with a given quality setting (e.g. 60), another image with different content may have visual artifacts with the same quality setting.
  3. The size of the image can require a different quality setting for each size displayed. Where an image of a certain size may display perfectly with a given quality setting (e.g. 75), the same image scaled to a different size may have visual artifacts with the same quality setting. An image's quality setting should be optimized for each of the resized images and not just one quality setting for all sizes.

Taking the above points into consideration is all well and good when you have the time to fiddle with each image and find the optimal quality setting that gives the biggest saving on file size without affecting the visual quality. However, this time consuming process is not efficient when you have to fine tune a huge number of images, never mind the impossibility of manually finding the optimal quality if you have a lot of user-uploaded images to display.

The interactive image example below shows the effect that the various quality settings have on an image's visual quality. The image is scaled down to a width of 600 pixels and initially displayed with a quality setting of 100. Click on the quality buttons below the image to see how different quality settings impact the image quality.

beach hut
Quality: 100 Size: 228KB
10 20 30 40 50 60 70 80 90 100

As you click between the quality settings from lowest to highest, initially there is a huge increase in the visual quality for a relatively small increase in file size, but towards the higher quality settings there is little to no improvement in the visual quality for a big increase in file size. The example JPEG image also highlights how different image content is visually affected by the various quality settings. The most prominent changes when transitioning down to lower qualities happens with the text overlays in the image, which become noticeable at relatively high quality settings. The smooth color gradients in the sky are the next to show the visual effects of compression and the complicated detail of the huts and the beach show obvious artifacts only at very low qualities.

Automatic image quality - q_auto

Cloudinary can automate the file size versus visual quality trade-off decision, on-the-fly, by using perceptual metrics and heuristics that tune the encoding settings and select the appropriate image quality based on the specific image content and format. Analyzing every image individually to find the optimal compression level and image encoding settings allows for precise adjustment of the compression level complemented by fine tuning of the encoding settings, and can significantly reduce the file size without any degradation noticeable to the human eye.

To perform automatic quality selection and image encoding adjustments, simply add the quality parameter set to auto (q_auto in URLs). For example, using the same beach image scaled down to a width of 600 pixels and delivered with automatic quality (19.5KB - a saving of almost 60% in file size compared to 90 quality):

Ruby:
cl_image_tag("beach_huts.jpg", :transformation=>[
  {:width=>600, :crop=>"scale"},
  {:quality=>"auto"}
  ])
PHP:
cl_image_tag("beach_huts.jpg", array("transformation"=>array(
  array("width"=>600, "crop"=>"scale"),
  array("quality"=>"auto")
  )))
Python:
CloudinaryImage("beach_huts.jpg").image(transformation=[
  {'width': 600, 'crop': "scale"},
  {'quality': "auto"}
  ])
Node.js:
cloudinary.image("beach_huts.jpg", {transformation: [
  {width: 600, crop: "scale"},
  {quality: "auto"}
  ]})
Java:
cloudinary.url().transformation(new Transformation()
  .width(600).crop("scale").chain()
  .quality("auto")).imageTag("beach_huts.jpg");
JS:
cloudinary.imageTag('beach_huts.jpg', {transformation: [
  {width: 600, crop: "scale"},
  {quality: "auto"}
  ]}).toHtml();
jQuery:
$.cloudinary.image("beach_huts.jpg", {transformation: [
  {width: 600, crop: "scale"},
  {quality: "auto"}
  ]})
React:
<Image publicId="beach_huts.jpg" >
  <Transformation width="600" crop="scale" />
  <Transformation quality="auto" />
</Image>
Angular:
<cl-image public-id="beach_huts.jpg" >
  <cl-transformation width="600" crop="scale">
  </cl-transformation>
  <cl-transformation quality="auto">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(600).Crop("scale").Chain()
  .Quality("auto")).BuildImageTag("beach_huts.jpg")
Android:
MediaManager.get().url().transformation(new Transformation()
  .width(600).crop("scale").chain()
  .quality("auto")).generate("beach_huts.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(600).setCrop("scale").chain()
  .setQuality("auto")).generate("beach_huts.jpg")!, cloudinary: cloudinary)
Image delivered with automatic image quality

Automatic image quality - fine tuning

How you ultimately use the image may also influence the quality/size trade-off decision. For example:

  • Is the image used as a thumbnail link to a high quality version?
  • Do you sell images, or display high resolution images for printing, so that the visual quality is something you don't want to compromise at all?
  • Will the image receive a lot of traffic and therefore bandwidth considerations become even more important?

To address these and other considerations, you can influence how aggressively the quality automation algorithm reduces the file size, by adding an extra value to the q_auto parameter that describes the level of visual quality to aim for (best, good, eco, or low).

The interactive image example below shows the effect that the various auto quality settings have on the visual quality of the same beach image used in the first example above, also scaled down to a width of 600 pixels. The image is initially displayed with a quality setting of 100, and clicking on one of the buttons below the image will display the image using that particular quality setting.

beach hut
Quality: 100 Size: 228KB
auto:low auto:eco auto:good auto:best 80 100

The different automatic quality settings can be summarized as follows:

  • q_auto:best - The least aggressive algorithm, which compresses the files as much as possible without compromising the visual quality at all.
  • q_auto:good - Delivers a relatively small file size with good visual quality. The image might include a few minor visual artifacts that are only apparent on very close visual inspection of the image. This setting is the optimal balance between file size and visual quality.
  • q_auto:eco - A more aggressive algorithm, which prioritizes smaller files at the cost of a slightly lower visual quality that is only apparent on close visual inspection.
  • q_auto:low - The most aggressive algorithm, which results in the smallest files, allowing for lower visual quality.

Automatic quality default values

By default, specifying q_auto is the same as specifying q_auto:good, however this default value changes if the requesting browser has Save-Data support enabled, in which case q_auto defaults to q_auto:eco. Save-Data support is a feature included in the Client-Hints standard, which is already supported by Chrome and Opera browsers.

Note: For customers with a custom domain name or private CDN distribution, the Client-Hints processing needs to be set up: contact us for more details. UPDATE - September 2016: features that involve Client-Hints processing are now available for all customers without the need for a specific setup.

Automatic image quality - with automatic image format

Take your image optimization to the next level by combining automatic image quality selection with automatic image format selection. The Cloudinary algorithm can then check if a different format (e.g. PNG8) is a better fit for a specific image based on its content. Some formats such as WebP and JPEG-XR are also more efficient for delivering web images, but they are not supported by all browsers. To optimize the image delivery, Cloudinary can also dynamically select the most efficient image format to deliver, based on the browser requesting the image.

To include automatic format selection for image delivery, simply add the format parameter and set it to auto (f_auto in URLs). For example, the same beach image as above, delivered with both automatic quality selection and automatic format selection (q_auto,f_auto), will be delivered as WebP (13.2KB) to Chrome browsers, JPEG-XR (15KB) to Internet-Explorer/Edge browsers, and JPEG (19.5KB) to all other browsers:

Ruby:
cl_image_tag("beach_huts.jpg", :transformation=>[
  {:width=>600, :crop=>"scale"},
  {:quality=>"auto", :fetch_format=>:auto}
  ])
PHP:
cl_image_tag("beach_huts.jpg", array("transformation"=>array(
  array("width"=>600, "crop"=>"scale"),
  array("quality"=>"auto", "fetch_format"=>"auto")
  )))
Python:
CloudinaryImage("beach_huts.jpg").image(transformation=[
  {'width': 600, 'crop': "scale"},
  {'quality': "auto", 'fetch_format': "auto"}
  ])
Node.js:
cloudinary.image("beach_huts.jpg", {transformation: [
  {width: 600, crop: "scale"},
  {quality: "auto", fetch_format: "auto"}
  ]})
Java:
cloudinary.url().transformation(new Transformation()
  .width(600).crop("scale").chain()
  .quality("auto").fetchFormat("auto")).imageTag("beach_huts.jpg");
JS:
cloudinary.imageTag('beach_huts.jpg', {transformation: [
  {width: 600, crop: "scale"},
  {quality: "auto", fetchFormat: "auto"}
  ]}).toHtml();
jQuery:
$.cloudinary.image("beach_huts.jpg", {transformation: [
  {width: 600, crop: "scale"},
  {quality: "auto", fetch_format: "auto"}
  ]})
React:
<Image publicId="beach_huts.jpg" >
  <Transformation width="600" crop="scale" />
  <Transformation quality="auto" fetchFormat="auto" />
</Image>
Angular:
<cl-image public-id="beach_huts.jpg" >
  <cl-transformation width="600" crop="scale">
  </cl-transformation>
  <cl-transformation quality="auto" fetch-format="auto">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Width(600).Crop("scale").Chain()
  .Quality("auto").FetchFormat("auto")).BuildImageTag("beach_huts.jpg")
Android:
MediaManager.get().url().transformation(new Transformation()
  .width(600).crop("scale").chain()
  .quality("auto").fetchFormat("auto")).generate("beach_huts.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setWidth(600).setCrop("scale").chain()
  .setQuality("auto").setFetchFormat("auto")).generate("beach_huts.jpg")!, cloudinary: cloudinary)
q_auto with f_auto

The combination of q_auto and f_auto is even more powerful when used together than either of them separately. The algorithm might detect that the PNG format is a better fit for specific images that contain content such as drawings. For some images, even the PNG8 format can be automatically selected for providing great looking results with a very efficient file size.

For example, the following URL dynamically generates a 500 pixels wide version of a drawing only using automatic image quality selection (q_auto without f_auto).

Ruby:
cl_image_tag("flowers_and_birds.jpg", :width=>500, :quality=>"auto", :crop=>"scale")
PHP:
cl_image_tag("flowers_and_birds.jpg", array("width"=>500, "quality"=>"auto", "crop"=>"scale"))
Python:
CloudinaryImage("flowers_and_birds.jpg").image(width=500, quality="auto", crop="scale")
Node.js:
cloudinary.image("flowers_and_birds.jpg", {width: 500, quality: "auto", crop: "scale"})
Java:
cloudinary.url().transformation(new Transformation().width(500).quality("auto").crop("scale")).imageTag("flowers_and_birds.jpg");
JS:
cloudinary.imageTag('flowers_and_birds.jpg', {width: 500, quality: "auto", crop: "scale"}).toHtml();
jQuery:
$.cloudinary.image("flowers_and_birds.jpg", {width: 500, quality: "auto", crop: "scale"})
React:
<Image publicId="flowers_and_birds.jpg" >
  <Transformation width="500" quality="auto" crop="scale" />
</Image>
Angular:
<cl-image public-id="flowers_and_birds.jpg" >
  <cl-transformation width="500" quality="auto" crop="scale">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(500).Quality("auto").Crop("scale")).BuildImageTag("flowers_and_birds.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().width(500).quality("auto").crop("scale")).generate("flowers_and_birds.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(500).setQuality("auto").setCrop("scale")).generate("flowers_and_birds.jpg")!, cloudinary: cloudinary)
Automatic quality selection of a cartoon

The result is a JPEG image (41KB) where, if you look carefully, you can see that the lossy nature of the JPEG format resulted in some visual artifacts. In the next example with the same drawing, we will combine both q_auto and f_auto:

Ruby:
cl_image_tag("flowers_and_birds.jpg", :width=>500, :quality=>"auto", :fetch_format=>:auto, :crop=>"scale")
PHP:
cl_image_tag("flowers_and_birds.jpg", array("width"=>500, "quality"=>"auto", "fetch_format"=>"auto", "crop"=>"scale"))
Python:
CloudinaryImage("flowers_and_birds.jpg").image(width=500, quality="auto", fetch_format="auto", crop="scale")
Node.js:
cloudinary.image("flowers_and_birds.jpg", {width: 500, quality: "auto", fetch_format: "auto", crop: "scale"})
Java:
cloudinary.url().transformation(new Transformation().width(500).quality("auto").fetchFormat("auto").crop("scale")).imageTag("flowers_and_birds.jpg");
JS:
cloudinary.imageTag('flowers_and_birds.jpg', {width: 500, quality: "auto", fetchFormat: "auto", crop: "scale"}).toHtml();
jQuery:
$.cloudinary.image("flowers_and_birds.jpg", {width: 500, quality: "auto", fetch_format: "auto", crop: "scale"})
React:
<Image publicId="flowers_and_birds.jpg" >
  <Transformation width="500" quality="auto" fetchFormat="auto" crop="scale" />
</Image>
Angular:
<cl-image public-id="flowers_and_birds.jpg" >
  <cl-transformation width="500" quality="auto" fetch-format="auto" crop="scale">
  </cl-transformation>
</cl-image>
.Net:
cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(500).Quality("auto").FetchFormat("auto").Crop("scale")).BuildImageTag("flowers_and_birds.jpg")
Android:
MediaManager.get().url().transformation(new Transformation().width(500).quality("auto").fetchFormat("auto").crop("scale")).generate("flowers_and_birds.jpg");
iOS:
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(500).setQuality("auto").setFetchFormat("auto").setCrop("scale")).generate("flowers_and_birds.jpg")!, cloudinary: cloudinary)
Automatic quality and format selection of a cartoon

In this case, the algorithm decided to encode the image using the PNG8 format. The image looks better, has no artifacts, and weighs even less - just 34.8KB.

See the Automatic format selection documentation page for more details.

The bottom line: automate quality selection for all your images

Selecting an optimized quality setting for every image can now be easily automated with Cloudinary's quality selection algorithm. The feature can also be combined with automatic format selection for a powerful and dynamic solution that delivers all your images using minimal bandwidth and maximum visual quality.

Try out the automatic quality interactive demo page and see the Automatic quality and encoding settings documentation for more details. All image manipulation and delivery features introduced here are available with no extra charge for all Cloudinary's plans, including the free plan.

Recent Blog Posts

10 Website Videos Mistakes and How to Solve Them

It should come as no surprise that video use on the internet is exploding. You can see the dramatic growth of video on the average site in this SpeedCurve blog post.

With the growth in video comes greater bandwidth use, which is not only costly for your IT budget, but for your visitors as well. Beyond the expense, there is the user experience to consider. The heavier the page, the longer it will take to load, and the greater likelihood visitors will abandon your site. Page load speed is also an important factor in SEO ranking, so clearly video is something we need to take seriously and get right. Video is challenging, presenting terms still unfamiliar to developers - like codecs, bitrate and adaptive bitrate streaming. As a result, mistakes are being made in video implementation.

Read more
Android Data Saver: Optimizing Mobile Data Usage with Cloudinary

Over the life of a mobile device, the cost of a cellular data plan often exceeds that of the device itself. To optimize data usage and purge useless data on their mobile devices, users can enable Data Saver from Android 7.0 (API level 24). To do so, users toggle Data Saver in quick settings under the Notification shade or under Settings > Data usage. With Data Saver enabled, apps that aren't whitelisted cannot use cellular data in the background. They are also directed to consume less data while active.

Read more
Introducing the Cloudinary Upload Widget v2

At Cloudinary, we manage the entire pipeline of media assets for thousands of customers of varying sizes from numerous verticals. Cloudinary is an end-to-end solution for all your image and video needs, including upload, storage, administration, manipulation, optimization and dynamic delivery.

Read more
Convert an Image to a 3D Canvas With Cloudinary

Note
This post was cowritten with Daniel Mendoza.
Note
This post was cowritten with Daniel Mendoza.
Note

Famed American poet Henry David Thoreau once said, “This world is but a canvas to our imagination.” And, like your imagination, the transformations you can apply to images with Cloudinary are practically endless. You can even render any flat image to appear three-dimensional and framed on a canvas.

Read more
Mobile Optimization: Optimize Your Mobile-Web User Experience

TL;DR

We live in a visual world, often while on the go, and consumers expect media-rich web content. Accordingly, the loading speed of images and videos is a big factor in user experience. To optimize customer satisfaction with your mobile content, you must focus on the quality, format, and size of your digital assets. With Cloudinary, optimization is simple, not only enhancing your mobile web and app performance, but also upping your SEO game and boosting customer experience.

Read more