{"id":22295,"date":"2021-02-22T14:56:08","date_gmt":"2021-02-22T21:56:08","guid":{"rendered":"http:\/\/time_for_next_gen_codecs_to_dethrone_jpeg"},"modified":"2025-08-21T12:17:22","modified_gmt":"2025-08-21T19:17:22","slug":"time_for_next_gen_codecs_to_dethrone_jpeg","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/time_for_next_gen_codecs_to_dethrone_jpeg","title":{"rendered":"Time for Next-Gen Codecs to Dethrone JPEG"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>I can be quite passionate about image codecs. A \u201ccodec battle\u201d is brewing, and I\u2019m not the only one to have <a href=\"https:\/\/codecs.multimedia.cx\/2020\/11\/an-upcoming-image-format-war\/\">opinions<\/a> about that. Obviously, as the chair of the JPEG XL ad hoc group in the JPEG Committee, I\u2019m firmly in the camp of the codec I\u2019ve been working on for years. Here in this post, however, I\u2019ll strive to be fair and neutral.<\/p>\n<p>The objective is clear: dethroning JPEG, the wise old Grandmaster of Image Compression who ruled supreme during the first 25 years of the existence of the <code>&lt;img&gt;<\/code> tag and, therefore, of images on the web. As superb a codec as JPEG was, it\u2019s now hitting its limits. Why? The lack of alpha transparency support alone is annoying enough, let alone the 8-bit limit (so no HDR) and the relatively weak compression compared to the current state of the art. Clearly, the time is ripe for a regime change.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/image\/upload\/w_700,c_fill,f_auto,q_auto,dpr_2.0\/Web_Assets\/blog\/chess-board-competition.jpg\" alt=\"Chess Board\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1400\" height=\"933\"\/><\/p>\n<p>Six combatants have entered the playing field so far:<\/p>\n<ul>\n<li>\n<strong>JPEG 2000<\/strong> by the JPEG group, the oldest of the JPEG successors, available in Safari<\/li>\n<li>\n<strong>WebP<\/strong> by Google, available in all browsers<\/li>\n<li>\n<strong>HEIC<\/strong> by the MPEG group, based on HEVC and available in iOS<\/li>\n<li>\n<strong>AVIF<\/strong> by the Alliance for Open Media (AOM), available in Chrome and Firefox<\/li>\n<li>\n<strong>JPEG XL<\/strong> by the JPEG group, the next-generation codec<\/li>\n<li>\n<strong>WebP2<\/strong> by Google, an experimental successor to WebP<\/li>\n<\/ul>\n<p>Since <a href=\"https:\/\/chromium.googlesource.com\/codecs\/libwebp2\/\">WebP2<\/a> is still experimental and will be an entirely new format that\u2019s not compatible with WebP, it\u2019s too early for an evaluation. The other codecs are finalized, albeit in different stages of maturity: JPEG 2000 is already 20 years of age; JPEG XL is barely a month old.<\/p>\n<p>Being based on HEVC, HEIC is, to put it mildly, not royalty free. Even though supported by Apple, HEIC is unlikely to become a universally supported codec that can replace JPEG.<\/p>\n<p>This post, therefore, focuses on comparing the remaining new codecs\u2014JPEG 2000, WebP, AVIF, and JPEG XL\u2014to the Ancient R\u00e9gime of JPEG and PNG.<\/p>\n<h2>Compression<\/h2>\n<p>Obviously, compression is the main task of an image codec. See this scoreboard:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/image\/upload\/w_700,c_fill,f_auto,q_auto,dpr_2.0\/Web_Assets\/blog\/Battle_of_the_Codecs_compression_v01.png\" alt=\"Compression scoreboard\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1400\" height=\"445\"\/><\/p>\n<ul>\n<li>JPEG was created for lossy compression of photographs; PNG, for lossless compression, which it performs best on nonphotographic images. In a way, these two codecs are complementary, and you need both for various use cases and image types.<\/li>\n<li>JPEG 2000 not only outperforms JPEG, but it can also do lossless compression. However, it lags behind PNG for nonphotographic images.<\/li>\n<li>WebP, specifically designed to replace JPEG and PNG, does indeed beat both of them in compression result, but only by a narrow margin. For high-fidelity, lossy compression, WebP sometimes performs worse than JPEG.<\/li>\n<li>HEIC and AVIF handle lossy compression of photos much more effectively than JPEG. Occasionally, they\u2019re behind PNG at lossless compression but yield better results with lossy nonphotographic images.<\/li>\n<li>JPEG XL beats both JPEG and PNG in compression results by leaps and bounds.<\/li>\n<\/ul>\n<p>When lossy compression is good enough, e.g., for web images, both <a href=\"https:\/\/cloudinary.com\/tools\/compress-avif\">AVIF<\/a> and JPEG XL deliver significantly better results than the existing web codecs, including WebP. As a rule, AVIF takes the lead in <a href=\"https:\/\/cloudinary.com\/blog\/what_to_focus_on_in_image_compression_fidelity_or_appeal\">low-fidelity, high-appeal<\/a> compression while JPEG XL excels in medium to high fidelity. It\u2019s unclear to what extent that\u2019s an inherent property of the two image formats, and to what extent it\u2019s a matter of encoder engineering focus. In any case, they\u2019re both miles ahead of the old JPEG.<\/p>\n<style>\n\/* Style the tab *\/\n.tab {\n  overflow: hidden;\n  border: 1px solid #ccc;\n  background-color: #f1f2f9;\n}\n\n\/* Style the buttons inside the tab *\/\n.tab button {\n  background-color: inherit;\n  float: left;\n  border: none;\n  outline: none;\n  cursor: pointer;\n  padding: 14px 16px;\n  transition: 0.3s;\n  font-family: 'sofia-pro';\n  font-size: inherit;\n}\n\n\/* Change background color of buttons on hover *\/\n.tab button:hover {\n  background-color: #ddd;\n}\n\n\/* Create an active\/current tablink class *\/\n.tab button.active {\n  background-color: #ccc;\n}\n\n\/* Style the tab content *\/\n.tabcontent {\n  display: none;\n  border-top: none;\n  margin-top: 0px;\n}\n\n.tabcontent img, .tabcontent picture {width: 100%; height: auto;}\n<\/style>\n<br\/>\n<br\/>\n<h3 class=\"c-heading-permalink__heading\">\n  <a class=\"c-heading-permalink__link\" href=\"#comparison\">Codec Comparison at Low Fidelity<\/a>\n<\/h3>\n<div class=\"tab\">\n  <button class=\"tablinks\" onclick=\"openTab(event, 'Original')\" id=\"defaultOpen\">Original<\/button>\n  <button class=\"tablinks\" onclick=\"openTab(event, 'JPEG')\">JPEG<\/button>\n  <button class=\"tablinks\" onclick=\"openTab(event, 'JPEG-2000')\">JPEG 2000<\/button>\n  <button class=\"tablinks\" onclick=\"openTab(event, 'WebP')\">WebP<\/button>\n  <button class=\"tablinks\" onclick=\"openTab(event, 'HEIC')\">HEIC<\/button>\n  <button class=\"tablinks\" onclick=\"openTab(event, 'AVIF')\">AVIF<\/button>\n  <button class=\"tablinks\" onclick=\"openTab(event, 'JXL')\">JXL<\/button>\n<\/div>\n<div id=\"Original\" class=\"tabcontent\">\n  <img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1660936682\/original.png\">\n  1799446 bytes PNG\n<\/div>\n<div id=\"JPEG\" class=\"tabcontent\">\n  <img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1660936677\/full-jpeg.jpg\">\n  68303 bytes\n<\/div>\n<div id=\"JPEG-2000\" class=\"tabcontent\">\n  <picture>\n    <source type=\"image\/jp2\" srcset=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1660936681\/full-j2k.png\">\n    <img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1660936681\/full-j2k.png\">\n  <\/picture>\n  67611 bytes\n<\/div>\n<div id=\"WebP\" class=\"tabcontent\">\n  <picture>\n    <source type=\"image\/webp\" srcset=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1660936678\/011_sRGB.webp\">\n    <img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1660936678\/011_sRGB.webp\">\n  <\/picture>\n  67760 bytes\n<\/div>\n<div id=\"HEIC\" class=\"tabcontent\">\n  <img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1660936680\/full-heic.png\">\n  69798 bytes\n<\/div>\n<div id=\"AVIF\" class=\"tabcontent\">\n  <picture>\n    <!-- Firefox does not do proper color management\n         source type=\"image\/avif\" srcset=\"011.avif\" -->\n     <img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1660936681\/full-avif.png\">\n  <\/picture>\n  67629 bytes\n<\/div>\n<div id=\"JXL\" class=\"tabcontent\">\n  <picture>\n    <source type=\"image\/jxl\" srcset=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1660936681\/full-jxl.png\">\n     <img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1660936681\/full-jxl.png\">\n  <\/picture>\n  67077 bytes\n<\/div>\n<script>\nfunction openTab(evt, tabName) {\n  var i, tabcontent, tablinks;\n  tabcontent = document.getElementsByClassName(\"tabcontent\");\n  for (i = 0; i < tabcontent.length; i++) {\n    tabcontent[i].style.display = \"none\";\n  }\n  tablinks = document.getElementsByClassName(\"tablinks\");\n  for (i = 0; i < tablinks.length; i++) {\n    tablinks[i].className = tablinks[i].className.replace(\" active\", \"\");\n  }\n  document.getElementById(tabName).style.display = \"block\";\n  evt.currentTarget.className += \" active\";\n}\n\ndocument.getElementById(\"defaultOpen\").click();\n<\/script>\n<h2>Speed<\/h2>\n<p>Decoding a full-screen JPEG or a PNG takes only minimal time, literally a blink of an eye. Newer codecs compress better but at a cost in complexity. For example, one of the main factors that limited the adoption of JPEG 2000 at its launch was its prohibitive computational complexity.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/image\/upload\/w_700,c_fill,f_auto,q_auto,dpr_2.0\/Web_Assets\/blog\/Battle_of_the_Codecs_speed_v01.png\" alt=\"Speed comparison\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1400\" height=\"245\"\/><\/p>\n<p>If your main goal of image compression is to accelerate delivery, be sure to take into account the decode speed. Typically, decode speed is more important than encode speed since, in many use cases, you encode only once and can do that offline on a beefy machine. In contrast, decoding is done many times, on various devices, including low-end ones.<\/p>\n<p>Since CPU speed is staying stagnant in terms of single-core performance, parallelization is increasingly important. After all, the evolution trend for hardware is to have more CPU cores, not higher clock speeds. Designed before multicore processors became a reality, older codecs like JPEG and PNG are inherently sequential, that is, multiple cores yield no benefits for single-image decoding. In that respect, JPEG 2000, HEIC, AVIF, and JPEG XL are more future proof.<\/p>\n<h2>Limitations<\/h2>\n<p>A key downside of JPEG\u2014at least, the de facto JPEG\u2014and WebP is that they are limited to 8-bit color precision. That precision suffices for images with a standard dynamic-range (SDR) and a limited color-gamut like sRGB. For high dynamic-range (<a href=\"https:\/\/cloudinary.com\/glossary\/hdr\">HDR<\/a>) and wide-gamut images, more precision is required.<\/p>\n<p>For now, 10-bit precision is good enough for image delivery, and all the other codecs do support 10-bit precision. However, for authoring workflows, whereby continual image transformations might still be required, a higher precision is desirable.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/image\/upload\/w_700,c_fill,f_auto,q_auto,dpr_2.0\/Web_Assets\/blog\/Battle_of_the_Codecs_limits_v01.png\" alt=\"Limitation comparison\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1400\" height=\"343\"\/><\/p>\n<p>WebP and HEIC do not support images without chroma subsampling, which is a different kind of limit. For many photos, chroma subsampling is fine. In other cases, such as those with fine details or textures with a chromatic aspect, or colored text, <a href=\"https:\/\/cloudinary.com\/tools\/compress-webp\">WebP<\/a> and HEIC images might be substandard.<\/p>\n<p>Presently, the maximum dimension-limits pose no problems for web delivery. Nonetheless, for photography and image authoring, the limits of the video-codec-based formats can be prohibitive. Note that even though HEIC and AVIF allow tiling at the HEIF container level, i.e., the actual image dimensions are essentially unlimited, artifacts might appear at the tile boundaries. For example, Apple\u2019s HEIC implementation uses independently encoded tiles of size 512x512, which means that a 1586x752 image, for example, when saved as a HEIC, is chopped up into eight smaller images, like this:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/image\/upload\/w_700,c_fill,f_auto,q_auto,dpr_2.0\/Web_Assets\/blog\/013b.png\" alt=\"Encoded tiles\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1400\" height=\"664\"\/><\/p>\n<p>Now if you zoom in on the boundaries between those independently <a href=\"https:\/\/cloudinary.com\/glossary\/run-length-encoding\">encoded<\/a> tiles, discontinuities might become visible:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/image\/upload\/w_700,c_fill,f_auto,q_auto,dpr_2.0\/Web_Assets\/blog\/013heic.png\" alt=\"Zoom\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1400\" height=\"700\"\/><\/p>\n<p>To avoid such tile-boundary artifacts, do not exceed the maximum per-tile dimension\u2014the size of an 8K video frame\u2014for HEICs and AVIFs.<\/p>\n<h2>Animation<\/h2>\n<p>Originally, GIF, JPEG, and PNG could represent still images only. GIF was the first to support animation in 1989 before the other codecs even existed, which is probably the only reason why it\u2019s still in use today despite its limitations and poor compression result. All major browsers now also support animated PNG (APNG), a relatively <a href=\"https:\/\/caniuse.com\/apng\">new situation<\/a>.<\/p>\n<p>In most cases, you\u2019re better off encoding animations with a video codec instead of an image codec designed for stills. HEIC and AVIF, based on HEVC and AV1 respectively, are real video codecs. Despite its support for animation, JPEG XL performs intraframe encoding only with no capabilities for motion vectors and other advanced, interframe coding tools offered by video codecs. Even for short video segments that run for just a few seconds, video codecs can compress significantly better than the so-called animated still-image codecs like GIF and <a href=\"https:\/\/cloudinary.com\/glossary\/apng-file-format\">APNG<\/a>, or even animated WebP or JPEG XL.<\/p>\n<p>A side note: it would be great if web browsers would accept in an <code>&lt;img&gt;<\/code> tag all the video codecs they can play in a <code>&lt;video&gt;<\/code> tag, the only difference being that in an <code>&lt;img&gt;<\/code> tag, the video is autoplayed, muted, and looped. That way, new and masterful video codecs like <a href=\"https:\/\/cloudinary.com\/glossary\/vp9-codec\">VP9<\/a> and AV1 would automatically work for animations, and we can finally get rid of the ancient GIF format.<\/p>\n<h2>Features<\/h2>\n<p>Back to still images. Besides compressing RGB pictures quickly with no size or precision limits, image codecs must also offer other desirable features.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/image\/upload\/w_700,c_fill,f_auto,q_auto,dpr_2.0\/Web_Assets\/blog\/Battle_of_the_Codecs_features_v01.png\" alt=\"Feature comparison\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1400\" height=\"408\"\/>\nFor web images\u2014especially large, above-the-fold ones\u2014<a href=\"https:\/\/cloudinary.com\/blog\/improve_the_web_experience_with_progressive_image_decoding\">progressive decoding<\/a> is an excellent feature to have. The JPEG family of codecs is strongest in that respect.<\/p>\n<p>All new codecs support alpha transparency. The most recent ones also support depth maps, with which you can, for example, apply effects to the foreground and background.<\/p>\n<p>Images with multiple layers, called overlays, can enhance web delivery. A case in point is that you can add crisp text-overlays to photos with stronger compression and less artifacts. It\u2019s mostly useful in authoring workflows, though. Additionally, for those workflows, JPEG XL offers features like layer names, selection masks, spot-color channels, and fast lossless encoding of 16-bit integer and 16-, 24-, or 32-bit floating-point images.<\/p>\n<p>In terms of resilience against generation loss, video codecs are not exactly performing with flying colors. For web delivery, that deficiency is not critical, except in cases of images becoming, for example, a meme that ends up being reencoded many times.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/image\/upload\/w_700,c_fill,f_auto,q_auto,dpr_2.0\/Web_Assets\/blog\/frame-2000.png\" alt=\"2000 generations\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1400\" height=\"788\"\/><\/p>\n<p>Finally, a unique transition feature of JPEG XL is that it can effectively <a href=\"https:\/\/cloudinary.com\/blog\/legacy_and_transition_creating_a_new_universal_image_codec\">recompress legacy JPEG files without generation loss<\/a>.<\/p>\n<h2>Hopes and Strategies<\/h2>\n<p>The newest generation of image codecs\u2014in particular AVIF and JPEG XL\u2014are a major improvement of the old JPEG and PNG codecs. To be sure, JPEG 2000 and WebP also compress more effectively and offer more features, yet the overall gain is not significant and consistent enough to warrant fast and widespread adoption. AVIF and JPEG XL will do much better\u2014at least that\u2019s what I hope.<\/p>\n<p>Will there be a single winner as the dominant <a href=\"https:\/\/cloudinary.com\/glossary\/codecs\">codec<\/a> in the decades ahead? If so, will it be AVIF, JPEG XL, or the upcoming WebP2? Or WebP, now that it has universal browser support? Will there be multiple winners instead, with, for example, AVIF as the preferred codec for high-appeal, low-bandwidth encoding and JPEG XL for high-fidelity encoding? Will the new codecs lose the battle, and will the old JPEG once again survive the dethroning attempt? It\u2019s too early to answer those questions.<\/p>\n<p>For now, a good strategy might be to implement several different approaches for image encoding, not only to leverage their unique strengths but also to lessen the probability of any of the approaches becoming an attack target for <a href=\"https:\/\/www.sisvel.com\/licensing-programs\/audio-and-video-coding-decoding\/video-coding-platform\/license-terms\/av1-license-terms\">patent trolls<\/a>. Disk space is of no concern here because, relative to the enormous storage savings they deliver, image codecs occupy only minimal space.<\/p>\n<p>Furthermore, given the many factors in play, not all of them technical in nature, success of codec adoption is difficult to predict. Let\u2019s just hope that the new codecs will win the battle, which is mostly one that\u2019s against inertia and the \u201cease\u201d of the status quo. Ultimately, unless JPEG remains a dominant force, regardless of which new codec will prevail, we\u2019ll reap the benefits of stronger compression, higher image fidelity, and color accuracy, which translate to more captivating, faster-loading images. And that would be a win for everybody!<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/image\/upload\/w_700,c_fill,f_auto,q_auto,dpr_2.0\/Web_Assets\/blog\/Battle-of-the-Codecs_fnl.png\" alt=\"Codec comparison\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1400\" height=\"1559\"\/><\/p>\n<div class='c-callout  c-callout--inline-title c-callout--note'><strong class='c-callout__title'>Note:<\/strong> <p>Meanwhile, it has been clarified that the AVIF limits listed above apply to the highest currently defined AVIF profile (the \u201cAdvanced\u201d profile). It is also possible to use AVIF without a profile, and then the AV1 limits apply: a precision of up to 12-bit, and maximum dimensions of up to 65535x65535 (or more using grids). For HEIC, it is possible to use the container with a HEVC payload with a precision of up to 16-bit and with 4:4:4, although most hardware implementations do not support that.<\/p><\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":22296,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[34,426,179,180,227,321],"class_list":["post-22295","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-avif","tag-featured","tag-jpeg","tag-jpeg-xl","tag-performance-optimization","tag-webp"],"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>It\u2019s High Time to Replace JPEG With a Next-Generation Image Codec<\/title>\n<meta name=\"description\" content=\"Learn how several next-gen image codecs (JPEG 2000, WebP, AVIF, and JPEG XL) compare to JPEG in compression density, features, etc. as its potential replacement.\" \/>\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\/time_for_next_gen_codecs_to_dethrone_jpeg\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Time for Next-Gen Codecs to Dethrone JPEG\" \/>\n<meta property=\"og:description\" content=\"Learn how several next-gen image codecs (JPEG 2000, WebP, AVIF, and JPEG XL) compare to JPEG in compression density, features, etc. as its potential replacement.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/time_for_next_gen_codecs_to_dethrone_jpeg\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2021-02-22T21:56:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-21T19:17:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649724508\/Web_Assets\/blog\/jxl-compare-codecs_22296c8614\/jxl-compare-codecs_22296c8614.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\/time_for_next_gen_codecs_to_dethrone_jpeg#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/time_for_next_gen_codecs_to_dethrone_jpeg\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Time for Next-Gen Codecs to Dethrone JPEG\",\"datePublished\":\"2021-02-22T21:56:08+00:00\",\"dateModified\":\"2025-08-21T19:17:22+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/time_for_next_gen_codecs_to_dethrone_jpeg\"},\"wordCount\":7,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/time_for_next_gen_codecs_to_dethrone_jpeg#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649724508\/Web_Assets\/blog\/jxl-compare-codecs_22296c8614\/jxl-compare-codecs_22296c8614.png?_i=AA\",\"keywords\":[\"AVIF\",\"Featured\",\"JPEG\",\"JPEG XL\",\"Performance Optimization\",\"WebP\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2021\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/time_for_next_gen_codecs_to_dethrone_jpeg\",\"url\":\"https:\/\/cloudinary.com\/blog\/time_for_next_gen_codecs_to_dethrone_jpeg\",\"name\":\"It\u2019s High Time to Replace JPEG With a Next-Generation Image Codec\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/time_for_next_gen_codecs_to_dethrone_jpeg#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/time_for_next_gen_codecs_to_dethrone_jpeg#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649724508\/Web_Assets\/blog\/jxl-compare-codecs_22296c8614\/jxl-compare-codecs_22296c8614.png?_i=AA\",\"datePublished\":\"2021-02-22T21:56:08+00:00\",\"dateModified\":\"2025-08-21T19:17:22+00:00\",\"description\":\"Learn how several next-gen image codecs (JPEG 2000, WebP, AVIF, and JPEG XL) compare to JPEG in compression density, features, etc. as its potential replacement.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/time_for_next_gen_codecs_to_dethrone_jpeg#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/time_for_next_gen_codecs_to_dethrone_jpeg\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/time_for_next_gen_codecs_to_dethrone_jpeg#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649724508\/Web_Assets\/blog\/jxl-compare-codecs_22296c8614\/jxl-compare-codecs_22296c8614.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649724508\/Web_Assets\/blog\/jxl-compare-codecs_22296c8614\/jxl-compare-codecs_22296c8614.png?_i=AA\",\"width\":2000,\"height\":1100},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/time_for_next_gen_codecs_to_dethrone_jpeg#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Time for Next-Gen Codecs to Dethrone JPEG\"}]},{\"@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":"It\u2019s High Time to Replace JPEG With a Next-Generation Image Codec","description":"Learn how several next-gen image codecs (JPEG 2000, WebP, AVIF, and JPEG XL) compare to JPEG in compression density, features, etc. as its potential replacement.","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\/time_for_next_gen_codecs_to_dethrone_jpeg","og_locale":"en_US","og_type":"article","og_title":"Time for Next-Gen Codecs to Dethrone JPEG","og_description":"Learn how several next-gen image codecs (JPEG 2000, WebP, AVIF, and JPEG XL) compare to JPEG in compression density, features, etc. as its potential replacement.","og_url":"https:\/\/cloudinary.com\/blog\/time_for_next_gen_codecs_to_dethrone_jpeg","og_site_name":"Cloudinary Blog","article_published_time":"2021-02-22T21:56:08+00:00","article_modified_time":"2025-08-21T19:17:22+00:00","og_image":[{"width":2000,"height":1100,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649724508\/Web_Assets\/blog\/jxl-compare-codecs_22296c8614\/jxl-compare-codecs_22296c8614.png?_i=AA","type":"image\/png"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/time_for_next_gen_codecs_to_dethrone_jpeg#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/time_for_next_gen_codecs_to_dethrone_jpeg"},"author":{"name":"","@id":""},"headline":"Time for Next-Gen Codecs to Dethrone JPEG","datePublished":"2021-02-22T21:56:08+00:00","dateModified":"2025-08-21T19:17:22+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/time_for_next_gen_codecs_to_dethrone_jpeg"},"wordCount":7,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/time_for_next_gen_codecs_to_dethrone_jpeg#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649724508\/Web_Assets\/blog\/jxl-compare-codecs_22296c8614\/jxl-compare-codecs_22296c8614.png?_i=AA","keywords":["AVIF","Featured","JPEG","JPEG XL","Performance Optimization","WebP"],"inLanguage":"en-US","copyrightYear":"2021","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/time_for_next_gen_codecs_to_dethrone_jpeg","url":"https:\/\/cloudinary.com\/blog\/time_for_next_gen_codecs_to_dethrone_jpeg","name":"It\u2019s High Time to Replace JPEG With a Next-Generation Image Codec","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/time_for_next_gen_codecs_to_dethrone_jpeg#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/time_for_next_gen_codecs_to_dethrone_jpeg#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649724508\/Web_Assets\/blog\/jxl-compare-codecs_22296c8614\/jxl-compare-codecs_22296c8614.png?_i=AA","datePublished":"2021-02-22T21:56:08+00:00","dateModified":"2025-08-21T19:17:22+00:00","description":"Learn how several next-gen image codecs (JPEG 2000, WebP, AVIF, and JPEG XL) compare to JPEG in compression density, features, etc. as its potential replacement.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/time_for_next_gen_codecs_to_dethrone_jpeg#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/time_for_next_gen_codecs_to_dethrone_jpeg"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/time_for_next_gen_codecs_to_dethrone_jpeg#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649724508\/Web_Assets\/blog\/jxl-compare-codecs_22296c8614\/jxl-compare-codecs_22296c8614.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649724508\/Web_Assets\/blog\/jxl-compare-codecs_22296c8614\/jxl-compare-codecs_22296c8614.png?_i=AA","width":2000,"height":1100},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/time_for_next_gen_codecs_to_dethrone_jpeg#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Time for Next-Gen Codecs to Dethrone JPEG"}]},{"@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\/v1649724508\/Web_Assets\/blog\/jxl-compare-codecs_22296c8614\/jxl-compare-codecs_22296c8614.png?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/22295","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=22295"}],"version-history":[{"count":19,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/22295\/revisions"}],"predecessor-version":[{"id":36768,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/22295\/revisions\/36768"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/22296"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=22295"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=22295"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=22295"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}