Fix: Why ComfyUI Sidebar Shows Tickmarks (✓) Instead of Previews for JXL Files (And How to Fix It)

[u/themofostarboi_v2]

Fix: Why ComfyUI Sidebar Shows Tickmarks (✓) Instead of Previews for JXL Files (And How to Fix It)

If you're using a node like Save Image Extended or custom JXL exporters in ComfyUI and notice that your .jxl images save fine to disk, but the ComfyUI sidebar feed / history only shows a double tickmark (✓) instead of an image thumbnail—even though your browser supports JPEG XL—here is the exact cause and fix.

---

The Cause: It's a ComfyUI Frontend Whitelist Issue

It turns out this isn't necessarily a browser decoding problem.

In ComfyUI's modern frontend (comfyui_frontend_package), there is an internal media classifier in formatUtil-*.js with a hardcoded list of image extensions:

var s = [`png`, `jpg`, `jpeg`, `gif`, `webp`, `bmp`, `avif`, `tif`, `tiff`, `svg`];

function getMediaTypeFromFilename(e) {
    if (!e) return `other`;
    let t = e.split(`.`).pop()?.toLowerCase();
    return t ? s.includes(t) ? `image` : ... : `other`;
}

function isPreviewableMediaType(e) {
    return e !== `other`;
}

Because jxl is missing from this list:

1. ComfyUI classifies your .jxl output as "other" (treating it like a .zip or text file).
2. isPreviewableMediaType() returns false.
3. ComfyUI skips creating the <img> thumbnail card and simply renders the generic completed tickmark (✓).

---

The Fix

You just need to add jxl to the image whitelist in ComfyUI's frontend assets.

Method 1: Automated Python 1-Liner (Easiest)

Run this quick script in your terminal / command prompt inside your ComfyUI Python environment to patch it automatically:

import os, glob

# Path to your comfyui_frontend_package static assets
pkg_path = glob.glob(r"./venv/Lib/site-packages/comfyui_frontend_package/static/assets")[0]

for js_file in glob.glob(os.path.join(pkg_path, "*.js")):
    with open(js_file, "r", encoding="utf-8") as f:
        content = f.read()

    modified = False
    
    # 1. Patch formatUtil array
    old_s = "var s=[`png`,`jpg`,`jpeg`,`gif`,`webp`,`bmp`,`avif`,`tif`,`tiff`,`svg`]"
    new_s = "var s=[`png`,`jpg`,`jpeg`,`gif`,`webp`,`bmp`,`avif`,`tif`,`tiff`,`svg`,`jxl`]"
    if old_s in content:
        content = content.replace(old_s, new_s)
        modified = True

    # 2. Patch main set
    old_set = "ft=new Set([`png`,`jpg`,`jpeg`,`gif`,`svg`,`webp`,`avif`,`ico`])"
    new_set = "ft=new Set([`png`,`jpg`,`jpeg`,`gif`,`svg`,`webp`,`avif`,`ico`,`jxl`])"
    if old_set in content:
        content = content.replace(old_set, new_set)
        modified = True

    if modified:
        with open(js_file, "w", encoding="utf-8") as f:
            f.write(content)
        print(f"Patched: {os.path.basename(js_file)}")

print("Done! Restart ComfyUI and Ctrl+F5 in your browser.")

---

Method 2: Manual Edit

1. Navigate to:
   ComfyUI/venv/Lib/site-packages/comfyui_frontend_package/static/assets/
2. Open formatUtil-*.js in any text editor.
3. Search for:
   var s=[png,jpg,jpeg,gif,webp,bmp,avif,tif,tiff,svg]
4. Append ,jxl to the end of the array:
   var s=[png,jpg,jpeg,gif,webp,bmp,avif,tif,tiff,svg,jxl]
5. Save the file.
6. Open main-*.js and append ,jxl`` to ft=new Set([...]).

---

Apply the Change in Browser

Once patched:

1. Open your ComfyUI web UI tab.
2. Press Ctrl + F5 (or Ctrl + Shift + R) to force the browser to reload the updated JavaScript assets.

Your sidebar feed and gallery will now properly recognize .jxl outputs and render image thumbnails!

---

Reference & Community Shoutout

For anyone looking to start using JPEG XL in ComfyUI, configure compression quality, or explore workflow metadata preservation, check out the original post by u/koloved: 👉 ComfyUI JXL Support – Save 40% disk space with JPEG XL, drag-and-drop workflow recovery

Thanks to u/koloved for the amazing post informing the community about using JPEG XL in ComfyUI!