How I Built TokenSaver: An Image Optimizer for AI Tools
I recently built a small Firefox extension called TokenSaver. The idea started with a simple observation: AI tools don't necessarily need every pixel in a huge screenshot. But we often send them exactly that. A scree
I recently built a small Firefox extension called TokenSaver.
The idea started with a simple observation:
AI tools don't necessarily need every pixel in a huge screenshot.
But we often send them exactly that.
A screenshot from a MacBook can easily be thousands of pixels wide. If I'm asking an AI model to read a small piece of code or understand an error message, most of that image may not be useful.
So I built a tool to optimize the image before sending it.
The problem
AI coding assistants are becoming part of my daily development workflow.
I regularly send screenshots for things like:
- UI debugging
- Error messages
- Code snippets
- Documentation
- Terminal output
- Design feedback
The problem is that screenshots can be much larger than necessary.
A 3000×2000 screenshot and a smaller optimized version may contain essentially the same information for the task I'm asking the model to perform.
But the image still has to be processed as an image input.
That's where the idea for TokenSaver came from.
The idea
The workflow is intentionally simple:
Screenshot
↓
TokenSaver
↓
Optimize dimensions
↓
Estimate image tokens
↓
AI tool
Instead of:
Screenshot
↓
AI tool
The goal isn't to destroy image quality.
It's to remove unnecessary image data while keeping the information that matters.
What TokenSaver does
TokenSaver currently supports several ways of providing an image:
- File picker
- Drag and drop
- Paste screenshots directly
It can then optimize the image based on the selected mode.
The extension also displays an estimated token count before and after optimization.
This gives you an idea of whether the optimization actually made a meaningful difference.
Different optimization modes
I didn't want to create a single "compress" button.
Sometimes quality matters.
Sometimes saving as much as possible matters more.
So TokenSaver provides different optimization modes, including:
- Sharp — prioritize image quality
- Auto — balance quality and optimization
- Max Saving — prioritize reducing the image size
This makes it possible to choose based on the type of screenshot.
For example, I would treat a screenshot containing tiny code text differently from a simple UI screenshot.
Why local processing?
This was an important design decision.
A screenshot can contain sensitive information.
As developers, we regularly have screenshots containing:
API responses
Source code
Customer information
Internal dashboards
Terminal output
Personal data
I didn't want users to upload those images to another service just to resize them.
So TokenSaver performs the image optimization locally in the browser.
No TokenSaver server is required to process the image.
One interesting lesson
The biggest lesson from building this wasn't image resizing.
It was realizing that image optimization for AI is different from normal image optimization.
Traditional image compression usually focuses on:
- File size
- JPEG/WebP quality
- Bandwidth
- Storage
For AI inputs, another question becomes important:
How much visual information does the model actually need for this task?
That's a different optimization problem.
What I'm working on next
TokenSaver is currently available for Firefox.
I'm keeping the project small for now and using real user feedback to decide what should come next.
Possible directions include broader browser support and additional AI-input optimizations.
But I don't want to add features just because they sound interesting.
I'd rather solve one problem properly first.
Try it
If you use AI tools for development and regularly paste screenshots, give it a try:
👉 Install TokenSaver – Image Optimizer
It's free, and I'd genuinely like to hear what happens with your own screenshots.
Especially the difficult cases where the image contains small text or code.
About the developer
I'm Taha Hussein, an engineer working with iOS development and AI.
LinkedIn: https://www.linkedin.com/in/taha-hussein-b0a583425/
Originally published by Dev.to AI. Aggregated on AIWithGhost for educational purposes — full credit and traffic to the original publisher.