built-in-nodes/SaveImage

[giscus[bot]]

built-in-nodes/SaveImage

Complete documentation for the SaveImage node in ComfyUI. Learn its inputs, outputs, parameters and usage.

https://docs.comfy.org/built-in-nodes/SaveImage

[geroldmeisinger]

(this is a cross-post from comfyui-wiki/Comments#8 (reply in thread) from 2025)

TL;DR

• You can use %Node name for S&R.widgetName% or %Title.widgetName% (S&R has higher priority). If the node names are ambiguous only the first one is used (resolved in javascript context via applyTextReplacements).
• date formats %date:...%:

yy   .. short year
yyyy .. long year
M MM .. month
d dd .. day
h hh .. hour
m mm .. minute
s ss .. seconds

(double letters are zero-padded)

• Widget values and short dateformats only work in: SaveImage SaveVideo SaveAnimatedWEBP SaveWEBM SaveAudio SaveGLB SaveAnimatedPNG CLIPSave VAESave ModelSave LoraSave SaveLatent, and there is "special" treatment in PrimitiveNode
• It does NOT work in: PrimitiveString PrimitiveInt etc., not in most custom nodes, not generally for STRING types
• Some custom nodes which also make use of it include: easy-use's easy imageSave, kjnodes' SaveImageKJ and videohelpersuite's VHS_VideoCombine (search for get_save_image_path in py files and applyTextReplacements in js/ts files)
• Additionally you can use the following. This might work more reliably and may be used across more custom nodes because it's resolved in Python context (if they use get_save_image_path):

%width%
%height%

%year%
%month%
%day%
%hour%
%minute%
%second%

• You'll find a tooltip when you hover filename_prefix

Long version
The search&replace feature (S&R) was forgotten a long time ago, it's poorly documented and I don't see it used very often. The syntax is only used in the save nodes and Primitive node (no other primitive node is supported, not even PrimitiveString):

comfyui-frontend-package/src/extensions/core/saveImageExtraOutput.ts

const saveNodeTypes = new Set([
  'SaveImage',
  'SaveVideo',
  'SaveAnimatedWEBP',
  'SaveWEBM',
  'SaveAudio',
  'SaveGLB',
  'SaveAnimatedPNG',
  'CLIPSave',
  'VAESave',
  'ModelSave',
  'LoraSave',
  'SaveLatent'
])

It is not automatically applied to all STRING types, opposite to what the name suggests. First it searches for the Node name for S&R as the reference (hence the name), otherwise the node Title is used. If there are more than one, the first match is used.

Some text replacements are done in python context ComfyUI/folder_paths.py::get_save_image_path::compute_vars which is likely used by most other custom nodes that save something and provides:

    def compute_vars(input: str, image_width: int, image_height: int) -> str:
        input = input.replace("%width%", str(image_width))
        input = input.replace("%height%", str(image_height))
        now = time.localtime()
        input = input.replace("%year%", str(now.tm_year))
        input = input.replace("%month%", str(now.tm_mon).zfill(2))
        input = input.replace("%day%", str(now.tm_mday).zfill(2))
        input = input.replace("%hour%", str(now.tm_hour).zfill(2))
        input = input.replace("%minute%", str(now.tm_min).zfill(2))
        input = input.replace("%second%", str(now.tm_sec).zfill(2))
        return input

Thus it's just width/height and a alternative longer name for datetime values.

Additional text replacements are done in javascript context before execution. There are some popular custom nodes which also make use of it, like easy-use easy imageSave, kjnodes SaveImageKJ and videohelpersuite VHS_VideoCombine. The function is defined in comfyui-frontend-package/src/utils/searchAndReplace.ts::applyTextReplacements and provides the S&R replacements Node.value and short syntax for datetime values:

export function applyTextReplacements(
  graph: LGraph | Subgraph,
  value: string
): string {
  const allNodes = collectAllNodes(graph)

  return value.replace(/%([^%]+)%/g, function (match, text) {
    const split = text.split('.')
    if (split.length !== 2) {
      // Special handling for dates
      if (split[0].startsWith('date:')) {
        return formatDate(split[0].substring(5), new Date())
      }

      if (text !== 'width' && text !== 'height') {
        // Dont warn on standard replacements
        console.warn('Invalid replacement pattern', text)
      }
      return match
    }

    // Find node with matching S&R property name
    let nodes = allNodes.filter(
      (n) => n.properties?.['Node name for S&R'] === split[0]
    )
    // If we can't, see if there is a node with that title
    if (!nodes.length) {
      nodes = allNodes.filter((n) => n.title === split[0])
    }
    if (!nodes.length) {
      console.warn('Unable to find node', split[0])
      return match
    }

    if (nodes.length > 1) {
      console.warn('Multiple nodes matched', split[0], 'using first match')
    }

    const node = nodes[0]

    const widget = node.widgets?.find((w) => w.name === split[1])
    if (!widget) {
      console.warn('Unable to find widget', split[1], 'on node', split[0], node)
      return match
    }

    return ((widget.value ?? '') + '').replaceAll(
      // eslint-disable-next-line no-control-regex
      /[/?<>\\:*|"\x00-\x1F\x7F]/g,
      '_'
    )
  })
}

ComfyUI_frontend/packages/shared-frontend-utils/src/formatUtil.ts:

// Simple date formatter
const parts = {
  d: (d: Date) => d.getDate(),
  M: (d: Date) => d.getMonth() + 1,
  h: (d: Date) => d.getHours(),
  m: (d: Date) => d.getMinutes(),
  s: (d: Date) => d.getSeconds()
}
const format =
  Object.keys(parts)
    .map((k) => k + k + '?')
    .join('|') + '|yyy?y?'

export function formatDate(text: string, date: Date) {
  return text.replace(new RegExp(format, 'g'), (text: string): string => {
    if (text === 'yy') return (date.getFullYear() + '').substring(2)
    if (text === 'yyyy') return date.getFullYear().toString()
    if (text[0] in parts) {
      const p = parts[text[0] as keyof typeof parts](date)
      return (p + '').padStart(text.length, '0')
    }
    return text
  })
}

This feature is also sometimes called: filename wildcards, variable placeholders, text replacements