March 28th, 2013 — Wordman
If you’ve looked at a social network the last few days, you’ve probably seen the “red equals sign” logo show up, showing support of the marriage equality, currently being debated in the U.S. Supreme Court. While I intended to stay silent about this campaign, now that it has taken off, I can’t hold it in: this red logo campaign is driving me a bit nuts.
Not for any political reason, of course. It’s just… the compression artifacts… they are the visual equivalent of nails on a chalkboard.
The red equals logo uses simple, continuous blocks of pixels, in only two colors. Unfortunately, the most popular image compression technology in the world, JPEG, which was built to compress photographs, turns out to be hideously awful at compressing simple blocks of same-color pixels. It winds up creating weird bands of unintended colors around the edges of such blocks. For example, here is a version of the logo (3,183 bytes), compressed with really low quality JPEG settings (to exaggerate the effect).
The artifacts become less noticeable, but still present (especially if you are overly sensitive to them, like me), using a high quality JPEG compression (generating a file that is almost twice are large: 5,517 bytes):
It gets even worse. Because JPEG is lossy, these compression artifacts get progressively worse as you re-compress the same image repeatedly. So, for example, if you found a JPEG of the red equals on the net, then uploaded to to, say, Facebook, chances are that Facebook recompressed it again, making the artifacts worse.
A different kind of compression—portable network graphics or PNG—is, in contrast, is extremely good at compressing large blocks of same-colored pixels, particularly in a limited color palette. It shows no compression artifacts and, since it is lossless, you can re-compress it over and over with no quality degradation. And, as a bonus, this file is only 1,590 bytes:
In support of the red equals sign, feel free to link directly to the PNG version above (http://asteroid.divnull.com/images/equality.png) in blog posts, avatar icons and so on. Or, copy and distribute at will. Hopefully my server will keep up.