Dev.to WebDev 🛠 Dev 👁 0 📖 1 min read

I built a 100% client-side image resizer for marketplace sellers (no upload, no server)

If you've ever listed anything on Etsy, you know the ritual: resize to 2000×2000, pad onto a white square, compress under 1MB, export as JPG — times 40 listings. Most people do this by hand in Photoshop or some sketchy o

If you've ever listed anything on Etsy, you know the ritual: resize to 2000×2000, pad onto a white square, compress under 1MB, export as JPG — times 40 listings. Most people do this by hand in Photoshop or some sketchy online converter that uploads their product photos to who-knows-where.
I got tired of both, so I built a small tool that runs entirely in the browser: https://etsy-image-resizers.netlify.app/
What it does
Presets for Etsy (listing 2000×2000, banners, shop icon), Amazon, eBay, Shopify, Depop, Mercari, Walmart
White-background padding (pad mode) or center crop (cover mode)
Target file size compression — it binary-searches JPEG quality until it hits ~1MB
Manual crop editor with drag / zoom / keyboard nudging
HEIC (iPhone) input via lazy-loaded heic2any
Batch processing with JSZip download
How it stays private
There is no backend. Photos are read with the File API, drawn to a canvas element, and encoded back out locally. Nothing leaves the device — no upload endpoint exists to leak.
A few implementation notes
Quality binary search: instead of a fixed quality slider, you give a target size (e.g. "under 1MB") and the tool bisects canvas.toBlob quality until it lands just under. Sellers mostly care about "hit the limit, look good", not the quality number itself.
Background-tab safety: progress used requestAnimationFrame, which pauses in background tabs and made it look frozen. It now races rAF against a setInterval fallback.
Preset coverage: it covers 7 marketplaces in one place because people cross-list and shouldn't need 7 different tools.
What's next
More presets, possibly a PWA mode. If you sell on a platform that's missing, tell me the required dimensions and I'll add it.
Repo (MIT): https://github.com/giveUpPerfect/etsy-image-resizer
Live tool: https://etsy-image-resizers.netlify.app/
Feedback welcome — especially on the crop editor UX and whether the preset list should go deeper (Poshmark/Vinted are on the radar but their published specs conflict, so I'm verifying before shipping).

📰 Read the original article on Dev.to WebDev

Originally published by Dev.to WebDev. Aggregated on AIWithGhost for educational purposes — full credit and traffic to the original publisher.