Create WebP Alpha Mask

The most common convention (used by Photoshop, GIMP, Krita, web design) is: white = opaque, black = transparent. This matches “the mask shows you what’s visible”. The VFX industry sometimes uses the inverted convention (black = visible, white = remove) for luma-key matte compositing. Use the Invert checkbox to switch.

Grayscale preserves anti-aliased edges: alpha = 128 produces gray 128. Great for compositing where soft edges matter. Threshold forces every pixel to fully opaque or fully transparent based on the threshold slider. Great for hard-edge cutouts (logos, text) or cutting paths.

The mask will be entirely white (or entirely black if inverted). The tool’s info toast warns when this happens. If you wanted a mask from a non-transparent image, you probably want luminance-based extraction instead – try the Silhouette tool (luminance mode) for that.

PNG is the standard for masks in image editing workflows. It’s lossless (preserves exact pixel values, critical for masks), broadly supported, and reasonably-compressed. JPEG introduces DCT artefacts that corrupt mask edges. WebP is great but newer; many image-pipeline tools still expect PNG.

Every WebP file starts with bytes R-I-F-F at offset 0 and W-E-B-P at offset 8. The tool reads the first 12 bytes and checks both markers. This is stronger than MIME-type or file-extension checking – those can be wrong or missing.

Old browsers (Safari pre-14, embedded WebViews) can’t encode WebP via canvas. If toDataURL('image/webp') returns a PNG data URI, the tool detects this, falls back to PNG, and shows you an info toast.

Percentage of pixels with alpha < 255. 0% means a fully-opaque image (alpha mask is uniform). 100% means a fully-transparent image (mask is uniform the other way). Useful for sanity-checking your input.

128 (the midpoint) is a reasonable default. For anti-aliased edges, try lower values (64-96) to include more soft edges as opaque. For only the hard core of the shape, try higher (192-220). It depends on what you want the mask to represent – there’s no universally correct value.

Format: {source-stem}-alpha-mask-{mode}{-inverted}-{w}x{h}.{ext}. E.g., portrait-alpha-mask-grayscale-1920x1080.png or with invert: portrait-alpha-mask-threshold-inverted-1920x1080.png.

No. All image processing happens through the Canvas API inside your browser – nothing is sent to a server, logged, or stored, and the tool keeps working offline once the page has loaded.