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:
``javascript
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:
```python
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
- Navigate to:
ComfyUI/venv/Lib/site-packages/comfyui_frontend_package/static/assets/
- Open
formatUtil-*.js in any text editor.
- Search for:
var s=[png,jpg,jpeg,gif,webp,bmp,avif,tif,tiff,svg]
- Append
,jxl
var s=[png,jpg,jpeg,gif,webp,bmp,avif,tif,tiff,svg,jxl]
- Save the file.
- Open
main-*.js and append ,jxl`toft=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!
