The following article is co-written by Jordan and Tamafry.

Intro to Compression

Have you ever looked at a picture on your computer and thought, "Wow, this looks pretty good!" until you zoom in and you realize it's a blurry, chunky mess?

Something like this?

JPEG Image (Figure A)

JPEG Image (Figure A)

As Hank Hill would say, "Do I look like I know what a JPEG is?"

Yeah. We've all had something like this happen to us. The sudden joy and then terror of realizing a file looks ugly when you zoom in.

This is called compression. Compression is — as the name implies — literally crushing or compressing something to a smaller size. Like compressed air or compression stockings, a compressed file is much smaller than its original source file.

Images can be compressed, audio can be compressed, and even text can be compressed!

But you know that. What I'm here to explain to you is what compression is and how you can effectively utilize it.

"What?" I can hear you ask. "If compression looks like hot garbage, why would I want to use it in my visual novel?"

That's because this is an example of poor compression. Below I will post a screenshot from a zoomed-in PNG version of this same image.

PNG (Figure B)

PNG (Figure B)

Try to guess what image format this is! (Figure C)

Try to guess what image format this is! (Figure C)

See how much clearer it looks? The checkerboard pattern in the back of the character denotes transparency as well, but we'll get to that later.

Right now, we want to focus on the quality difference.

By this point, you might believe JPEG files (like Figure A) look disgusting, and PNG files are the best way to save images.

Except... Figure C is actually a JPEG, and it looks just as good as the Figure B (the PNG file)!

The only thing that's discernably different to the human eye between Figures B and C is the background. Figure C doesn't have transparency and thus the background is white.

The reason Figures A and and C look so different despite being JPEG files is that Figure A was exported with a quality setting of 52!

The main point I was trying to explain is to show visually showing what image compression looks like. At its worst, compression is distracting and ugly, but at its best, you will never notice it*.*

Untitled

Lossy vs. Lossless - What's the Difference, and Why Should I Care?

"Lossy", in terms of computing and file compression, refers to any computer file which discards "unnecessary data". Personally, I would go further than that and say that it removes some data for the benefit of smaller file sizes.

"Lossless", of course, is the opposite. Lossless files do not lose ANY data from their source material. For instance, you could theoretically take a screenshot of a PNG file as a PNG and export it, without losing any data.

In practice, it tends to be more complicated than that, but let's just take note of the two basic definitions:

Lossy loses part of its data for a smaller file.

A lossless file retains ALL of the source material's data, at the expense of a much larger file.