I make graphics mods for Oblivion Remastered. My most-downloaded one, Lumiere, adds hundreds of lights across the world at night, and the only honest way to show what a lighting mod actually does is a before/after slider people can drag. The tool everyone used for that, imgsli, went offline a while back, so I built my own: imgi.co. It turned out useful well beyond my mod pages, so here is what it does and how it is built.
What it does
- Drag a slider to compare two images, horizontal or vertical, with mouse, touch, or keyboard.
- Every comparison is a permanent shareable link, plus an iframe embed for your own site or a mod page.
- Export a comparison as a GIF, MP4, or WebP for places a slider cannot embed.
- Compare up to ten images in one link.
- Private links, and an offline mode that compares entirely in your browser.
Here is a live one, go ahead and drag it: https://imgi.co/c/9xqK9sS
Serving unlimited image views without going broke
A before/after tool is mostly a bandwidth problem. Every shared link is people loading two images over and over, with no revenue attached, and most clouds bill for egress, so the more your links get shared, the more it costs you. That is almost certainly what killed the free tools that came before.
The decision that made imgi viable was Cloudflare R2, which has zero egress fees. Store the images once, serve them to the whole internet, pay only for storage. Pair that with visually-lossless AVIF and WebP so the files stay small, and a link that gets thousands of views costs cents. That is the whole reason the free tier can stay free.
The stack
- Next.js 15 (App Router) on Cloudflare Workers via the OpenNext adapter, so pages render at the edge and load fast worldwide.
- R2 for image storage (zero egress, as above).
- D1, Cloudflare's SQLite, for comparison metadata and the short links.
- The slider itself is light client-side code, no heavy library.
One vendor, cheap to run, which matters a lot when the entire point is a free tool that should not die of its own bandwidth bill.
The embed, and a sanitizer trick
The embed is an iframe you paste anywhere. That created a small puzzle for the blog: it renders markdown with raw HTML disabled for safety, so you cannot paste an iframe into a post. Instead of loosening the sanitizer, I added a tiny allowlisted shortcode, ::imgi{id=...}, that the renderer expands into the embed server-side. The id is validated against a strict pattern and can only ever produce an imgi.co embed URL, so a live slider drops into a post with one line and the "no raw HTML" rule stays intact.
A Cloudflare Workers gotcha worth knowing
The Workers free plan gives you 10ms of CPU per request. That is plenty for SSR, but it shapes everything downstream: you cannot hold a request open doing many database round-trips, and heavy image encoding cannot live on the request path. imgi offloads the expensive AVIF encoding to a background worker so the edge stays fast and inside that budget. If you build anything real on Workers free, design around that 10ms number from day one rather than discovering it later.
Try it
imgi.co is live and free. It is handy for modders showing off graphics work, but also for AI upscales, photo edits, or any before/after. Give it a go and tell me what breaks. I am especially interested in feedback on the compare and share flow.
SOCIAL SHARE CARD GENERATOR