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" />
instead of
<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).
I suggest that you start to support both PNG and SVG flairs. This way, webmasters may choose to support old browers at the cost of quality, or they may not. They may even check the browser name and version (either server-side or using JavaScript) and choose SVG if possible, and use PNG only as fallback for old browsers.
altattribute of theimgelement. I did this for readability, but wouldn't do that on a real web page.