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

Introducing Website Speed Test: An Image Analysis Tool Integrated with WebPagetest

Because images dominate page weight, methodical image optimization can have a significant effect on conversions and user experience. And the performance tools you choose to use can have a powerful impact on how websites are built and maintained. One such popular open source tool is WebPagetest. It is designed to measure and analyze webpage performance, which is why Cloudinary chose to partner with our friends over there to launch Website Speed Test.

Read more

You might have read some tutorials or articles explaining the importance of images and how to optimize them to deliver a great experience to your users. But does this work really translate into wins for your company? In this talk, you see real-world examples of the positive impact that image optimizations can have on metrics that your bosses and clients care about. You will walk away from this talk with compelling data and useful tools to help you get buy-in and support for this important user experience work at your company.

Read more
Don’t let your digital assets become a liability!

Everyone is a content producer today - from the largest publishing house and entertainment studio, down to the smallest ecommerce store, corporate website or personal blog.

If content is the lifeblood of your website or application, images and videos form the heart that makes it tick and creates an emotional connection with the audience. But, using images and videos to make the content visually engaging and meet your conversion goals, you face a new challenge: managing your digital assets. Because the images and videos are created by different teams for different channels - such as website, social media, ecommerce store, blogs, partners and digital agencies to name a few - chaos can ensue.

Read more

Image Optimization in Python

By Prosper Otemuyiwa
Image Optimization in Python

Approximately 62 percent of today’s internet traffic is made up of images. Media-rich websites must ensure that all images are optimized to speed up the site. A faster site will make your visitors happy; and when they are happy you will likely see increased conversion rates.

Read more