I’ve been updating my icon/profile picture at the various social sites and web services i use. It’s a remix of my old icon with more graphic look and transparency. That means PNG. To my surprise, some sites support PNG alpha transparency. Others don’t. And one even does some really weird things to images—the one site i wouldn’t expect.

Nowadays most sites will let you upload JPG, GIF, and PNG in any shape and usually with a generous file size limit. Then they’ll convert it to their own preferred format and let you crop it if you want (some require a square-shaped image). Very easy.

Here’s what i found out.

Twitter does respect PNG transparency. At least two resized versions (73px and 24px square) are saved on Amazon S3. You can easily change your Twitter picture, but old pictures are not saved to use again. I tried uploading a few different sizes to see if the down-sizing would make it look any worse; there wasn’t any noticeable difference.

Facebook converts uploaded images to JPG format, so does not support transparency. They can be any shape, and are automatically sized down to 500px 604px 720px on the largest side. The transparent area of my image was cleanly converted to white—which looks great in my case, but might not for others. Facebook of course keeps your images in albums and you can make any of your photos your profile picture.

Gravatar, being the only of these services whose sole purpose is to serve icons, does just about everything you’d want. It maintains transparent areas in PNGs, provides a tool to crop to their square shape (80px and 32px), and lets you store more than one image. Gravatar serves icons for WordPress.com, many WordPress-powered sites, Disqus, and probably a bunch of other sites and services.
Update 20080903: Gravatar should now work with a few more image types.

I was surprised that MySpace accepted my PNG image and kept it transparent. MySpace uses a 90px-wide version of your photo for icons throughout the site. MySpace, like Facebook, keeps albums of your images and you can use any of them as your default picture.

And now Flickr. You’d think that Flickr the photo site would have buddy icons down. But they practically fail. The problem i had for my new icon is they use JPGs for buddy icons, so no transparent PNGs. In addition, if you do try to use a PNG with alpha transparency, it garbles the transparent area instead of making it solid. Another issue with their icon uploader is that it “intelligently” crops or stretches images to fit the 48px square. Images with large solid areas are cropped off and the remaining image is stretched out to fill the square. I tried uploading a pre-sized 48px square black on white version of my icon, and Flickr cropped and stretched it instead of using it as i designed it.

I haven’t looked into the Google picture options in much detail, but it looks like they get converted to JPGs, and are reduced to 96px. If you upload via Gmail web interface you are forced to crop to a square shape. But using the Google Talk chat client i’ve uploaded non-square images. My PNG icon was converted to a JPG with a white background.

Update 20080901: The Get Satisfaction customer support site accepts and maintains transparency in PNGs. When uploading, the longer sides of an image are automatically cropped to a square shape and saved as 100px and 30px copies.

Notes

This was just a quick sampling of some of the services i use more often; i may update as i encounter more.

I created this new version to be square because a majority of sites expect square images. I was tired of seeing my previous icon cropped down or stretched, or having to manually add white bars top and bottom to make it fill a square.

Obviously, a black icon with a transparent background won’t really be visible on a page with a black or dark background, but i like how it looks on most other pages, so i’m willing to accept that. Internet Explorer 6 does not properly display transparent areas of PNG images, but there’s not really any reason to still be using that browser.

The one thing that consistently varies is the size of the images that sites use. For some it is no issue, but with some designs, especially at smaller sizes, it can drastically change the appearance of an icon. For example, at the full 256 pixels, i think my icon looks great. But once it’s been shrunk down by Flickr to 48 pixels, and then again to 24px by the browser, the icon’s features start to break down.