WebPify is a high-performance VS Code extension designed for modern web developers. It provides a seamless, GUI-driven workflow to optimize assets and convert images to WebP—directly from your file explorer—to boost your Core Web Vitals and Lighthouse scores.
✨ Key Features
🖼️ Professional Processing
- Convert to WebP: Transform legacy formats into next-gen WebP images.
- In-Place Optimization: Squeeze every byte out of JPEG and PNG files without changing their format.
- Powered by Sharp: Utilizes the industry-standard sharp engine for ultra-fast, multi-threaded processing.
🔍 Advanced Interactive Preview
- Side-by-Side Comparison: Open a dedicated tab to compare the "Original" vs. "Optimized" version in real-time.
- Deep Inspection: Zoom up to 5000% and pan to inspect compression artifacts.
- Alpha-Channel Support: Features a professional checkerboard background to accurately preview transparency in PNGs and WebPs.
🛠️ Smart Workflow & Automation
- Batch Processing: Handle multiple files, folders, or a hybrid selection of both simultaneously.
- Recursive Scanning: Automatically discovers all supported images within nested sub-directories.
- Intelligent Replace: One-click "Replace" or "Replace All" to overwrite original files with optimized versions, automatically cleaning up temporary files and closing preview tabs.
- Non-Destructive by Default: Generates new files alongside originals unless you explicitly choose to replace them.
🚀 How to Use
- Select: Right-click one or more images (or entire folders) in the VS Code Explorer.
- Choose Action:
- Select "Convert to WebP" for next-gen format migration.
- Select "Optimize Images" to reduce file size while keeping the original extension.
- Configure: Enter a quality value (0-100) in the input prompt (Default: 90).
- Review: Use the Summary Table to see file size savings and launch the Compare View.
- Finalize: Click Replace to overwrite originals or Delete to clear the session.
📁 Supported Formats
WebPify handles a comprehensive range of formats:
| Category | Extensions |
|---|---|
| Standard | .png, .jpg, .jpeg, .bmp |
| Animation | .gif |
| Next-Gen | .avif, .heic |
| Vector | .svg |
| Professional | .tiff, .tif |
⚙️ Technical Details
- Quality Validation: Built-in input validation ensures optimal compression settings.
- VS Code Native UI: High-contrast, theme-aware table borders and buttons that match your editor's aesthetic.
- Performance: Optimized for large assets; tracks progress via the native notification system.
💡 Why WebPify?
Image optimization is the lowest-hanging fruit for web performance. WebPify can reduce asset sizes by 30% to 80%, directly improving:
- LCP (Largest Contentful Paint)
- Total Payload Size
- User Experience on Mobile/Slow Networks
📝 License
Distributed under the MIT License.
Crafted with 🚀 by Khai Bui