Mediavert 🚀

Mediavert is the ultimate CLI tool for modernizing your web assets. It automates the tedious process of migrating legacy image formats (PNG, JPG, JPEG) to the next-gen WebP format.

But it goes beyond simple conversion. Mediavert features a Universal Reference Updater that intelligently refactors your source code—updating imports, paths, and URL strings—so your application breaks nothing while gaining massive performance improvements.

✨ Key Features

• 🔄 Universal Reference Updater: Automatically finds and replaces image references across your entire stack (.js, .jsx, .ts, .tsx, .html, .css, .scss, .json).
• ⚡ High-Speed Parallel Processing: Built on a multi-threaded architecture to convert hundreds of images in seconds without freezing your machine.
• 🎨 Lossless Quality Standard: Powered by the industry-standard sharp engine, ensuring your images drop in file size without dropping in visual quality.
• 🛡️ Dry Run Mode: Run with --test to see exactly what files will be changed and transformed before committing to disk.
• 📊 Real-time Feed: Interactive CLI progress bar giving you immediate feedback on current operations.

📦 Installation

To use it once without downloading:

npx mediavert

To install it globally on your machine for repeated use:

npm install -g mediavert

🚀 Usage

Navigate to the root directory of your project (or your public folder) and run:

mediavert

CLI Options

| Flag | Alias | Description | Default | | :--- | :--- | :--- | :--- | | --path | -p | Specific directory to scan for images. | . (Current Dir) | | --quality | -q | Set WebP compression quality (1-100). | 100 (Lossless) | | --test | -t | Simulation Mode. Runs the process without writing changes to disk. | false | | --help | -h | Display help for command. | |

Examples

Target a specific assets folder:

mediavert -p ./src/assets/images

Run a safe simulation (Recommended for first run):

mediavert --test

Compress images slightly (Logic: 90% Quality):

mediavert --quality 90

🔍 Transformation Example

Mediavert handles the heavy lifting of refactoring your code. Here is what happens when you run it:

Before

Filesystem:

• banner.png (2.4MB)

React Component (Header.jsx):

import banner from "./assets/banner.png";

<img src="/static/banner.png" alt="Hero" />
<div style={{ backgroundImage: "url('banner.png')" }}></div>

After

Filesystem:

• banner.webp (450KB) (Original PNG removed)

React Component (Header.jsx):

// References automatically updated
import banner from "./assets/banner.webp";

<img src="/static/banner.webp" alt="Hero" />
<div style={{ backgroundImage: "url('banner.webp')" }}></div>

🛠 Supported Environments

Mediavert's Universal Engine is regex-powered and framework-agnostic. It works seamlessly with:

• Frameworks: React, Next.js, Vue, Angular, Svelte
• Styling: CSS, SCSS, SASS, LESS, Tailwind Classes
• Data: JSON, YAML, Markdown
• Standard: Plain HTML, Vanilla JS

⚠️ Safety First

While Mediavert is tested thoroughly, regex-based refactoring on large codebases carries inherent risks.

1. Version Control: Always ensure you have a clean git state before running.

   git status # Should be clean

2. Test Run: Use the --test flag first to verify the output list.
3. Review: Check your git diff after the operation to verify all replacements are correct.

👤 Author

SYED RAYAN

• NPM: mediavert
• GitHub: isyedrayan1

🤝 Contributing

Contributions, issues, and feature requests are welcome!

1. Fork the project.
2. Create your feature branch (git checkout -b feature/AmazingFeature).
3. Commit your changes (git commit -m 'Add some AmazingFeature').
4. Push to the branch (git push origin feature/AmazingFeature).
5. Open a Pull Request.

📄 License

This project is licensed under the ISC License.