Assets Size

Know what your assets weigh. Make your images lighter.

GitHub · Report an issue · 简体中文

See file sizes and folder counts where you already work: VS Code's Explorer. Find heavy assets, then compress JPEG, PNG and WebP images locally with a visual comparison before saving.

VS Code 1.90+ · Desktop extension · Local processing · MIT

At a glance

• Sizes in Explorer. Full file sizes and folder totals, with optional recursive or direct file counts.
• Useful color cues. Configurable warning, large and critical thresholds on size text; filenames keep their theme and Git colors.
• Preview before saving. Compare compressed images side by side or with a slider, at Fit or 100% zoom.
• Your rules. Choose extensions, folder names, exclusions, units and decimal precision. Saved changes refresh sizes automatically.
• Private by design. Bundled WebAssembly codecs; no uploads, telemetry or runtime network requests.

▾ assets                         3 files · 7.9 MB
  ▾ images                       2 files · 7.9 MB
      hero.png                              6.3 MB
      texture.jpg                           1.6 MB
    logo.svg                                 39 B

Inline labels require an optional native Explorer patch. VS Code's standard decoration API limits badges to two characters. The patch modifies three desktop program files, triggers VS Code's integrity warning and must be reapplied after editor updates. Hover tooltips and image compression work without it. Read Native Explorer patch before enabling inline labels.

Quick start

1. Install the .vsix from this project's GitHub Releases, when available, using Extensions → ⋯ → Install from VSIX…. To build from source, see Development.
2. Open a workspace containing an assets, public, static, images, img, media or fonts folder. Hover over matching files and folders to see their sizes.
3. For full inline labels, run Assets Size: Install / Reapply Native Explorer Patch from the Command Palette, then choose Reload Window.

Run Assets Size: Open Settings to customize matching rules. An empty folder displays 0 files · 0 B. Set assetSize.folderNames to ["*"] to include every folder.

Compress images

Open a JPEG, PNG or WebP image in VS Code's built-in image preview and click Compress Image in the editor toolbar. You can also right-click an image in Explorer or run Assets Size: Compress Image.

Screenshot from the 0.3.0 development build, before the Assets Size name update.

1. Inspect the original and compressed sizes, savings, and image comparison. Switch between side by side and slider views, or inspect at 100% zoom.
2. Click Save Result…, then choose Save As or Overwrite Original, with Allow Once or Always Allow.
3. Choose Discard to close without saving. A successful save refreshes Explorer sizes.

Save As suggests name.compressed.ext and confirms before replacing an existing destination. Overwrite Original refuses to replace a source that changed after compression or has unsaved edits. Always Allow remembers the save action in User Settings; every compression still waits for Save Result…. Reset assetSize.compression.saveBehavior to "ask" to revoke that permission.

Compression preserves the format and dimensions, applying JPEG orientation to the pixels. Metadata preservation is not guaranteed. Animated PNG/WebP, inputs larger than 50 MiB and images above 40 million pixels are rejected. If the result is not smaller, the original bytes are retained. Compression runs in a cancellable worker using locally bundled jSquash codecs.

Configuration

Open Settings → Extensions → Assets Size, or add this example to .vscode/settings.json:

{
  "assetSize.displayMode": "always",
  "assetSize.fileExtensions": [".jpg", ".jpeg", ".png", ".svg", ".webp", ".woff2"],
  "assetSize.folderNames": ["assets", "public", "images", "fonts"],
  "assetSize.exclude": ["**/.git/**", "**/node_modules/**", "**/.DS_Store"],
  "assetSize.showFileCount": true,
  "assetSize.fileCountMode": "recursive",
  "assetSize.units": "decimal",
  "assetSize.compression.quality": 75
}

Configured arrays replace the defaults. Exclusions are independent of .gitignore and files.exclude.

Default extensions: .jpg, .jpeg, .png, .gif, .webp, .avif, .svg, .ico, .bmp, .heic, .mp4, .webm, .mov, .mp3, .wav, .ogg, .woff, .woff2, .ttf, .otf, .pdf, .zip.

Default folder names: assets, public, static, images, img, media, fonts. Matching a folder does not automatically decorate its subfolders.

Default exclusions: **/.git/**, **/node_modules/**, **/.svn/**, **/.hg/**, **/.DS_Store.

Size colors

Thresholds use MiB (1,048,576 bytes), independently of display units. Defaults:

Customize assetSize.sizeWarning, assetSize.sizeLarge and assetSize.sizeCritical in workbench.colorCustomizations. Set assetSize.colorize to false to use neutral size text.

Commands

Native Explorer patch

The patch expands the decoration badge limit for this extension and renders counts and sizes in the existing Explorer tree. Before changing three desktop program files, it creates backups and a SHA-256 manifest in resources/app/.asset-size-native-patch:

out/vs/workbench/api/node/extensionHostProcess.js
out/vs/workbench/workbench.desktop.main.js
out/vs/workbench/workbench.desktop.main.css

Run Assets Size: Install / Reapply Native Explorer Patch, then reload. This requires write permission to the application directory. Integrity checks and code signatures are not disabled; VS Code may report that the installation appears corrupt. Hover mode and compression remain available without the patch.

Unsupported editor code layouts are rejected before writing. The minimum API version does not guarantee patch compatibility with every VS Code release or derivative. Reapply after editor updates. Upgrades from 0.2.0 / 0.2.1 reuse verified original backups without restoring first.

Before uninstalling, run Assets Size: Restore Native Explorer Patch and reload. Restoration checks program files and backups before writing, and refuses to overwrite files changed by an editor update or another tool. Original backups remain available. See recovery commands if the extension is already uninstalled.

Totals and compatibility

Folder totals include all non-excluded descendant files, regardless of which extensions receive decorations. Sizes reflect saved file bytes, not allocated disk blocks. Symbolic links are skipped. Unreadable items produce partial totals marked with ≥ and an explanation in the tooltip.

Results are calculated on demand, with up to 10,000 cached entries and 16 concurrent filesystem operations. Workspace watchers refresh files and ancestors after saves, additions, deletions and renames. Run Assets Size: Refresh Sizes if an external change is missed.

Privacy and licensing

No file uploads, telemetry or external network requests are made at runtime. In remote workspaces, processing happens on the workspace extension host. Codecs ship with the extension; image bytes are not sent to a service.

Assets Size is MIT licensed. See third-party notices for bundled codec and dependency licenses.

Development

Use Node.js 24+ and the pnpm version in package.json:

pnpm install --frozen-lockfile
pnpm lint
pnpm test
pnpm package

pnpm package typechecks and builds, then writes artifacts/assets-size-<version>.vsix. Install it from the Extensions menu. Press F5 to launch the example workspace in an Extension Development Host.

For desktop integration and UI checks, use a disposable VS Code installation:

VSCODE_EXECUTABLE_PATH="/path/to/test/Code" pnpm test:integration
VSCODE_EXECUTABLE_PATH="/path/to/patched/test/Code" pnpm test:ui
VSCODE_EXECUTABLE_PATH="/path/to/test/Code" pnpm test:compression:ui

Without an executable path, integration tests download VS Code 1.90.2. UI checks use temporary profiles and workspaces; native patch checks must target a disposable application copy.

Follow the publishing checklist for a Marketplace release. CI runs lint, builds a VSIX and exercises unit tests; it does not publish. Contributions and reproducible bug reports are welcome in GitHub Issues.