Cloudinary Blog

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

Deliver optimally sized, high quality images automatically

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.

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:
cl.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")
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.

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:
cl.imageTag('beach_huts.jpg', {transformation: [
  {width: 600, crop: "scale"},
  {quality: "auto", fetch_format: "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" fetch_format="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")
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:
cl.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")
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:
cl.imageTag('flowers_and_birds.jpg', {width: 500, quality: "auto", fetch_format: "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" fetch_format="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")
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

Build the Back-End For Your Own Instagram-style App with Cloudinary

Github Repo

Managing media files (processing, storage and manipulation) is one of the biggest challenges we encounter as practical developers. These challenges include:

A great service called Cloudinary can help us overcome many of these challenges. Together with Cloudinary, let's work on solutions to these challenges and hopefully have a simpler mental model towards media management.

Read more

Build A Miniflix in 10 Minutes

By Prosper Otemuyiwa
Build A Miniflix in 10 Minutes

Developers are constantly faced with challenges of building complex products every single day. And there are constraints on the time needed to build out the features of these products.

Engineering and Product managers want to beat deadlines for projects daily. CEOs want to roll out new products as fast as possible. Entrepreneurs need their MVPs like yesterday. With this in mind, what should developers do?

Read more

Your Web Image is Unnecessarily Bloated

By Christian Nwamba
Your Web Image is Unnecessarily Bloated

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:

Read more

Google For Nigeria: We saw it all…

By Christian Nwamba
Google For Nigeria: We saw it all…

Note from Cloudinary: Christian Nwamba, a frequent Cloudinary contributor, recently attended, and was a main speaker, at the Google Developer Group (GDG) Conference in Lagos, Nigeria. Christian led a session teaching more than 500 developers how to “Build Offline Apps for the Next Billion Users.” The stack he used included JS (Vue), Firebase, Service Workers and Cloudinary. Below is his account of the conference and his talk.

Read more
Viral Images: Securing Images and Video uploads to your systems

When was the last time you got paid $40,000 for a few days of work? That is what happened last year to Russian independent security researcher Andrey Leonov, who discovered that if you upload a specially constructed image file to Facebook, you can make Facebook's internal servers, nested deep within their firewalls, run arbitrary commands to expose sensitive internal files in a way that could easily lead to a data breach.

Read more