Introducing ImageConverter: A Modern Image Processing Tool

When working with large, high-resolution images—either for print or the web—the process of downsizing, optimizing, and properly placing them can be quite tedious. For designers who also write documentation in .mdx, the overhead grows exponentially: You typically need both light and dark variants, optimized for different use cases. Online converters are loaded with ads, subscriptions, or limited functionality, and native apps often don't fit the Mac experience or feature set that some of us expect.

Enter ImageConverter—a modern tool I built with TypeScript and Sharp to tackle these challenges head-on.

Why Another Image Conversion Tool?

As a designer and developer, I often found myself jumping through hoops just to optimize images. For .mdx-based documentation, the process of creating separate light and dark images is especially painful:

This was not only time-consuming, but also prone to human error. Whether you’re missing a file or incorrectly referencing a path, mistakes happen easily in repetitive tasks.

Building a Better Workflow

I decided to build my own solution using:

• TypeScript for type safety and tooling
• Sharp as the image processing workhorse
• Electron + React for a modern desktop application
• VS Code Extension API for integrating directly into my editor

The Electron Desktop App

Electron allows you to create cross-platform desktop apps using web technologies. In this case, I built a React UI for batch-processing images. You can drag and drop images, choose various settings like format, resolution, and quality, and then let sharp handle the heavy lifting.

Key Features:

• Batch image processing: Resize or convert a whole folder at once.
• Preset management: Save your frequently used settings (e.g., for web, mobile, or print).
• Multiple export formats: PNG, JPEG, WebP, AVIF, etc.
• Dark mode: A must-have for any modern application.

The VS Code Extension

For those writing .mdx (or any web documentation) in VS Code, manually handling light and dark images can be soul-crushing. That’s why I built the Dynamic Image Processor.

Instead of:

With the extension, you simply:

The extension will optimize both images (light and dark) to AVIF or your desired format, then automatically insert the correct snippet in your .mdx file with the correct paths. Mistakes are minimized, and you never have to switch to a web browser or unzip files again.

Sample VS Code Settings

You can further customize your paths and output format in VS Code’s settings:

{
  "dynamicImage.defaultPathPrefix": "/public",
  "dynamicImage.lightSubfolder": "light",
  "dynamicImage.darkSubfolder": "dark",
  "dynamicImage.defaultImageExtension": "png",
  "dynamicImage.cleanupOriginal": false
}

Under the Hood: Sharp

A huge shoutout goes to the sharp library. It handles all the image manipulation—resizing, format conversion, and more. Without it, building both the desktop app and the VS Code extension would have been significantly more complex.

Closing Thoughts

This project is a testament to that idea. If you find yourself in a similar situation—juggling multiple images for documentation or working with large assets for web or print—ImageConverter might just save you a ton of time.

Feel free to explore, star, or contribute to the project over on GitHub. I’m always looking for ways to improve it further or add new features.

Thanks for reading, and I hope ImageConverter helps streamline your workflow as much as it has mine!