Comparison Image (BlueBox)

Two images, one node, one divider you drag

You've just run an upscaler two ways. Or re-rolled a seed. Or done a masked inpaint and want to know whether it actually helped. The default ComfyUI workflow for that is: save both, open both, alt-tab between them, lie to yourself about which one is sharper.

Comparison Image (BlueBox) collapses that into a single node. Two IMAGE inputs, a draggable divider, and the A/B split follows your cursor so your eye stays anchored on the same region. It's the same idea as the image comparer that made rgthree-comfy indispensable - that pack's whole thesis is that quality-of-life nodes change how you work more than another sampler does, and a slider is the canonical example.

The difference from a save-both-files comparer: this one never writes the images to disk. Both are encoded and passed to the frontend as base64.

How it works

The backend encodes each input with the same helper: take image[0], clamp to 0–1, convert to PIL, encode WEBP or PNG, base64 it. Both images plus their MIME types and their width/height pairs go back in the UI payload. The frontend stacks two full-size layers in one stage with object-fit: contain, clips the top one with a percentage-based clip-path, and moves the split as you drag the divider. The size readout underneath shows both dimensions, which is the fastest way to notice that your "identical" pair isn't.

Two things worth knowing that fall out of that implementation. Only the first image of each batch is compared - it's image_a[0] and image_b[0], not a multi-frame viewer. And each layer is fitted independently to the node's box, so this compares the two pictures as compositions side by side in one frame. If A is 1024×1024 and B is 1920×1080, you're looking at two differently-scaled images, not a pixel-level A/B. Feed it a matched pair - the same crop, same size, only the variable under test changed.

The inputs that matter

• image_a and image_b - both required. A is the first input, B the second; the divider reveals A on one side and B on the other.
• format - WEBP (default) or PNG.
• quality - 1–100, default 85 here (the AllPreview node defaults to 75). Ignored for PNG, which is lossless.

No outputs. It's an output node that only exists to be looked at, so it goes at the end of a branch with nothing downstream of it.

Which setting to actually use: PNG when the point of the comparison is detail. This is the node's one real footgun. Judging an upscaler or a detailer at WEBP 85 means you're partly looking at compression artifacts, and on the exact hair-and-texture regions people compare, those artifacts are the same size as the improvements. That's also the standing lesson about upscaler comparisons: most arguments in that space are two people comparing different jobs. Don't add a lossy preview on top of that confusion.

The natural pairings, if you're wondering what to feed it: upscaler A vs upscaler B, denoise 0.4 vs 0.6, LoRA on vs off, crop vs pad output from a size-fitting node, or before/after any edit. Anyone comparing a masked inpaint against an instruction edit can put both results here and settle it in ten seconds.

Installing

cd ComfyUI/custom_nodes
git clone https://github.com/zhoutingxi/ComfyUI-BlueBox.git ComfyUI-BlueBox

Restart ComfyUI; the node is in BlueBox/experimental. ComfyUI Manager will also find it if you search ComfyUI-BlueBox. Nothing to pip install - the repo's requirements.txt is empty and the README's "no third-party Python packages" claim checks out against the source, which uses only stdlib plus the numpy/torch/Pillow/torchvision that ComfyUI already ships. If torchvision were missing you'd lose the whole pack, not just this node, since both preview modules are imported from the pack's __init__.py.

Common issues

"The two sides don't line up." Different sizes or aspect ratios. Both images are contain-fitted into the same stage, so a mismatch shows as a mismatch in framing rather than in pixels. Match the pair.

Everything looks soft. Likely WEBP at a lower quality than you think, or you're inspecting a node that's 400px wide - DOM-widget previews render at the node's on-canvas size. Resize the node before you judge, and switch to PNG.

The node is blank on load. Nothing has run yet; there's no image until the graph executes once. This node also stores nothing on disk, so a saved workflow reopens with an empty frame until re-run.