Twitter's JPEG Compression

If, like me, you follow a bunch of cool artists on Twitter so that you can look at cool art for free (protip) you'll inevetably run into the recurring conversation about how bad Twitter's image compression is and how it's ruining images.

That begs the question ...

How bad is Twitter's JPEG compression?

Here's a fun fact about JPEG - you're allowed to define your own quantization matrix when you save the file. There's a recommended one, but you can override it.

If you don't know much about JPEG compression, you basically just need to know that this means that when you write software that saves JPEG images you could tweak a lot of settings under the hood to tune the compression to your image.

And that means that not all JPEG compressors are equal.

Adobe puts a lot of effort into tweaking their JPEG settings using a lot of real-world testing and Photoshop's "Save For Web" feature does an incredibly good job.

So let's stack them up - Twitter vs. Photoshop.

Test 1: Fall Foliage

Left: file from twitter. Right: 50% quality from Photoshop. The differences here are subtle but they let us know what to look for throughout this test. Twitter generates more high-frequency noise (notice the harsh artifacts inside this person's silhouette) but the leaves appear softer in the Photoshop image.

• Fall Foliage PNG
• Fall Foliage Compressed by Twitter
• Fall Foliage Compressed by Photoshop

Test 2: Alfa Romeo

Left: file from twitter. Right: 50% quality from Photoshop. Again, we see that Twitter generates more high-frequency noise, and Photoshop is a little softer overall. It's clear that both have big shortcomings when it comes to strong reds.

• Alfa Romeo PNG
• Alfa Romeo Compressed by Twitter
• Alfa Romeo Compressed by Photoshop

Test 3: Dragalia Lost

Left: file from twitter. Right: 50% quality from Photoshop. Here the noise is most evident. High frequency details (like outlines) create high frequency noise within the same 8x8 block. Photoshop again has less noise, but the outlines are also slightly softer.

This is one area where Twitter falls flat - it appears that their compressor is tuned more toward creating the illusion of sharpness in photos than it is for creating clean lines in illustration.

• Dragalia Lost PNG
• Dragalia Lost Compressed by Twitter
• Dragalia Lost Compressed by Photoshop

File Sizes

One misleading part of this test is that while 50% progressive Save-for-Web is a pretty standard way to compress from Photoshop, it produces slightly larger files than Twitter.

I also ran tests to see what quality level I would have to use in Photoshop to match the file sizes I got from Twitter.

Fall Foliage

• Twitter Filesize: 277 KB
• 50% JPEG Filesize: 345 KB
• Quality to Match Filesizes: 40%

Alfa Romeo

• Twitter Filesize: 119 KB
• 50% JPEG Filesize: 138 KB
• Quality to Match Filesizes: 44%

Dragalia Lost

• Twitter Filesize: 121 KB
• 50% JPEG Filesize: 141 KB
• Quality to Match Filesizes: 42%

Conclusions

On the whole, I think it's reasonable to conclude, though, that Twitter's JPEG compression isn't that bad compared to other JPEG compressors. Without dumping a lot of bandwidth and storage into the problem there isn't much farther they can go with JPEG.

Which is part of the reason I'm always going on about ditching DCT-based JPEG compression for newer technologies.

Of course, Twitter is a huge company with massive resources. It seems a little silly that they're shaving kilobytes off images by using quality settings well below what most websites would deem "acceptable."