project

Browser-based image tools. No uploads, no accounts.

overview

QuickImgTools is a small set of image tools that run in the browser. Paste an image, pick what you want to do with it, and download the result. Nothing is uploaded anywhere. I built it for my own report workflow. I regularly take screenshots for technical write-ups and CEO-level reports where I need to embed images. Windows' Snipping Tool can automatically save every screenshot, but I don't like keeping that enabled because it quickly leaves you with a folder full of screenshots you may not actually need. Turning it off keeps things clean, but then I have to turn it back on whenever I want to save a screenshot. QuickImgTools is the middle ground. I paste the screenshot I actually want to keep, process it if needed, and download it. That's it.

the problem

Most online image tools make you upload your file to a server, wait, then download the result. That's too much friction for something like resizing a screenshot mid-workflow. The browser can handle this locally with no server needed. I started with a single script with no UI, then turned it into a proper tool after realizing I was using it every day.

how it works

The Canvas API does most of the work. An image gets drawn onto an offscreen canvas, then exported in the target format using `canvas.toBlob()` or `canvas.toDataURL()`. Compression adjusts the quality parameter on export. Resizing draws to a canvas at the target dimensions first. Clipboard paste uses the Clipboard API, and file inputs handle drag and drop.

technical decisions

Keeping everything client-side meant no server costs, no privacy concerns, and no upload wait. I picked Next.js because the project might eventually need server-side features like shareable links, and starting with it avoids a migration later. TypeScript helped with the image processing code since Blob types, canvas contexts, and async file reads can fail in subtle ways.

challenges

Not all browsers support AVIF and WebP encoding, so I check at runtime and hide the unsupported options. Large images are also a problem. Canvas operations on high-resolution images block the main thread and cause visible jank. I looked at moving processing to a Web Worker but haven't done it yet. For now, images above a certain size trigger a warning.

what i learned

Browser APIs can do a lot more than I expected. The processing part was not that hard. The hard part was the edge cases: unsupported formats, oversized inputs, clipboard permission prompts behaving differently across OSes. The bigger thing I learned was about tool design. A script that works for you is not the same as a tool that works for someone else. Adding proper UI, error states, and a clear flow is most of the actual work.

tech stack