How Image Compression Works: Lossy vs Lossless Explained

A phone photo weighs 3 MB or more, yet the exam portal wants it under 50 kB and the mail server grumbles at heavy attachments. Image compression bridges that gap, and it comes in two families that behave very differently. Knowing how image compression works tells you which one to reach for.

Quick answer: compression stores the same picture in fewer bytes. Lossless methods (PNG, lossless WebP) only squeeze out redundancy, so every pixel decodes exactly as it went in; on a photo they roughly halve the file. Lossy methods (JPEG, lossy WebP, AVIF) also discard detail your eyes barely register, which is how a JPEG ends up around a tenth of the raw pixel data. Use lossy for photos, scans and form uploads, lossless for logos, screenshots and any master copy you will edit again.

What Is Image Compression?

A digital image is a grid of pixels, and a standard colour pixel needs three bytes, one each for red, green and blue: 24 bits per pixel before any compression. A 12-megapixel photo at 4000 × 3000 px therefore holds 36 MB of raw pixel data.

Neighbouring pixels in a sky or a wall are nearly identical, the same few colours repeat all over a logo, and human vision notices changes in brightness far more readily than changes in hue. An encoder turns those patterns into a shorter description; a decoder expands it back.

The HTTP Archive’s Web Almanac gives rules of thumb from its 2024 crawl: lossless compression brings a typical photo to about 12 bits per pixel (2:1), while classic lossy JPEG lands near 2.4 bits per pixel (roughly 10:1). The median JPEG served to mobile browsers used 2.0 bits per pixel, the median PNG 3.8, WebP 1.3 and AVIF 1.4. So our 36 MB example is about 3 MB as a JPEG and 18 MB as a PNG.

Lossy Compression Explained

A lossy encoder deliberately discards information it predicts you will not miss, then compresses what is left. The decoded picture is a close approximation, never a bit-exact copy, and nothing in the file can bring the discarded detail back.

How JPEG Uses Lossy Compression

JPEG, standardised as ITU-T T.81 in 1992, runs the picture through a short pipeline:

1. Separate brightness from colour. Red, green and blue become one luminance channel (Y) and two colour-difference channels (Cb and Cr).
2. Shrink the colour channels. Because the eye is less sensitive to colour detail, most encoders keep colour at a quarter of the luminance resolution (the 4:2:0 subsampling libjpeg uses by default).
3. Transform 8 × 8 blocks. A discrete cosine transform (DCT) turns each block of 64 pixels into 64 numbers: one for the block’s average and 63 for ever-finer patterns across it.
4. Quantise. Each number is divided by an entry from a quantisation table and rounded. Fine-detail entries get large divisors, so most of them round to zero. This rounding is where the loss happens.
5. Pack the result. The numbers are read in a zig-zag order that groups the zeros, then Huffman-coded so long runs of zeros cost almost nothing.

An editor’s quality slider scales that table. In libjpeg the scale runs from 0 to 100 with 75 as the default, and 50 to 95 is the useful band for photographs. Above about 95 the file grows quickly for gains almost nobody can see, and even quality 100 is not lossless, because the subsampling and rounding still happen. Push quality well below 50 and the 8 × 8 grid shows up as blocks, while sharp edges grow faint halos.

When to Use Lossy Compression

Choose lossy whenever the picture is a photograph and the destination cares about bytes:

• Photos for websites, social media and messaging apps
• Product shots for an online shop or marketplace listing
• Photo and signature files attached to application forms
• Scans of certificates and ID cards that must stay readable

Lossless Compression Explained

A lossless encoder removes only redundancy. Decoding rebuilds every pixel exactly, so re-saving never degrades the picture. The price is size: on a photograph lossless rarely beats 2:1.

How PNG Uses Lossless Compression

PNG, now in its third W3C edition (2025), works in two reversible stages. First, each row of pixels goes through a filter that predicts every byte from its neighbours to the left and above (the five filter types are None, Sub, Up, Average and Paeth) and stores only the difference. A smooth gradient becomes a row of tiny numbers; a flat area becomes a row of zeros.

Second, the filtered bytes go through DEFLATE, the algorithm inside ZIP. It finds byte sequences that already appeared within roughly the previous 32 kB and replaces them with short back-references. Photos resist this because sensor noise makes neighbouring pixels slightly different, so the predictions miss and exact repeats are rare.

When to Use Lossless Compression

Lossless is the right default when accuracy or repeated editing matters:

• Screenshots and interface captures with text, where JPEG fringes would blur the letters
• Logos, icons, charts and flat-colour illustrations, especially ones with transparency
• Master copies you will crop, retouch or re-export later, and scientific or medical images where every value counts

How Mb2KbSizer Handles Compression

Mb2KbSizer does all of this inside your browser, so you can compress images online without uploading anything. A background Web Worker decodes the file and re-encodes it with the browser’s built-in JPEG and WebP encoders. The loop for a 100 kB target:

1. You drop or paste an image of up to 60 MB (JPG, PNG, WebP, GIF, BMP, or HEIC where the browser can decode it) and type a target or tap a quick-size chip.
2. The worker decodes the picture into a bitmap, applying the camera’s EXIF orientation so the result comes out upright.
3. It runs a binary search over encoder quality, encoding a handful of times and narrowing up or down until it finds the highest quality that lands at or just under your target.
4. If that would push quality below roughly 45%, it stops squeezing quality and instead reduces the pixel dimensions in steps and searches again at high quality. A slightly smaller clean photo beats a full-size blocky one.
5. The result card shows both sizes in exact bytes, the saving, the output dimensions and the quality used, plus a before-and-after slider.
6. You save the file, named along the lines of photo-98kb-mb2kbsizer.jpg.

In Auto mode the output is a JPG for most inputs, while WebP input stays WebP. Forced PNG output is lossless, so only a reduction in dimensions can shrink it. Transparent areas become white in a JPG, because JPEG has no alpha channel. Rebuilding the file from pixels also drops EXIF data such as GPS location, a small privacy win. If the file is already under the target the tool says so and offers the original untouched; if the target is impossible at locked dimensions, it reports the smallest size it could reach.

The preset pages compress an image to 100 kB and compress a photo to 50 kB pre-fill the two most common targets.

When to Use Lossy vs Lossless

Decide by content first and destination second.

Situation	Pick	Why
Phone photo for a form, listing or web page	Lossy (JPG or WebP)	About 10:1 on photos versus 2:1 lossless; no visible loss at normal size
Screenshot with text, logo, icon or chart	Lossless (PNG or lossless WebP)	Flat colours compress well and text edges stay crisp
Scanned document that must be read	Lossy, generous target	Readability matters, pixel accuracy does not
File you will keep editing	Lossless master, lossy export	Each JPEG re-save runs the rounding step again
Image with a transparent background	Lossless, or lossy WebP with alpha	JPEG cannot store transparency

Each time a JPEG is edited and saved again, the encoder quantises values that were already rounded once, so small errors pile up and the picture slowly softens. Keep the camera original or a PNG as your master and export a fresh lossy copy for each use.

WebP and AVIF offer both modes. Google’s figures put lossy WebP 25 to 34% smaller than JPEG at matched quality and lossless WebP 26% smaller than PNG. Our JPEG vs PNG vs WebP comparison weighs the trade-offs format by format, and best image formats for web performance covers browser support.

Choosing the Right Compression Level

Most tools ask for a quality number; Mb2KbSizer asks for a size, because size is what portals and mail servers actually check. The two are linked through the pixel count: fewer pixels sharing the same kB budget means more bits, and more quality, for each one. What 100 kB buys from a 12-megapixel photo:

Output dimensions	Pixels	Typical JPEG (~2 bpp)	Bits per pixel at 100 kB	Likely look
4000 × 3000	12.0 M	~3 MB	0.07	Heavy blocking
2000 × 1500	3.0 M	~750 kB	0.27	Soft, visible artefacts
1200 × 900	1.08 M	~270 kB	0.74	Clean on a phone or form preview
800 × 600	0.48 M	~120 kB	1.67	Near-original at that size

That is why the tool resizes rather than crushing quality: at 1200 × 900 px a 100 kB budget works out to 0.74 bits per pixel, whereas at full resolution it would be a hopeless 0.07. The same arithmetic makes a 200 × 230 px passport-style image forgiving: it has only 46,000 pixels, so even a 20 kB limit leaves about 3.5 bits per pixel, more than the median photo on the web receives.

Targets that work in practice:

• Photo or signature for an online application: 20 to 100 kB; the form’s instructions give the exact figure and often the pixel dimensions.
• Photos on a web page: 100 to 200 kB each, resized to the width they will be shown at.
• Scanned pages saved as images: 100 to 300 kB, checking that the smallest print stays legible.

The judgement call is always the same: the face must stay recognisable and the text readable; anything beyond that is bytes spent for no benefit. If the result looks worse than expected, raise the target a notch or let the tool reduce the dimensions; reduce image size without losing quality explains where quality actually goes.