If you're seeing this message, it means we're having trouble loading external resources on our website.

If you're behind a web filter, please make sure that the domains *.kastatic.org and *.kasandbox.org are unblocked.

Main content

Lossy compression

AP.CSP:
DAT‑1 (EU)
,
DAT‑1.D (LO)
,
DAT‑1.D.5 (EK)
,
DAT‑1.D.6 (EK)
,
DAT‑1.D.7 (EK)
,
DAT‑1.D.8 (EK)
Lossy compression algorithms are techniques that reduce file size by discarding the less important information.
Nobody likes losing information, but some types of files are so large that there's just not enough space to keep all the original data, plus we didn't need all that data in the first place. That's often the case with photos, videos, and audio recordings; files that try to capture the beautiful complexity of the world we live in.
Computers can capture an incredible amount of detail in a photo—but how much of that detail can humans actually perceive? As it turns out, there's a lot of detail that we can remove. Lossy compression algorithms are all about figuring out clever ways to remove detail without humans noticing (too much).
For example, here's a photo of a cat in a hat:
Photo of a grey cat with green eyes sitting in a blue hat on a gray chair
Image source: admiller, Flickr
Here's that same photo, but compressed to half the size:
Can you tell the difference? At a quick glance, I can't— and even if I could with more effort, it'd still be worth saving half the disk space.
Let's explore some of the clever ways that lossy compression algorithms remove detail to reduce file size.

Images: Keep the brightness, average the color

The human eye is better at perceiving differences in brightness than differences in color. A compression algorithm can take advantage of that fact by keeping the brightness while reducing the amount of color information, a process known as chroma subsampling.
Let's try it on the photo of the cat in the hat. The first step is to separate the brightness information from the chroma (color).
Here's the brightness-only version of the photo:
Here's the chroma-only version:
This photo is interesting because the cat and the chair are both fairly colorless- the blue of the hat is what stands out in the chroma version. (Perhaps we should all own black and white cats, to save disk space? Hmm...)
Let's zoom into an 8x2 block of chroma from the left eye:
Each of those pixels are slightly different chroma values, so there are 16 values total. We can average each 2x2 block and set its color to the average, so that there are only 4 values total:
The result looks quite similar to the original, but it has a quarter of the original color information. If we apply that to the entire image, we can save a lot of space without affecting perception much.
Chroma subsampling is a process used in many compression algorithms that deal with images, including the popular file formats JPEG and MPEG.
Those algorithms also use a process called discrete cosine transform (DCT) to simplify the details in the brightness layer. If you'd like to learn more, here's a nice walk-through.

Audio: Drop the inaudible sounds

The human ear has limitations to what it can hear. Audio compression algorithms can analyze an audio file and discard the sounds that are outside our hearing capacity, a process known as perceptual audio coding.
One interesting limitation of our ears is known as temporal masking. That's when a sudden sound can mask (hide) other sounds for a period after it occurs—and even a bit before!
For example, imagine a song with a loud drum beat. The beat masks sounds for about 20 milliseconds before it happens, and for up to 200 milliseconds after it happens. This graph illustrates the masking effect:
A graph with time in milliseconds on the x axis, and loudness in decibels on the y axis. A drum beat happens from 140-200ms. The pre-masking effect is a tight curve leading up to the beat, from 100-140ms. The post-masking effect is a more gradual curve, from 200-350ms.
The grey striped areas show the pre-masking and post-masking periods.
The computer sees those hidden sounds in the recorded audio file, but our ears can't hear them, so audio compression algorithms can safely discard that information or represent it with fewer bits.
Compression algorithms can also use other limitations of our natural auditory process, like the high frequency limit and simultaneous masking. If you'd like to learn more, you can research the fascinating field of psychoacoustics.

Compression quality

When we use a lossless compression algorithms, we can always reconstruct 100% of the original data. With lossy compression algorithms, we're losing some % of the original data; maybe 5%, maybe 10%, maybe 70%. How much do we lose? We can decide that based on our use case for the data.
Consider the earlier photo of the cat in the hat. If the plan is to put that photo in a presentation about cat fashion and project it on a large screen, we probably want to keep as much detail as possible. In that case, we can either use a lossless compression algorithm (like PNG) or we can use a lossy compression algorithm (like JPEG) and specify a high quality (like 100%). Photo editing applications often give you those options.
Screenshot of File settings from Export menu for Adobe Photoshop. For "Format" option, "JPG" is selected. For "Quality" option, slider is set to "100%".
At 100% quality, the 400x300 photo takes up 169 KB of space:
Photo of a gray cat with green eyes sitting in a blue hat on a gray couch.
What if we want to use that photo in a website, and our target users for the website are in another country on low-bandwidth connections? The smaller the file, the faster the download. We want them to see the photo, but for this use case, high quality isn't as important as download speed. We'll definitely want to use a lossy compression algorithm, and we can specify a lower quality when exporting. The algorithm can tweak its internal dials to simplify details even more.
Screenshot of File settings from Export menu for Adobe Photoshop. For "Format" option, "JPG" is selected. For "Quality" option, slider is set to "60%".
At 60% quality, the photo takes up 48 KB:
Photo of a gray cat with green eyes sitting in a blue hat on a gray couch.
That still looks pretty good - definitely usable for a low-bandwidth website. How low can we go? Here's the photo at 1% quality:
Photo of a gray cat with green eyes sitting in a blue hat on a gray couch.
It's definitely not perfect—the green of the eyes seems to be smearing into the fur, and there are artifacts where the hat meets the chair. But it's also only 12 KB, less than a tenth of the original size. It's impressive how much information we can lose but still convey so much detail.
We can also specify quality for lossy compression algorithms that transform audio and video files. You've probably seen low quality, highly compressed videos around the Web; videos are the most likely to get compressed since they're so large to begin with.
Whenever we use lossy compression, we're always making a trade-off between quality and size, and it's up to us to find the settings that work best for our use case.

🙋🏽🙋🏻‍♀️🙋🏿‍♂️Do you have any questions about this topic? We'd love to answer— just ask in the questions area below!

Want to join the conversation?

  • starky tree style avatar for user Maxim
    Is the brightness getting compressed as well in the later photos? Because it looks far lower quality than the black and white version.
    (11 votes)
    Default Khan Academy avatar avatar for user
  • leaf green style avatar for user Zain
    In the image-compression section, Pamela showed brightness-only version of the cat picture which what she meant is colorless, and right after that she added: "This photo is interesting because the cat and the chair are both fairly colorless". My question is that, aren't black and white also colors? Wouldn't computer perceive them as colors? If the picture was colorless, we couldn't see it. Right?
    (4 votes)
    Default Khan Academy avatar avatar for user
  • leafers ultimate style avatar for user MIHINI
    How does the drum mask sounds before it even happens?
    (2 votes)
    Default Khan Academy avatar avatar for user
    • aqualine ultimate style avatar for user Martin
      There is a (really tiny) gap between the sound being received by your ears and your brain processing the sound so that you become aware of it, so your perception of "now" is always a tiny bit after it actually happens.
      During that short period of time masking effects can occur.
      (7 votes)
  • aqualine ultimate style avatar for user Edward He
    Does anybody know the percentage of lossy compression YouTube uses for videos uploaded on their platform?
    (4 votes)
    Default Khan Academy avatar avatar for user
  • blobby green style avatar for user Aidan Papula is kewl
    What do you mean "artifacts where the hat meets the chair?"
    (3 votes)
    Default Khan Academy avatar avatar for user
    • aqualine ultimate style avatar for user Francisco M
      Answered by Martin - "Look closely at the edges where the blue hat meets the grey chair. You should be able to spot some slight blurring where the color of the one bleeds into the other.
      Artifacts in this case means something like distortion (the picture is somehow not quite "right")".
      (1 vote)
  • piceratops seed style avatar for user Lizarazo Sarai
    So for those low quality videos on the internet thats just lossy compression?
    (2 votes)
    Default Khan Academy avatar avatar for user
  • winston baby style avatar for user jwchoi22@kis.ac
    Isn't Lossless compression the same as Lossy compression with 100% image quality? (since they preserve all the details with the ability to reconstruct every single detail?)
    (0 votes)
    Default Khan Academy avatar avatar for user
    • aqualine ultimate style avatar for user Martin
      The definition of lossy compression is compression that does not decompress back to 100% original quality.

      I mean technically you're not wrong, but lossy compression with 100% image quality wouldn't make much sense, because you use the word lossy to communicate something different.
      (5 votes)
  • blobby green style avatar for user a3232847284
    Quote:
    Each of those pixels are slightly different chroma values, so there are 16 values total. We can average each 2x2 block and set its color to the average, so that there are only 4 values total:

    My Questions:
    Why did 16 values become 4 values?
    (1 vote)
    Default Khan Academy avatar avatar for user
    • blobby green style avatar for user Elsie Clark
      In the example, there are 16 pixels (shown as squares), in a 2x8 grid. It's pretty hard to see some of the different shades because some are very similar, but each square is a slightly different shade of green, so there are 16 colour values (shades of green, in this case). To achieve the chroma subsampling, the colours in the first 2x2 grid of squares (a total of 4 colour values, one in each of 4 squares) is averaged. So now, the first 2x2 grid has the same colour value in all 4 squares -- instead of 4 colour values, that grid now has 1 colour value. The same is done with the next 4 squares, then the next, then the next. In the end, each 2x2 grid has only one colour value. Since there are four 2x2 grids, each now with one only colour value, that's four values total.
      (1 vote)
  • male robot donald style avatar for user Arjun 6A
    For the first two pics I don’t really see a difference.
    (1 vote)
    Default Khan Academy avatar avatar for user
  • male robot johnny style avatar for user Aditya Chauhan
    PNG files use lossless compression i.e. no data is lost and jpg files use lossy compression i.e. data is lost

    Then that makes no sense of files being converted from jpg to png
    but I see sites or apps which do this

    please comment answer!
    (1 vote)
    Default Khan Academy avatar avatar for user