[{"data":1,"prerenderedAt":118},["ShallowReactive",2],{"tool-content-en-image-diff":3},{"id":4,"title":5,"body":6,"description":108,"extension":109,"locale":110,"meta":111,"navigation":112,"path":113,"seo":114,"stem":115,"toolId":116,"__hash__":117},"tools\u002Ftools\u002Fen\u002Fimage-diff.md","Image Diff",{"type":7,"value":8,"toc":97},"minimark",[9,14,18,22,39,43,46,50,76,80,83,87,90,94],[10,11,13],"h2",{"id":12},"what-this-tool-does","What this tool does",[15,16,17],"p",{},"Compare two images pixel by pixel in your browser. Load an image into slot A and slot B — by click, drag-and-drop, or paste — and the tool paints a result image that marks exactly which pixels changed. Nothing is uploaded to a server.",[10,19,21],{"id":20},"tolerance-and-transparency","Tolerance and transparency",[23,24,25,33],"ul",{},[26,27,28,32],"li",{},[29,30,31],"strong",{},"Tolerance"," sets how large a per-channel color change is allowed before a pixel counts as different (0 = any change, 255 = almost nothing counts). A small tolerance like 8 hides JPEG noise and antialiasing while keeping real edits visible.",[26,34,35,38],{},[29,36,37],{},"Ignore transparency"," compares RGB only, so two images that differ only in their alpha channel count as identical.",[10,40,42],{"id":41},"size-mismatch-handling","Size mismatch handling",[15,44,45],{},"When the two images have different dimensions, both are centered on the larger canvas: the bigger image is cropped around its center, the smaller one is padded with the canvas background. The compared area is shown above the result so the comparison stays honest — no silent stretching. Areas outside the overlap are excluded from the statistics automatically.",[10,47,49],{"id":48},"view-modes","View modes",[23,51,52,58,64,70],{},[26,53,54,57],{},[29,55,56],{},"Highlight differences"," dims unchanged pixels and paints every differing pixel red, which makes the changed regions pop immediately.",[26,59,60,63],{},[29,61,62],{},"Difference heatmap"," colors each differing pixel on a cold-to-hot ramp according to how far its channels moved, so small tweaks and big changes are distinguishable at a glance.",[26,65,66,69],{},[29,67,68],{},"Align assist"," overlays both images as red and cyan with a difference blend: wherever the two match the canvas turns black, and misaligned edges light up. Drag the canvas (or focus it and use the arrow keys; Shift+arrow moves 10 px at a time, double-click resets) to slide image B until the view goes as dark as possible, then switch back to the diff modes — the comparison now uses your alignment.",[26,71,72,75],{},[29,73,74],{},"Image A \u002F Image B"," shows either source image at the same zoom for a direct visual check.",[10,77,79],{"id":78},"overlap-only-statistics","Overlap-only statistics",[15,81,82],{},"Pixels where one of the two images shows only background — the edges revealed by sliding B during alignment, or the padding around different sizes — are painted flat gray and excluded from the statistics. The reported numbers always describe the region where both images actually have content; a badge above the result shows how many pixels were excluded.",[10,84,86],{"id":85},"statistics","Statistics",[15,88,89],{},"The stats bar reports the total compared pixels, identical and different counts, the percentage of differing pixels, and the maximum and mean per-channel delta over differing pixels. Export the currently displayed result as PNG at any time.",[10,91,93],{"id":92},"performance-and-privacy","Performance and privacy",[15,95,96],{},"Comparison runs in a Web Worker when available, with a main-thread fallback. Images are decoded and diffed entirely on your device.",{"title":98,"searchDepth":99,"depth":99,"links":100},"",2,[101,102,103,104,105,106,107],{"id":12,"depth":99,"text":13},{"id":20,"depth":99,"text":21},{"id":41,"depth":99,"text":42},{"id":48,"depth":99,"text":49},{"id":78,"depth":99,"text":79},{"id":85,"depth":99,"text":86},{"id":92,"depth":99,"text":93},"Compare two images pixel by pixel locally in your browser: highlight differences, a difference heatmap, tolerance control, and stats.","md","en",{},true,"\u002Ftools\u002Fen\u002Fimage-diff",{"title":5,"description":108},"tools\u002Fen\u002Fimage-diff","image-diff","jEUjoC6Cr2a06YACI3ooB_JV628VfDVF0WRzsZDX_cs",1792391418242]