Lossy vs lossless: why a big PNG becomes a small JPEG

Lossy vs lossless compression comes down to one question: does the file open exactly as it was saved? Lossless compression makes a file smaller without changing a single pixel. Lossy compression makes it far smaller by leaving out detail your eye is unlikely to miss, and that detail never comes back. PNG is lossless; JPEG is lossy.

That is why a photo shrinks so much as a JPEG. We saved a 2400 × 1600 photograph, a NASA picture of dune restoration at Kennedy Space Center, as a PNG of 6.2 MB. When we converted the PNG to JPG at Balanced, it came out at 622 KB, a tenth of the size, and side by side at full size we could not see a difference. A screenshot went the other way: 114 KB as a PNG, 122 KB as a JPEG.

• Lossless (PNG, GIF, lossless WebP): every pixel comes back exactly.
• Lossy (JPEG, lossy WebP): far smaller photos, paid for with detail that is gone for good.
• Photos suit lossy compression. Screenshots, text and logos suit lossless, or a PNG with fewer colours.

What is the difference between lossy and lossless compression?

Lossless compression is like packing a suitcase more neatly: everything that went in comes out. It finds patterns that repeat, such as a long row of white pixels, and writes them down once. The W3C PNG specification calls PNG a format for "the lossless, portable, well-compressed storage" of images, and one of its design goals is that "filtering and compression should preserve all information".

Lossy compression is like leaving some things at home. It removes detail first, then packs what is left. The JPEG committee describes its best-known format as a lossy one, and what it removes is chosen to be what you are least likely to notice. But it is gone: no converter can bring it back.

We checked both on our screenshot, 2560 × 1600 pixels of a settings page. A PNG compressor set to Lossless took it from 114 KB to 86 KB, and when we compared the two files pixel by pixel, not one of the 4,096,000 pixels had changed. Saved as a JPEG at quality 75, it came to 70 KB, and 2.9% of its pixels had changed, almost all of them around letters, buttons and lines.

Lossy compression also adds up. We saved that JPEG again at the same quality, five times in a row, and each save moved it a little further from the original. After the fifth, 3.3% of the pixels differed, and the worst of them was half as far off again as after the first save. A lossless file can be opened and saved as often as you like, and moved between lossless formats too: when you convert GIF to PNG, the PNG matches a still GIF pixel for pixel.

A still from a video is the same story. Almost every video is stored with lossy compression, so MP4 to PNG adds no loss of its own but cannot be sharper than the video was. MP4 to JPG makes smaller files that usually look just like the video did.

Which image formats are lossy, and which are lossless?

Most image formats are one or the other; WebP and TIFF can be either, depending on how the file was saved:

Which of the two to send depends on what is in the picture, and JPEG vs PNG answers that.

When you convert PNG to WebP on Whatafile, you get the lossy kind at every quality setting: see-through areas stay see-through, but some fine detail is gone for good.

Three things JPEG throws away

This is how JPEG compression works. An encoder makes a photo small in three steps, and each one removes something.

First, colour resolution. As Google's guide to the JPEG format puts it, "our eyes are more sensitive to differences in brightness than differences in hue". So JPEG splits the picture into brightness and colour, and can store the colour at a lower resolution (chroma subsampling). Every JPEG we made for this guide, at every quality and from both of our tools, stored colour at half the width and half the height of the picture: a quarter of the detail.

Second, fine detail. The Library of Congress format description explains that lossy JPEG works on blocks of 8 by 8 pixels. Each block is described as a mix of patterns, from smooth shading to fine texture (the discrete cosine transform, DCT). The finest patterns are the ones you are least likely to notice, so they are simplified first.

Third, precision. What is left is rounded off (quantisation): coarsely for the fine patterns and gently for the smooth ones. This is the step a quality setting controls. Our photo, at the same size in pixels, came to 2.7 MB at quality 100 and 410 KB at quality 75.

Where lossy compression falls apart

Hard edges are made of exactly the fine detail JPEG simplifies, which is why text in a JPEG grows a faint halo. Zoomed in on our screenshot, the letters of the JPEG had specks of grey around them that the PNG did not, and at quality 50 there were more. In a photo the specks hide in the grain and texture; on the plain white around a letter, there is nowhere for them to hide.

Compression is not magic. It is a well-informed guess about what you were not going to look at.

The halo is not the only cost. A screenshot is mostly flat colour, which lossless compression already packs well, so the PNG vs JPG file size gap is small and can even flip. PNG to JPG at Balanced made our screenshot bigger: 122 KB from 114 KB. Keep screenshots, diagrams and anything full of small text as PNG.

Which JPEG quality setting should you use?

For photos on a screen, start at the default, Balanced: quality 80 in PNG to JPG and 75 in Compress JPG. Go higher for a photo you will print or edit again. Here is what each setting in Compress JPG made of our two test pictures:

Quality 100 is not lossless: it still changed some of the screenshot's pixels, kept only a quarter of the colour detail, and made the screenshot bigger than its PNG. Going from 100 down to 90 cut the photo by more than two thirds. The same number also gives different sizes in different tools, because each has its own JPEG encoder: PNG to JPG uses your browser's, and its Balanced (quality 80) gave the photo 622 KB.

For a screenshot, a lossy PNG beats any JPEG. With Fewer colours at its starting point of 128, Compress PNG made ours 42 KB, smaller than every JPEG in the table. It changed 1.1% of the pixels, none by more than 8 on the 0 to 255 scale of each colour, and the letters stayed crisp. On the photo the same setting gave 1.1 MB, more than its JPEG at quality 90, which is why photos belong in JPEG.

When a form sets a limit in KB, there is no need to guess a quality: compress the image to a target size and the tool looks for the setting that gets under it.

Lossy and lossless questions