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 quality="auto" />
</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 quality="auto" fetch_format=:auto />
</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" width="500" quality="auto" crop="scale">
        <Transformation width=500 quality="auto" crop="scale" />
</Image>
Angular:
<cl-image public-id="flowers_and_birds.jpg" width="500" quality="auto" crop="scale">
        <cl-transformation width=500 quality="auto" crop="scale" />
</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" width="500" quality="auto" fetch_format="auto" crop="scale">
        <Transformation width=500 quality="auto" fetch_format=:auto crop="scale" />
</Image>
Angular:
<cl-image public-id="flowers_and_birds.jpg" width="500" quality="auto" fetch_format="auto" crop="scale">
        <cl-transformation width=500 quality="auto" fetch_format=:auto crop="scale" />
</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

Serverless Tutorial: File Storage with Webtask and Cloudinary

Media makes up the majority of today's website content. While it makes websites more interesting for visitors, media presents challenges because these images and videos are more difficult to store, deliver and manipulate on-the-fly to suit any given situation.

Read more

ImageCon17: Delivering Responsive Images

By Jason Grigsby

After five years many specifications, some inflamed Twitter battles and other conversations, responsive images have finally landed and there's a sound. Which is really exciting right? People have been climbing for this for quite some time and we've reached a point where they're available in modern browsers. So people were excited, they wanted to go use them it's something that designers and developers have had as a point of frustration for a long time.

Read more
Auto padding images with content-aware color padding

How you present the content of your website can be just as important as the content itself. The images you display need to conform to the graphic design of your site, and every image needs to fit within a predefined size. Although that may be simple enough to achieve when you are dealing with your own images, the task can be more challenging when displaying images uploaded by your users.

Read more

Bounce! Hacking Jazzfest with Social Videos

By Eric Normand
Bounce! Hacking Jazzfest with Social Videos

Last week, I was invited to an exclusive hackathon to build apps for musicians. The app team I was assigned to was tasked with building a video upload site for Bounce videos. Bounce is a style of music that originated in New Orleans. The app would be called BounceDotCom.com and there were plans to have Big Freedia, the Queen of Bounce, promote it. I knew the organizer could make things happen, so I jumped at the chance.

Read more
Getting a Better React-ion with Progressive Web Apps

This is part 2 of a 3 part series

React has become more popular, as well as more mature, over the last four years since its release by Facebook. It has become one of the go-to technologies for people looking to componentize the front-end of any web application. It also helps that an entire mobile stack is built around React in the form of ReactNative. The components are wonderful, however there can be a burdensome learning curve. But, in the end, there’s the payoff of highly reusable code and a better user experience.

Read more
Build an Image Library with React & Cloudinary

This article was originally posted on Scotch.io

React is a good tool when it comes to building flexible and reusable UI components. However, it's "one of those libraries" that cannot handle all the tasks involved in building a full fleshed UI project. Other supporting tools - such as a recently announced React SDK from Cloudinary - are available to provide solutions that the React core cannot.

Read more