Curated by Carsonified

Learn with Treehouse

Accessibility, CSS3, Design, Django, HTML & CSS, HTML5, JavaScript, jQuery, NoSQL, PHP, Responsive Web Design, Ruby, Ruby on Rails, Tools, UX, Version Control, WordPress, iOS and more

Article 7

Super simple Twitter avatars

By @keirwhitaker

12 February 2010 | Category: Design

tweet images logo

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.

Follow @thinkvitamin on Twitter Please check out Treehouse

Other Posts You Might Find Interesting

  • Sorry - No Related Posts Found

Comments

  • http://bllsht.net Bastien

    I used it on my latest twitter mashup. It’s just awesome (except sometimes their caching system is acting like weird). A real gravatar for twitter!

  • http://abstraktion.co.uk Chris Garrett

    I’d be cautious of using this in large projects as, should tweetimag.es ever go down, your users will be avatarless… Would much rather write the little extra logic to use the Twitter API directly, not that their service is exactly reliable.

  • http://stu.mp Joe Stump

    Good thing I got our API limit increased recently! One thing to note is that the entire service is backed by Media Temple’s top notch CDN service so images are cached throughout a large network of POPs (Point Of Presence) throughout the world. This means that your users in Japan hit an Asian POP for their avatars, while our friends in the UK hit a European POP.

  • http://alex.mullr.net/blog/ Alex Muller

    It’s great, but I think you need to change “boagworld_o” to “BoagWorld_o” – tweetimag.es seems to be case sensitive!

  • Keir Whitaker

    Hey Joe, thanks for stopping by. Good to know about the POPs, guess you are keeping Chris busy with that one :)

  • http://day516.com Oisin Prendiville

    This service is also available through http://twivatar.org/ built by Remy Sharp. I’ve been using it for a few months on http://twequency.com and http://tweet1.com — works a treat.

  • http://www.focusphotos.com Andy Johnstone

    Like this. Good.

    Would really like to know what the call would be direct to Twitter though?

    Andy

Badges for Treehouse

Treehouse

Learn iOS, Rails, CSS3, jQuery, Node.js, HTML5, UX and more in less than 8 minutes per day. New videos added regularly. Sign up today and get a free Web Design Toolkit.

Ads Via The Deck

Think Vitamin Radio
Episode #34: Amazon Fire and Responsive Roundtable

Check out our bi-weekly radio show. Covering the hot topics on the web.

Audio clip: Adobe Flash Player (version 9 or above) is required to play this audio clip. Download the latest version here. You also need to have JavaScript enabled in your browser.

Download Podcast as mp3

Advisory Board

The Think Vitamin Advisory Board in place make sure that you receive the best content possible.