Trim PNG

AI-generated artwork. Less empty space. Ready for your project.

Trim PNG was built for a common step after generating an image with AI: the artwork looks right, but the PNG still has a large transparent canvas around it. That invisible padding can make an icon look too small, throw off alignment, or leave awkward gaps in your UI.

Trim PNG removes the fully transparent borders so the image fits its visible artwork. Prepare icons, logos, illustrations, and other PNG assets directly in VS Code—one at a time, in a batch, or through an AI agent.

It works with any PNG, whether generated by AI or exported from a design tool. The pixels around the artwork must actually be transparent. White backgrounds and painted checkerboard patterns are not removed.

What it does

For example, imagine a 1024 × 1024 PNG with artwork occupying a 600 × 400 area:

• Trim Transparent Borders produces a 600 × 400 image.
• Trim to Square produces a 600 × 600 image with the artwork centred.
• With square padding set to 0.1, the square becomes 720 × 720.

These are illustrative dimensions; the result depends on the visible pixels in your image.

Start with one image

1. Right-click a PNG in VS Code's Explorer.
2. Choose Trim Transparent Borders or Trim to Square.
3. Choose Save a copy, Save as…, or Replace original.

You can also use the Trim PNG commands from the Command Palette. They use the active PNG preview or let you select images.

Copies are saved beside the original with a suffix such as -trimmed or -square. Repeated saves add a number, keeping existing files intact. The result notification shows the dimensions and offers Open image and Show in Explorer.

Clean up a batch

Select multiple PNGs in Explorer, right-click a selected image, and run either trim command. Or choose Trim PNG: Bulk Trim Transparent Borders… or Trim PNG: Bulk Trim to Square… in the Command Palette.

Save copies beside the originals, choose a destination folder, or replace the originals after one batch confirmation. Folder output supports patterns such as web-{name}-{mode}.png:

• {name} keeps the original filename without its extension.
• {mode} becomes trimmed or square.

Existing output filenames are reported as failures and left unchanged; other images continue processing. Show details opens the per-file results. Cancelling stops before the next image, and files already saved remain saved.

Use it with an AI agent

After generating your assets, enable Trim PNG in your VS Code agent chat's tool picker and ask:

Using #trimPng, remove the transparent borders from the PNGs in the project's images folder and save copies.

Using #trimPng, make all PNGs in the project's images folder square and replace the originals. Include subfolders.

The agent tool supports folders, optional recursion, square padding, custom output names, and a dry run that lists planned paths without changing files. It requires a trusted workspace and a chat client that supports VS Code extension tools.

Processing runs on the extension host, without uploading images to an image-processing service. The separate AI chat client follows its own data-handling settings.

Terminal-based agents can use the bundled CLI. See the CLI and development reference for setup and commands.

Settings

Open VS Code Settings and search for Trim PNG.

Bulk commands always ask how to save. Agent and CLI calls use the options supplied in the request. The older Replace Original setting remains for compatibility; use Save Behavior for new configurations.

Supported images

• Requires VS Code 1.125 or later on Windows, macOS, or Linux, on a supported x64 or ARM64 platform.
• Removes fully transparent borders only. Opaque backgrounds and faint visible pixels remain.
• Fully transparent, corrupt, and animated PNGs are reported without changing the source.
• Output is an 8-bit sRGB PNG; source metadata is removed.
• Files must be available on the extension host's filesystem. Symbolic-link inputs and browser/virtual filesystem images are unsupported. Saving copies requires filesystem hard-link support.

Feedback and source

Found an issue or have an idea? Open a GitHub issue.

Source code · Development guide · Release guide

MIT — see LICENSE.