How to reduce image file size without wrecking quality
Resizing and compressing are two different things. Get them in the right order and you can shrink an image dramatically and still keep it crisp.
A heavy image slows down web pages, bounces off email limits, and gets rejected by upload forms. The good news: most photos can be made far smaller with no visible loss, once you understand the two levers that control file size. This guide covers what makes an image big, when to resize versus compress, which format to pick, and how to do it all in your browser without uploading anything.
What actually makes an image file big
Two things drive file size, and people often blame the wrong one.
The first is dimensions - the width and height in pixels. A photo straight off a modern phone might be 4000 by 3000 pixels, or 12 million pixels. Storing that much detail takes space no matter what else you do, and if you only ever display it at 800 pixels wide, most of those pixels are wasted weight.
The second is compression - how efficiently those pixels are encoded. The same pixel grid can be saved as a bloated file or a tight one depending on the format and quality setting. A lightly compressed JPEG can be several times larger than the same picture saved at a sensible quality.
People often blame "DPI", but for screens that is a red herring: a browser cares about pixel dimensions, and a 1200-pixel-wide image is the same size whether it claims 72 or 300 DPI. Ignore DPI unless you are printing.
Resizing versus compressing - two different jobs
These two words get used interchangeably, but they do different things.
Resizing changes the number of pixels. Shrink a 4000-pixel image to 1200 pixels and you throw away roughly 90 percent of them - usually the single biggest saving you can make, and if you never needed those pixels, you lose nothing you would ever see.
Compressing keeps the same pixel count but stores it more efficiently, trading a little fine detail for a smaller file. Done gently, the eye cannot tell; done aggressively, you get blocky patches and fuzzy edges.
Order matters: resize first, then compress. Shrinking removes the bulk of the weight, and compressing a smaller image is faster and cleaner.
JPEG, PNG, and WebP - when to use each
Format choice matters as much as any setting - each is good at a different kind of picture.
JPEG is built for photographs and images with smooth colour gradients - skies, skin, landscapes - and compresses those beautifully. It cannot store transparency, and it struggles with sharp edges like text and line art, where it leaves visible fuzz.
PNG is built for graphics with flat colour, crisp edges, and transparency - logos, icons, screenshots of text, diagrams. It keeps edges perfectly sharp. On a photograph, though, PNG files are often several times larger than the same JPEG, so it is the wrong tool there.
WebP is the modern all-rounder. It handles both photos and graphics, supports transparency, and typically produces files noticeably smaller than JPEG or PNG at the same visible quality. Every current browser supports it. The caveat is that some older software and email clients cannot open it - so for email attachments a plain JPEG or PNG is still safer.
Lossy versus lossless - what you are trading
These terms describe whether compression discards detail.
Lossy compression (JPEG, and WebP in lossy mode) permanently removes information the eye is least likely to notice. Lower quality means a smaller file and more discarded detail. It gives the biggest savings, which is why it dominates photos on the web.
Lossless compression (PNG, and WebP in lossless mode) packs the pixels more tightly without throwing anything away - decompress it and you get the exact original back. Savings are more modest, but nothing degrades. Use it when every pixel matters.
Lossy compression also stacks: each time you save a JPEG again, it loses a little more, so always compress from the best original you have.
How to pick a target size
Work backwards from where the image will end up.
- Web pages: aim for a full-width photo under about 200 KB and an in-line image well under 100 KB. Match the pixel width to how it displays - roughly 1600 to 2000 pixels for a large banner, 800 to 1200 for a content image.
- Email: keep individual photos to a few hundred KB and resize to about 1600 pixels - the recipient rarely needs the full-resolution original, and courtesy matters more than the provider's limit.
- Upload forms: job portals, government sites, and profile uploads often state a hard limit like 1 MB or 2 MB and a maximum dimension. Read the rule, then resize and compress to sit comfortably under it rather than at the edge.
A target is a ceiling, not a goal - if a photo looks great at half your limit, stop there.
Step by step with Toollapse
Toollapse tools run entirely in your browser, so files never leave your device - which matters for anything personal like ID scans. Here is the order that gives the cleanest result.
- Resize first. Open resize an image and set the width to what you actually need - say 1200 or 1600 pixels for the web. Keep the aspect ratio locked so nothing stretches. This step alone usually removes most of the weight.
- Then compress. Take the resized file into compress an image and lower the quality gradually, watching the preview. Stop the moment quality starts to slip. For most photos a setting in the 70 to 80 range looks identical to the original at a fraction of the size.
- Convert to WebP for the web. If the image is going on a website, run it through convert to WebP/PNG/JPG and choose WebP for an extra saving at the same visible quality. For an email attachment, convert to JPEG (photos) or PNG (graphics) so the recipient can always open it.
Common mistakes to avoid
Upscaling. Making a small image larger does not add real detail - the tool invents pixels and the result looks soft and blurry. Only ever resize down; if you need a bigger image, start from a bigger original.
Over-compressing faces and text. Push quality too low and skin turns blotchy and text edges smear - exactly what people look at. If a face looks rough, ease the quality back up.
Wrong format for logos and graphics. Saving a logo or a screenshot of text as a low-quality JPEG surrounds every edge with grey fuzz. Use PNG or lossless WebP for anything with sharp lines, flat colour, or transparency.
Quick recommended settings
- Photo for a web page: resize to 1200 to 1600 pixels wide, compress at quality 75 to 80, convert to WebP. Aim under 200 KB.
- Photo for email: resize to 1600 pixels wide, compress at quality 80, keep as JPEG.
- Logo, icon, or diagram: keep it as PNG (or lossless WebP for the web), never JPEG. Resize only to the size you display it at.
- Screenshot with text: PNG for razor-sharp text, or lossless WebP for a smaller file with the same clarity.
- Upload form with a hard limit: resize to the stated maximum dimension, then compress until comfortably under the size cap.
Frequently asked questions
Will compressing an image reduce its quality?
Lossy compression discards some detail, but at sensible quality settings (around 75 to 80 for JPEG or WebP) the change is invisible. Quality only becomes obvious when you push the setting very low or re-compress the same file repeatedly.
Should I resize or compress to make a file smaller?
Do both, in that order. Resizing to the dimensions you actually need removes the biggest chunk, and compressing then trims the rest. Compressing without resizing leaves most of the weight in place.
Is WebP always the best format?
For the web, usually yes - it is smaller than JPEG or PNG at the same visible quality and supports transparency. But some email clients cannot open it, so for attachments stick with JPEG for photos and PNG for graphics.
Does changing DPI make my file smaller?
Not for screens. Browsers care about pixel dimensions, not DPI, so changing the DPI value alone does nothing to web file size. To shrink a file, reduce the pixel dimensions or compress it. DPI only matters for print.
Are my images uploaded anywhere when I use Toollapse?
No. Toollapse tools process everything inside your browser on your own device, so files are never sent to a server. That makes them safe for private images like ID documents.