{"id":22253,"date":"2020-12-30T14:55:15","date_gmt":"2020-12-30T21:55:15","guid":{"rendered":"http:\/\/what_to_focus_on_in_image_compression_fidelity_or_appeal"},"modified":"2025-02-25T15:19:02","modified_gmt":"2025-02-25T23:19:02","slug":"what_to_focus_on_in_image_compression_fidelity_or_appeal","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/what_to_focus_on_in_image_compression_fidelity_or_appeal","title":{"rendered":"What to Focus on in Image Compression: Fidelity Or Appeal"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p><strong><em>Fidelity<\/em> in images is about visually preserving the original; <em>appeal<\/em> is about hiding the compression artifacts.<\/strong>  Depending on your priority, you would compress images with either of these approaches to reduce the file size while still maintaining a reasonable level of visual \u201cquality\u201d:<\/p>\n<ul>\n<li>If <strong>fidelity<\/strong> is more important, you\u2019d aim at being visually lossless. That is, no difference is visible between the original and the compressed image.<\/li>\n<li>If <strong>appeal<\/strong> trumps, you\u2019d want to avoid annoying compression artifacts like blockiness or color banding, shooting for a compressed image that just \u201clooks good.\u201d That is, barring a comparison with the original, compression modifies the image in a way that avoids tell-tale signs of lossy compression.<\/li>\n<\/ul>\n<p>\nImage fidelity, in a broader sense, can refer to accurately rendering or digitizing an image without any visible distortion or information loss. This concept goes beyond merely preserving the original in a compressed form. It encompasses the ability to convert analog media to a digital image with high precision, ensuring that the digitized image remains true to the original in all its aspects.\n<\/p>\n<p>\nIt&#8217;s important to distinguish between image fidelity and image quality. Image quality often relates to subjective preferences for one image over another and can be influenced by factors like color, contrast, and general aesthetics. Image fidelity, on the other hand, is more objective and focused on the accuracy of image representation. This distinction is crucial in understanding the goals of different compression techniques.\n<\/p>\n<p>In the past, fidelity and appeal meant basically the same thing: low fidelity implied low appeal, and the only way to achieve high appeal was through high fidelity. Consequently, the two notions became conflated into a single notion of \u201cquality.\u201d That\u2019s no longer the case. Nowadays, advanced compression techniques can produce low-fidelity images with high appeal\u2014something simpler formats like JPEG and color-quantized PNG just cannot deliver.<\/p>\n<h2>A Focus on Appeal<\/h2>\n<p>If appeal is the focus, aim for higher compression ratios by, for example, smoothing away subtle textures, significantly reducing the entropy of the image. This low-fidelity-high-appeal approach can be deceptive, however. Even though the image codec changes the image visibly for compression, the image still looks good, and you can\u2019t tell that it\u2019s been altered.<\/p>\n<p>Consider this 22-KB AVIF:<\/p>\n<picture>\n  <source srcset=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/image\/upload\/g_face,c_crop,w_800,h_800\/f_avif,q_55\/Web_Assets\/blog\/ClassA_8bit_WOMAN_2048x2560_8b_RGB.png\" type=\"image\/avif\">\n  <source srcset=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/image\/fetch\/f_jpg,q_95\/https:\/\/res.cloudinary.com\/cloudinary-marketing\/image\/upload\/g_face,c_crop,w_800,h_800\/f_avif,q_55\/Web_Assets\/blog\/ClassA_8bit_WOMAN_2048x2560_8b_RGB.png\" type=\"image\/jpeg\"> \n  <img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/image\/fetch\/f_jpg,q_95\/https:\/\/res.cloudinary.com\/cloudinary-marketing\/image\/upload\/g_face,c_crop,w_800,h_800\/f_avif,q_55\/Web_Assets\/blog\/ClassA_8bit_WOMAN_2048x2560_8b_RGB.png\" alt=\"22 KB AVIF\">\n<\/picture>\n<p>Heavily compressed with a ratio of 87:1, it remains relatively sharp. For comparison, see this 22-KB JPEG:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/image\/upload\/g_face,c_crop,w_800,h_800\/f_jpg,q_19\/Web_Assets\/blog\/ClassA_8bit_WOMAN_2048x2560_8b_RGB.png\" alt=\"22KB JPEG Woman\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"800\" height=\"800\"\/><\/p>\n<p>You can immediately tell that this image has been compressed way too aggressively. That\u2019s by far not as obvious in the AVIF.<\/p>\n<p>Sure, if you compare the overcompressed <a href=\"https:\/\/cloudinary.com\/tools\/compress-avif\">AVIF<\/a> to a high-fidelity version of the image, you\u2019ll readily notice that a lot of the fine details have been removed, as shown here:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/image\/upload\/g_face,c_crop,w_800,h_800\/f_jpg,q_90\/Web_Assets\/blog\/ClassA_8bit_WOMAN_2048x2560_8b_RGB.png\" alt=\"Overcompressed AVIF\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"800\" height=\"800\"\/><\/p>\n<p>However, if you\u2019ve never seen the original (as is the case for images on the web), you wouldn\u2019t be privy to whether the woman\u2019s skin texture is actually as smooth as it appears or whether that\u2019s a compression artifact.<\/p>\n<p>Let\u2019s look at another example: a picture of The Red House in <a href=\"https:\/\/en.wikipedia.org\/wiki\/Youghal\">Youghal, Ireland<\/a>:<\/p>\n<picture>\n  <source srcset=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/image\/fetch\/f_avif,q_50\/https:\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/c\/c3\/The_Red_House.jpg\/1024px-The_Red_House.jpg\" type=\"image\/avif\">\n  <source srcset=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/image\/fetch\/f_jpg,q_95\/https:\/\/res.cloudinary.com\/cloudinary-marketing\/image\/fetch\/f_avif,q_50\/https:\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/c\/c3\/The_Red_House.jpg\/1024px-The_Red_House.jpg\" type=\"image\/jpeg\"> \n  <img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/image\/fetch\/f_jpg,q_95\/https:\/\/res.cloudinary.com\/cloudinary-marketing\/image\/fetch\/f_avif,q_50\/https:\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/c\/c3\/The_Red_House.jpg\/1024px-The_Red_House.jpg\" alt=\"AVIF The Red House\">\n<\/picture>\n<p>It looks OK at a glance. However, a closer look at the left side of the house would reveal that the bricks in the wall have been eliminated with smoothing filters:<\/p>\n<div style=\"float: left; margin-right: 20px\">\n<a href=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/image\/fetch\/f_jpg,q_90,c_crop,g_west,w_300,h_500\/https:\/\/res.cloudinary.com\/cloudinary-marketing\/image\/fetch\/f_avif,q_50\/https:\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/c\/c3\/The_Red_House.jpg\/1024px-The_Red_House.jpg\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/image\/fetch\/f_jpg,q_90,c_crop,g_west,w_300,h_500\/https:\/\/res.cloudinary.com\/cloudinary-marketing\/image\/fetch\/f_avif,q_50\/https:\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/c\/c3\/The_Red_House.jpg\/1024px-The_Red_House.jpg\" alt=\u201cLow-Fidelity AVIF\u201d width=\"350\" \/><\/a>\n<div style=\"color: #666\">Low-Fidelity AVIF<\/div>\n<\/div>\n<div style=\"float: left\">\n<a href=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/image\/fetch\/f_jpg,q_90,c_crop,g_west,w_300,h_500\/https:\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/c\/c3\/The_Red_House.jpg\/1024px-The_Red_House.jpg\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/image\/fetch\/f_jpg,q_90,c_crop,g_west,w_300,h_500\/https:\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/c\/c3\/The_Red_House.jpg\/1024px-The_Red_House.jpg\" alt=\u201cHigh-Fidelity JPEG\u201d width=\"350\" \/><\/a>\n<div style=\"color: #666\">High-Fidelity JPEG<\/div>\n<\/div>\n<div style=\"clear: both\"><\/div>\n<h2>The JBIG2 Xerox Incident<\/h2>\n<p>Serious errors could result if, in quest of a denser compression, image codecs change an image semantically. A well-known example is the <a href=\"http:\/\/www.dkriesel.com\/en\/blog\/2013\/0802_xerox-workcentres_are_switching_written_numbers_when_scanning\">problem Xerox encountered<\/a> in 2013, when lossy JBIG2 compression caused numbers to mysteriously change in scanned documents, e.g., a 6 turned into an 8. That fiasco prompted German and Swiss regulators to, in 2015, forbid the use of JBIG2 compression altogether for legal documents.<\/p>\n<div style=\"float: left; margin-right: 20px\">\n<a href=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/image\/upload\/w_200,c_fill,f_auto,q_auto\/Web_Assets\/blog\/xerox-original.png\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/image\/upload\/w_200,c_fill,f_auto,q_auto\/Web_Assets\/blog\/xerox-original.png\" alt=\u201cOriginal Document\u201d width=\"200\" \/><\/a>\n<div style=\"color: #666\">Original Document<\/div>\n<\/div>\n<div style=\"float: left\">\n<a href=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/image\/upload\/w_200,c_fill,f_auto,q_auto\/Web_Assets\/blog\/scanned_xerox_workcentre_7535.png\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/image\/upload\/w_200,c_fill,f_auto,q_auto\/Web_Assets\/blog\/scanned_xerox_workcentre_7535.png\" alt=\u201cScan Result on the Xerox WorkCentre 7535\u201d width=\"200\" \/><\/a>\n<div style=\"color: #666\">Scan Result on the Xerox WorkCentre 7535<\/div>\n<\/div>\n<div style=\"clear: both\"><\/div>\n<p>The cause of those errors was JBIG2\u2019s pattern-matching mechanism, which optimizes compression by reapplying similar patterns. Though a remarkable feature when used with care, that capability could lead to grave consequences if, say, it changes a Q on a license plate to an O or a 6 in a tax declaration to an 8.<\/p>\n<p>Modern image codecs also offer coding tools that perform similar tasks. Examples are the intra block copy in AVIF and HEIC, and patches in JPEG XL\u2014all effective and helpful tools when prudently used for high-fidelity encoding. In the case of low-fidelity, high-appeal encoding, however, they could churn out unexpected results.<\/p>\n<h2>Evaluation of Image Codecs<\/h2>\n<p>Intuitively, people\u2014even experts\u2014evaluate image codecs based on the appeal of the compressed images. Typically, in subjective experiments, those images are placed next to the originals, and test subjects are asked to rate the visual quality according to the five-level scale described in <a href=\"https:\/\/www.itu.int\/rec\/R-REC-BT.500\">Recommendation BT.500<\/a> of the International Telecommunication Union (ITU): 1 for \u201cvery annoying;\u201d 2, \u201cannoying;\u201d 3, \u201cslightly annoying;\u201d 4, \u201cperceptible but not annoying;\u201d and 5, \u201cimperceptible.\u201d The ratings are then averaged to obtain the Mean Opinion Score (MOS).<\/p>\n<p>Note that the evaluation scale refers to appeal, not fidelity. Hence, the question asked of test subjects is \u201cHow <strong>annoying<\/strong> are the artifacts?\u201d and not \u201cHow true is the image to the original?\u201d As long as the distortions are not annoying, the MOS is deemed acceptable.<\/p>\n<p>Side-by-side comparisons produce meaningful results only at relatively low fidelity, whereby the difference between the images is obvious enough to be perceived by most. In fact, the whole premise of \u201cspot the seven differences\u201d puzzles is that it\u2019s tough to compare two similar images side by side. For high-fidelity comparisons, you can conduct a flip test (aka flicker test), which is a much more sensitive evaluation methodology.<\/p>\n<div style=\"float: left; margin-right: 20px\">\n<a href=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/image\/upload\/w_0.5,h_1.0,c_crop,q_100\/Web_Assets\/blog\/kopenhagen.png\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/image\/upload\/w_0.5,h_1.0,c_crop,q_100\/Web_Assets\/blog\/kopenhagen.png\" alt=\u201cOriginal Image\u201d width=\"350\" \/><\/a>\n<div style=\"color: #666\">Original Image<\/div>\n<\/div>\n<div style=\"float: left\">\n<a href=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/image\/upload\/w_0.5,h_1.0,c_crop,pg_2,q_100\/Web_Assets\/blog\/kopenhagen.png\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/image\/upload\/w_0.5,h_1.0,c_crop,pg_2,q_100\/Web_Assets\/blog\/kopenhagen.png\" alt=\u201cMedium-quality AVIF\u201d width=\"350\" \/><\/a>\n<div style=\"color: #666\">Medium-quality AVIF<\/div>\n<\/div>\n<div style=\"clear: both\"><\/div>\n<div style=\"float: center; margin-right: 50px\">\n<a href=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/image\/upload\/w_0.5,h_1.0,c_crop,fl_apng,q_100\/Web_Assets\/blog\/kopenhagen.png\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/image\/upload\/w_0.5,h_1.0,c_crop,fl_apng,q_100\/Web_Assets\/blog\/kopenhagen.png\" alt=\u201cAnimated PNG\u201d style='max-width: 100%' \/><\/a>\n<div style=\"color: #666\">Animated PNG alternating between the original and the compressed image.<\/div>\n<\/div>\n<p>When evaluating image codecs based on MOS in side-by-side comparisons, you\u2019d recognize the appeal of the codecs in low-fidelity, low-bitrate encodings. Even though that\u2019s interesting insight, refrain from extrapolating many conclusions from it. That\u2019s because codecs that are effective in low-fidelity, high-appeal compression\u2014e.g., those that can achieve the highest MOS at 0.1 bit per pixel (bpp)\u2014are not necessarily also good at high-fidelity compression, e.g., at 1 bpp. Similarly, objective perceptual metrics (e.g., PSNR, SSIM, <a href=\"https:\/\/en.wikipedia.org\/wiki\/Video_Multimethod_Assessment_Fusion\">VMAF<\/a>, or <a href=\"https:\/\/cloudinary.com\/blog\/detecting_the_psychovisual_impact_of_compression_related_artifacts_using_ssimulacra\">SSIMULACRA<\/a>) that correlate well with side-by-side, subjective results and are thus good at measuring appeal, are not necessarily as effective in measuring fidelity, and vice versa.<\/p>\n<h2>Unintentional Side Effects<\/h2>\n<p>Unintentional side effects might emerge if you conflate appeal with fidelity. For example, low-fidelity, high-appeal compression tends to apply smoothing that, on human faces, could obscure the natural skin texture, just as foundation makeup does. That phenomenon can even occur at relatively high-quality <a href=\"https:\/\/cloudinary.com\/glossary\/video-compression\">compression<\/a> settings if the codec was built and optimized for appeal, not fidelity.<\/p>\n<p>Though a bit far-fetched, low-fidelity codecs might contribute to cultural <a href=\"https:\/\/en.wikipedia.org\/wiki\/Feminine_beauty_ideal\">beauty ideals<\/a> by unintentionally but systematically photoshopping images to hide pores and wrinkles, hence subtly but effectively reinforcing the pressure on women, in particular, to conform to certain cosmetic ideals. The whole point of the <a href=\"https:\/\/en.wikipedia.org\/wiki\/Body_positivity\">body positivity movement<\/a> is to <a href=\"https:\/\/stylecaster.com\/body-positive-fashion-brands\">stop retouching images<\/a> to maintain <a href=\"https:\/\/medium.com\/minds-in-tune\/facetune-dysmorphia-2f67d04548f\">unrealistic standards of feminine beauty<\/a> like smooth skin, body size, and elimination of imperfections. It would be a social regression if, instead of stopping the photoshopping, such a task becomes obligatory and automated because that\u2019s what the compression codec happens to do.<\/p>\n<p>An example is <a href=\"https:\/\/www.thesun.co.uk\/fabulous\/7314187\/facetune-airbrushing-photo-editing\/\">this FaceTune<\/a>, in which you can compare a real selfie (on the left) with a Facetune-retouched image (on the right). By applying low-fidelity, high-appeal AVIF compression on the original, you\u2019d obtain a comparable result in terms of airbrushing:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/image\/upload\/Web_Assets\/blog\/facetune.png\" alt=\"Original VS AVIF\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1280\" height=\"720\"\/>\n<em>This animation alternates between the original image and a low-fidelity AVIF version of it.<\/em><\/p>\n<h2>Biased Compression<\/h2>\n<p>All lossy image codecs apply different amounts of compression to the luma (the grayscale version of the image) and to the chroma (the color information). Since our eyes are less sensitive to chroma than to luma, those codecs tend to apply <a href=\"https:\/\/cloudinary.com\/glossary\/lossy-compression\">lossy compression<\/a> more aggressively to the chroma. Even uncompressed digital images are represented in a quantized color space, where the number of shades of red, green, and blue is limited, typically to 256, i.e., 8 bits per channel. Many lossy image codecs then convert the RGB colors to YCbCr colors, effectively further reducing the number of shades of blue and red to about 100. And that\u2019s before the real lossy part starts.<\/p>\n<p>As a result, low-fidelity lossy compression can introduce subtle color shifts and cause more artifacts to appear in <a href=\"https:\/\/www.youtube.com\/watch?v=h9j89L8eQQk\">the dark regions of an image<\/a>. In the case of images of humans, the skin tones can subtly change (for example, Asian skin tones could slightly desaturate and look less yellow), and images of people with a dark skin could suffer more from compression artifacts. Again, though obviously not by design, applying low-fidelity, high-appeal compression can produce unexpected and undesirable side effects.<\/p>\n<p>In the future, those downsides might turn into a more serious issue. The current generation of classic image codecs are based on sophisticated but well-understood and predictable transformations and entropy coding mechanisms. However, highly experimental but promising are AI-based codecs that deploy neural networks for even more compression. Those approaches are not practical yet on the current hardware but might well be down the road. A big concern is that the related codecs can be extremely low in fidelity yet high in appeal, i.e., very deceptive. And since they are based on training on big datasets, they will inherit and possibly reinforce any bias that exists in those datasets. In other words, building those new AI-based codecs without accidentally making them \u201cracist\u201d or otherwise biased could be a big challenge, especially if the focus is on extreme compression ratios and low-fidelity, high-appeal compression.<\/p>\n<p>For insight on \u201cracist AI,\u201d see these articles:<\/p>\n<ul>\n<li>\n<a href=\"https:\/\/metro.co.uk\/2020\/04\/01\/race-problem-artificial-intelligence-machines-learning-racist-12478025\/\"><em>The Race Problem With AI: \u201cMachines Are Learning to Be \u201cRacist\u201d<\/em><\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/uxdesign.cc\/is-ai-doomed-to-be-racist-and-sexist-97ee4024e39d\"><em>Is AI Doomed to Be Racist and Sexist?<\/em><\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/thenextweb.com\/neural\/2020\/06\/24\/stop-calling-it-bias-ai-is-racist\/\"><em>Stop Calling It Bias. AI Is Racist<\/em><\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/www.theverge.com\/21298762\/face-depixelizer-ai-machine-learning-tool-pulse-stylegan-obama-bias\"><em>What a Machine Learning Tool That Turns Obama White Can (And Can\u2019t) Tell Us About AI Bias<\/em><\/a>\n<\/li>\n<\/ul>\n<h2>Fidelity, Not Deceptive Appeal<\/h2>\n<p>Perhaps my take above is overdramatic, but I strongly believe that the correct focus for image compression is fidelity, not appeal. As tempting as it is to reduce bandwidth through low-fidelity, high-appeal compression techniques, I recommend that you avoid adopting them. In this world of fake news coupled with malicious image manipulations, we really don\u2019t need another potential source of deception, albeit unintentional.<\/p>\n<div class='c-callout  c-callout--inline-title c-callout--note'><strong class='c-callout__title'>Note:<\/strong> <p>For improving the browsing experience by accelerating image loads, progressive decoding is a better way. I\u2019ll elaborate on that in a future post.<\/p><\/div>\n<p>Take, for example, an e-commerce business. Low-fidelity, high-appeal compression of its product images might seem like a good idea at the outset given the lower bandwidth, with the images remaining sharp while loading faster, which translates to a better browsing experience for visitors and potentially greater sales growth. However, the low-fidelity compression process might have failed to preserve the precise color or subtle texture of the merchandise, such as a shirt\u2019s fabric. The result? Unhappy customers, returns of purchases, and bad reviews.<\/p>\n<p>Keep in mind that display devices can now more accurately reproduce images with enough pixels to match the resolution of the human eye. Also, color gamuts are trending wider, and contrast ratios and dynamic ranges are constantly improving. With all the outstanding display technology that promises to deliver superior image fidelity, it\u2019d be a pity to then throw a big part of the fidelity out the window in deference to compression.<\/p>\n<p>For video, you still need low-fidelity compression for a while given the enormous amount of pixels that video represents (15 gigapixels per minute in the case of a 4K video). But for still images, you can generally afford high-fidelity compression.<\/p>\n<p>Currently, the median JPEG image on the web is compressed to about 1.9 bpp, i.e., a compression ratio of about 13:1. More modern image codecs can improve the compression density and, with the same fidelity, double that ratio. Remember, however, that you can and should also improve the fidelity by compressing images to, say, 1.2 bpp (20:1), simultaneously reaping the benefits of a higher fidelity and better compression.<\/p>\n<p>Here\u2019s what I suggest: don\u2019t compress images with those new codecs to, say, 0.3 bpp (80:1), which can produce perfectly presentable images in a format like AVIF but at the cost of fidelity. That\u2019s because at that point, though your bandwidth savings are more substantial, you\u2019d be deceptively degrading your images. Even if such deception is acceptable for certain use cases, think twice before taking that step. After all, the cost savings might not be worth the unforeseen side effects of deceptive compression.<\/p>\n<h2>The Benefits of JPEG XL<\/h2>\n<p>JPEG XL is a fit for high-fidelity image encoding by design. That format operates in an internal color space, XYB, which was specifically tailored for high-precision and perceptually modeled color encoding to avoid the issues that arise in more traditional YCbCr color spaces, e.g., dark color gradients and reds. Also, with JPEG XL\u2019s coding tools, you can optimally preserve subtle image features. The codec excels in high fidelity up to mathematically lossless encoding.<\/p>\n<p>Furthermore, the JPEG XL reference encoder can automatically perform high-fidelity encoding, which compresses images as much as possible with no visible differences. Traditional image encoders are configured based on technical parameters like <a href=\"https:\/\/cloudinary.com\/glossary\/color-quantization\">quantization<\/a> factors, which somewhat, but are not guaranteed to, correlate with fidelity. In contrast, the JPEG XL reference encoder is configured based on a perceptual fidelity target.<\/p>\n<p>JPEG XL is competitive at medium fidelity. At low fidelity, it\u2019s currently no match for the high appeal of competitors like AVIF and HEIC. Maybe that\u2019s a feature, not a bug?<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":22254,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[34,180,227],"class_list":["post-22253","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-avif","tag-jpeg-xl","tag-performance-optimization"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>What to Focus on in Image Compression: Fidelity Or Appeal<\/title>\n<meta name=\"description\" content=\"To avoid undesirable side effects, focus on fidelity, not appeal, while compressing images for the web. JPEG XL is shaping up to be an ideal format choice.\" \/>\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\/what_to_focus_on_in_image_compression_fidelity_or_appeal\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What to Focus on in Image Compression: Fidelity Or Appeal\" \/>\n<meta property=\"og:description\" content=\"To avoid undesirable side effects, focus on fidelity, not appeal, while compressing images for the web. JPEG XL is shaping up to be an ideal format choice.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/what_to_focus_on_in_image_compression_fidelity_or_appeal\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2020-12-30T21:55:15+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-25T23:19:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1649728551\/Web_Assets\/blog\/jxl_fidelity_vs_appeal_22254681fd\/jxl_fidelity_vs_appeal_22254681fd-png?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"1100\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\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\/what_to_focus_on_in_image_compression_fidelity_or_appeal#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/what_to_focus_on_in_image_compression_fidelity_or_appeal\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"What to Focus on in Image Compression: Fidelity Or Appeal\",\"datePublished\":\"2020-12-30T21:55:15+00:00\",\"dateModified\":\"2025-02-25T23:19:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/what_to_focus_on_in_image_compression_fidelity_or_appeal\"},\"wordCount\":10,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/what_to_focus_on_in_image_compression_fidelity_or_appeal#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649728551\/Web_Assets\/blog\/jxl_fidelity_vs_appeal_22254681fd\/jxl_fidelity_vs_appeal_22254681fd.png?_i=AA\",\"keywords\":[\"AVIF\",\"JPEG XL\",\"Performance Optimization\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2020\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/what_to_focus_on_in_image_compression_fidelity_or_appeal\",\"url\":\"https:\/\/cloudinary.com\/blog\/what_to_focus_on_in_image_compression_fidelity_or_appeal\",\"name\":\"What to Focus on in Image Compression: Fidelity Or Appeal\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/what_to_focus_on_in_image_compression_fidelity_or_appeal#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/what_to_focus_on_in_image_compression_fidelity_or_appeal#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649728551\/Web_Assets\/blog\/jxl_fidelity_vs_appeal_22254681fd\/jxl_fidelity_vs_appeal_22254681fd.png?_i=AA\",\"datePublished\":\"2020-12-30T21:55:15+00:00\",\"dateModified\":\"2025-02-25T23:19:02+00:00\",\"description\":\"To avoid undesirable side effects, focus on fidelity, not appeal, while compressing images for the web. JPEG XL is shaping up to be an ideal format choice.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/what_to_focus_on_in_image_compression_fidelity_or_appeal#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/what_to_focus_on_in_image_compression_fidelity_or_appeal\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/what_to_focus_on_in_image_compression_fidelity_or_appeal#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649728551\/Web_Assets\/blog\/jxl_fidelity_vs_appeal_22254681fd\/jxl_fidelity_vs_appeal_22254681fd.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649728551\/Web_Assets\/blog\/jxl_fidelity_vs_appeal_22254681fd\/jxl_fidelity_vs_appeal_22254681fd.png?_i=AA\",\"width\":2000,\"height\":1100},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/what_to_focus_on_in_image_compression_fidelity_or_appeal#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"What to Focus on in Image Compression: Fidelity Or Appeal\"}]},{\"@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":"What to Focus on in Image Compression: Fidelity Or Appeal","description":"To avoid undesirable side effects, focus on fidelity, not appeal, while compressing images for the web. JPEG XL is shaping up to be an ideal format choice.","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\/what_to_focus_on_in_image_compression_fidelity_or_appeal","og_locale":"en_US","og_type":"article","og_title":"What to Focus on in Image Compression: Fidelity Or Appeal","og_description":"To avoid undesirable side effects, focus on fidelity, not appeal, while compressing images for the web. JPEG XL is shaping up to be an ideal format choice.","og_url":"https:\/\/cloudinary.com\/blog\/what_to_focus_on_in_image_compression_fidelity_or_appeal","og_site_name":"Cloudinary Blog","article_published_time":"2020-12-30T21:55:15+00:00","article_modified_time":"2025-02-25T23:19:02+00:00","og_image":[{"width":2000,"height":1100,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1649728551\/Web_Assets\/blog\/jxl_fidelity_vs_appeal_22254681fd\/jxl_fidelity_vs_appeal_22254681fd-png?_i=AA","type":"image\/png"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/what_to_focus_on_in_image_compression_fidelity_or_appeal#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/what_to_focus_on_in_image_compression_fidelity_or_appeal"},"author":{"name":"","@id":""},"headline":"What to Focus on in Image Compression: Fidelity Or Appeal","datePublished":"2020-12-30T21:55:15+00:00","dateModified":"2025-02-25T23:19:02+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/what_to_focus_on_in_image_compression_fidelity_or_appeal"},"wordCount":10,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/what_to_focus_on_in_image_compression_fidelity_or_appeal#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649728551\/Web_Assets\/blog\/jxl_fidelity_vs_appeal_22254681fd\/jxl_fidelity_vs_appeal_22254681fd.png?_i=AA","keywords":["AVIF","JPEG XL","Performance Optimization"],"inLanguage":"en-US","copyrightYear":"2020","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/what_to_focus_on_in_image_compression_fidelity_or_appeal","url":"https:\/\/cloudinary.com\/blog\/what_to_focus_on_in_image_compression_fidelity_or_appeal","name":"What to Focus on in Image Compression: Fidelity Or Appeal","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/what_to_focus_on_in_image_compression_fidelity_or_appeal#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/what_to_focus_on_in_image_compression_fidelity_or_appeal#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649728551\/Web_Assets\/blog\/jxl_fidelity_vs_appeal_22254681fd\/jxl_fidelity_vs_appeal_22254681fd.png?_i=AA","datePublished":"2020-12-30T21:55:15+00:00","dateModified":"2025-02-25T23:19:02+00:00","description":"To avoid undesirable side effects, focus on fidelity, not appeal, while compressing images for the web. JPEG XL is shaping up to be an ideal format choice.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/what_to_focus_on_in_image_compression_fidelity_or_appeal#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/what_to_focus_on_in_image_compression_fidelity_or_appeal"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/what_to_focus_on_in_image_compression_fidelity_or_appeal#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649728551\/Web_Assets\/blog\/jxl_fidelity_vs_appeal_22254681fd\/jxl_fidelity_vs_appeal_22254681fd.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649728551\/Web_Assets\/blog\/jxl_fidelity_vs_appeal_22254681fd\/jxl_fidelity_vs_appeal_22254681fd.png?_i=AA","width":2000,"height":1100},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/what_to_focus_on_in_image_compression_fidelity_or_appeal#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"What to Focus on in Image Compression: Fidelity Or Appeal"}]},{"@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\/v1649728551\/Web_Assets\/blog\/jxl_fidelity_vs_appeal_22254681fd\/jxl_fidelity_vs_appeal_22254681fd.png?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/22253","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=22253"}],"version-history":[{"count":13,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/22253\/revisions"}],"predecessor-version":[{"id":37017,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/22253\/revisions\/37017"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/22254"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=22253"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=22253"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=22253"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}