How to Compress Images Without Losing the Detail You Need
A smaller image is not automatically a better image. Compression removes information. The skill is removing detail nobody will see at the size you actually display, and keeping the detail they will. I do that in the browser with Compress Image so a product photo does not have to be uploaded to a random converter.
Start from the master
Compress a copy of the original export. Do not compress a file you already compressed last week. Each lossy save throws away a bit more, and the damage stacks. Name the original something permanent, and name the web copy with the width or the page it is for.
Crop first if you are going to crop. Image Cropper throws away pixels you were never going to show. Compressing them first spends the file size on the edge of the table and the browser chrome in a screenshot.
What to look at
File size is the constraint. The picture is the decision. After each attempt, view the result at 100% zoom, then at the size it will be on the page.
Look at text. Shop names, price tags, and screenshots fall apart before a blue sky does. If the letters bloom or grow blocks, you went too far.
Look at edges. Hair, glasses, and a logo on a shirt pick up halos when the quality is too low. A flat illustration with few colours can go further than a portrait.
Look at faces. Skin that turns into patches is the point where I move the quality back up, even if the file is still larger than I hoped.
JPG, PNG, and WebP
JPG is for photographs. It is lossy, it has no transparency, and it is what you want for a camera picture on a page.
PNG is for screenshots, logos, and anything with a hard edge or a transparent background. Crushing a screenshot into a tiny JPG makes the text muddy. If the PNG is huge because it is actually a photo, convert it instead of pretending PNG is the delivery format.
WebP is often smaller than both for the web. Convert to WebP is the step I take when the page is the only destination. I still keep the master, because a print shop or an old form may refuse WebP.
A sequence that does not stack damage
- Duplicate the original.
- Crop to the frame you will publish.
- Compress once, at a quality you can still read.
- Compare original and result on the same screen, at 100% and at display size.
- If the text or the face suffered, step back. If they did not, check the kilobytes.
- Stop. Do not run the result through a second compressor "just in case".
For a hero image I would rather serve a larger sharp file than a tiny one that looks like a puzzle. For a thumbnail in a list, I can go harder because nobody sees it large. Those are different files. One export should not pretend to be both.
Email, forms, and print
If an inbox or a portal rejects the attachment, compress until it sends, and keep the full file if someone might print it. A scan of a document has to stay legible. Zoom in on the smallest line before you submit. A portal that wanted a small file will still reject an unreadable one.
Print is the opposite pressure. A shop that will print a poster does not want your web-sized JPG. Send them the master, or a lightly compressed file, and ask which format they accept. WebP is a web format. Do not assume a press can open it.
What the labels mean
Lossless means the pixels can be reconstructed. Lossy means they cannot. Lowering quality on a JPG or WebP is lossy. That is acceptable when you looked at the result. It is not acceptable when you dragged a slider to the end because the number was small.
Also ignore advice that says every image should use the same quality number. A logo, a photo of a person, and a screenshot of code do not fail in the same way. Judge each one, once, from the original.
When a page is slow, images are often the reason, and they are often fixable without a new design. Crop, compress once, prefer WebP on the site, and keep the file you could print. The tool does the maths. Your eyes decide whether the file is allowed to replace the master.
A note on screenshots and batches
A screenshot of an error dialog is not a photograph of a landscape. The words in the dialog are the content. If they smear, the compression failed even if the file is tiny. I would rather crop the dialog tight and keep it as PNG than force it through JPG. When you have twenty similar product photos, find the quality on one awkward photo (the one with text on the label) and reuse that setting. Do not pick the setting on the simplest blue background and apply it to the label. And once the set is exported, archive the masters outside the web folder so a later "optimise images" script cannot compress them again while you are asleep.