{"id":21398,"date":"2016-08-10T12:56:15","date_gmt":"2016-08-10T12:56:15","guid":{"rendered":"http:\/\/the_holy_grail_of_image_optimization_or_balancing_visual_quality_and_file_size"},"modified":"2025-09-26T14:57:16","modified_gmt":"2025-09-26T21:57:16","slug":"the_holy_grail_of_image_optimization_or_balancing_visual_quality_and_file_size","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/the_holy_grail_of_image_optimization_or_balancing_visual_quality_and_file_size","title":{"rendered":"Compress an Image Automatically Without Losing Quality"},"content":{"rendered":"

Compress image without losing quality<\/h2>\n

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<\/a> 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\u2019 attention with faster, smaller downloads.<\/p>\n

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\u2019t 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.<\/p>\n

Selecting the quality setting<\/h2>\n

So, what\u2019s 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:<\/p>\n

    \n
  1. The image quality setting is usually specified on a sliding scale<\/strong> between 0 and 100, but what does this number actually represent for different image formats such as JPEG, WebP, and PNG<\/strong>? The compression algorithms used are complex and varied, so it\u2019s 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.<\/li>\n
  2. The contents of an image determines to a large degree how well it can be compressed before losing visual quality<\/strong>. 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.<\/li>\n
  3. The size of the image can require a different quality setting for each size displayed<\/strong>. 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\u2019s quality setting should be optimized<\/a> for each of the resized images and not just one quality setting for all sizes.<\/li>\n<\/ol>\n

    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<\/strong>, never mind the impossibility of manually finding the optimal quality<\/strong> if you have a lot of user-uploaded images to display.<\/p>\n

    The interactive image example<\/strong><\/em> below shows the effect that the various quality settings have on an image\u2019s 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<\/em> to see how different quality settings impact the image quality<\/strong>.<\/p>\n

    \n
    \n \n<\/div>\n
    \n Quality: <\/span>\n 100<\/span>\n Size: <\/span>\n 228KB<\/span>\n<\/div>\n
    \n 10<\/span>\n 20<\/span>\n 30<\/span>\n 40<\/span>\n 50<\/span> \n 60<\/span>\n 70<\/span>\n 80<\/span>\n 90<\/span> \n 100<\/span>\n<\/div>\n<\/div>\n

    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<\/strong>. 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.<\/p>\n

    Automatic image quality – q_auto<\/h2>\n

    Cloudinary can automate the file size versus visual quality trade-off decision<\/strong>, 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<\/strong> 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.<\/p>\n

    To perform automatic quality selection and image encoding adjustments, simply add the quality<\/code> parameter set to auto<\/code> (q_auto<\/code> 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):<\/p>\n

    \n Loading code examples<\/span>\n <\/cld-code-widget>\"Image<\/a><\/p>\n

    Automatic image quality – fine tuning<\/h2>\n

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