Getting started with image tools: from awkward crops to batch conversion, all in the browser

You've reached for an image editor a hundred times and wished it would just hurry up. Crop a meme. Shrink a photo so the upload form stops yelling at you. Turn that HEIC your iPhone insists on into a JPG a normal website will accept. Thirty-second jobs, every one. And somehow each eats fifteen minutes, because the tool is bloated, or it wants an account, or it ships your file off to a server in another country and emails you a download link like it's 2009.

I build pdfandimagetools.com, a set of image and PDF tools that run entirely in the browser. No upload, no signup, no limits. So yes, I have opinions. But this isn't a sales pitch, it's a get-things-done guide. I'll walk through the most common image tasks, show the fastest way to do each, and point you at a deeper dive where it's worth knowing what's happening under the hood.

The one thread tying it all together: every task here runs locally, in your tab. Your file never leaves the device. You don't have to take my word for it either, and I'll show you how to check at the end.

Why "in the browser" actually matters here

Quick technical aside, because you'll want the real reason, not a privacy slogan on a banner.

Browsers quietly got good at the stuff that used to demand a server. Canvas and OffscreenCanvas do the pixel work. WebAssembly runs the codecs (HEIC decode, AVIF, the JPEG encoder) at close to native speed. WebGPU and threaded WASM run actual neural networks. So "upload it to our servers" is mostly a leftover habit at this point, not a technical requirement. The file is already on your machine. Why send a 9 MB photo on a round trip just to shave 200 pixels off one edge?

There's a real tradeoff, and I won't pretend otherwise: a big batch leans on your device's RAM, and a phone with 3 GB will run out of room long before a laptop does. I'll flag where that bites. For everyday work, though, skipping the upload and the download makes it plainly faster.

Okay. Tasks.

1. Crop a meme (or anything) without a single upload

The classic. Someone sends a screenshot, you want just the funny part, and every "crop image online" result demands you register first.

Open the crop tool, drop the image in, drag the box, hit apply, download. The first frame paints before a server would have finished accepting your upload, because there is no server. The image decodes right in the tab and you're dragging a selection on a canvas.

Two things most people skip:

• Lock the aspect ratio first. If you're cropping for a specific slot (1:1 avatar, 16:9 thumbnail), set the ratio before you drag so you don't eyeball it and land 4 pixels off.
• Straighten, then crop, in one pass. Phone photos show up rotated about half the time. The crop tool composes on the same pipeline as the rotate tool, so you can rotate first and then crop with no extra re-encode squashed in between.

Search "image crop online no upload" and you'll get a hundred hits. The crop itself isn't the differentiator; anything can draw a rectangle. The difference is that this one never touches a server.

2. Batch-resize photos for an upload form

This is the task I actually built the site to fix. You've got eight photos for a marketplace listing or a visa portal, the limit is "max 1600px" or "under 500 KB each," and you would rather not open and re-save eight files one at a time like it's a chore from a previous decade.

Drop all eight into the resize tool together. Set a max dimension or a percentage and it works through the whole batch. Each file gets decoded, resized on a canvas, and re-encoded right there in the tab. The encoding runs off the main thread in a worker, so the UI keeps responding while it churns through the set instead of locking up on you.

One honest note on batch size: because the work is local, how many files you can throw at it depends on your hardware, not on some plan tier. A laptop happily eats 50. A budget phone, fewer, so I cap mobile batches on purpose. Running a tab out of RAM is the kind of crash you can't politely recover from, and I would rather refuse your 60th file than quietly lose the first 59.

If what you actually need is dimensions for social, skip down to section 5 where I just list the pixel sizes.

3. Hit an exact file size, on purpose

This is the feature I'm quietly proud of, because most tools genuinely don't do it.

Forms that say "image must be under 200 KB" are a special kind of cruel. A normal compressor hands you a quality slider and wishes you luck. Export at 60%, check the size, it's 240 KB. Drop to 50%, now it's 150 KB and looks like a fax. Nudge, check, repeat, lose the will to live.

The compress tool lets you set a target size instead. Tell it "under 200 KB" and it runs a binary search on quality for you, re-encoding and measuring until it lands just under your number. Type the exact KB or MB you need. It even caps the maximum at the file's real size, so you can't accidentally ask for something that makes no sense.

The honest limit: if you demand "under 20 KB" out of a detailed 4000px photo, physics wins. Rather than hand you mush and pretend it succeeded, it tells you the smallest size it can honestly produce. I'd rather show you the floor than lie about where it is.

4. Convert HEIC to JPG (and 20 other format pairs)

Apple ships your photos as HEIC. Half the web won't take HEIC. So this conversion is the unglamorous workhorse of the bunch, and it's a real pain point, because HEIC decoding usually means a server or a desktop app.

We decode it in the browser with a WASM codec. Drop your .heic files into HEIC to JPG (or to PNG, or to WebP) and out come normal files. The same machinery covers the rest: PNG↔JPG, WebP, AVIF, TIFF, BMP, GIF, SVG, even ICO for favicons. Twenty-odd format pairs, all the same drag-decode-encode loop.

// the shape of every in-browser conversion, conceptually:
const bitmap = await createImageBitmap(file);     // most formats decode natively; HEIC needs a WASM codec first
const canvas = new OffscreenCanvas(bitmap.width, bitmap.height);
canvas.getContext("2d").drawImage(bitmap, 0, 0);
const blob = await canvas.convertToBlob({          // re-encode to the target format
  type: "image/jpeg",
  quality: 0.92,
});
// blob -> download. No fetch() to any server anywhere in this flow.

That's the whole trick. Decode to a bitmap, paint to a canvas, encode to the format you want. The genuinely interesting engineering lives in the edge cases (color profiles, EXIF orientation, alpha channels that JPG flatly refuses to hold), not the happy path.

5. Resize for social media (the actual pixel sizes)

People search "resize for Instagram" all day, so here are numbers you can paste straight in, then resize to them in the resize tool:

• Instagram square: 1080 × 1080
• Instagram portrait: 1080 × 1350
• Story / Reel: 1080 × 1920
• Twitter/X in-stream: 1600 × 900
• LinkedIn shared post: 1200 × 627
• YouTube thumbnail: 1280 × 720

Set the exact dimensions, keep or ignore the aspect ratio depending on what the platform wants, and batch the lot. If a platform also caps the file size (a few do), resize first, then run it through section 3's target-size compress. Two steps, both local, no waiting on an upload either time.

6. Remove a background, with the model running in your tab

This is the one people don't believe at first. The background remover runs an actual segmentation neural network in your browser. On a desktop with WebGPU it's quick. On a phone it drops to single-threaded WASM, so it's slower, but it still works, and it still never uploads your photo.

Drop a photo, it cuts the subject out, you get a transparent PNG back. After your first visit the model is cached, so it keeps working offline, on a plane, in a tunnel, in the one corner of the office where the Wi-Fi gives up.

Be honest with it, though. These in-browser models are lightweight by necessity, because a model small enough to ship to a browser tab is not the giant one a server farm gets to run. A clean portrait or a product on a plain-ish background comes out great. A cluttered gym-mirror selfie with five competing subjects can confuse it into an empty cutout, because the model honestly can't tell which "thing" you meant. That's a known limit, not a bug, and you should know it going in instead of blaming your photo.

Prove it: open the network tab

Don't trust me. This is my favorite part.

1. Open any tool above and press F12 (or right-click, Inspect), then go to the Network tab.
2. Process a file.
3. Watch. The page assets load once, and then, for the actual work, nothing. No upload of your file, no download response. The bytes go nowhere.

Or the lazy version: turn off your Wi-Fi and try the crop or resize tool. It still works. A tool that uploads your file literally cannot do that, so this is a test it can't fake.

What I'd do differently, and what's still rough

In the spirit of an honest writeup, here's the stuff I haven't fully solved:

• Memory is the real ceiling. All the cleverness in the world doesn't change the fact that a tab has finite RAM. Huge batches on cheap phones are the one place a server-based competitor can technically win, and pretending otherwise would be a lie. My answer is conservative batch caps on mobile, which is a tradeoff, not a victory lap.
• The first model load isn't instant. The background remover has to pull the model down once. After that it's cached and works offline, but that first visit on a slow connection is the single slowest moment in the product, and I haven't beaten it yet.
• In-browser OCR has a hard ceiling. There's an image-to-text tool too, and it does fine on clean documents, but a browser-sized OCR model will never read a stylised poster the way a giant cloud model would. I left a note saying so right on the page instead of overselling it.

None of that shakes the core bet, which I'm pretty sure about: for everyday image jobs, doing the work where the file already lives is faster, more private, and a lot less annoying than mailing it somewhere and waiting for it to come back.

TL;DR

• Crop, rotate, resize, convert, compress, remove backgrounds, all in one browser tab. Start here.
• Batch-resize a whole folder at once. Social sizes are in section 5.
• Compress to an exact KB/MB instead of guessing with a quality slider.
• HEIC to JPG plus 20-odd other conversions, all decoded locally.
• It runs offline and never uploads your file. Open the network tab and check for yourself.

Built solo by me (Swathik), an indie dev in India, because I got tired of uploading my own photos to a stranger's server to shave 40 KB off them. If you try it, I'd genuinely love to hear what breaks. The rough edges in that last section are the honest ones, and there are surely a few more I haven't found yet.