How I compress images without making them look terrible

Large images make pages slower, emails heavier, and uploads more annoying. The goal of compression is simple:

Make the file smaller while keeping the image good enough for its purpose.

The Image Compressor helps do that in the browser. I use it when an image is too large but I do not want to open a full image editor.

Step 1: know where the image will be used

Do not compress blindly. First decide the use case.

A blog image, a product photo, a profile picture, and a print file do not need the same settings.

For web use, I usually care about:

• visual quality on screen;
• file size;
• image dimensions;
• browser support.

For print, I am more careful and usually keep a high-quality original.

Step 2: check the current size

Before changing anything, look at the original file size and dimensions.

Example:

File size: 5.8 MB
Dimensions: 4032 x 3024

That is much larger than many web pages need. If the image will be displayed at 800px wide, uploading a 4032px wide image is wasteful.

Step 3: resize before lowering quality too much

Resizing often gives the biggest win.

If a photo is 4000px wide but the page only shows it at 1200px wide, resize it to 1200px or 1600px first.

This usually keeps the image looking better than leaving the huge dimensions and crushing the quality setting too hard.

Step 4: choose the output format

Common choices:

• JPEG: good for photos, widely supported;
• PNG: good for sharp graphics or transparency, often larger for photos;
• WebP: good compression for web use, widely supported in modern browsers;
• AVIF: very efficient, but support and encoding can vary.

For normal photos on the web, I usually try WebP or JPEG.

Step 5: adjust quality slowly

Quality sliders are not universal, but the idea is the same: lower quality means smaller file, until the image starts looking bad.

I usually test in steps:

90 -> 80 -> 70

Then I compare the result. If the image has visible blocks, blurry edges, or ugly colour banding, the quality is too low.

Step 6: compare before and after

After compression, check:

• file size reduction;
• dimensions;
• visible sharpness;
• text readability if the image contains text;
• gradients and shadows;
• faces or product details.

A smaller file is not a win if the important part becomes unreadable.

Step 7: keep the original

My habit is simple:

original = archive
compressed copy = publish/share

If I need a different size later, I go back to the original instead of recompressing the already compressed copy again.

My image compression checklist

Before using a compressed image, I check:

1. Where will this image be used?
2. What dimensions are actually needed?
3. Can I resize before lowering quality?
4. Is JPEG, WebP, PNG, or AVIF the right format?
5. Does the important detail still look good?
6. Is the file size now reasonable?
7. Did I keep the original file?

Compression is not about making every file as small as possible. It is about making it small enough while still doing its job.