Not long ago we were in the process of overhauling a social networking brand when we realized that we didn't have a reliable list of current avatar profile pixels dimensions. We were jumping from site to site uploading the same image repeatedly with little regard to the final output. We began to notice an odd trend, in almost every case our uploaded image was reduced to a wide variety of somewhat random, and often ridiculously small, sizes. Google Plus alone alters the original image to nine sizes. In case you missed that, that's nine sizes! While Foursquare takes home the gold for the smallest, coming in at 15x15 pixels.

Keep in mind that social networking sites are in a state of continuous flux. Facebook, for example, has changed their profile image dimensions as recently as last April (2012) leaving thousands of brands with blurry images. You might want to check on yours, I'll wait. So just what are the latest changes across the social networking spectrum? That's what we set out to determine.

We started by visiting Gravatar and looked for the largest possible avatar. Gravatar is a short for "Globally Recognized Avatar" if you haven't heard of them the concept behind the site is that your Gravatar image will follow you "from site to site appearing beside your name when you do things like comment or post on a blog. Avatars help identify your posts on blogs and web forums ..."

It's unfortunate Gravatar can't just be the gatekeepers of all things avatar because it would be a simple matter of updating your profile pic in one location and all sites would immediately update. Alas, while this was a good start we still needed to ensure a strong brand recognition across the entire spectrum of social media including those sites that have a profile page but are not necessarily a blog or forum. So where does that get us, searching the internet for hours trying to locate a reliable source with the true dimensions of each social network's avatar or profile preferences? The short answer is yes and sadly not all of them were covering the full range but often they offered up a file size limit instead. While this is nice to know it didn't help much with our design.

The good news is that we did manage to gather the majority of the avatar and profile image dimensions by logging into each site one at a time and simply looking around at how our images were being used. With this information behind us, we placed them into a single Photoshop .psd file and decided to offer it to those who might also be in this situation as well.

I bet you're wondering how to use this file? It's really quite easy just open the file in Photoshop, select the social networking site you're interested in, double click on the largest smart object avatar layer, add your image and save. All avatars appearing under the same umbrella as the original avatar will update. This should give you a good idea of how you will be represented throughout that particular site.

But what about that retina display? Each of these social media websites must handle this on their own. Assuming they have prepared for a display resolution of this size they should be pulling in a larger version of your avatar. If you were to upload a 500x;500 profile image to LinkedIn, for example, they save it at a variety of sizes to be used throughout the site. If a retina display is detected they should (doesn't mean they will) be calling for a larger version. Just keep in mind once an image has been uploaded it's safe to assume that this is out of your control.

Download