If you use Twitter avatars in your web site or app then you need to check out tweetimag.es. It’s a great free service courtesy of Joe Stump that allows you to reference any Twitter users avatar with a uniform URL.
Why is this important? If you have ever viewed the URL of your own avatar you will notice that it’s a direct link to a file hosted on Amazon S3 that includes the original file name. Here’s mine by way of example:
http://a1.twimg.com/profile_images/45645532/lime_half_bigger.jpg
If I change my avatar to a new file a brand new URL for the image will be created. Any reference in your app to the original avatar (most likely accessed via the API) will now result in a broken image. Of course you can code around this but you shouldn’t have to.
Using tweetimag.es is super simple. All you have to do to reference a users avatar in your application is use the following URL pattern:
<img src="http://img.tweetimag.es/i/{{username}}_{{size}}" alt="" />
The service gives you access to four sizes of avatar:
- m (24×24)
- n (48×48)
- b (73×73)
- o (original size, varies)
In order to grab my own avatar image 48 x 48 pixels I would do the following:
<img src="http://img.tweetimag.es/i/keirwhitaker_n" alt="keirwhitaker" />
We used this approach in our new Future of Web Design site and it works really well. Go check it out.