# How I compress images without making them look terrible

A beginner-friendly guide to image compression, resizing, JPEG/WebP quality, dimensions, file size, and checking the result before publishing.

- Date: 2026-09-27
- URL: https://ilham.dev/posts/how-to-compress-images-without-making-them-look-bad/
- Markdown: https://ilham.dev/posts/how-to-compress-images-without-making-them-look-bad/index.md
- Tags: images, compression, web, tools
- Reading time: 3 min


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](/tools/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:

```text
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:

```text
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:

```text
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.