DEV Community: xiaomei Lu

Getting images actually web-ready: compress, resize, and pick the right format without opening an editor

xiaomei Lu — Sun, 07 Jun 2026 16:23:18 +0000

A surprising amount of "my site is slow" comes down to one thing: someone dropped a 4032x3024 photo straight off their phone into a content block that renders at 800px wide. The browser downloads all 5 MB and then throws most of it away during resize. Multiply that by a dozen images and you've got a page that takes 8 seconds on a hotel wifi.

Getting an image "web-ready" is really three decisions made in order: resize first, then choose a format, then compress. Do them in that order and you usually cut file size by 80-95% with no visible quality loss. Here's how to actually do it, with the numbers that matter.

Step 1: Resize to the size it's displayed at (this is the big win)

This is the step people skip, and it's the one that matters most. Pixels you can't see still cost bytes.

Figure out the largest size the image is ever shown at, then add a buffer for high-DPI screens:

Full-width hero on a normal layout: cap at ~1920px wide. Even 4K monitors rarely render a content image wider than that.
Blog post inline image / content column: the column is usually 700-800px, so export at 1600px (2x for retina) and let CSS scale it down.
Thumbnail / avatar / card image: displayed at 200px? Export at 400px. No more.
Icons and logos: if it's flat/geometric, this should be an SVG, not a raster image at all.

The math is brutal in your favor here. A 4000x3000 image is 12 million pixels. Resized to 1600x1200 it's 1.9 million pixels — 84% gone before you've compressed anything. Resizing from 4000px to 1600px usually takes a 5 MB JPEG down to roughly 600-900 KB on its own.

Quick rule: if the longest edge of your file is bigger than 2000px and it's not a print asset or a zoomable gallery image, it's too big.

Step 2: Pick the right format

Format choice is mostly about what's in the image:

Photographs / complex gradients → JPEG or WebP. Lots of color, no hard edges, no transparency. JPEG is universally supported; WebP is ~25-35% smaller at the same quality and supported by every browser shipped in the last 5+ years.
Screenshots, UI, text, line art, anything with sharp edges → PNG or WebP (lossless). JPEG turns crisp edges into a smeary mess of artifacts. This is the #1 format mistake — saving a screenshot of code as a JPEG.
Needs transparency → PNG or WebP. JPEG has no alpha channel.
AVIF is the smallest of all (often 20% under WebP) but it's slower to encode and a bit fussier; great for hero images where the savings are worth it, overkill for thumbnails.

Honest default for 2026: WebP for almost everything, with a JPEG fallback only if you're targeting truly ancient clients. If you don't want to think about it, JPEG for photos and PNG for screenshots is still perfectly fine and will never surprise you.

Step 3: Compress with a target quality, not "maximum"

For lossy formats (JPEG/WebP/AVIF), quality is a 0-100 dial, and the sweet spot is lower than people expect:

Quality 80-85 is the standard "looks identical, much smaller" zone for photos. Start here.
Quality 70-75 is fine for thumbnails and background images where nobody's pixel-peeping.
Above 90 you're mostly adding bytes you can't see. Below 60 you start to notice blocking in skies and skin tones.

A typical 1600px photo at quality 82 lands around 120-200 KB. That's the target to aim for on a content image. If you're well above 300 KB after resizing, your quality setting is too high or the format is wrong for the content.

For PNG screenshots, "quality" works differently — you reduce the color palette (e.g. down to 256 colors) and run lossless optimization. A flat UI screenshot can drop 60-70% with palette reduction and look identical.

Doing it without installing anything

If you live in the terminal, the local CLI tools are excellent and worth knowing — they're scriptable, run offline, and keep files on your machine:

ImageMagick: magick input.jpg -resize 1600x -quality 82 output.jpg does resize + compress in one shot. mogrify batches a whole folder.
cwebp: cwebp -q 80 input.png -o output.webp for WebP conversion.
sharp (Node) or Pillow (Python) if you want this baked into a build step or an upload pipeline. This is the right answer for anything recurring.
squoosh-cli wraps the same encoders Squoosh uses, good for AVIF.

If it's a one-off, or you're on a machine where you can't install things, or you just don't want to remember ImageMagick's flag soup, a browser tool is faster. Web options worth knowing: Squoosh (Google's, the gold standard for fiddling with one image and watching the quality slider in real time, fully client-side), TinyPNG (dead simple, great auto-compression, but free tier caps file size and count), and Photopea if you also need to actually edit.

For the plain resize-then-compress run I described above, I usually point people at the image tools on BestAIFinds — full disclosure, I help build that one, so weigh that accordingly. There's a compress tool, a separate resize tool, and format conversion, all free with no sign-up or watermark, and uploads auto-delete within about an hour. Squoosh is genuinely better if you want to manually tune one image with a live preview, so use that when you care about a single hero shot. For batching a folder, honestly just use ImageMagick.

The privacy caveat you should actually think about

Any browser tool that uploads to a server means your image touches someone else's machine, even if it's deleted an hour later. For a marketing photo or a screenshot of public docs, who cares. For anything with PII, internal dashboards, unreleased product shots, medical or legal material — use a local CLI or a fully client-side tool (Squoosh and ImageMagick never send your file anywhere). This isn't paranoia, it's just matching the tool to the sensitivity of the file. Read whether a tool processes in-browser or server-side before you paste in something confidential.

Putting it together

The whole workflow for a typical content image:

Resize longest edge to ~1600px (or 2x your display size). Biggest single saving.
Pick format: WebP or JPEG for photos, PNG/WebP for screenshots and UI.
Compress to quality ~82 for photos, ~75 for thumbnails. Aim for under ~200 KB.
Sanity-check the output actually looks fine at the size it'll be shown, not zoomed to 400%.

Do those four things and a page that was shipping 6 MB of images ships maybe 600 KB, with no visible difference. Your Lighthouse score, your mobile users, and your bandwidth bill all thank you.

What's your default quality setting and format these days — has WebP fully replaced JPEG in your workflow, or are you still shipping JPEG fallbacks? Curious what edge cases are keeping people on the old formats. Drop a comment.

Free browser tools for the boring file tasks every dev runs into

xiaomei Lu — Tue, 02 Jun 2026 07:02:55 +0000

Every few days I hit some small file chore that has nothing to do with the actual work: a PDF too big to email, a screenshot that needs a transparent background, a CSV someone wants as JSON. None of it is hard. It's just annoying enough to break my flow, and the first Google result is usually a desktop app that wants an install and an account before it'll do a 5-second job.

Over time I've collected a set of browser-based tools that handle this stuff without any of that friction. Here's the practical roundup, with concrete steps for the tasks that come up most.

Compress a PDF before emailing it

Mail servers commonly reject attachments over ~10-25 MB, and exported PDFs (especially anything with images or scans) blow past that fast.

The steps are basically the same everywhere:

Open a PDF compressor in your browser.
Drag the file in.
Pick a compression level — "medium" is usually the sweet spot between size and readable text.
Download and check it still looks fine before you send.

The thing to watch: heavy compression can soften scanned text or photos. Always eyeball the output. If it's a contract or anything someone has to read carefully, stay on the lighter setting.

Tools I've used for this: Smallpdf, PDF24, and BestAIFinds (full disclosure, I help run that last one). All three do the same core job in the browser. PDF24 is nice because it's genuinely no-account; Smallpdf has a free tier with daily limits. The one I help with is free with no sign-up and no watermark, and it auto-deletes uploads within about an hour — but honestly, for a one-off, grab whatever tab is already open.

Remove an image background

This used to mean opening an editor and masking by hand. Now an automatic remover gets you 90% of the way in one click — great for product shots, profile pictures, or dropping a logo onto a slide.

How it goes:

Upload the image (PNG/JPG).
Let it auto-detect the subject.
Download as a transparent PNG.

It struggles with fine detail — wispy hair, glass, motion blur. For those, Photopea is worth knowing about: it's a free, in-browser Photoshop clone where you can clean up edges manually with the same keyboard muscle memory. For the quick automatic version I'll use an in-browser remover like the one on BestAIFinds, but the workflow is identical across tools.

Convert formats without a round-trip

The two that come up constantly:

PDF to Word when you need to edit text in a doc someone "helpfully" sent as a PDF. Formatting is the hard part — tables and columns are where converters fall apart. Run it, then spend two minutes fixing layout rather than expecting it to be perfect.
CSV / Excel / JSON / XML when you're moving data between a spreadsheet and something that speaks JSON. For small files a browser converter is faster than writing a one-off script; for anything large or repeatable, just use pandas or jq and move on.

iLovePDF and Smallpdf both cover the PDF conversions well. I'll often reach for whatever's already open in a tab.

A few honest caveats

Browser tools are great, but know their limits:

Privacy: anything you upload leaves your machine. Don't put confidential contracts, customer data, or anything under NDA through a random web tool. Check the deletion policy first — some auto-delete uploads within an hour, some are vaguer about it. For sensitive files, prefer a local CLI (qpdf, ghostscript, ImageMagick, ffmpeg) that never sends bytes anywhere.
Scriptability: if a task repeats, automate it. A web UI is for one-offs; for the tenth time, write the script.
Free tiers: "free" sometimes means a couple of files a day or a watermark. Read before you rely on it for a deadline.

A quick reference list

Tasks → what I tend to grab:

PDF too big to email → any browser compressor, "medium" level, eyeball the result
PDF → editable text → a PDF-to-Word converter, then fix tables by hand
Transparent background → automatic remover for speed, Photopea for fiddly edges
Spreadsheet ↔ JSON → browser converter for small one-offs, pandas/jq for real pipelines
Compress/convert video → an in-browser video tool for short clips, ffmpeg for batches

Sign-off

There's no magic here — these are all variations on "upload, click, download." The point is just to not lose 20 minutes installing software for a job that takes seconds. Keep a couple of these bookmarked, keep a local CLI around for anything private or repeatable, and you'll rarely get stuck.

If you've got a go-to tool I didn't mention, drop it in the comments — I'm always swapping mine out.