Asset Gallery

Images in code, made easy.
Browse, deduplicate, look up and trace the usage of every image in your repository, without leaving VS Code.

Features at a glance

• Gallery: every PNG, JPEG, WebP, GIF, SVG and AVIF in your workspace in one searchable grid.
• Duplicate detection: byte-identical copies, plus the same picture resized, re-encoded or converted to another format.
• Asset Lookup: drop in an image and see whether it already exists before you add it.
• Usage intelligence: where each image is referenced in code, across React, CSS, HTML, Flutter and more.
• Insights: storage by folder and format, redundant storage, and cleanup suggestions with measured savings.
• Import warnings: a heads-up when someone adds an image the workspace already has.
• Private by design: everything runs locally. No network requests, and nothing is deleted without your confirmation.

Installation

1. Open the Extensions view (Cmd+Shift+X on macOS, Ctrl+Shift+X on Windows and Linux).
2. Search for Asset Gallery and select Install.

Or open Quick Open (Cmd/Ctrl+P) and run:

ext install anubhavpathak99.asset-gallery

Quick start

1. Open a folder that contains images. Asset Gallery activates and scans it in the background. The status bar shows progress; click it to cancel.
2. Open the gallery. Click the image count in the status bar, press Cmd/Ctrl+Alt+Shift+A, or select Open Gallery in the Asset Gallery sidebar.
3. Explore. Use the tabs along the top: Gallery, Duplicates, Lookup, Usage and Insights.

Later scans are incremental, so unchanged files are not processed again.

The Asset Gallery icon in the Activity Bar opens the Overview sidebar, with workspace totals and a quick lookup drop zone:

Features

Gallery

A fast, virtualized thumbnail grid of every image in the workspace, with dimensions, file size, folder, usage status and duplicate badges on each card.

• Switch between grid and list views, and sort by name, path, size, dimensions or date.
• Filter with the format, folder and usage dropdowns, or type a search (press / to jump to the search box).
• Select an image to open the detail panel: a large preview, metadata, code references, exact copies and visually similar images.
• From the detail panel, Open the file, Find similar, Reveal it in the Explorer, or copy its relative path, absolute path or name.

Search syntax. Combine filters with plain text, for example hero ext:png is:unused.

Asset Gallery follows your VS Code color theme:

Duplicate detection

Asset Gallery finds two kinds of duplicates:

• Exact duplicates: identical bytes (SHA-256), whatever the file name or folder.
• Visually similar images: the same picture re-encoded, converted between PNG, JPEG, WebP, AVIF and SVG, resized or lightly edited, found with a perceptual hash.

How to use it

1. Open the Duplicates tab, or run Asset Gallery: Find Duplicates.
2. Switch between Exact and Similar. Each group shows its previews, sizes, dimensions, similarity and reclaimable storage.
3. Mark the file you want with Keep this file.
4. Select Compare to inspect the group side by side, or Remove others… to move the rest to the OS trash. The confirmation warns you when a file is still referenced in code.

Every match carries a label:

Nothing is ever deleted automatically.

Asset Lookup

Check whether an image already exists before you add it to the project. Asset Gallery fingerprints the image in memory and lists exact and visually similar images already in the workspace, or tells you plainly that nothing similar exists. The image is never copied into your project.

How to use it

• Open the Lookup tab (Cmd/Ctrl+Alt+Shift+L), then drop an image from your desktop, paste it, or choose a file. Hold Shift while dropping into an editor tab.
• Drop or paste into the Asset Lookup area of the sidebar for a quick check.
• Right-click an image in the Explorer (or an editor tab) and choose Find Similar Assets to check a file that is already in the workspace.

Each result shows its similarity, why it matched, and buttons to compare, open, reveal or copy it.

Usage intelligence

Asset Gallery analyzes your source files to find where each image is referenced:

Each image gets a status:

How to use it

1. Open the Usage tab, or run Asset Gallery: Show Unused Assets.
2. Filter by Potentially unused, Uncertain, Used or All.
3. Select an image to see each reference's file, line, kind and confidence. Click a reference to jump to that line.

You can also right-click an image in the Explorer and choose Show Asset Usages.

Insights and cleanup assistant

A dashboard for the whole workspace: image count and total storage, storage by folder and by format, usage breakdown, duplicate groups and estimated redundant storage (overlapping categories are called out, so numbers are not double-counted).

The cleanup assistant lists:

• Oversized images: larger than 500 KB or wider than 2560 px.
• WebP and AVIF candidates: PNG, JPEG and GIF files over 100 KB, with measured WebP savings. Images are re-encoded in memory and the originals are untouched.
• Files that could not be processed, with the reason.

Open it from the Insights tab or with Asset Gallery: Show Insights.

Compare

Compare two images in Side by side, Swipe or Difference mode, with synchronized zoom and pan and their dimensions, file size and format underneath. Open it from a duplicate group, a lookup result, the detail panel or an import warning.

Import warnings

When an image that already exists (exactly or visually) is added to the workspace, a notification offers View Existing, Compare or Ignore. Each file is announced once, and bulk additions such as a branch switch produce a single summary with Show Duplicates. Turn this off with assetGallery.notifications.enabled.

Supported formats

Commands

Open the Command Palette (Cmd/Ctrl+Shift+P) and type Asset Gallery.

Keyboard shortcuts

Change them in Preferences: Open Keyboard Shortcuts (Cmd/Ctrl+K Cmd/Ctrl+S).

Extension Settings

This extension contributes the following settings:

Example settings.json:

{
  // Only index images in these folders
  "assetGallery.scan.include": ["src/assets/**", "public/**"],
  // Group only very close matches as duplicates
  "assetGallery.duplicates.similarityThreshold": 95,
  // Also index TIFF files
  "assetGallery.scan.additionalFormats": ["tiff"]
}

Tip: Setting assetGallery.scan.exclude replaces the default list (node_modules, bower_components, dist, build, out, coverage, target, Pods, DerivedData, storybook-static and hidden folders). Copy the defaults into your own list if you still want them excluded.

Requirements

• VS Code 1.90 or later.
• Nothing else to install. Image decoding (sharp / libvips) is bundled for your platform. If it cannot be loaded, Asset Gallery keeps working with exact matching and tells you that visual matching is unavailable.
• Works in Restricted Mode. Virtual workspaces (such as GitHub repositories opened in vscode.dev) are not supported, because Asset Gallery reads image files from disk.

Privacy and safety

• All processing happens locally in the extension host. The extension makes no network requests.
• The index and thumbnails live in VS Code's per-workspace storage, never in your repository.
• Files are only ever moved to the OS trash, and only after you confirm.
• The webview runs under a strict Content Security Policy and cannot read files on its own.

FAQ

Does Asset Gallery upload my images?
No. Scanning, fingerprinting and lookup all happen on your machine, and dropped images are analyzed in memory only.

Will it change or delete my files?
Never automatically. The only destructive action is Remove others… in a duplicate group, which moves files to the OS trash after a confirmation.

Why is an image I use marked "Potentially unused"?
Static analysis cannot see images loaded by names built at runtime (from an API or CMS), native Android or iOS resources, or frameworks without an analyzer. Check the image's references before removing it.

Scanning a large repository is slow. What can I do?
Narrow assetGallery.scan.include to your asset folders, check that build output is excluded, and raise assetGallery.performance.concurrency. Only the first scan processes every file.

How do I reset the index?
Run Asset Gallery: Refresh Index (Rebuild).

A file shows as unreadable. Where can I see why?
The Insights tab lists files that could not be processed with the reason, and Asset Gallery: Show Log has the details.

Known limitations

• Images referenced by names built at runtime from external data, by native Android or iOS resource systems (R.drawable.x, asset catalogs), or by frameworks without an analyzer show as Potentially unused or Uncertain.
• References inside comments count as references.
• Source files larger than 768 KB (usually generated bundles) are skipped.
• Visual matching compares structure in grayscale plus coarse color, so heavy crops and rotations are not detected.

Release notes

See the changelog for the full history.

0.1.0

Initial release: gallery, exact and visual duplicate detection, Asset Lookup, usage analysis, insights, compare view and import warnings.

Contributing

Bug reports and pull requests are welcome. Open an issue on GitHub, or see CONTRIBUTING.md to build, test and run the extension from source.

License

MIT