The first time a client's homepage failed a Core Web Vitals audit because of me, the culprit was a single hero image: a 4.2 MB PNG a designer had exported straight from Figma and dropped into the WordPress media library. It was displaying at 1200 px wide and stored at 3800 px. The page took eleven seconds to paint on a throttled mobile connection. I'd shipped it.
That was during my WP Adminify days, and it taught me something that has shaped every image tool I later built for toolz.dev: most image problems aren't editing problems, they're plumbing problems. Wrong dimensions, wrong format, no compression pass. You don't need Photoshop to fix any of that. You need three or four small tools that do one thing well and run fast.
This guide walks through every everyday image operation — resizing, compressing, format conversion, and background removal — with the reasoning behind each one and the mistakes I've made so you can skip them. Every tool on toolz.dev processes images entirely in your browser. Your photos never touch a server, which matters more than people realize once they're handling client work or personal photos.
TL;DR: For the common jobs you can stay 100% in-browser: Image Resize to fix dimensions, Image Compress to cut file size, Format Converter to move between PNG/JPEG/WebP/AVIF, and Background Remover for clean product and profile shots. Nothing uploads — the file moves from your disk into the browser tab and stays there. The correct optimization order is almost always resize, then convert, then compress.
Why Process Images In the Browser Instead of Uploading Them?
Most "free online image tools" work the same way underneath: you upload the file, a server processes it, you download the result. The web page is a thin skin over a rented machine somewhere. That model has three problems, and privacy is only the loudest one.
Privacy is the obvious concern. Product shots under embargo, ID photos, screenshots of internal dashboards, personal pictures — the images people most often need to resize or compress are exactly the ones that shouldn't sit in a stranger's temp directory. "Files deleted after one hour" is a promise you can't audit.
Latency is the quieter cost. Uploading a batch of 20 MB camera images over office Wi-Fi takes longer than the resize itself. A browser-based tool skips the round trip — the "upload" is instant because the file just moves into memory. When I'm processing a folder of product photos, that difference is the difference between a coffee break and a continuous flow.
And then there are the walls nobody mentions until they hit one: file-size caps, daily limits, "upgrade to Pro to process images over 10 MB," watermarks on the free tier. A client-side tool has exactly one limit, and it's your machine's RAM.
The technology to do all this in a tab has been standard for years. The HTML <canvas> element and its 2D context can decode, resample, and re-encode raster images without any server. The browser's own Image decoder handles JPEG, PNG, WebP, and increasingly AVIF. There's no longer a technical reason to send a picture across the internet just to make it 800 px wide.
How Do You Resize an Image to the Right Dimensions?
Resizing is the operation I reach for most, and getting the dimensions right upstream prevents most performance problems downstream. The rule I wish I'd internalized earlier: never store an image much larger than the biggest size it will ever display.
The workflow on the Image Resize tool:
- Drag your image onto the tool or click to browse.
- Enter the target width and height in pixels.
- Keep aspect-ratio lock on unless you deliberately want to stretch — with it on, changing width auto-adjusts height so nothing distorts.
- Pick the resampling method (bicubic is the safe default for photos; nearest-neighbor for pixel art you want to keep crisp).
- Process and download.
The one number worth memorizing is the Retina multiplier. A slot that displays at 800 px should hold an image at roughly 1600 px so it stays sharp on 2× screens — not the 3800 px monster I shipped that first time. Double the display size, not five times it.
Here's a use-case cheat sheet I keep pinned, because "what width should this be" is the question that comes up on every project:
| Use case | Target width | Aspect ratio | Format |
|---|---|---|---|
| Website hero | 1920 px | 16:9 | WebP |
| Blog / content image | 1200 px | 3:2 or 16:9 | WebP |
| Thumbnail | 320–400 px | 1:1 or 4:3 | WebP |
| Instagram post | 1080 px | 1:1 | JPEG |
| X / Twitter in-feed | 1200 px | 16:9 | JPEG |
| Email header | 600 px | 3:1 | JPEG |
| E-commerce product | 1000–1500 px | 1:1 | WebP or PNG |
One mistake I still see in code review constantly: upscaling. Making an image larger than its source can't invent detail that was never captured — the tool just interpolates new pixels, and past about 200% you get a soft, mushy result. If a client sends a 500 px logo and needs it at 2000 px, the honest answer is "re-export it from the vector source," not "upscale it and hope."
How Do You Compress an Image Without Wrecking It?
Compression is where the real page-weight savings live. Images are typically the single heaviest thing on a web page, so shrinking them is the highest-leverage performance work most sites can do.
There are two kinds, and the distinction decides everything:
Lossy compression throws away data the human eye is unlikely to miss — subtle color variation, high-frequency texture. A JPEG at 80% quality is often 60–70% smaller than the same image at maximum quality with no visible difference at normal viewing size. This is what you want for photographs.
Lossless compression rearranges the data more efficiently without discarding any of it; the decompressed image is pixel-for-pixel identical. PNG works this way. Use it when every pixel matters — logos, screenshots, diagrams, anything with crisp text or hard edges.
The Image Compress tool lets you set a quality level, preview the result, and compare file sizes side by side before you commit. My honest default for web photos is 80% quality — I've tested lower and higher across a lot of pages, and 80 is the point where I stop being able to tell the compressed version from the original at real viewing size. If you want the full reasoning, the image compression guide goes deep on why that number holds up.
The mistake I made for embarrassingly long: compressing before resizing. If you compress a 3800 px image and then resize it down to 1200 px, you spent all that compression effort on pixels you're about to throw away, and the final file is bigger and worse than if you'd done it the other way. Resize first, then compress the smaller image. Always.
Which Image Format Should You Actually Use?
The format landscape has more good options than it used to, which is a nice problem to have. Here's how I decide, without the marketing gloss.
JPEG is the universal lossy format — supported everywhere, great for photographs, no transparency. It's the safe fallback and still the right call for email, where client support for newer formats is a coin flip.
PNG is lossless with full transparency. It's the correct choice for screenshots, logos, and anything with text or sharp edges. It is the wrong choice for photographs — a photo saved as PNG can be many times larger than the same photo as JPEG with no visible benefit.
WebP is my default for the web in 2026. It does both lossy and lossless, supports transparency, and runs roughly 25–35% smaller than JPEG at comparable quality. Browser support is effectively universal at this point. If I had to pick one format for a new site's images, this is it.
AVIF compresses harder still — commonly around 50% smaller than JPEG — with excellent handling of gradients and fine texture. The trade-offs are slower encoding and support that's very good but not quite everywhere. I use it as the top choice in a <picture> element with WebP underneath.
SVG isn't a raster format at all — it's vector, so it scales to any size without a single blurry pixel. Use it for logos, icons, and illustrations. Don't try to convert a photograph to it.
Converting between these is a two-click job on the Format Converter: drop the image, pick the target format, adjust quality if it's lossy, download. The pattern I ship on real sites uses the browser's own format negotiation:
<picture>
<source srcset="hero.avif" type="image/avif">
<source srcset="hero.webp" type="image/webp">
<img src="hero.jpg" alt="Description" width="1200" height="675" loading="lazy">
</picture>
The browser picks the first format it understands, so a modern phone gets AVIF, an older one gets WebP, and anything ancient still gets a working JPEG. Note the explicit width and height — those aren't decoration, they reserve layout space and stop the page from jumping as images load, which is a Cumulative Layout Shift win.
How Do You Remove an Image Background in the Browser?
Background removal used to mean either a subscription tool or twenty minutes with the pen tool in Photoshop. Now a machine-learning model small enough to run in a browser tab handles the common cases in a couple of seconds.
The Background Remover analyzes the image, builds a pixel mask separating subject from background, and outputs a PNG with a transparent alpha channel. Upload, wait a moment, check the edges, download. The whole thing stays local — the model runs on your machine, so even sensitive product shots never leave it.
It works best when you give it a fighting chance: even lighting, decent contrast between the subject and what's behind it, and a reasonably high-resolution source. Hair, fur, and wispy edges are still where these models struggle — if the result has a halo around someone's head, that's the failure mode to expect, not a bug you can configure away. Clean-edged subjects like packaged products come out nearly perfect.
What's the Right Order to Optimize Images for the Web?
Every time I've skipped this order or done it out of sequence, I've paid for it. Do it in this order and the output is both smaller and better-looking:
Step 1 — Resize to display dimensions. Figure out the largest size the image will render at, double it for Retina, and resize to that. This single step usually does more for file size than anything else, because you're deleting pixels that were never going to be seen.
Step 2 — Convert to the right format. Convert photos to WebP (or AVIF with a fallback). Keep logos and screenshots as PNG. Keep genuine vector art as SVG.
Step 3 — Compress to the target quality. Compress at around 80% for lossy web images, then eyeball the result at actual size.
Step 4 — Serve responsibly in HTML. Use srcset so browsers download a size appropriate to the device, and add loading="lazy" to anything below the fold so it doesn't block the initial paint.
A loose performance budget worth keeping: hero images under 200 KB (they drive Largest Contentful Paint, so they matter most), regular content images under 100 KB, thumbnails under 30 KB, and logos under 10 KB — use SVG and you'll usually beat that without trying. These aren't laws, they're a smell test. If a single image blows past its bucket, it's worth a second look.
Frequently Asked Questions
What is the best free online image tool?
It depends on the job, which is why toolz.dev splits them into focused tools rather than one bloated editor. For dimensions, use Image Resize. For file size, use Image Compress. For changing formats, use the Format Converter. For isolating subjects, use the Background Remover. All four are free, need no signup, and process images entirely in your browser.
How do I resize an image without losing quality?
Downscaling — making an image smaller — barely costs any quality because the source has more detail than the smaller size needs. Use bicubic resampling for the smoothest result. Upscaling is the risky direction: the tool has to invent pixels, so quality drops, and past about 200% of the original size the softness becomes obvious. When you need a much larger version, go back to the original source file rather than enlarging a small copy.
What image format should I use for my website?
Use WebP for photographs and most content images — it's roughly 25–35% smaller than JPEG with near-universal support in 2026. Use SVG for logos and icons so they stay sharp at any size. Use PNG only when you need lossless quality with transparency. Reach for AVIF when you want maximum compression and can pair it with a WebP fallback in a <picture> element.
Should I resize before or after compressing?
Resize first, then compress. Compressing a large image and then shrinking it wastes effort on pixels that get discarded during the resize, and the final file ends up larger and lower quality than if you'd done it in the correct order. Resizing first means the compressor works on the smaller image, producing the smallest, cleanest result.
Is it safe to use online image tools with personal or client photos?
Most online image tools upload your photos to their servers to process them, which is a real concern for anything private or under NDA. The image tools on toolz.dev process everything client-side in your browser using the canvas API and, for background removal, an in-browser ML model. Your images never leave your device, so they're safe for personal pictures, client work, and confidential product shots.
What is the difference between WebP and AVIF?
Both beat JPEG and PNG on compression. WebP is around 25–35% smaller than JPEG with effectively universal browser support, which makes it the practical default. AVIF pushes compression further — commonly about 50% smaller than JPEG — and handles gradients and texture better, but it encodes more slowly and support isn't quite everywhere yet. The common approach is to serve AVIF first with WebP as a fallback so every browser gets the best format it can decode.
How do I remove the background from an image for free?
Open the Background Remover, drop your image in, and an in-browser model detects the subject and replaces the background with transparency, giving you a PNG with an alpha channel. It works best with even lighting and clear contrast between subject and background. Fine details like flyaway hair are still the hard case for any automatic tool, so check the edges before you rely on the result.
Why are my website images slowing down the page?
Almost always it's one of three things: the image is stored much larger than it displays, it's in an old format like an uncompressed PNG photo, or it was never run through a compression pass. Fix them in order — resize to display dimensions, convert to WebP, then compress to about 80% quality — and you'll typically cut total image weight by more than half, which shows up directly in your Largest Contentful Paint score.
How do I get an image under 100 KB?
Work in this order and stop as soon as you're under the limit: resize to the dimensions the image actually displays at, convert to WebP, then compress at 80% quality. For a typical 1600px-wide photo that combination lands somewhere between 60 and 120 KB. If you're still over, drop the quality to 70% before you shrink the dimensions further — quality loss at 70% is far less noticeable than a visibly smaller image.
Can I convert HEIC photos from my iPhone to JPG?
Yes. Drop the .heic file into the Format Converter and export it as JPG, PNG, or WebP. HEIC is the format iPhones save to by default, and while it compresses well, most Windows apps, older browsers, and content management systems still refuse to open it — which is why converting to JPG or WebP before uploading anywhere is usually the safe move.
