How I Vibe Coded My Own Image Compressor App Using Gemini 3 Pro

Google Gemini 3 Pro has been getting a lot of attention lately, and for good reason. People on X have been sharing vibe-coded apps, simulations, and games built with this model. Most do it in one shot, which gets attention fast. I’m not usually one for quick throwaway projects, but when I needed a tool for myself, I decided to see what Gemini 3 Pro could actually do.

The Problem I Needed to Solve

As a full-time blogger, I use images in almost every post. The challenge is always the same: how do I shrink file sizes without losing quality? I’ve used services like TinyPNG for years, but the free version has limits. Plus, you have to upload your pictures to their servers, which feels unnecessary.

When I found out about Gemini 3 Pro, I thought, why not build this myself? I wanted something that could compress images to WebP format right on my computer, with no uploads to external servers. I also wanted the ability to resize images if needed. This tool would be for me first, but I figured others might find it useful too.

Start with Google AI Studio

I decided to use Google AI Studio to build this. If you’ve never used it before, it’s pretty straightforward. You go to the site, click on the “Build” option, and start coding through prompts. No complex setup required.

I wrote my first prompt to describe exactly what I wanted:

Create a web app that works locally. It has two sections: one section is like tinypng it compresses the size of png, jpeg, webp images and transforms into webp format. The other section is to decrease the image dimension size where user can reduce image size. Both sections should work for multiple images at once. The downloads also should happen automatically. when bulk download happens add tiny delay for each file download.

The delay between downloads was important because browsers tend to block multiple files downloading at the same time. A small pause between each file prevents that issue.

The First Draft Was Already Good

What surprised me was how solid the first version turned out. Gemini 3 Pro created a working web app that compressed images and converted them to WebP format, all running locally. The design was clean and the UI was intuitive.

But I wasn’t done. I wanted to add more features.

Add Customization Options

My second round of prompts focused on giving users more control:

Create dark mode and light mode option. Dark mode should be default. Also add a percentage slider while compressing and also for resize. So that user can do action based on percentage.

This time I asked for a dark mode that would be the default, plus sliders so users could control compression quality and resize percentages. They could now adjust settings based on their specific needs instead of accepting fixed defaults.

The app was getting better, but I still wanted one more thing.

The Settings Panel

I threw out another prompt:

Also want settings options where I can tweak settings, like default values. Also I need an option for auto download.

This was important to me. I didn’t want to click the download button every single time I compressed images. With auto-download, the files would save automatically once processing finished. Plus, being able to set default values meant I wouldn’t have to adjust sliders every session.

Test It Myself

After these additions, I tested the app thoroughly on my own machine. Everything worked flawlessly. No lag, no errors. No more need for third-party services. I could do everything right on my device, with complete privacy. My images never leave my computer.

Get the Code Ready

I published the code directly to GitHub from AI Studio. It’s a public repository, so if you want to check it out or fork it, you can. The code uses React, so you’ll need Node.js and NPM installed on your machine.

Here’s what I did to get it running locally:

First, I unzipped the project folder. Then I opened a terminal in the project directory and ran npm install to grab all the dependencies. After that, I used npm run dev to start the development server. This gave me a link to open in my browser.

Now, every time I need to compress images, I just open the terminal in that folder and run the command. Because everything runs locally, it’s incredibly fast. I’m more productive now because I’m not waiting for uploads or dealing with website slowdowns.

The Speed Difference

This is something I didn’t expect. Using a web service has overhead. There are upload times, server processing times, and download times. When everything runs on your own machine, you skip all that. The compression happens almost instantly. Batch processing multiple images takes seconds, not minutes.

Screenshots

The name of the app is LiteImage. Following are some screenshots of this app.

If You Want to Build Something Similar

You can definitely use the prompts I used as a starting point. But here’s the thing: your needs might be different from mine. Maybe you need different image formats, or different features entirely. Take these prompts and adjust them to fit what you actually need.

The key is being specific. Tell Gemini 3 Pro exactly what you want, not vague descriptions. Include how you want it to work, what features matter to you, and how you’ll use it. The more specific your prompt, the better the result.

My Thoughts on Gemini 3 Pro

I’ve been skeptical about “one-shot” coding before. It feels like marketing hype most of the time. But with Gemini 3 Pro, I’ve seen real results. This model can actually create working apps from good prompts. It’s not perfect, and you might need to refine your requests, but it’s legitimately useful.

For me, it solved a real problem. I got a tool that’s faster than the services I was paying for, more private because nothing leaves my computer, and I can modify it whenever I want. That’s worth something.

Tips for Customizing or Extending the App Further

Here are some ideas I’ve thought about or that might work for you.

Add More Export Formats

Right now the app converts everything to WebP. But what if you needed AVIF format, or wanted to keep PNG with compression? You could ask Gemini 3 Pro to add a format selector. Let users choose their output format based on what they need. The prompt would be simple: “Add a dropdown menu that lets users select output format: WebP, AVIF, PNG, or JPEG.”

Batch Processing with Naming Patterns

When you download multiple files, they all come out with default names. You could extend this to let users set naming patterns. Maybe you want all compressed images to have “compressed” in the filename, or add dates, or use sequential numbers. Gemini 3 Pro can help you build that pretty easily.

Add Before and After Comparison

It would be useful to see a side-by-side comparison of file sizes and dimensions before downloading. You could ask for a preview feature that shows the original image next to what it will look like after compression. This helps you decide if the settings are right before you commit.

Where It Goes From Here

I’m not done with this app. As I use it more, I’ll probably think of other features I want. When that happens, I’ll go back to Gemini 3 Pro and ask for the changes. The nice thing about building it yourself is that you’re not stuck with whatever a company decided to ship. You can keep improving it.

If you use images in any way, having a local compression tool saves time and keeps your files private. Gemini 3 Pro makes building something like this possible without needing to be an expert developer. You just need to know how to write clear prompts.

Try it yourself. Think of a tool you actually need, write a specific prompt, and see what Gemini 3 Pro can create. You might surprise yourself with what’s possible.