{"id":21589,"date":"2017-10-09T17:07:27","date_gmt":"2017-10-09T17:07:27","guid":{"rendered":"http:\/\/which_image_compression_technique_looks_best_to_human_eyes"},"modified":"2024-10-04T07:49:33","modified_gmt":"2024-10-04T14:49:33","slug":"which_image_compression_technique_looks_best_to_human_eyes","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/which_image_compression_technique_looks_best_to_human_eyes","title":{"rendered":"Which Image Compression Technique Looks Best to Human Eyes?"},"content":{"rendered":"

Here at Cloudinary, we provide a cloud-based tool that enables our users to compress images and video for their websites and apps. Our goal is to preserve the visual integrity of the content, but deliver the smallest file size to any device or browser to ultimately optimize website performance and end user satisfaction.<\/p>\n

Highlight of Cloudinary\u2019s Solution<\/h2>\n

One of the hallmarks of the Cloudinary solution is the ability to automate many image compression techniques, so that developers don\u2019t have to spend time tweaking each photo and making multiple copies of different sizes and resolutions to fit every possible scenario. Compression algorithms can be tricky because they\u2019re trying to make changes that have the smallest visual impact, but different images can react differently to compression.<\/p>\n

As we were developing the algorithm for our \u201cq_auto\u201d capabilities \u2013 which strikes a balance between visual quality and file size \u2013 we needed to test it to understand how the resulting images compared to the human eye. Enter Scale API.<\/p>\n

Many image compression formats \u2013 like JPEG 2000 and JPEG XR \u2013 have been tweaked to score well on particular metrics, such as peak signal-to-noise ratio (PSNR). But these don\u2019t always correlate with human perception on image quality.<\/p>\n

Scale API<\/h2>\n

We leveraged Scale API to compare pairs of images and give us perspective on which image was liked most by humans. With Scale API, we did a variety of tests, comparing several formats, including WebP, JPEG 2000, JPEG XR (lossy) Lepton (MozJPEG, recompressed with Lepton), FLIF, BPG, Daala, and PNG8 (pngquant+optipng). We also were able to get input on the difference between the uncompressed original image vs. a compressed version.<\/p>\n

Scale API enabled us to create A\/B comparisons that were viewed by human observers. We submitted over 4,000 image comparisons to Scale API, sending at least four independent Scale API requests for each pair of image. This resulted in at least eight actual human comparisons for each pair of images. The outcome of these comparisons were evaluated beside other perceptual metrics such as PSNR, Google\u2019s Butteraugli, DSSIM (Structural (Dis)Similarity) and a new metric Cloudinary developed called SSIMULACRA (Structural SIMilarity Unveiling Local And Compression Related Artifacts)<\/a>.<\/p>\n

The Results<\/h2>\n

The results showed that overall, PSNR is \u201ccorrect\u201d in only 67 percent of the cases. Butteraugli gets it right in 80 percent of the cases, and DSSIM in 82 percent of the cases. Our new metric, SSIMULACRA, agrees with human judgments in 87 percent of the cases. Looking just at the high-confidence human judgments, we found about 78 percent agreement for PSNR, 91 percent for both Butteraugli and DSSIM, and almost 98 percent agreement for SSIMULACRA. You can read more about SSIMULACRA and these results on the Cloudinary blog<\/a>. Or if you want to give it a try: SSIMULACRA is free and open-source software!<\/a><\/p>\n

The results of Scale API comparisons gave us useful data points to validate our metrics and provided more insights into the compression benchmarks we are running and the comparison of various image formats. And from these insights we were able to improve our visual perception metrics and fine-tune our \u201cq_auto\u201d functionality so we know how aggressively we can compress images.<\/p>\n

Through this process we were impressed not only by the useful data points derived from the Scale API, but also the great support we got from the company and the product\u2019s ease-of-use, all which came at a reasonable price.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":21590,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[332],"class_list":["post-21589","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-api"],"acf":[],"yoast_head":"\nWhich Image Compression Technique Looks Best to Human Eyes?<\/title>\n<meta name=\"description\" content=\"Different images can react differently to compression techniques. Cloudinary's Scale API lets humans judge which compressed version looks better.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/which_image_compression_technique_looks_best_to_human_eyes\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Which Image Compression Technique Looks Best to Human Eyes?\" \/>\n<meta property=\"og:description\" content=\"Different images can react differently to compression techniques. Cloudinary's Scale API lets humans judge which compressed version looks better.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/which_image_compression_technique_looks_best_to_human_eyes\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2017-10-09T17:07:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-04T14:49:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1649723886\/Web_Assets\/blog\/Image_Quality_2000x1100\/Image_Quality_2000x1100-jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"1540\" \/>\n\t<meta property=\"og:image:height\" content=\"847\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/which_image_compression_technique_looks_best_to_human_eyes#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/which_image_compression_technique_looks_best_to_human_eyes\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Which Image Compression Technique Looks Best to Human Eyes?\",\"datePublished\":\"2017-10-09T17:07:27+00:00\",\"dateModified\":\"2024-10-04T14:49:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/which_image_compression_technique_looks_best_to_human_eyes\"},\"wordCount\":9,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/which_image_compression_technique_looks_best_to_human_eyes#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649723886\/Web_Assets\/blog\/Image_Quality_2000x1100\/Image_Quality_2000x1100.jpg?_i=AA\",\"keywords\":[\"API\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2017\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/which_image_compression_technique_looks_best_to_human_eyes\",\"url\":\"https:\/\/cloudinary.com\/blog\/which_image_compression_technique_looks_best_to_human_eyes\",\"name\":\"Which Image Compression Technique Looks Best to Human Eyes?\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/which_image_compression_technique_looks_best_to_human_eyes#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/which_image_compression_technique_looks_best_to_human_eyes#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649723886\/Web_Assets\/blog\/Image_Quality_2000x1100\/Image_Quality_2000x1100.jpg?_i=AA\",\"datePublished\":\"2017-10-09T17:07:27+00:00\",\"dateModified\":\"2024-10-04T14:49:33+00:00\",\"description\":\"Different images can react differently to compression techniques. Cloudinary's Scale API lets humans judge which compressed version looks better.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/which_image_compression_technique_looks_best_to_human_eyes#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/which_image_compression_technique_looks_best_to_human_eyes\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/which_image_compression_technique_looks_best_to_human_eyes#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649723886\/Web_Assets\/blog\/Image_Quality_2000x1100\/Image_Quality_2000x1100.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649723886\/Web_Assets\/blog\/Image_Quality_2000x1100\/Image_Quality_2000x1100.jpg?_i=AA\",\"width\":1540,\"height\":847},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/which_image_compression_technique_looks_best_to_human_eyes#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Which Image Compression Technique Looks Best to Human Eyes?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Which Image Compression Technique Looks Best to Human Eyes?","description":"Different images can react differently to compression techniques. Cloudinary's Scale API lets humans judge which compressed version looks better.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/which_image_compression_technique_looks_best_to_human_eyes","og_locale":"en_US","og_type":"article","og_title":"Which Image Compression Technique Looks Best to Human Eyes?","og_description":"Different images can react differently to compression techniques. Cloudinary's Scale API lets humans judge which compressed version looks better.","og_url":"https:\/\/cloudinary.com\/blog\/which_image_compression_technique_looks_best_to_human_eyes","og_site_name":"Cloudinary Blog","article_published_time":"2017-10-09T17:07:27+00:00","article_modified_time":"2024-10-04T14:49:33+00:00","og_image":[{"width":1540,"height":847,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1649723886\/Web_Assets\/blog\/Image_Quality_2000x1100\/Image_Quality_2000x1100-jpg?_i=AA","type":"image\/jpeg"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/which_image_compression_technique_looks_best_to_human_eyes#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/which_image_compression_technique_looks_best_to_human_eyes"},"author":{"name":"","@id":""},"headline":"Which Image Compression Technique Looks Best to Human Eyes?","datePublished":"2017-10-09T17:07:27+00:00","dateModified":"2024-10-04T14:49:33+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/which_image_compression_technique_looks_best_to_human_eyes"},"wordCount":9,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/which_image_compression_technique_looks_best_to_human_eyes#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649723886\/Web_Assets\/blog\/Image_Quality_2000x1100\/Image_Quality_2000x1100.jpg?_i=AA","keywords":["API"],"inLanguage":"en-US","copyrightYear":"2017","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/which_image_compression_technique_looks_best_to_human_eyes","url":"https:\/\/cloudinary.com\/blog\/which_image_compression_technique_looks_best_to_human_eyes","name":"Which Image Compression Technique Looks Best to Human Eyes?","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/which_image_compression_technique_looks_best_to_human_eyes#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/which_image_compression_technique_looks_best_to_human_eyes#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649723886\/Web_Assets\/blog\/Image_Quality_2000x1100\/Image_Quality_2000x1100.jpg?_i=AA","datePublished":"2017-10-09T17:07:27+00:00","dateModified":"2024-10-04T14:49:33+00:00","description":"Different images can react differently to compression techniques. Cloudinary's Scale API lets humans judge which compressed version looks better.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/which_image_compression_technique_looks_best_to_human_eyes#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/which_image_compression_technique_looks_best_to_human_eyes"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/which_image_compression_technique_looks_best_to_human_eyes#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649723886\/Web_Assets\/blog\/Image_Quality_2000x1100\/Image_Quality_2000x1100.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649723886\/Web_Assets\/blog\/Image_Quality_2000x1100\/Image_Quality_2000x1100.jpg?_i=AA","width":1540,"height":847},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/which_image_compression_technique_looks_best_to_human_eyes#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Which Image Compression Technique Looks Best to Human Eyes?"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649723886\/Web_Assets\/blog\/Image_Quality_2000x1100\/Image_Quality_2000x1100.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21589","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=21589"}],"version-history":[{"count":5,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21589\/revisions"}],"predecessor-version":[{"id":35884,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21589\/revisions\/35884"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/21590"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=21589"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=21589"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=21589"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}