A few weeks ago, Flairs were sent to the client as HTML data (in one way or another). Now they are simpler to use—a single PNG is generated and sent to the client. This is a good improvement, except for one tiny detail: Flairs contain a lot of text and straight lines, and these elements aren't appropriate to store as a bitmapped image. Particularly text looks bad without the subpixel antialiasing appropriate for the output screen. In addition, whereas the old flairs looked good when you zoomed the web page, the new ones, being bitmapped images, do not scale at all. Hence, the flairs looked and worked much better before, but are easier to use now.
Now, I am not an expert on web design, but I think I have found a solution: generate SVG (vector) images instead of PNG (bitmap) images! These can be embedded on a web page like any PNG image:
<img src="http://meta.stackoverflow.com/users/flair/XXXXXX.svg" />
<img src="http://meta.stackoverflow.com/users/flair/XXXXXX.png" />
Hence, the simplicity is conserved. But SVG images are vector images, so text is sent as text, and rendered using the subpixel antialiasing appropriate at the client (and you can select and copy it as normal text). Also, being a vector image, it scales perfectly.
Of course I am aware that many browsers still doesn't support SVG images, but as far as I know, the latest versions of all major browsers do (or will very shortly (IE9)) support SVG. Another problem is that it might not be entirely trivial to embed the bitmap "Gravatar" in a SVG image, but to the best of my knowledge, it is possible (and not even too difficult).